I’m trying to implement an editor that has a minimum height, resizes depending on the number of line,s and has also a maximum height?
This is a CSS problem but I really couldn’t find a way to do this?
I’m trying to implement an editor that has a minimum height, resizes depending on the number of line,s and has also a maximum height?
This is a CSS problem but I really couldn’t find a way to do this?
Not sure if both a minimum and a maximum height is going to work, but the general approach for this would be to put the height styles on cm-editor
and make cm-scroller
overflow: auto
.
Refer to the official style example(check the ending), you can add the below code to the extensions of the editor state. Then the editor has a minimum and maximum height.
CMEditorView.theme({
'&': { maxHeight: '300px', minHeight: '100px' },
'.cm-scroller': { overflow: 'auto' },
})
But there has a problem, if the real content’s height smaller than the minimum height of editor, a gap will exist.
Ah, right, the styling example actually talks about this – min-height
should go on cm-content
and cm-gutter
, not cm-editor
.
Hi marijn,
The official example will make the editor have a minimum height. But if I want the editor also have a maximum height, it seems that I should use the below code.
EditorView.theme({
'.cm-gutter, .cm-content': {
maxHeight: '200px',
minHeight: '100px',
overflow: 'auto',
},
})
Then the problem happens.
If the conent’s real height greater than the maximum height, gap exists again (because the cm-gutters
have a dynamic minHeight and its parent’s flex layout). And if I scroll the cm-content
, the cm-gutter
not scroll synchronously.
EditorView.theme({
'&': { maxHeight: '200px' },
'.cm-gutter,.cm-content': { minHeight: '100px' },
'.cm-scroller': { overflow: 'auto' },
})
You can get the current number of lines. Compare with your minimum number of lines and set it to the editor.
You can do this in V6:
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}
})
}