Closed andrebnassis closed 2 years ago
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
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.
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)
and update how to do it in v4?
and update how to do it in v4?
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
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
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
}
}
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: