Switch between editor being editable or not

v6
1

I’m afraid I’ve tried my best at reading through the docs, but still am unable to get a grasp on how I can use the EditorView.editable facet to toggle between making an editor editable and non-editable.

I’ve tried a number of things, but my most recent attempt was to setup the editor like so:

this.editor = new EditorView({
	state: EditorState.create({extensions: [
		basicSetup,
		javascript(),
		listenerExtension,
		EditorView.editable.of(!this.props.isDisabled)
	]}),
	parent: this.codeMirror.current
});

Here you can see if this.props.isDisabled is initially true, then it will set the facet to false, making it non-editable.

Then to be able to toggle the editor to editable later on I’m unsure about. How can I take this.editor and toggle the editor to be editable in this current state?

Any help would be greatly appreciated.

As an aside, I think I saw somewhere in another message, but can someone confirm, that a wrapper, or alternative API will be provided for such configurations and simple toggling of options in future? I was just curious and wanted to check.

Thanks!

2

In order to dynamically enable/disable an extension (which is what EditorView.editable is), you’ll have to tag it. I.e., if you do something like this…

let editableTag = Symbol()
let state = EditorState.create({extendions: [
  /* ... */
  tagExtension(editableTag, EditorView.editable.of(false))
]})

function setEditable(view: EditorView, value: boolean) {
  view.update({
    reconfigure: {[editableTag]: EditorView.editable.of(value)}
  })
}

You can call setEditable to change the content of your tagged extension.

3

Thank you - this makes a lot of sense :+1:

4

I wonder where does tagExtension function comes from. I don’t see it anywhere in Reference Manual

5

Note that that post is from 2020, before the interface stabilized. You’ll want to use a compartment to do something similar with the current interface.

6

That’s what I’ve originally found in manual but then I failed in figuring out how I can turn Facet returned by this static method could be turned into Compartment. Searching for the specific issue brought me to this topic.

Looking more into Configuration example I think expected solution should be something along the:

// define some "global" constant reference to new Compartment
const editableCompartment = new Compartment;

// When initializing new state use this compartment to configure editable state
const state = EditorState.create({
    doc: file.content,
    extensions: [
        history(),
        keymap.of([...defaultKeymap, ...historyKeymap]),
        lineNumbers(),
        gutter({ class: "cm-mygutter" }),
        language(),
        syntaxHighlighting(defaultHighlightStyle),
        EditorView.updateListener.of(this.updatedCallback.bind(this)),
        editableCompartment.of(EditorView.editable.of(false)),
    ]
});

// reuse the Compartment instance to alter the editable state
// this.cm being reference to EditorView
this.cm.dispatch({
    effects: editableCompartment.reconfigure(EditorView.editable.of(true))
});
7

I know this is an old post, but could the “final” code example be added as reply? It’s quite hard to put together how to make this work for folks who’ve never worked with a framework that does everything through facets/compartments/etc.

I’ve implemented it as follows, but I have no idea if that’s actually the right way to do it. It works, but I don’t know if it’s supposed to work =)

const doc = `some string data`;

const readOnly = EditorState.readOnly;
const readOnlyCompartment = new Compartment();
const editable = !!document.body.dataset.projectMember;

const extensions = [
  basicSetup,
  readOnlyCompartment.of(readOnly.of(!editable))
];

const state = EditorState.create({ doc, extensions });
const view = new EditorView({ parent, state, lineWrapping: true });

myUtils.setEditable = (editable) => {
  const update = readOnly.of(!editable);
  const effect = readOnlyCompartment.reconfigure(update);
  myUtils.setEffects(effect);
};

With the setEffects being defined as:

myUtils.setEffects = (...effects) => {
  view.dispatch({ effects });
};