Code Block Feature

Über

Dieses Lexical-Feature für Payload CMS bindet `@lexical/code` in den Rich-Text-Editor ein. Es registriert die Knoten `CodeNode` und `CodeHighlightNode`, fügt dem Slash-Menü einen Eintrag für Code-Blöcke hinzu, der die aktuelle Auswahl in einen Code-Knoten umwandelt, und aktiviert über `registerCodeHighlighting` die Syntaxhervorhebung während der Eingabe. Die schwebende Werkzeugleiste erscheint, wenn der Cursor einen Code-Knoten betritt. Sie enthält ein Dropdown zur Auswahl der Programmiersprache und einen Button, der den Text des Knotens in die Zwischenablage kopiert. Die Positionierung der Leiste wird anhand der Bounding-Rect des Anker-Elements berechnet und über einen debounced Mouse-Move-Listener aktualisiert, sodass sie dem aktiven Block folgt, ohne bei jeder Pixelbewegung neu zu rendern. Die Konfiguration beschränkt sich auf einen optionalen `languages`-Callback. Er erhält die Standard-Paare `[label, value]` und gibt die Liste zurück, die im Dropdown erscheinen soll. So lassen sich Sprachen umsortieren, filtern oder ergänzen. Das Feature wird über die Standard-`FeatureProvider`-Schnittstelle eingebunden und wie jedes eingebaute Lexical-Feature einem Rich-Text-Feld hinzugefügt. Das Package ist ausdrücklich als Übergangslösung gedacht. Sobald `@payloadcms/richtext-lexical` einen Code-Block unterstützt, sind keine neuen Features oder automatisierten Tests geplant. Die Peer-Dependencies sind `@payloadcms/richtext-lexical` ~0.4.0 und `payload` ~2.4.0, was auf die frühe Payload-2.x-Lexical-Reihe abzielt.

Paketinformationen

Paketname

payload-code-block-feature

Neueste Version

0.0.0-alpha.0

Entpackte Größe

40 kB

Lizenz

MIT

Wöchentliche Downloads

1

Zuletzt veröffentlicht

10. Dez. 2023