diff --git a/docs/src/docPages/api/events.md b/docs/src/docPages/api/events.md index cedf292fc..4771620ed 100644 --- a/docs/src/docPages/api/events.md +++ b/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. }, diff --git a/packages/core/src/Editor.ts b/packages/core/src/Editor.ts index ee08562b1..f54522026 100644 --- a/packages/core/src/Editor.ts +++ b/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) { diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts index 6a382c9d8..453d52c69 100644 --- a/packages/core/src/types.ts +++ b/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, }