Simplify your stack and build anything. Or everything.
Build tomorrow’s web with a modern solution you truly own.
Code-based nature means you can build on top of it to power anything.
It’s time to take back your content infrastructure.

Lexical Code Block feature

default discord avatar
mgrandl3 months ago
1

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

Star on GitHub

Star

Chat on Discord

Discord

online

Can't find what you're looking for?

Get dedicated engineering support directly from the Payload team.