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