How to make certain ranges readonly in CodeMirror6

v6
5

Definitely don’t use undocumented properties like RangeSet.chunk, those may break on any release. Also, you’ll want to use a consistent coordinate system, so using the read-only ranges from tr.startState and the original-document coordinates in the change set seems safer. Something like this (untested) might work:

function readOnlyTransactionFilter() {
  return EditorState.transactionFilter.of((tr) => {
    let readonlyRangeSet = tr.startState.field(underlineField, false)
    if (readonlyRangeSet && tr.docChanged && !tr.annotation(Transaction.remote)) {
      let block = false
      tr.changes.iterChangedRanges((chFrom, chTo) => {
        readonlyRangeSet.between(chFrom, chTo, (roFrom, roTo) => {
          if (chTo > roFrom && chFrom < roTo) block = true
        })
      })
      if (block) return []
    }
    return tr
  }
}
3 Likes