Single line?

Is there a way to restrict the editor to a single line? I’m looking for an extension of input rather than textarea, essentially.

[PullJosh]

This issue is old and closed, but I had the same problem and came up with a nice solution. I’m posting it here in case anybody else needs it. 😉

function withSingleLine(editor) {
  const { normalizeNode } = editor;

  editor.normalizeNode = ([node, path]) => {
    if (path.length === 0) {
      if (editor.children.length > 1) {
        Transforms.mergeNodes(editor);
      }
    }

    return normalizeNode([node, path]);
  };

  return editor;
}

Then I just use the withSingleLine plugin while creating the editor:

withSingleLine(withReact(createEditor()))

[lzear]

@PullJosh’s solution worked well for us. In addition, we wanted to enable automatic scrolling to the caret (as in regular HTML inputs). I’m posting our hacky solution here, in case anybody else needs it 😃

const [prevSelection, setPrevSelection] = useState({ anchor: { path: [0, 0], offset: 0 }, focus: { path: [0, 0], offset: 0 }});
useEffect(() => {
  if (!prevSelection || !ReactEditor.isFocused(editor)) return;
  const editorDOM = ReactEditor.toDOMNode(editor, editor);
  if (!editorDOM) return;
  const padding = 5;
  const editorRects = editorDOM.getClientRects();
  const caretTextDom = ReactEditor.toDOMRange(editor, prevSelection);
  const caretTextRects = caretTextDom.getClientRects();
  if (caretTextRects.length > 0 && editorRects.length > 0) {
    const caretX = caretTextRects[0].left - editorRects[0].left + editorDOM.scrollLeft;
    if (caretX - editorDOM.clientWidth + padding > editorDOM.scrollLeft) {
      editorDOM.scrollTo(caretX - editorDOM.clientWidth + padding, 0);
    } else if (caretX - padding < editorDOM.scrollLeft) {
      editorDOM.scrollTo(caretX - padding, 0);
    }
  }
}, [editor, prevSelection]);
return (
  <Slate
    onChange={v => {
      const { selection } = editor;
      if (selection) setPrevSelection(selection);
    }}
  >
    ...