• Customize border of edior in Codemirror 6

#Customize border of edior in Codemirror 6

Codemirror 6 is a brand new version of the codemirror library. Its code base has been built from scratch and aims to be more extensible and accessible.

If you want to change the border of the editor to visually reflect that the editor has or not the focus. You can do it using theme feature from version 6:

const myTheme = EditorView.theme({
    "&": {
        fontSize: "12pt",
        border: "1px solid #c0c0c0"
    },
    "&.cm-editor.cm-focused": {
        outline: "none"
    }
});

In the code above, we set the default border to be 1px solid #c0c0c0. When it is focused, we set the border to be none to reflect the focus state.