Refactor/blocks 2

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

@@ -18,6 +18,7 @@
 .blocky-editor-spanner-delegate {
   position: absolute;
   transition: top 0.1s linear;
+  z-index: 8;
 }
 
 .blocky-editor-toolbar-delegate {

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

@@ -25,12 +25,6 @@ export class ContentBlock extends Block {
 
   blockDidMount(e: BlockDidMountEvent): void {
     this.container = e.element;
-    fromEvent<MouseEvent>(this.container, "mouseenter").subscribe(
-      this.#mouseEnter
-    );
-    fromEvent<MouseEvent>(this.container, "mouseleave").subscribe(
-      this.#mouseLeave
-    );
   }
 
   get dragOver$(): Observable<DragEvent> {
@@ -82,6 +76,12 @@ export class ContentBlock extends Block {
       this.#dragOver
     );
     fromEvent<DragEvent>(contentContainer, "drop").subscribe(this.#drop);
+    fromEvent<MouseEvent>(contentContainer, "mouseenter").subscribe(
+      this.#mouseEnter
+    );
+    fromEvent<MouseEvent>(contentContainer, "mouseleave").subscribe(
+      this.#mouseLeave
+    );
   }
 
   protected createDragOverBar(isTop: boolean): HTMLElement {

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

@@ -13,6 +13,7 @@ import {
   fromEvent,
   BehaviorSubject,
   timer,
+  filter,
 } from "rxjs";
 import { debounce, isUndefined, isString, isNumber } from "lodash-es";
 import { DocRenderer, RenderFlag, RenderOption } from "@pkg/view/renderer";
@@ -128,6 +129,8 @@ export class TextInputEvent {
   }
 }
 
+const spannerIgnoreBlockTypes = new Set([TitleBlock.Name]);
+
 /**
  * The internal view layer object of the editor.
  * It's not recommended to manipulate this class by the user.
@@ -551,6 +554,26 @@ export class Editor {
             }
           });
 
+        fromEvent<MouseEvent>(this.#container, "mousemove")
+          .pipe(
+            takeUntil(this.dispose$),
+            filter((e: MouseEvent) => {
+              // find if ancestors container class 'blocky-editor-block'
+
+              let ptr: HTMLElement | null = e.target as HTMLElement;
+
+              while (ptr) {
+                if (ptr.classList.contains("blocky-editor-block")) {
+                  return false;
+                }
+                ptr = ptr.parentElement;
+              }
+
+              return true;
+            })
+          )
+          .subscribe(this.handleBlocksContainerMouseMove.bind(this));
+
         fromEvent(newDom, "input")
           .pipe(takeUntil(this.dispose$))
           .subscribe(() => {
@@ -584,7 +607,7 @@ export class Editor {
         if (scrollContainer) {
           const scroll$ = fromEvent(scrollContainer, "scroll");
           scroll$.pipe(takeUntil(this.dispose$)).subscribe(() => {
-            this.debouncedCollectBlockSize();
+            this.#resetBlockSizeArray();
           });
         }
       }
@@ -594,7 +617,7 @@ export class Editor {
       } else {
         this.#handleSelectionChanged(CursorStateUpdateReason.contentChanged);
       }
-      this.#afterRender();
+      this.#delayResetBlockRects();
     } catch (err) {
       console.error(err);
       this.controller.options?.onError?.(err);
@@ -604,36 +627,53 @@ export class Editor {
     this.controller.__emitNextTicks();
   }
 
-  debouncedCollectBlockSize = debounce(() => {
-    this.#collectBlocksSize();
-  }, 200);
+  #resetBlockSizeArray() {
+    this.blockSizes = null;
+  }
 
-  #afterRender() {
+  #delayResetBlockRects() {
     requestIdleCallback(() => {
-      this.#collectBlocksSize();
+      this.#resetBlockSizeArray();
     });
   }
 
-  blockSizes: BlockSizeInfo[] = [];
+  blockSizes: BlockSizeInfo[] | null = null;
+
+  #collectBlocksSize(): BlockSizeInfo[] {
+    if (Array.isArray(this.blockSizes)) {
+      return this.blockSizes;
+    }
 
-  #collectBlocksSize() {
-    this.blockSizes.length = 0;
+    const newArray: BlockSizeInfo[] = [];
 
+    const innerHeight = window.innerHeight;
     const blocks = this.state.blocks.keys();
     for (const blockId of blocks) {
+      const block = this.state.blocks.get(blockId);
+      if (spannerIgnoreBlockTypes.has(block?.elementData.t ?? "")) {
+        continue;
+      }
       const blockContainer = this.state.domMap.get(blockId);
       if (!blockContainer) {
         continue;
       }
       if (!(blockContainer instanceof HTMLElement)) {
-        return;
+        break;
       }
       const rect = blockContainer.getBoundingClientRect();
-      this.blockSizes.push({
+      // rect is out of the view
+      // ignore it
+      if (rect.bottom < 0 || rect.top > innerHeight) {
+        continue;
+      }
+      newArray.push({
         id: blockId,
         rect,
       });
     }
+
+    this.blockSizes = newArray;
+    return newArray;
   }
 
   #handleEditorBlur = () => {
@@ -1279,6 +1319,7 @@ export class Editor {
 
     if (!changeset.needsRender) {
       this.controller.__emitNextTicks();
+      this.#delayResetBlockRects();
     }
   };
 
@@ -1855,7 +1896,8 @@ export class Editor {
 
   handleBlocksContainerMouseMove(e: MouseEvent) {
     const y = e.clientY;
-    for (const block of this.blockSizes) {
+    const blockSizes = this.#collectBlocksSize();
+    for (const block of blockSizes) {
       if (block.rect.top <= y && block.rect.bottom >= y) {
         const blockContainer = this.state.domMap.get(block.id) as HTMLElement;
         const blockNode = blockContainer?._mgNode as BlockDataElement;

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

@@ -12,7 +12,6 @@ import {
 } from "@pkg/data";
 import type { Editor } from "@pkg/view/editor";
 import { TextBlock } from "@pkg/block/textBlock";
-import { fromEvent, takeUntil, filter } from "rxjs";
 
 function ensureChild<K extends keyof HTMLElementTagNameMap>(
   dom: HTMLElement,
@@ -191,16 +190,6 @@ export class DocRenderer {
       }
     );
 
-    const mousemove$ = fromEvent<MouseEvent>(blocksContainer, "mousemove");
-    mousemove$
-      .pipe(
-        takeUntil(this.editor.dispose$),
-        filter((e) => e.target === blocksContainer)
-      )
-      .subscribe((e: MouseEvent) => {
-        this.editor.handleBlocksContainerMouseMove(e);
-      });
-
     this.renderBlocks(
       option,
       blocksContainer,

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

@@ -13,6 +13,7 @@ export type ToolbarFactory = (
 ) => Toolbar | undefined;
 
 const DebounceDelay = 250;
+const toolbarYOffset = -24;
 
 export interface ToolbarDelegateInitOptions {
   controller: EditorController;
@@ -35,7 +36,7 @@ export class ToolbarDelegate extends UIDelegate {
   }
 
   get offsetY(): number {
-    return this.#toolbar?.yOffset ?? -16;
+    return this.#toolbar?.yOffset ?? toolbarYOffset;
   }
 
   override mount(parent: HTMLElement): void {

packages/blocky-example/app/app.tsx

@@ -8,13 +8,14 @@ import {
   makeReactToolbar,
   makeImageBlockPlugin,
   type SpannerRenderProps,
+  DefaultToolbarMenu,
 } from "blocky-react";
 import SearchBox from "@pkg/components/searchBox";
 import ImagePlaceholder from "@pkg/components/imagePlaceholder";
 import { makeCommandPanelPlugin } from "./plugins/commandPanel";
 import { makeAtPanelPlugin } from "./plugins/atPanel";
 import SpannerMenu from "./spannerMenu";
-import ToolbarMenu from "./toolbarMenu";
+// import ToolbarMenu from "./toolbarMenu";
 import TianShuiWeiImage from "./tianshuiwei.jpg";
 import Image from "next/image";
 import { blockyExampleFont, Theme } from "./themeSwitch";
@@ -73,7 +74,7 @@ function makeController(userId: string, title: string): EditorController {
      * We use a toolbar written in Preact here.
      */
     toolbarFactory: makeReactToolbar((editorController: EditorController) => {
-      return <ToolbarMenu editorController={editorController} />;
+      return <DefaultToolbarMenu editorController={editorController} />;
     }),
 
     spellcheck: false,

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

@@ -4,12 +4,12 @@ import {
   makeReactToolbar,
   makeImageBlockPlugin,
   useBlockyController,
+  DefaultToolbarMenu,
 } from "blocky-react";
 import { EditorController, IPlugin } from "blocky-core";
 import ImagePlaceholder from "@pkg/components/imagePlaceholder";
 import { makeCommandPanelPlugin } from "@pkg/app/plugins/commandPanel";
 import { makeAtPanelPlugin } from "@pkg/app/plugins/atPanel";
-import ToolbarMenu from "@pkg/app/toolbarMenu";
 
 function makeEditorPlugins(): IPlugin[] {
   return [
@@ -32,7 +32,7 @@ function makeController(userId: string): EditorController {
      * We use a toolbar written in Preact here.
      */
     toolbarFactory: makeReactToolbar((editorController: EditorController) => {
-      return <ToolbarMenu editorController={editorController} />;
+      return <DefaultToolbarMenu editorController={editorController} />;
     }),
 
     spellcheck: false,