• Customize the minimum number of lines in Codemirror 6

#Customize the minimum number of lines in Codemirror 6

Codemirror 6 is a brand-new version of the Codemirror library. Its code base has been built from scratch and aims to be more extensible and accessible.

You can set the min-height of the editor using CSS style. But if you want the editor to resize dynamically based on the minimum number of lines. You need to use the editor's API to archive that:

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

In the function above, it checks how many existing lines of code are in the editor and inserts necessary empty lines to match the required.

You need to call the function above when your editor is initiated:

updateToMinNumberOfLines(editor, 100);

Here 100 is the minimum number of lines the editor will try to render.