Code Block Feature

About

This is a Lexical editor feature for Payload CMS that wires `@lexical/code` into the rich text editor before the core team shipped an official version. It registers the `CodeNode` and `CodeHighlightNode` nodes, exposes a slash-menu entry that converts the current selection into a code block, and registers the highlighting composer so syntax coloring runs as you type. The floating toolbar appears when the cursor enters a code node. It has a language dropdown for tagging the snippet and a copy button that copies the node's text. Toolbar positioning is computed from the anchor element's bounding rect and updated through a debounced mouse-move listener, so it tracks the active block without re-rendering on every pixel of movement. Configuration is a single optional `languages` callback. It receives the default `[label, value]` pairs and returns the list you want in the dropdown, so you can reorder, filter, or extend the supported languages. The feature integrates through the standard `FeatureProvider` interface and is added to a rich text field like any other Lexical feature. The author is explicit that this is a stopgap. Once `@payloadcms/richtext-lexical` includes a code block, this package will not receive new features or automated tests. It peer-depends on `@payloadcms/richtext-lexical` ~0.4.0 and `payload` ~2.4.0, so it targets the early Payload 2.x Lexical line rather than current releases.

Package info

Package name

payload-code-block-feature

Latest version

0.0.0-alpha.0

Unpacked size

40 kB

License

MIT

Weekly downloads

8

Last publish

Dec 10, 2023