fix: copy in white board will thorw error

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);
     }
 }

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() {
+    dispose(clipboardTarget: HTMLElement) {
-        document.removeEventListener(ClipboardAction.copy, this._copyHandler);
+        this.disposeDocumentEvent();
-        document.removeEventListener(ClipboardAction.cut, this._cutHandler);
+        this.disposeClipboardTargetEvent(clipboardTarget);
-        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
-        );
         this._editor = null;
     }
 }

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() {