feat: config mountpoint

vincentdchan · Dec 4, 2023 · 1c4b407 · 1c4b407
1 parent c5a407e
commit 1c4b407
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 22 deletions.
diff --git 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
@@ -8,6 +8,7 @@ const defaultWidth = 48;
 export interface SpannerPluginOptions {
   factory: SpannerFactory;
   width?: number;
+  mountPoint?: HTMLElement;
 }
 
 export class SpannerPlugin implements IPlugin {
@@ -16,21 +17,24 @@ 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$))
       .subscribe(({ blockContainer, node }) => {
         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,