Particular lines readonly

[andrebnassis]

Is there any sample that shows how to set some lines as readonly, so it can't be edited?

I found something related to markText and beforeChange, but I couldn't solve it yet using @uiw/react-codemirror package.

https://stackoverflow.com/questions/17415100/codemirror-particular-lines-readonly

Thanks in advance!

PS: If possible, use the getting started sample as base and set only the first line as readonly:

import CodeMirror from '@uiw/react-codemirror';
import { javascript } from '@codemirror/lang-javascript';

const CodeEditor = () => {
  
  return (
    <CodeMirror
      value="console.log('hello world!');"
      height="200px"
      extensions={[javascript({ jsx: true })]}
      onChange={(value, viewUpdate) => {
        console.log('value:', value);
        console.log(viewUpdate);
      }}
      theme={'dark'}
    />
  );
}

export default CodeEditor;

[jaywcjlove]

https://stackoverflow.com/a/17482204/1334703

This is the solution from the previous version.

You can try it with v3.

CodeMirror v6 used by @uiw/react-codemirror@v4

[andrebnassis]

https://stackoverflow.com/a/17482204/1334703

This is the solution from the previous version.

You can try it with v3.

CodeMirror v6 used by @uiw/react-codemirror@v4

Thanks for the response, but I would like to start using the latest version.

If someone has any example of implementing this feature I would be very glad.

[raquelhortab]

Hi! I am also interested in this. I cannot seem to understand how to use options in codemirror docs for the component version, is there any tutorial about that? How would these options be applied (markText for instance), or how can we use codemirror configuration? (readOnly for instance, it's not working through props)

[simpsonphile]

and update how to do it in v4?

[raquelhortab]

and update how to do it in v4?

#108

it looks like the only way is to downgrade, it's weird that newer versions have fewer functionalities, maybe they'll add it in the future? I don't know but afterall, it's an opensource library so I do appreciate whatever they can offer

[jaywcjlove]

@simpsonphile Migrate from @uiw/react-codemirror v3 to v4.

• Codemirror 6 #88 (comment)

[andrebnassis]

I just released codemirror-readonly-ranges extension that easy allow to work with read-only ranges on CodeMirror6.
For anyone who is interested on the solution:

package: https://www.npmjs.com/package/codemirror-readonly-ranges

full documentation: https://andrebnassis.github.io/codemirror-readonly-ranges/?path=/story/0-introduction--page

[jaywcjlove]

https://discuss.codemirror.net/t/how-to-make-certain-ranges-readonly-in-codemirror6/3400/5

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
  }
}