feat: make spanner plugin

packages/blocky-core/src/index.ts

@@ -7,11 +7,6 @@ export * from "./block/basic";
 export { ContentBlock } from "./block/contentBlock";
 export { CustomBlock } from "./block/customBlock";
 export { makeDefaultIdGenerator, type IdGenerator } from "./helper/idHelper";
-export {
-  type SpannerFactory,
-  type SpannerInstance,
-  SpannerDelegate,
-} from "./view/spannerDelegate";
 export { type ToolbarFactory, type Toolbar } from "./view/toolbarDelegate";
 export { FollowerWidget } from "./view/followerWidget";
 export {
@@ -25,6 +20,7 @@ export {
   PluginRegistry,
   PluginContext,
 } from "./registry/pluginRegistry";
+export * from "./plugins/spannerPlugin";
 export { BlockRegistry } from "./registry/blockRegistry";
 export { type SpanStyle, SpanRegistry } from "./registry/spanRegistry";
 export {

packages/blocky-core/src/plugins/spannerPlugin/index.ts

@@ -0,0 +1,13 @@
+import { SpannerPlugin } from "./spannerPlugin";
+import {
+  SpannerDelegate,
+  type SpannerFactory,
+  type SpannerInstance,
+} from "./spannerDelegate";
+
+export {
+  SpannerPlugin,
+  SpannerDelegate,
+  type SpannerFactory,
+  type SpannerInstance,
+};

packages/blocky-core/src/view/spannerDelegate.spec.ts → packages/blocky-core/src/plugins/spannerPlugin/spannerDelegate.spec.ts

@@ -1,7 +1,7 @@
 import { describe, expect, it, vi } from "vitest";
 import { SpannerDelegate, SpannerInstance } from "./spannerDelegate";
-import { EditorController } from "./controller";
-import { BlockDataElement } from "..";
+import { EditorController } from "../../view/controller";
+import { BlockDataElement } from "../..";
 
 describe("SpannerDelegate", () => {
   it("focusedNode", () => {

packages/blocky-core/src/view/spannerDelegate.ts → packages/blocky-core/src/plugins/spannerPlugin/spannerDelegate.ts

@@ -1,7 +1,7 @@
 import { type IDisposable } from "blocky-common/es";
 import type { EditorController } from "@pkg/view/controller";
 import type { BlockDataElement } from "@pkg/data";
-import { UIDelegate } from "./uiDelegate";
+import { UIDelegate } from "@pkg/view/uiDelegate";
 import { fromEvent, takeUntil } from "rxjs";
 
 export interface SpannerInstance extends IDisposable {

packages/blocky-core/src/plugins/spannerPlugin/spannerPlugin.ts

@@ -0,0 +1,70 @@
+import { BlockDataElement, Editor, IPlugin, PluginContext } from "../..";
+import { take, takeUntil, fromEvent } from "rxjs";
+import { SpannerDelegate, SpannerFactory } from "./spannerDelegate";
+
+export class SpannerPlugin implements IPlugin {
+  deletage: SpannerDelegate | undefined;
+  name = "spanner";
+
+  constructor(public readonly factory: SpannerFactory) {}
+
+  onInitialized(context: PluginContext): void {
+    const { editor, dispose$ } = context;
+    this.deletage = new SpannerDelegate(editor.controller, this.factory);
+    this.deletage.mount(editor.container);
+
+    editor.placeSpannerAt$
+      .pipe(takeUntil(dispose$))
+      .subscribe(({ blockContainer, node }) => {
+        this.placeSpannerAt(editor, blockContainer, node);
+      });
+
+    fromEvent(editor.container, "mouseleave")
+      .pipe(takeUntil(dispose$))
+      .subscribe(() => {
+        this.deletage?.hide();
+      });
+
+    dispose$.pipe(take(1)).subscribe(() => {
+      this.deletage?.dispose();
+      this.deletage = undefined;
+    });
+  }
+
+  protected placeSpannerAt(
+    editor: Editor,
+    blockContainer: HTMLElement,
+    node: BlockDataElement
+  ) {
+    if (!this.deletage) {
+      return;
+    }
+    const block = editor.state.blocks.get(node.id);
+    if (!block) {
+      return;
+    }
+    let { x, y } = this.getRelativeOffsetByDom(editor, blockContainer);
+    const offset = block.getSpannerOffset();
+    x += offset.x;
+    y += offset.y;
+    x -= this.deletage.width;
+    this.deletage.focusedNode = node;
+    this.deletage.show();
+    this.deletage.setPosition(x, y);
+  }
+
+  /**
+   * Get the element's relative position to the container of the editor.
+   */
+  protected getRelativeOffsetByDom(
+    editor: Editor,
+    element: HTMLElement
+  ): { x: number; y: number } {
+    const containerRect = editor.container.getBoundingClientRect();
+    const blockRect = element.getBoundingClientRect();
+    return {
+      x: blockRect.x - containerRect.x,
+      y: blockRect.y - containerRect.y,
+    };
+  }
+}

packages/blocky-core/src/registry/pluginRegistry.spec.ts

@@ -7,20 +7,16 @@ describe("PluginRegistry", () => {
     const plugin: IPlugin = {
       name: "test",
       onInitialized() {},
-      onDispose() {},
     };
     const onInitSpy = vi.spyOn(plugin, "onInitialized");
-    const disposeSpy = vi.spyOn(plugin, "onDispose");
     const pluginRegistry = new PluginRegistry([plugin]);
     const editorController = new EditorController("user");
     const dom = document.createElement("div");
     const editor = Editor.fromController(dom, editorController);
     pluginRegistry.initAllPlugins(editor);
 
     expect(onInitSpy).toBeCalledTimes(1);
-    expect(disposeSpy).toBeCalledTimes(0);
 
     pluginRegistry.unload("test");
-    expect(disposeSpy).toBeCalledTimes(1);
   });
 });

packages/blocky-core/src/registry/pluginRegistry.ts

@@ -44,8 +44,6 @@ export interface IPlugin {
    */
   onInitialized?(context: PluginContext): void;
 
-  onDispose?(context: PluginContext): void;
-
   onPaste?(evt: BlockyPasteEvent): void;
 }
 
@@ -99,7 +97,6 @@ export class PluginRegistry {
     if (context) {
       context.dispose();
       this.contexts.delete(name);
-      plugin.onDispose?.(context);
     }
   }
 

packages/blocky-core/src/view/controller.ts

@@ -21,7 +21,6 @@ import { PluginRegistry, type IPlugin } from "@pkg/registry/pluginRegistry";
 import { SpanRegistry } from "@pkg/registry/spanRegistry";
 import { EmbedRegistry } from "@pkg/registry/embedRegistry";
 import { HTMLConverter } from "@pkg/helper/htmlConverter";
-import { type SpannerFactory } from "@pkg/view/spannerDelegate";
 import { type ToolbarFactory } from "@pkg/view/toolbarDelegate";
 import { type IdGenerator, makeDefaultIdGenerator } from "@pkg/helper/idHelper";
 import { BlockPasteEvent, TryParsePastedDOMEvent } from "@pkg/block/basic";
@@ -89,7 +88,6 @@ export interface IEditorControllerOptions {
   blockRegistry?: BlockRegistry;
   embedRegistry?: EmbedRegistry;
   idGenerator?: IdGenerator;
-  spannerFactory?: SpannerFactory;
   toolbarFactory?: ToolbarFactory;
 
   /**