Ensuring the last node in the editor is a paragraph

[leo-petrucci]

I'm having trouble with that seems to be a very simple thing to implement.

In my editor I have voids, these voids are not editable, so it's quite difficult to add a new node after them. Ideally I'd like if there was always a paragraph as the last node in my editor.

My initial thought was to use normalization for this.

    editor.normalizeNode = ([node, path]) => {
      if (path.length === 0) {
        if (editor.children.length > 0) {
          const lastNode = editor.children[editor.children.length - 1]
          if (
            !Element.isElement(lastNode) ||
            lastNode.type !== defaultNodeTypes.paragraph
          ) {
            Transforms.insertNodes(
              editor,
              { type: defaultNodeTypes.paragraph, children: [{ text: '' }] },
              { at: [editor.children.length] }
            )
            return
          }
        }
      }

      normalizeNode([node, path])
    }
  }

The above code does work if I've just added a node to the editor, but it doesn't run on the editor's first render.

I even tried adding

  useEffect(() => {
    editor.normalize({ force: true })
  }, [])

But the normalize function just won't run.

What's my best option here?

[agammann]

Install the normalizer before initialization, then call the static Editor.normalize(editor, { force: true }) after the initial children have been assigned. Directly loading initialValue is different from making a transform that automatically triggers normalization. This core example includes startup and later edits:

import { createEditor, Editor, Element, Transforms } from 'slate';

function withTrailingParagraph(editor) {
  const { normalizeNode } = editor;
  editor.normalizeNode = (entry, options) => {
    const [, path] = entry;
    if (path.length === 0) {
      const last = editor.children.at(-1);
      if (!Element.isElement(last) || last.type !== 'paragraph') {
        Transforms.insertNodes(editor,
          { type: 'paragraph', children: [{ text: '' }] },
          { at: [editor.children.length] });
        return;
      }
    }
    normalizeNode(entry, options);
  };
  return editor;
}

const editor = withTrailingParagraph(createEditor());
editor.children = [{ type: 'image', children: [{ text: '' }] }];
Editor.normalize(editor, { force: true });
// editor.children ends with a paragraph.

Both Editor.normalize(editor, { force: true }) and your editor.normalize({ force: true }) call are valid in this version. The example verifies the core initialization pass after the document is loaded; without your complete React setup, it does not identify why the effect in your application failed to invoke the override. In React, ensure the plugin is installed before that pass and that Slate has assigned its initial children. If the last node is already a paragraph, the normalizer delegates without inserting another one.

Tested with Slate 0.133.7: an initial image, empty initial document, already-ending paragraph, and later insertion of a final non-paragraph all preserve one trailing paragraph. Custom normalization, Editor normalization API.