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

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.

image

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.

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