Plugins when contenteditable false

1

In implementing the tooltip example in my own code as a test, if I make the ProseMirror class non-editable (for now setting the contenteditable attr to false, although I know that is not the best solution), the tooltip does not get fired. I am trying to have a view-only editor, more a viewer than an editor all told. I just don’t know what that prevents in terms of plugins.

So the question is whether plugins for the state get called/updated when the contenteditable is false. While I cannot get a blinking cursor, I can still select the text in the editor by clicking and dragging over the words. I would love for the tooltip to still work in that case.

2

The editor will ignore the DOM selection when the editor doesn’t have focus, in order to not interfere with selections that may not belong to the editor. By default, a non-editable element isn’t focusable, but you can use the tabindex attribute to make it focusable.

3

I read in a discussion here (I forget where) that to make an editor non editable, it is best to use a plugin to discard the events, both keystrokes and pastes etc. Can anyone point me to the thread where that is discussed so I can allow my editor to be focusable, with a blinking caret, but not allow any editing?

4

I don’t know about a discussion but here’s what I’m doing:

  return new Plugin({
    filterTransaction(tr, _state) {
      // console.debug("readonlyBody.filterTransaction", tr)
      // FIXME we're relying on an implementation detail here; we want to allow
      // e.g. adding annotations and removing them through undo again and we
      // check "history$" because of this. But we really shouldn't rely on the
      // meta key value of the history plugin like this.
      if (tr.getMeta("leavesBodyAlone") || tr.getMeta("history$")) return true
      // Do not allow anything with steps
      return !tr.steps.length
    },
  })

So, I’m letting through transactions where leavesBodyAlone has been explicitly set (in other plugins), I’m also letting through transactions created by the history plugin, and then only transactions which do not contain any steps. Selection changes are also transactions, but no transforms. I cannot guarantee that something like this does what you need, but it has served me well.