Code editor with automatic height that has a minimum and maximum height?

v6
1

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?

2

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.

3

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.

image

4

Ah, right, the styling example actually talks about this – min-height should go on cm-content and cm-gutter, not cm-editor.

5

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.

image
image3128×1078 319 KB

Final version :partying_face:

  • The editor will have a minimum and maximum height.
  • The style seems good.
  • The content and the gutter can scroll synchronously.
EditorView.theme({
  '&': { maxHeight: '200px' },
  '.cm-gutter,.cm-content': { minHeight: '100px' },
  '.cm-scroller': { overflow: 'auto' },
})
6

You can get the current number of lines. Compare with your minimum number of lines and set it to the editor.

7

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

}