Hiding pieces of code and making them non-interactive

v6
1

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:

StateField.define<DecorationSet>({
  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?

2

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

3

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