Feat/default spannar menu (#92)

* chore: adjust toolbar size

* feat: adjust grab style

* feat: spannar style

* refactor: spanner menu

* feat: add transition

* feat: smart dropdown

* feat: add default spanner menu

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

@@ -24,6 +24,9 @@
 .blocky-editor-toolbar-delegate {
   position: absolute;
   z-index: 11;
+  transition-property: opacity, transform;
+  transition-duration: 200ms;
+  transition-timing-function: ease;
 }
 
 /* https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting */

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

@@ -1894,6 +1894,10 @@ export class Editor {
     return undefined;
   }
 
+  get fontFamily(): string {
+    return this.themeData?.font ?? blockyDefaultFonts;
+  }
+
   handleBlocksContainerMouseMove(e: MouseEvent) {
     const y = e.clientY;
     const blockSizes = this.#collectBlocksSize();

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

@@ -58,6 +58,7 @@ export class ToolbarDelegate extends UIDelegate {
       this.#debounced = undefined;
     }
     super.hide();
+    this.container.style.opacity = "0";
   }
 
   override show() {
@@ -77,6 +78,7 @@ export class ToolbarDelegate extends UIDelegate {
     }
     this.#debounced = undefined;
     this.container.style.display = "";
+    this.container.style.opacity = "1";
     this.shown = true;
     if (this.shown) {
       this.container.style.top = this.#y + "px";

packages/blocky-example/app/app.tsx

@@ -9,13 +9,12 @@ import {
   makeImageBlockPlugin,
   type SpannerRenderProps,
   DefaultToolbarMenu,
+  DefaultSpannerMenu,
 } 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 TianShuiWeiImage from "./tianshuiwei.jpg";
 import Image from "next/image";
 import { blockyExampleFont, Theme } from "./themeSwitch";
@@ -63,7 +62,7 @@ function makeController(userId: string, title: string): EditorController {
      */
     spannerFactory: makeReactSpanner(
       ({ editorController, focusedNode }: SpannerRenderProps) => (
-        <SpannerMenu
+        <DefaultSpannerMenu
           editorController={editorController}
           focusedNode={focusedNode}
         />