Hide cursors and prevent selection in readOnly

v6
1

My editor is set to readOnly. The cursor still can be set inside and have text selected. I was unable to convince my manager this was okay. He wants the readOnly editor to be completely untouchable (view only).

I’m using the default selections and cursor. Is there a setting to toggle off contenteditable or CSS that can hide these default cursors?

1 Like
2

UPDATE

I found the property that handles this:

in your extensions add:

EditorState.create({
  //...
  extensions: [
    //...
    EditorView.editable.of(false),
    //...
  ]
})
1 Like
3

I’d also suggest looking at putting that into a Compartment, thus allowing you to toggle the state via view.dispatch, e.g.,

const editable = new Compartment();
const view     = new EditorView({
  //...
  extensions: [
    //...
    editable.of(EditorView.editable.of(true)),
    //...
  ]
})

//...

this.setEditable = state => {
  view.dispatch({
    effects: editable.reconfigure(EditorView.editable.of(state))
  });
}
1 Like