Add new line + "readOnly" Line

1

I’m trying to create a new (empty) line and add a widget to that line.
It’s adding a new line, but nothing is inserted, if I use addWidget it works, but I am still able to enter text into that line when I would like it to be readOnly.

Here is what I have:

$(document).on("mousedown", ".add-callout", function() {
		var inner = $(this).closest(".widget-inner");
		var editor = inner[0].editor;
		var line = editor.getCursor();
		var cmWidget = document.createElement("span");
				cmWidget.className = "callout";
		var newLine = line.line + 0;
		editor.replaceRange("\n", line);
		editor.addLineWidget({line: newLine, ch: 0}, cmWidget, {readOnly: true});
		console.log(line);
		console.log(newLine);
	});
2

Line widgets don’t work like that—they don’t support a readOnly option because they don’t actually influence the lines of editable content, but are inserted between them, and always uneditable. In this case, since your widget is empty, it won’t be visible at all.

3

Okay, I tried editor.markText({ line: newLine, ch: 0 }, { line }, {replacedWith: cmWidget}); rather than .addWidget, but I am receiving an error Cannot read property 'chunkSize' of undefined.

I’m not sure what that means.

4

Okay, I sort of got it to start working, but I can’t figure out how to get it to insert into the current line, it has a mind of it’s own on where it goes…

Using my “line” variable doesn’t seem to work.

editor.markText({line:line,ch:1},{line:line,ch:1},{replacedWith: cmWidget});
5

The library should be quite deterministic, so probably there’s a logic error somewhere. Why are you using ch: 1? The start of a line is ch: 0.

6

I don’t know, I looked at another user’s codepen and got mine working, I understand it a bit more, although I only use jQuery so it was difficult to read through. Thank you for the help.

Now I just need to get this into a modal…

7

Any luck getting this to work? Trying to create the same experience (a line-widget that owns its own line) and that its parent codemirror-line be unselectable / readonly. Tried addLineWidget & markText → replacedWith + readOnly, no luck though.