Entering text after a block void element (e.g.) is not possible if this is the last element

[andreas-horn]

If you have a void element e.g. an image as last item in your editor it is not possible to enter any text at the end to extend your content.

Reproduce https://www.slatejs.org/examples/images

Steps

1. Go to image example
2. select last image
3. try to enter text or to move your cursor

Expectation A new node of a given type shall be added when enter is pressed at the end of an document

Environment

• Slate Version: 0.88.0
• Operating System: Windows
• Browser: Chrome, Firefox

[enusune]

try this

const refocusEditor = (editor: Editor, path?: Path) => {
  const { selection } = editor;
  if (path) {
    ReactEditor.focus(editor);
    Transforms.select(editor, path);
    return;
  }
  if (!selection || !selection.anchor || !selection.focus) {
    return;
  }
  ReactEditor.focus(editor);
  Transforms.select(editor, selection.focus);
};

<Editable onKeyDown={(event: any) => {
              if (event.key === "Enter") {
                const { selection } = editor;
                if (selection && Range.isCollapsed(selection)) {
                  const node = editor.children[selection.anchor.path[0]] as
                    | CustomElement
                    | undefined;
                  if (node && ["image", "video"].indexOf(node.type) > -1) {
                    event.preventDefault();
                    const nextIndex = selection.anchor.path[0] + 1;
                    const next = editor.children[nextIndex] as
                      | CustomElement
                      | undefined;
                    if (next) {
                      refocusEditor(editor, [nextIndex]);
                      return;
                    }
                    const emptyElement = {
                      type: "paragraph",
                      children: [{ text: "" }],
                    };
                    Transforms.insertNodes(editor, emptyElement, {
                      at: [editor.children.length],
                    });
                    const last = Editor.last(editor, []);
                    refocusEditor(editor, last[1]);
                    return;
                  }
                }
              }
            }}
          />

[Davidkle]

Pressing enter on a void element is a work around. It's not a solution. Ideally, it should be possible to add text inline to the right of the image. Re-opening.