Disable writing or deleting text, but still allow markup

[maebert]

For an application I'm working on I need to present documents that can be marked up (ie. make things bold or highlight sections), but where the user should not be able to change the text itself.

Things I tried:

1. Setting readOnly: true in the editableProps of course prevents changing the text, but also disables all other markup
2. Setting onKeyDown: (e) => e.preventDefault()} effectively disallows typing, but has other side-effects (basic browser functionality such as refreshing the page with Cmd+r or changing the font size with Cmd+- is disabled, and the user could still use the context menu to ie. paste new text)

Is there an elegant way to prevent changing the text without disabling other markup?

[12joan]

You might be able to disable operations specifically relating to text manipulation by overriding editor methods like insertText using withOverrides. Let me know if you need help doing that.

Check this file for a list of editor methods that might need overriding.

[maebert]

That's a fantastic pointer, thank you so much! It's getting close, but no cigar yet. Here's the plugin I created:

const noop = () => {};

const disableText = createPluginFactory({
  key: "DISABLE_INPUT",
  withOverrides: (editor) => {
    editor.deleteBackward = noop;
    editor.deleteForward = noop;
    editor.deleteFragment = noop;
    editor.insertText = noop;
    editor.insertBreak = noop;
    editor.insertTextData = noop;
    editor.insertFragment = noop;
    editor.insertFragmentData = noop;
    editor.insertSoftBreak = noop;
    editor.insertNode = noop;
    return editor;
  },
});

This filters out lots of things, but weirdly, entering letters is still possible — the noop gets called (I can see what's being entered if I put a console.log in there), and I can't enter any numbers or punctuation anymore, but lower- and uppercase letters still show up in the DOM of the leaf node. They don't actually show up in the store though, so it seems to be purely a display issue. Anything that forces a re-render (such as bolding something) make the typed characters go away.

My hunch is that this is some optimistic rendering on Slate's side going on here, but I wouldn't know where to look. Any ideas?

[12joan]

You could try combining this with other approaches to patch the edge cases.

    onKeyDown: (editor) => (event) => {
      const { ctrlKey, altKey, metaKey, key } = event;
      const isSingleChar = key.length === 1;
      if (isSingleChar && !ctrlKey && !altKey && !metaKey) {
        event.preventDefault();
      }
    },
    onPaste: (editor) => (event) => {
      event.preventDefault();
    },

isSingleChar is based on the untested assumption that all inserting keystrokes will be exactly 1 char, and all non-inserting keystrokes (ArrowLeft, Home, etc.) will be >1. There might be some language-specific keyboards that don't follow this rule, but you can check for those with a regex if it comes up.

You probably won't need onPaste, since this will most likely be handled by one of the insert* methods. Just including it for completeness.

[maebert]

That's the path I took in the end. Super helpful advice @12joan, thank you so much!