Resizing Codemirror 6

v6
1

Hey, I couldn’t find any way to make the codemirror 6 resizable by a user, like a textarea or a codemirror 5. Is there a possibility to do this?

2

CodeMirror 5 doesn’t provide any specific features for this either. You should be able to style the outer (.cm-editor) element with a resize CSS property and then arrange for view.scheduleMeasure() to be called when it is actually resized so that it can update its internal layout.

1 Like
3

Hmm, I tried to do what you said (was my first idea as well), but neither got the resize indicator to show in your example or in my project when giving it the property while invoking it. Maybe I am still missing something. In the codemirror 5 example I got it to work.

4

After also setting overflow: 'hidden';, it is now working!

5

Did you mean view.requestMeasure() here? BTW, I’m trying to make this work too, and I’m unclear from the documentation how to implement the read and write. Any help would be much appreciated!

6

Right, it’s called requestMeasure.

7

I greatly appreciate codemirror and the work that has gone into it. I know I’m being a little dense on this, but after studying the reference manual, I am still having problems understanding the whole process used for things such as resizing the editor.

I’ve written a soft-wrapper similar to Updates not synchronised with requestMeasure and ViewPlugin - #3 by bxff. It defines an update method that receives a ViewUpdate and checks geometryChanged. If geometryChanged=true, it does a requestMeasure, the write of which…does what? (to resize the editor)? Mine directly modifes viewState.contentDOMHeight and viewState.editorHeight. I can see my requestMeasure being called as the editor is first rendered.

What I can’t seem to do is resize from a user event (changing the size of the parent by dragging the border, in my case). I thought I could make this happen by direct calls to requestMeasure write which modifies the ViewState as above. These would use data about the parent passed in the user-initiated event. Is it enough to change the properties referred to above? Must I use a transaction to make those changes? I’m under the impression that changes to EditorState go through transactions, but not changes to ViewState.

8

The idea would be to use the CSS of the parent element to change the editor’s size in response to user actions (or using browsers’ resize CSS support), and then call requestMeasure to make sure the editor picks up on any layout changes it needs to make. Nothing complicated is required. You didn’t really explain what is going wrong, so I can’t really help here.

1 Like
9

Thanks so much! Yes, that worked.

10

You are right. Changing the CSS of the parent element achieved the result. And it seems there is no need to call requestMeasure() , as everything works fine after resizing.

/* it parent node */
.a-demo-cm6  {
  resize: vertical;
  overflow: auto;
}
/* let .cm-editor auto grow */
.a-demo-cm6 .cm-editor {
  height: 100%;
  max-height: 400px;
}
/* give cm6 a minimal height*/
.a-demo-cm6 .cm-gutter, .a-demo-cm6 .cm-contnet {
  min-height: 100px;
}

And here is the detailed and interactive demo:
https://pagehelper.lets-script.com/blog/codemirror6-resize/

2 Likes
11

Thanks a million for sharing this!