Hiding pieces of code and making them non-interactive

Hello! I am migrating from codemirror 5 to 6, and can’t find replacement for a TextMarkerOptions with collapsed value set to true

I am doing a code suggestion tool. For example someone has written some code in a file:

fun main() {
   console.log("Hello, wold")

And we want to suggest change on line 2.
For that we need to edit only line 2 of the code and hide all the others (preserving the syntax highlighting):
So the editor would look like this:

   console.log("Hello, wold")

In cm5 I was hiding the lines with:

const opts = {collapsed: true, clearWhenEmpty: false, inclusiveLeft: true, inclusiveRight: true};
getDoc().markText(position(-1), position(1), opts);
getDoc().markText(position(2, 0), position(3, 0), opts);

The docs for cm6 are suggesting to replace it with something like this:

  create() {
    return Decoration.none
  update(value, tr) {
    value = value.map(tr.changes)
    for (let e of tr.effects) if (e.is(collapseLine)) {
      value = value.update({
        add: [
          Decoration.replace().range(0, firstLine.length), 
          Decoration.replace().range(firstLine.length + secondLine.length, firstLine.length + secondLine.length + thirdLine.length)
    return value
  provide: f => EditorView.decorations.from(f)

But it still allows user to interact with the invisible content (line 1 and line 3)
For example if a user presses Arrow Up key, they can modify the first line (though it is invisible).
Or a user can delete all the text with the Ctrl+a and Backspace keys, and then the editor disappears completely.

How can we mark a part of text as non-interactive in this case?

Possible solution is to mark the invisible content as an atomic range, but it would still allow to delete it and interact with it

Collapsed content could also be deleted in CM5 unless you set readOnly. CM6 has no equivalent to that—but you can implement behavior like that with a change filter.

1 Like