add resize event

docs/src/docPages/api/events.md

@@ -31,6 +31,9 @@ const editor = new Editor({
   onBlur({ editor, event }) {
     // The editor isn’t focused anymore.
   },
+  onResize({ editor, event }) {
+    // The editor view has resized.
+  },
   onDestroy() {
     // The editor is being destroyed.
   },
@@ -70,6 +73,10 @@ editor.on('blur', ({ editor, event }) => {
   // The editor isn’t focused anymore.
 }
 
+editor.on('resize', ({ editor, event }) => {
+  // The editor view has resized.
+}
+
 editor.on('destroy', () => {
   // The editor is being destroyed.
 }
@@ -118,6 +125,9 @@ const CustomExtension = Extension.create({
   onBlur({ editor, event }) {
     // The editor isn’t focused anymore.
   },
+  onResize({ editor, event }) {
+    // The editor view has resized.
+  },
   onDestroy() {
     // The editor is being destroyed.
   },

packages/core/src/Editor.ts

@@ -45,6 +45,8 @@ export class Editor extends EventEmitter {
 
   public isFocused = false
 
+  private resizeObserver!: ResizeObserver
+
   public options: EditorOptions = {
     element: document.createElement('div'),
     content: '',
@@ -63,6 +65,7 @@ export class Editor extends EventEmitter {
     onTransaction: () => null,
     onFocus: () => null,
     onBlur: () => null,
+    onResize: () => null,
     onDestroy: () => null,
   }
 
@@ -86,7 +89,15 @@ export class Editor extends EventEmitter {
     window.setTimeout(() => {
       this.commands.focus(this.options.autofocus)
       this.emit('create', { editor: this })
+
+      if (window.ResizeObserver) {
+        this.resizeObserver = new ResizeObserver(() => {
+          this.emit('resize', { editor: this })
+        })
+        this.resizeObserver.observe(this.view.dom)
+      }
     }, 0)
+
   }
 
   /**
@@ -442,6 +453,8 @@ export class Editor extends EventEmitter {
    * Destroy the editor.
    */
   public destroy(): void {
+    this.resizeObserver?.unobserve(this.view.dom)
+
     this.emit('destroy')
 
     if (this.view) {

packages/core/src/types.ts

@@ -36,6 +36,7 @@ export interface EditorOptions {
   onTransaction: (props: { editor: Editor, transaction: Transaction }) => void,
   onFocus: (props: { editor: Editor, event: FocusEvent }) => void,
   onBlur: (props: { editor: Editor, event: FocusEvent }) => void,
+  onResize: (props: { editor: Editor }) => void,
   onDestroy: () => void,
 }