diff --git a/libs/components/editor-core/src/editor/clipboard/clipboard.ts b/libs/components/editor-core/src/editor/clipboard/clipboard.ts index 7907ed8675..8b584066ea 100644 --- a/libs/components/editor-core/src/editor/clipboard/clipboard.ts +++ b/libs/components/editor-core/src/editor/clipboard/clipboard.ts @@ -12,16 +12,18 @@ export class Clipboard { private _paste: Paste; private readonly _supportMarkdownPaste = true; public clipboardUtils: ClipboardUtils; + private _clipboardTarget: HTMLElement; constructor(editor: Editor, clipboardTarget: HTMLElement) { this.clipboardUtils = new ClipboardUtils(editor); + this._clipboardTarget = clipboardTarget; this._copy = new Copy(editor); this._paste = new Paste(editor, this._supportMarkdownPaste); this._clipboardEventDispatcher = new ClipboardEventDispatcher( editor, - clipboardTarget + this._clipboardTarget ); editor @@ -37,7 +39,19 @@ export class Clipboard { .subscribe(this._paste.handlePaste); } + set clipboardTarget(clipboardTarget: HTMLElement) { + this._clipboardTarget = clipboardTarget; + this._clipboardEventDispatcher.initialClipboardTargetEvent( + this._clipboardTarget + ); + } + get clipboardTarget() { + return this._clipboardTarget; + } + + setEditorContainer(container: HTMLElement) {} + public dispose() { - this._clipboardEventDispatcher.dispose(); + this._clipboardEventDispatcher.dispose(this.clipboardTarget); } } diff --git a/libs/components/editor-core/src/editor/clipboard/clipboardEventDispatcher.ts b/libs/components/editor-core/src/editor/clipboard/clipboardEventDispatcher.ts index b3fd8305db..a4f0c76044 100644 --- a/libs/components/editor-core/src/editor/clipboard/clipboardEventDispatcher.ts +++ b/libs/components/editor-core/src/editor/clipboard/clipboardEventDispatcher.ts @@ -7,36 +7,66 @@ enum ClipboardAction { paste = 'paste', } -//TODO: need to consider the cursor position after inserting the children export class ClipboardEventDispatcher { private _editor: Editor; - private _clipboardTarget: HTMLElement; private _utils: ClipboardUtils; constructor(editor: Editor, clipboardTarget: HTMLElement) { this._editor = editor; - this._clipboardTarget = clipboardTarget; this._utils = new ClipboardUtils(editor); - this._initialize(); - } - private _initialize() { this._copyHandler = this._copyHandler.bind(this); this._cutHandler = this._cutHandler.bind(this); this._pasteHandler = this._pasteHandler.bind(this); + this.initialDocumentEvent(); + if (clipboardTarget) { + this.initialClipboardTargetEvent(clipboardTarget); + } + } + initialDocumentEvent() { + this.disposeDocumentEvent(); + document.addEventListener(ClipboardAction.copy, this._copyHandler); document.addEventListener(ClipboardAction.cut, this._cutHandler); document.addEventListener(ClipboardAction.paste, this._pasteHandler); - this._clipboardTarget.addEventListener( + } + initialClipboardTargetEvent(clipboardTarget: HTMLElement) { + if (!clipboardTarget) { + return; + } + + this.disposeClipboardTargetEvent(clipboardTarget); + + clipboardTarget.addEventListener( ClipboardAction.copy, this._copyHandler ); - this._clipboardTarget.addEventListener( + clipboardTarget.addEventListener(ClipboardAction.cut, this._cutHandler); + clipboardTarget.addEventListener( + ClipboardAction.paste, + this._pasteHandler + ); + } + disposeDocumentEvent() { + document.removeEventListener(ClipboardAction.copy, this._copyHandler); + document.removeEventListener(ClipboardAction.cut, this._cutHandler); + document.removeEventListener(ClipboardAction.paste, this._pasteHandler); + } + disposeClipboardTargetEvent(clipboardTarget: HTMLElement) { + if (!clipboardTarget) { + return; + } + + clipboardTarget.removeEventListener( + ClipboardAction.copy, + this._copyHandler + ); + clipboardTarget.removeEventListener( ClipboardAction.cut, this._cutHandler ); - this._clipboardTarget.addEventListener( + clipboardTarget.removeEventListener( ClipboardAction.paste, this._pasteHandler ); @@ -63,22 +93,9 @@ export class ClipboardEventDispatcher { this._editor.getHooks().onPaste(e); } - dispose() { - document.removeEventListener(ClipboardAction.copy, this._copyHandler); - document.removeEventListener(ClipboardAction.cut, this._cutHandler); - document.removeEventListener(ClipboardAction.paste, this._pasteHandler); - this._clipboardTarget.removeEventListener( - ClipboardAction.copy, - this._copyHandler - ); - this._clipboardTarget.removeEventListener( - ClipboardAction.cut, - this._cutHandler - ); - this._clipboardTarget.removeEventListener( - ClipboardAction.paste, - this._pasteHandler - ); + dispose(clipboardTarget: HTMLElement) { + this.disposeDocumentEvent(); + this.disposeClipboardTargetEvent(clipboardTarget); this._editor = null; } } diff --git a/libs/components/editor-core/src/editor/editor.ts b/libs/components/editor-core/src/editor/editor.ts index 9592f14b16..0d1d71e6f7 100644 --- a/libs/components/editor-core/src/editor/editor.ts +++ b/libs/components/editor-core/src/editor/editor.ts @@ -80,6 +80,7 @@ export class Editor implements Virgo { this._rootBlockId = props.rootBlockId; this.hooks = new Hooks(); this.plugin_manager = new PluginManager(this, this.hooks); + this._clipboard = new Clipboard(this, this.ui_container); this.plugin_manager.registerAll(props.plugins); if (props.isEdgeless) { this.isEdgeless = true; @@ -138,7 +139,7 @@ export class Editor implements Virgo { public set container(v: HTMLDivElement) { this.ui_container = v; - this._clipboard = new Clipboard(this, this.ui_container); + this._clipboard.clipboardTarget = v; } public get container() {