Using defineSimpleMode() to tag text as read-only or hidden.

1

I’m looking for a way to use defineSimpleMode() or something similar to create a mode where text matching an re is hidden or read-only. What I did was something like this:

$( document ).ready( function () {
  CodeMirror.defineSimpleMode("elog", {
    start: [ {regex: /<elog:.*=.*>/, token: "strikethrough"} ]
  });
});

This gave me a mode where the matching text is marked with a strikethrough to warn users to leave it alone as a temp solution.

Any ideas on a trick/hack to extent the same approach to simply hide the text or (preferably) mark it read-only? Seems like the all the machinery’s there, I’m just not quite sure how to get at it yet.

2

You can’t do this with a mode. You can use the markText method to hide pieces of the document or make them read-only, but you’ll have to do it ‘manually’, by listening for changes and scanning the document.

3

Too to hope for, I guess! Given that, do you mind telling me if you think this seem like a reasonable approach:

$( document ).ready( function () {
    var editor = CodeMirror.fromTextArea(document.getElementById("boxid"), { lineNumbers: true });
    var mark_ro = function() {
	var pat = /<elog:.*=.*>/;
	var cur = editor.getSearchCursor(pat, false, true);
	while (cur.findNext()) {
	    editor.markText(cur.pos.from, cur.pos.to, 
			    {readyOnly:true, atomic:true, css:'color: red'});
	}
    };
    editor.on("change", function(chObj) { mark_ro(); }); 
    mark_ro();
});

It seems to work fine and be fast enough to be invisible to the user. Or am I doing something horrifically inefficient here?

4

That works, if patterns typed by the user during editing don’t need the same treatment. If they do, you’ll have to listen to change events and update your markers when new instances are found.