refactor: bannar -> spanner

packages/blocky-core/css/blocky-core.css

@@ -19,7 +19,7 @@
   justify-content: center;
 }
 
-.blocky-editor-banner-delegate {
+.blocky-editor-spanner-delegate {
   position: absolute;
 }
 

packages/blocky-core/src/block/basic.ts

@@ -173,7 +173,7 @@ export class Block implements IDisposable {
    * Return the offset of the coordinate of the banner
    * relative to the top-right conner of the block.
    */
-  getBannerOffset(): Position {
+  getSpannerOffset(): Position {
     return { x: 0, y: 0 };
   }
 

packages/blocky-core/src/block/textBlock.ts

@@ -221,7 +221,7 @@ export class TextBlock extends Block {
     return 18;
   }
 
-  override getBannerOffset(): Position {
+  override getSpannerOffset(): Position {
     const textType = this.getTextType();
     const precedence = textTypePrecedence(textType);
 

packages/blocky-core/src/index.ts

@@ -2,7 +2,10 @@ export * from "./view/editor";
 export * from "./view/controller";
 export * from "./block/basic";
 export { makeDefaultIdGenerator, type IdGenerator } from "./helper/idHelper";
-export { type BannerFactory, type BannerInstance } from "./view/bannerDelegate";
+export {
+  type SpannerFactory,
+  type SpannerInstance,
+} from "./view/spannerDelegate";
 export { type ToolbarFactory, type Toolbar } from "./view/toolbarDelegate";
 export { FollowerWidget } from "./view/followerWidget";
 export {

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

@@ -21,7 +21,7 @@ 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 BannerFactory } from "@pkg/view/bannerDelegate";
+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";
@@ -70,7 +70,7 @@ export interface IEditorControllerOptions {
   blockRegistry?: BlockRegistry;
   embedRegistry?: EmbedRegistry;
   idGenerator?: IdGenerator;
-  bannerFactory?: BannerFactory;
+  spannerFactory?: SpannerFactory;
   toolbarFactory?: ToolbarFactory;
 
   /**

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

@@ -44,7 +44,7 @@ import { SpanRegistry } from "@pkg/registry/spanRegistry";
 import { BlockRegistry } from "@pkg/registry/blockRegistry";
 import { type IdGenerator, makeDefaultIdGenerator } from "@pkg/helper/idHelper";
 import { textToDeltaWithURL } from "@pkg/helper/urlHelper";
-import { BannerDelegate, type BannerFactory } from "./bannerDelegate";
+import { SpannerDelegate, type SpannerFactory } from "./spannerDelegate";
 import { ToolbarDelegate, type ToolbarFactory } from "./toolbarDelegate";
 import { TextBlock } from "@pkg/block/textBlock";
 import { UndoManager } from "@pkg/model/undoManager";
@@ -80,7 +80,7 @@ export interface IEditorOptions {
   registry: EditorRegistry;
   container: HTMLDivElement;
   idGenerator?: IdGenerator;
-  bannerFactory?: BannerFactory;
+  spannerFactory?: SpannerFactory;
   toolbarFactory?: ToolbarFactory;
   padding?: Partial<Padding>;
   collaborativeCursorFactory?: CollaborativeCursorFactory;
@@ -147,7 +147,7 @@ export class Editor {
 
   readonly onEveryBlock: Subject<Block> = new Subject();
 
-  readonly bannerDelegate: BannerDelegate;
+  readonly spannerDelegate?: SpannerDelegate;
   readonly toolbarDelegate: ToolbarDelegate;
   idGenerator: IdGenerator;
 
@@ -180,7 +180,7 @@ export class Editor {
         block: controller.blockRegistry,
       },
       state: controller.state,
-      bannerFactory: controller.options?.bannerFactory,
+      spannerFactory: controller.options?.spannerFactory,
       toolbarFactory: controller.options?.toolbarFactory,
       padding: controller.options?.padding,
       collaborativeCursorFactory:
@@ -196,7 +196,7 @@ export class Editor {
       state,
       registry,
       idGenerator,
-      bannerFactory,
+      spannerFactory: bannerFactory,
       toolbarFactory,
       padding,
       collaborativeCursorFactory,
@@ -216,9 +216,11 @@ export class Editor {
     );
     this.collaborativeCursorManager.mount(this.#container);
 
-    this.bannerDelegate = new BannerDelegate(controller, bannerFactory);
-    this.bannerDelegate.mount(this.#container);
-    this.disposables.push(this.bannerDelegate);
+    if (bannerFactory) {
+      this.spannerDelegate = new SpannerDelegate(controller, bannerFactory);
+      this.spannerDelegate.mount(this.#container);
+      this.disposables.push(this.spannerDelegate);
+    }
 
     this.toolbarDelegate = new ToolbarDelegate({
       controller,
@@ -233,7 +235,7 @@ export class Editor {
       .pipe(takeUntil(this.dispose$))
       .subscribe(this.handleCursorStateChanged);
 
-    this.disposables.push($on(container, "mouseleave", this.#hideBanner));
+    this.disposables.push($on(container, "mouseleave", this.#hideSpanner));
 
     this.registry.plugin.emitInitPlugins(this);
 
@@ -783,23 +785,26 @@ export class Editor {
     return this.#searchContext;
   }
 
-  placeBannerAt(blockContainer: HTMLElement, node: BlockDataElement) {
+  placeSpannerAt(blockContainer: HTMLElement, node: BlockDataElement) {
+    if (!this.spannerDelegate) {
+      return;
+    }
     const block = this.state.blocks.get(node.id);
     if (!block) {
       return;
     }
 
     let { x, y } = this.#getRelativeOffsetByDom(blockContainer);
 
-    const offset = block.getBannerOffset();
+    const offset = block.getSpannerOffset();
     x += offset.x;
     y += offset.y;
 
-    x -= this.bannerDelegate.width;
+    x -= this.spannerDelegate.width;
 
-    this.bannerDelegate.focusedNode = node;
-    this.bannerDelegate.show();
-    this.bannerDelegate.setPosition(x, y);
+    this.spannerDelegate.focusedNode = node;
+    this.spannerDelegate.show();
+    this.spannerDelegate.setPosition(x, y);
   }
 
   /**
@@ -832,8 +837,8 @@ export class Editor {
     };
   }
 
-  #hideBanner = () => {
-    this.bannerDelegate.hide();
+  #hideSpanner = () => {
+    this.spannerDelegate?.hide();
   };
 
   #handleCompositionStart = () => {

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

@@ -266,7 +266,7 @@ export class DocRenderer {
     editor.state.setDom(blockNode.id, blockContainer);
     blockContainer.setAttribute("data-type", blockDef.name);
     blockContainer.addEventListener("mouseenter", () => {
-      editor.placeBannerAt(blockContainer, blockNode);
+      editor.placeSpannerAt(blockContainer, blockNode);
     });
 
     const block = editor.state.blocks.get(blockNode.id);

packages/blocky-core/src/view/bannerDelegate.ts → packages/blocky-core/src/view/spannerDelegate.ts

@@ -3,17 +3,17 @@ import type { EditorController } from "@pkg/view/controller";
 import type { BlockDataElement } from "blocky-data";
 import { UIDelegate } from "./uiDelegate";
 
-export interface BannerInstance extends IDisposable {
+export interface SpannerInstance extends IDisposable {
   onFocusedNodeChanged?(focusedNode: BlockDataElement | undefined): void;
 }
 
-export type BannerFactory = (
+export type SpannerFactory = (
   dom: HTMLDivElement,
   editorController: EditorController
-) => BannerInstance | undefined;
+) => SpannerInstance | undefined;
 
-export class BannerDelegate extends UIDelegate {
-  #instance: BannerInstance | undefined;
+export class SpannerDelegate extends UIDelegate {
+  #instance: SpannerInstance | undefined;
   #focusedNode: BlockDataElement | undefined;
 
   get focusedNode(): BlockDataElement | undefined {
@@ -31,30 +31,20 @@ export class BannerDelegate extends UIDelegate {
 
   constructor(
     private editorController: EditorController,
-    private factory?: BannerFactory
+    private factory: SpannerFactory
   ) {
-    super("blocky-editor-banner-delegate blocky-cm-noselect");
+    super("blocky-editor-spanner-delegate blocky-cm-noselect");
   }
 
   override mount(parent: HTMLElement): void {
     super.mount(parent);
 
-    if (this.factory) {
-      this.#instance = this.factory(this.container, this.editorController);
-      if (this.#instance) {
-        this.disposables.push(this.#instance);
-      }
-    } else {
-      this.renderFallback();
+    this.#instance = this.factory(this.container, this.editorController);
+    if (this.#instance) {
+      this.disposables.push(this.#instance);
     }
   }
 
-  renderFallback() {
-    this.container.style.width = "16px";
-    this.container.style.height = "16px";
-    this.container.style.backgroundColor = "grey";
-  }
-
   setPosition(x: number, y: number) {
     this.container.style.top = y + "px";
     this.container.style.left = x + "px";

packages/blocky-example/src/app.tsx

@@ -2,9 +2,9 @@ import { Component, createRef, RefObject, useEffect, useState } from "react";
 import { EditorController, darkTheme, type IPlugin } from "blocky-core";
 import {
   BlockyEditor,
-  makeReactBanner,
+  makeReactSpanner,
   makeReactToolbar,
-  type BannerRenderProps,
+  type SpannerRenderProps,
 } from "blocky-react";
 import makeStyledTextPlugin from "blocky-core/dist/plugins/styledTextPlugin";
 import makeCodeTextPlugin from "blocky-core/dist/plugins/codeTextPlugin";
@@ -14,7 +14,7 @@ import SearchBox from "@pkg/components/searchBox";
 import { makeImageBlockPlugin } from "./plugins/imageBlock";
 import { makeCommandPanelPlugin } from "./plugins/commandPanel";
 import { makeAtPanelPlugin } from "./plugins/atPanel";
-import BannerMenu from "./bannerMenu";
+import SpannerMenu from "./spannerMenu";
 import ToolbarMenu from "./toolbarMenu";
 import TianShuiWeiImage from "./tianshuiwei.jpg";
 import { ReadMeContent } from "./readme";
@@ -70,9 +70,9 @@ function makeController(
      * Tell the editor how to render the banner.
      * We use a banner written in Preact here.
      */
-    bannerFactory: makeReactBanner(
-      ({ editorController, focusedNode }: BannerRenderProps) => (
-        <BannerMenu
+    spannerFactory: makeReactSpanner(
+      ({ editorController, focusedNode }: SpannerRenderProps) => (
+        <SpannerMenu
           editorController={editorController}
           focusedNode={focusedNode}
         />

packages/blocky-example/src/docs/get-started.md

@@ -34,7 +34,7 @@ You can define how the editor render the toolbar.
 
 ```tsx
 import { EditorController } from "blocky-core";
-import { makeReactBanner, makeReactToolbar } from "blocky-react";
+import { makeReactSpanner, makeReactToolbar } from "blocky-react";
 import BannerMenu from "./bannerMenu";
 import ToolbarMenu from "./toolbarMenu";
 import makeStyledTextPlugin from "blocky-core/dist/plugins/styledTextPlugin";
@@ -60,7 +60,7 @@ function makeController(): EditorController {
      * Tell the editor how to render the banner.
      * We use a banner written in React here.
      */
-    bannerFactory: makeReactBanner((editorController: EditorController) => (
+    bannerFactory: makeReactSpanner((editorController: EditorController) => (
       <BannerMenu editorController={editorController} />
     )),
     /**

packages/blocky-example/src/noTitle/noTitle.tsx

@@ -2,9 +2,9 @@ import { Component, ReactNode, createRef } from "react";
 import Sidebar from "@pkg/components/sidebar";
 import {
   BlockyEditor,
-  makeReactBanner,
+  makeReactSpanner,
   makeReactToolbar,
-  type BannerRenderProps,
+  type SpannerRenderProps,
 } from "blocky-react";
 import { EditorController, IPlugin } from "blocky-core";
 import makeStyledTextPlugin from "blocky-core/dist/plugins/styledTextPlugin";
@@ -14,7 +14,7 @@ import makeHeadingsPlugin from "blocky-core/dist/plugins/headingsPlugin";
 import { makeImageBlockPlugin } from "@pkg/plugins/imageBlock";
 import { makeCommandPanelPlugin } from "@pkg/plugins/commandPanel";
 import { makeAtPanelPlugin } from "@pkg/plugins/atPanel";
-import BannerMenu from "@pkg/bannerMenu";
+import SpannerMenu from "@pkg/spannerMenu";
 import ToolbarMenu from "@pkg/toolbarMenu";
 import { timer, Subject, takeUntil } from "rxjs";
 
@@ -39,18 +39,6 @@ function makeController(
      * Define the plugins to implement customize features.
      */
     plugins: makeEditorPlugins(),
-    /**
-     * Tell the editor how to render the banner.
-     * We use a banner written in Preact here.
-     */
-    bannerFactory: makeReactBanner(
-      ({ editorController, focusedNode }: BannerRenderProps) => (
-        <BannerMenu
-          editorController={editorController}
-          focusedNode={focusedNode}
-        />
-      )
-    ),
     /**
      * Tell the editor how to render the banner.
      * We use a toolbar written in Preact here.

packages/blocky-example/src/bannerMenu.tsx → packages/blocky-example/src/spannerMenu.tsx

@@ -5,33 +5,33 @@ import Dropdown from "@pkg/components/dropdown";
 import { Menu, MenuItem, Divider } from "@pkg/components/menu";
 import { ImageBlockName } from "@pkg/plugins/imageBlock";
 import { Subject, takeUntil } from "rxjs";
-import "./bannerMenu.scss";
+import "./spannerMenu.scss";
 
-export interface BannerProps {
+export interface SpannerProps {
   editorController: EditorController;
   focusedNode?: BlockDataElement;
 }
 
-interface BannerState {
+interface SpannerState {
   showDropdown: boolean;
   menuX: number;
   menuY: number;
   showDelete: boolean;
 }
 
-const BannerIcon = `
+const SpannerIcon = `
 <svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M16 17L48 17" stroke="#CAC4C4" stroke-width="6" stroke-linecap="round"/>
 <path d="M16 32L48 32" stroke="#CAC4C4" stroke-width="6" stroke-linecap="round"/>
 <path d="M16 47L48 47" stroke="#CAC4C4" stroke-width="6" stroke-linecap="round"/>
 </svg>
 `;
 
-class BannerMenu extends Component<BannerProps, BannerState> {
+class SpannerMenu extends Component<SpannerProps, SpannerState> {
   private bannerRef: RefObject<HTMLDivElement> = createRef();
   private dispose$ = new Subject<void>();
 
-  constructor(props: BannerProps) {
+  constructor(props: SpannerProps) {
     super(props);
     this.state = {
       showDropdown: false,
@@ -53,7 +53,7 @@ class BannerMenu extends Component<BannerProps, BannerState> {
 
     this.handleBlocksChanged();
 
-    this.bannerRef.current!.innerHTML = BannerIcon;
+    this.bannerRef.current!.innerHTML = SpannerIcon;
   }
 
   override componentWillUnmount() {
@@ -175,4 +175,4 @@ class BannerMenu extends Component<BannerProps, BannerState> {
   }
 }
 
-export default BannerMenu;
+export default SpannerMenu;

packages/blocky-react/src/index.ts

@@ -8,8 +8,8 @@ export * from "./reactBlock";
 export * from "./reactFollowerWidget";
 export * from "./blockActiveDetector";
 export {
-  makeReactBanner,
-  type RenderProps as BannerRenderProps,
-} from "./banner";
+  makeReactSpanner,
+  type RenderProps as SpannerRenderProps,
+} from "./spanner";
 export { makeReactToolbar } from "./toolbar";
 export { DefaultBlockOutline, type DefaultBlockOutlineProps };