onresize event in CodeMirror textarea

Question

I want to call a function when user resize the CodeMirror text area. But I can't found a resize event in the event list of CodeMirror documentation . Are there any method do this. I want to do like below.

editor.on('resize', function(){
   consolo.log('editor resized');
});

Answer 1

You can use refresh event for it:

editor.on("refresh", function () {
  console.log('editor resized');
});

According to CodeMirror's Doc: it fires when the editor is refreshed or resized.

Answer 2

CodeMirror does not have a built-in event which fires when users change the editor's size. However, you can use "refresh" (instance: CodeMirror) . It fires when changing the size of the editor programmatically using setSize.

"refresh" (instance: CodeMirror)

Fires when the editor is refreshed or resized . Mostly useful to invalidate cached values that depend on the editor or character size.

---

It is easy you can observe size of any DOM element using ResizeObserver .

ResizeObserver

The ResizeObserver interface reports changes to the dimensions of an Element's content or border box, or the bounding box of an SVGElement. -https://developer.mozilla.org

  // create an Observer instance
  const resizeObserver = new ResizeObserver((entries) => {
    const height = entries[0].target.clientHeight;
    console.log("div.CodeMirror.CodeMirror-wrap height changed:", height);
  });
  const codeMirror = document.querySelector("div.CodeMirror.CodeMirror-wrap");
  resizeObserver.observe(codeMirror);

In the above code, I observe the size of the outer most element of CodeMirror. You can narrow down.