I’m aware that I can set the min height of of a dynamically resizing code mirror by using min-height in the Codemirror-Scroll, but if I want to define this in code (for different code mirror on the page), is my best option really to in JS, manually edit the codemirror-scroll class, to have a min-height equal to number_of_lines * line-height + padding and then convert that to em to account of user style sheet situations? As opposed to something like options.minLines = 4;
You can directly set editor.getScrollerElement().style.minHeight
, if you call editor.refresh()
afterwards.
There is no option for a minimum number of lines, however you can do something like this:
editor.focus();
editor.setCursor(editor.lineCount(), 0); // Set the cursor at the end of existing content
var lineCount = editor.lineCount(); // current number of lines
var n = 10 - lineCount; // the minimum you want minus the current amount
var line = editor.getCursor().line;
var ch = editor.getCursor().ch;
// for every n, append a line
for(i = 0; i < n; i++) {
editor.replaceRange("\n" + ' ', { line });
line++;
}
This will not mess up your editor if your content extends the minimum lines.
Then set your codemirror height to fit-content
or auto
and the height will show all of the lines.
Here is an example.
For V6, you can do this:
function updateToMinNumberOfLines(editor, minNumOfLines) {
const currentNumOfLines = editor.state.doc.lines;
const currentStr = editor.state.doc.toString();
if (currentNumOfLines >= minNumOfLines) {
return;
}
const lines = minNumOfLines - currentNumOfLines;
const appendLines = "\n".repeat(lines);
editor.dispatch({
changes: {from: currentStr.length, insert: appendLines}
})
}
But the issue will still be there as the value will get the empty new line, that is not right. even if we remove the empty strings in the callback during the execution the updated value will remove the lines again in the code editor.