Non-editable content prevents host element from being focused

1

To prevent users from editing content I use the EditorView.editable extension

// Needed to dynamically change the Codemirror config.
const cmEnabled = new Compartment;

// Disable editing.
const editable: Extension = this.cmEnabled.of(EditorView.editable.of(false));

const cm = new EditorView({
    parent: nativeElement, // <div #host id="codemirror-host"></div>
    state: EditorState.create(
    {
        doc: "[1, 2, 3, 4]",
        extensions: [
        basicSetup,
        editable,
        EditorView.lineWrapping,
        json(),
        ],
    }),
});

However, this prevents the <div> element (hosting the editor) from focusing.

So the following works if the view is editable

const e = nativeElement.querySelector('#codemirror-host');

e.addEventListener('focusin', (event:any) => {
    console.log("focusin");
});

e.addEventListener('focusout', (event:any) => {
    console.log("focusout");
});

However, if the editor is disabled, no focus events are triggered.

2

Yes, that’s how editable works – it disables the contenteditable attribute, and thus the editor is no longer focusable. You may be interested in the new EditorState.readOnly facet.