I am trying to build a CodeBlock Feature for lexical, but I can't get it to work. I simply adjusted the official BlockQuote feature, but I keep getting:
Error: Unable to find an active editor state. State helpers or node methods can only be used synchronously during the callback of editor.update(), editor.read(), or editorState.read(). Detected on the page: 0 compatible editor(s) with version 0.18.0+dev.esm and incompatible editors with versions 0.18.0+dev.esm (separately built, likely a bundler configuration issue)
I triple checked, that versions of
@payloadcms/richtext-lexical
and my
lexical
are matching
const toolbarGroups: ToolbarGroup[] = [
toolbarTextDropdownGroupWithItems([
{
ChildComponent: CodeIcon,
isActive: ({ selection }) => {
if (!$isRangeSelection(selection)) {
return false;
}
for (const node of selection.getNodes()) {
if (!$isCodeNode(node) && !$isCodeNode(node.getParent())) {
return false;
}
}
return true;
},
key: "codeBlock",
label: () => "Code Block",
onSelect: ({ editor }) => {
editor.update(() => {
const selection = $getSelection();
$setBlocksType(selection, () => $createCodeNode());
});
},
order: 20,
},
]),
];
export const CodeFeatureClient = createClientFeature({
markdownTransformers: [MarkdownTransformer],
nodes: [CodeNode],
slashMenu: {
groups: [
slashMenuBasicGroupWithItems([
{
Icon: CodeIcon,
key: "codeBlock",
keywords: ["code", "code block"],
label: () => "Code Block",
onSelect: ({ editor }) => {
editor.update(() => {
const selection = $getSelection();
$setBlocksType(selection, () => $createCodeNode());
});
},
},
]),
],
},
toolbarFixed: {
groups: toolbarGroups,
},
toolbarInline: {
groups: toolbarGroups,
},
});
I am trying to build a CodeBlock Feature for lexical, but I can't get it to work. I simply adjusted the official BlockQuote feature, but I keep getting this:
Error: Unable to find an active editor state. State helpers or node methods can only be used synchronously during the callback of editor.update(), editor.read(), or editorState.read(). Detected on the page: 0 compatible editor(s) with version 0.18.0+dev.esm and incompatible editors with versions 0.18.0+dev.esm (separately built, likely a bundler configuration issue)
I triple checked, that versions of
@967091941873426493/richtext-lexical and my lexical are matching
nevermind. I cleaned up my node_modules and reinstalled everything and now it works
Here's an example for lexical code blocks without having to build a custom feature:
https://payloadcms.com/docs/rich-text/building-custom-features#example-code-field-block-with-language-pickerStar
Discord
online
Get dedicated engineering support directly from the Payload team.