How to allow only one node in editor (and it has to be a Heading Node)

[nickschinestzki]

Similarly to this issue: #3675

I want to have a single line editor that has only one Heading Node and nothing more (not even line breaks). I don't know how can I achieve this. I have tried replacing the Paragraph Node with a Heading Node in the initial config of the editor, but an error accused me that that was wrong.

I've also tried using Node Transforms, but I got some errors. This is what I tried:

useEffect(() => {
    const headingListener = editor.registerNodeTransform(
      HeadingNode,
      (node) => {
        node.getChildren().map((nodeChild) => {
          if (nodeChild instanceof LineBreakNode) {
            nodeChild.remove(true);
          }
        });
      }
    );

    const paragraphListener = editor.registerNodeTransform(
      ParagraphNode,
      (node) => {
        node.replace(HeadingNode, true);
      }
    );

    return () => {
      headingListener();
      paragraphListener();
    };
}, [editor]);

And this is giving me this error:

So what I'm doing wrong about these Node Transforms?

[francistogram]

What if you just save what an empty Header node would look like e.g.

const initialHeading = {
    root: {
        "children": [
            {
                "children": [],
                "direction": null,
                "format": "",
                "indent": 0,
                "type": "heading",
                "version": 1,
                "tag": "h1"
            }
        ],
        "direction": null,
        "format": "",
        "indent": 0,
        "type": "root",
        "version": 1
    }
}

and use this for the initial value

<LexicalComposer
    initialConfig={{
       ...,
       editorState: initialHeading
    }}
/>

And then restrict adding more nodes?

[nickschinestzki]

This doesn't provide a complete solution. It makes the editor state start with a Heading Node, but it does not prevent the user from simply pressing "Backspace" and then removing the node. Also, how could I restrict adding more nodes?

[francistogram]

I don't have a complete solution for you because I'm not sure how to easily do it but just trying to offer some potential workarounds

You could restrict either change by likely by doing something similar to the MaxLengthPlugin

[trueadm]

Firstly, the node transform solution you posted should in theory work. Can you maybe create a repro on codesandbox? Also, you could also make a custom ParagraphNode that essentially is a HeadNode, use the node replacement API to replace ParagraphNode with it? You will still need the node transform to not permit line breaks.

[nickschinestzki]

Can you give me an example of how could I create this custom ParagraphNode to render a <h1>?

Also, here's the sandbox: https://codesandbox.io/s/winter-sound-b9xqxh
The paragraph node transform completely breaks the program, and when using just the line breaking transform, it doesn't work either.

[rstegg]

I am also looking for this. How do you start a new lexical editor with an h1?

[ezzabuzaid]

function OnlyHeadingPlugin(props: { level: 1 | 2 | 3 }) {
  const [editor] = useLexicalComposerContext();
  useEffect(() => {
    editor.registerNodeTransform(ParagraphNode, (node) => {
      node.replace($createHeadingNode(`h${props.level}`));
    });
    
    // Force single line 
    editor.registerNodeTransform(LineBreakNode, (node) => {
      node.remove();
    });
  }, [editor, props.level]);
  return <></>;
}

This worked for me

[aramfilak]

force single lines doesn’t work for me, but I registered a listener on the Enter command. The user cannot enter multiple heading elements and at the same time can create a line break when needed using Shift+Enter.

import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
import { $createHeadingNode } from '@lexical/rich-text';
import { COMMAND_PRIORITY_LOW, KEY_ENTER_COMMAND, ParagraphNode } from 'lexical';
import { useEffect } from 'react';

export function OnlyHeadingPlugin() {
  const [editor] = useLexicalComposerContext();

  useEffect(() => {
    editor.registerNodeTransform(ParagraphNode, (node) => {
      node.replace($createHeadingNode('h1'));
    });

    return editor.registerCommand(
      KEY_ENTER_COMMAND,
      (event) => {
        if (!event?.shiftKey) {
          event?.preventDefault();
          return true; // Mark as handled
        }
        return false;
      },
      COMMAND_PRIORITY_LOW,
    );
  }, [editor]);

  return null;
}