fix: theme of blocky editor

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

@@ -3,7 +3,7 @@ import { take, takeUntil, fromEvent } from "rxjs";
 import { SpannerDelegate, SpannerFactory } from "./spannerDelegate";
 import { type Position } from "blocky-common/es";
 
-const defaultWidth = 48;
+const defaultWidth = 28;
 
 export interface SpannerPluginOptions {
   factory: SpannerFactory;

packages/blocky-example/app/app.tsx

@@ -1,25 +1,19 @@
 "use client";
 
-import { Component, RefObject, useEffect, useRef, useState } from "react";
+import { Component, useEffect, useRef, useState } from "react";
+import { EditorController, type IPlugin, SpannerPlugin } from "blocky-core";
 import {
-  EditorController,
-  darkTheme,
-  type IPlugin,
-  SpannerPlugin,
-} from "blocky-core";
-import {
-  BlockyEditor,
   ImageBlockPlugin,
   makeDefaultReactToolbar,
   makeDefaultReactSpanner,
 } from "blocky-react";
 import SearchBox from "@pkg/components/searchBox";
 import ImagePlaceholder from "@pkg/components/imagePlaceholder";
+import BlockyEditorWithTheme from "@pkg/components/editorWithTheme";
 import { makeCommandPanelPlugin } from "./plugins/commandPanel";
 import { makeAtPanelPlugin } from "./plugins/atPanel";
 import TianShuiWeiImage from "./tianshuiwei.jpg";
 import Image from "next/image";
-import { blockyExampleFont, Theme } from "./themeSwitch";
 import { isHotkey } from "is-hotkey";
 import { Subject, takeUntil } from "rxjs";
 import "blocky-core/css/blocky-core.css";
@@ -162,38 +156,6 @@ class App extends Component<AppProps> {
   }
 }
 
-interface BlockyEditorWithThemeProps {
-  controller: EditorController;
-  ignoreInitEmpty?: boolean;
-  autoFocus?: boolean;
-  darkMode?: boolean;
-  scrollContainer?: RefObject<HTMLElement>;
-}
-
-function BlockyEditorWithTheme(props: BlockyEditorWithThemeProps) {
-  const { darkMode, controller, scrollContainer } = props;
-  useEffect(() => {
-    if (darkMode) {
-      controller.themeData = {
-        ...darkTheme,
-        font: blockyExampleFont,
-      };
-    } else {
-      controller.themeData = {
-        font: blockyExampleFont,
-      };
-    }
-  }, [darkMode]);
-  return (
-    <BlockyEditor
-      controller={props.controller}
-      autoFocus={props.autoFocus}
-      ignoreInitEmpty={props.ignoreInitEmpty}
-      scrollContainer={scrollContainer}
-    />
-  );
-}
-
 interface BlockyEditorWithSearchBoxAndTitleProps {
   className: string;
   controller: EditorController;
@@ -235,16 +197,11 @@ function BlockyEditorWithSearchBoxAndTitle(
             }}
           />
         </div>
-        <Theme.Consumer>
-          {(options) => (
-            <BlockyEditorWithTheme
-              controller={controller}
-              darkMode={options.darkMode}
-              scrollContainer={scrollContainer}
-              ignoreInitEmpty
-            />
-          )}
-        </Theme.Consumer>
+        <BlockyEditorWithTheme
+          controller={controller}
+          scrollContainer={scrollContainer}
+          ignoreInitEmpty
+        />
       </div>
     </div>
   );

packages/blocky-example/app/loro/loroExample.tsx

@@ -1,6 +1,5 @@
 import { useRef } from "react";
 import {
-  BlockyEditor,
   makeReactToolbar,
   ImageBlockPlugin,
   useBlockyController,
@@ -18,6 +17,7 @@ import {
   TextType,
   bky,
 } from "blocky-core";
+import BlockyEditorWithTheme from "@pkg/components/editorWithTheme";
 import ImagePlaceholder from "@pkg/components/imagePlaceholder";
 import { makeCommandPanelPlugin } from "@pkg/app/plugins/commandPanel";
 import { makeAtPanelPlugin } from "@pkg/app/plugins/atPanel";
@@ -256,7 +256,7 @@ function LoroExample() {
 
   return (
     <div className={styles.editorContainer} ref={containerRef}>
-      <BlockyEditor
+      <BlockyEditorWithTheme
         controller={controller}
         scrollContainer={containerRef}
         autoFocus

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

@@ -1,6 +1,5 @@
 import { useRef } from "react";
 import {
-  BlockyEditor,
   makeReactToolbar,
   ImageBlockPlugin,
   useBlockyController,
@@ -10,6 +9,7 @@ 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 BlockyEditorWithTheme from "@pkg/components/editorWithTheme";
 
 function makeEditorPlugins(): IPlugin[] {
   return [
@@ -48,7 +48,7 @@ function NoTitleEditor() {
 
   return (
     <div ref={containerRef} style={{ width: "100%", display: "flex" }}>
-      <BlockyEditor
+      <BlockyEditorWithTheme
         controller={controller}
         scrollContainer={containerRef}
         autoFocus

packages/blocky-example/components/editorWithTheme.tsx

@@ -0,0 +1,42 @@
+import { useEffect, RefObject, useContext } from "react";
+import { EditorController, darkTheme } from "blocky-core";
+import { BlockyEditor } from "blocky-react";
+import { Theme, blockyExampleFont } from "@pkg/app/themeSwitch";
+
+interface BlockyEditorWithThemeProps {
+  controller: EditorController | null;
+  ignoreInitEmpty?: boolean;
+  autoFocus?: boolean;
+  scrollContainer?: RefObject<HTMLElement>;
+}
+
+function BlockyEditorWithTheme(props: BlockyEditorWithThemeProps) {
+  const { controller, scrollContainer } = props;
+  const theme = useContext(Theme);
+  const darkMode = theme.darkMode;
+  useEffect(() => {
+    if (!controller) {
+      return;
+    }
+    if (darkMode) {
+      controller.themeData = {
+        ...darkTheme,
+        font: blockyExampleFont,
+      };
+    } else {
+      controller.themeData = {
+        font: blockyExampleFont,
+      };
+    }
+  }, [controller, darkMode]);
+  return (
+    <BlockyEditor
+      controller={props.controller}
+      autoFocus={props.autoFocus}
+      ignoreInitEmpty={props.ignoreInitEmpty}
+      scrollContainer={scrollContainer}
+    />
+  );
+}
+
+export default BlockyEditorWithTheme;