Lexical Typography

Über

payload-lexical-typography erweitert den in Payload integrierten Lexical-Editor (@payloadcms/richtext-lexical) um fünf eigenständige Typografie-Features, die über createServerFeature implementiert sind: TextColorFeature, TextSizeFeature, TextLetterSpacingFeature, TextLineHeightFeature und TextFontFamilyFeature. Jedes Feature registriert sich regulär über lexicalEditor({ features }) und erzeugt einen eigenen Dropdown in der Editor-Symbolleiste. Alle Features arbeiten mit Preset-Listen und einem optionalen Freitext-Eingabefeld. TextColorFeature nimmt ein colors-Array aus Strings oder {value,label}-Paaren entgegen. Der colorPicker kann per Toggle ein- oder ausgeschaltet werden, listView wechselt zwischen Grid- und Listenansicht. Die UI für die Farbauswahl nutzt react-colorful. Die Features für Schriftgröße, Zeichenabstand und Zeilenhöhe teilen sich die Konfigurationsoptionen presets (mit Labels), method ("replace" oder "combine"), scroll und einen Toggle für das Eingabefeld. method bestimmt, ob eigene Werte die Defaults überschreiben oder ergänzen. TextFontFamilyFeature erwartet fontFamilies als Presets. Web Fonts und @font-face-Regeln müssen separat im Projekt geladen werden. Für die Ausgabe außerhalb des Editors werden Konverter mitgeliefert. Ab Version 0.1.0 liegen TypographyJSXConverters und TypographyHTMLConverters im /converters-Submodul, nicht unter /client. Sie müssen in bestehende Converter-Funktionen eingefügt werden, damit die typografischen Formatierungen im gerenderten Markup erhalten bleiben. Die Peer-Dependencies setzen auf @payloadcms/richtext-lexical und @payloadcms/ui in Version 3.43 sowie React 19. Lizenz ist MIT, Autor ist Adrian Maj.

Paketinformationen

Paketname

payload-lexical-typography

Neueste Version

0.5.2

Entpackte Größe

458 kB

Lizenz

MIT

Wöchentliche Downloads

1907

Zuletzt veröffentlicht

4. Nov. 2025