From 1c4b4072758ba472142144a71a7c532bd3f2349a Mon Sep 17 00:00:00 2001
From: Vincent Chan <okcdz@diverse.space>
Date: Mon, 4 Dec 2023 23:18:56 +0800
Subject: [PATCH] feat: config mountpoint

---
 .../plugins/spannerPlugin/spannerDelegate.ts  | 15 ++++------
 .../plugins/spannerPlugin/spannerPlugin.ts    | 29 +++++++++++--------
 2 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/packages/blocky-core/src/plugins/spannerPlugin/spannerDelegate.ts b/packages/blocky-core/src/plugins/spannerPlugin/spannerDelegate.ts
index 510df97..298d426 100644
--- a/packages/blocky-core/src/plugins/spannerPlugin/spannerDelegate.ts
+++ b/packages/blocky-core/src/plugins/spannerPlugin/spannerDelegate.ts
@@ -3,6 +3,7 @@ import type { EditorController } from "@pkg/view/controller";
 import type { BlockDataElement } from "@pkg/data";
 import { UIDelegate } from "@pkg/view/uiDelegate";
 import { fromEvent, takeUntil } from "rxjs";
+import type { Editor } from "@pkg/view/editor";
 
 export interface SpannerInstance extends IDisposable {
   onFocusedNodeChanged?(focusedNode: BlockDataElement | undefined): void;
@@ -30,10 +31,7 @@ export class SpannerDelegate extends UIDelegate {
     this.#instance?.onFocusedNodeChanged?.(v);
   }
 
-  constructor(
-    private editorController: EditorController,
-    private factory: SpannerFactory
-  ) {
+  constructor(public editor: Editor, private factory: SpannerFactory) {
     super("blocky-editor-spanner-delegate blocky-cm-noselect");
     // draggable
     this.container.setAttribute("draggable", "true");
@@ -45,17 +43,14 @@ export class SpannerDelegate extends UIDelegate {
   }
 
   #handleDragStart() {
-    const editor = this.editorController.editor;
-    if (!editor) {
-      return;
-    }
-    editor.darggingNode = this.focusedNode;
+    this.editor.darggingNode = this.focusedNode;
   }
 
   override mount(parent: HTMLElement): void {
     super.mount(parent);
 
-    this.#instance = this.factory(this.container, this.editorController, this);
+    const editorController = this.editor.controller;
+    this.#instance = this.factory(this.container, editorController, this);
     if (this.#instance) {
       this.disposables.push(this.#instance);
     }
diff --git a/packages/blocky-core/src/plugins/spannerPlugin/spannerPlugin.ts b/packages/blocky-core/src/plugins/spannerPlugin/spannerPlugin.ts
index ea72a1b..df10725 100644
--- a/packages/blocky-core/src/plugins/spannerPlugin/spannerPlugin.ts
+++ b/packages/blocky-core/src/plugins/spannerPlugin/spannerPlugin.ts
@@ -8,6 +8,7 @@ const defaultWidth = 48;
 export interface SpannerPluginOptions {
   factory: SpannerFactory;
   width?: number;
+  mountPoint?: HTMLElement;
 }
 
 export class SpannerPlugin implements IPlugin {
@@ -16,13 +17,16 @@ export class SpannerPlugin implements IPlugin {
 
   constructor(readonly options: SpannerPluginOptions) {}
 
+  get container(): HTMLElement | undefined {
+    return this.options.mountPoint ?? this.deletage?.editor.container;
+  }
+
   onInitialized(context: PluginContext): void {
     const { editor, dispose$ } = context;
-    this.deletage = new SpannerDelegate(
-      editor.controller,
-      this.options.factory
-    );
-    this.deletage.mount(editor.container);
+    this.deletage = new SpannerDelegate(editor, this.options.factory);
+
+    const container = this.options.mountPoint ?? editor.container;
+    this.deletage.mount(container);
 
     editor.placeSpannerAt$
       .pipe(takeUntil(dispose$))
@@ -30,7 +34,7 @@ export class SpannerPlugin implements IPlugin {
         this.placeSpannerAt(editor, blockContainer, node);
       });
 
-    fromEvent(editor.container, "mouseleave")
+    fromEvent(container, "mouseleave")
       .pipe(takeUntil(dispose$))
       .subscribe(() => {
         this.deletage?.hide();
@@ -54,7 +58,7 @@ export class SpannerPlugin implements IPlugin {
     if (!block) {
       return;
     }
-    let { x, y } = this.getRelativeOffsetByDom(editor, blockContainer);
+    let { x, y } = this.getRelativeOffsetByDom(blockContainer);
     const offset = block.getSpannerOffset();
     x += offset.x;
     y += offset.y;
@@ -71,11 +75,12 @@ export class SpannerPlugin implements IPlugin {
   /**
    * Get the element's relative position to the container of the editor.
    */
-  protected getRelativeOffsetByDom(
-    editor: Editor,
-    element: HTMLElement
-  ): Position {
-    const containerRect = editor.container.getBoundingClientRect();
+  protected getRelativeOffsetByDom(element: HTMLElement): Position {
+    const container = this.container;
+    if (!container) {
+      return { x: 0, y: 0 };
+    }
+    const containerRect = container.getBoundingClientRect();
     const blockRect = element.getBoundingClientRect();
     return {
       x: blockRect.x - containerRect.x,