@os-team-11/editor 0.1.0

package/dist/index.cjs

@@ -0,0 +1,1358 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  BidEditor: () => BidEditor2,
+  BidEditorCore: () => BidEditor,
+  bidSchema: () => bidSchema,
+  bidToEditorElements: () => bidToEditorElements,
+  editorElementsToSections: () => editorElementsToSections,
+  printBid: () => printBid,
+  validateBid: () => validateBid
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/schema/validate.ts
+var import_zod = require("zod");
+var bidSchema = import_zod.z.object({
+  meta: import_zod.z.object({
+    title: import_zod.z.string().min(1),
+    docNo: import_zod.z.string().min(1),
+    tenderer: import_zod.z.string().min(1),
+    version: import_zod.z.string().min(1),
+    generatedAt: import_zod.z.string().min(1),
+    generator: import_zod.z.string().optional()
+  }),
+  page: import_zod.z.object({
+    size: import_zod.z.union([
+      import_zod.z.literal("A4"),
+      import_zod.z.literal("Letter"),
+      import_zod.z.object({
+        width: import_zod.z.number().positive(),
+        height: import_zod.z.number().positive()
+      })
+    ]),
+    margins: import_zod.z.object({
+      top: import_zod.z.number().nonnegative(),
+      right: import_zod.z.number().nonnegative(),
+      bottom: import_zod.z.number().nonnegative(),
+      left: import_zod.z.number().nonnegative()
+    }),
+    header: import_zod.z.object({
+      template: import_zod.z.string(),
+      showOnFirstPage: import_zod.z.boolean()
+    }).optional(),
+    footer: import_zod.z.object({ template: import_zod.z.string() }).optional(),
+    watermark: import_zod.z.object({
+      text: import_zod.z.string(),
+      opacity: import_zod.z.number().min(0).max(1)
+    }).optional()
+  }),
+  sections: import_zod.z.array(
+    import_zod.z.object({
+      id: import_zod.z.string().min(1),
+      title: import_zod.z.string().min(1),
+      level: import_zod.z.union([import_zod.z.literal(1), import_zod.z.literal(2), import_zod.z.literal(3)]),
+      blocks: import_zod.z.array(
+        import_zod.z.discriminatedUnion("type", [
+          import_zod.z.object({
+            type: import_zod.z.literal("heading"),
+            level: import_zod.z.union([import_zod.z.literal(2), import_zod.z.literal(3), import_zod.z.literal(4)]),
+            text: import_zod.z.string().min(1)
+          }),
+          import_zod.z.object({
+            type: import_zod.z.literal("paragraph"),
+            text: import_zod.z.string()
+          }),
+          import_zod.z.object({
+            type: import_zod.z.literal("list"),
+            ordered: import_zod.z.boolean(),
+            items: import_zod.z.array(import_zod.z.string())
+          }),
+          import_zod.z.object({
+            type: import_zod.z.literal("table"),
+            rows: import_zod.z.array(import_zod.z.array(import_zod.z.string())),
+            caption: import_zod.z.string().optional()
+          }),
+          import_zod.z.object({
+            type: import_zod.z.literal("image"),
+            src: import_zod.z.string().min(1),
+            alt: import_zod.z.string().optional(),
+            caption: import_zod.z.string().optional()
+          })
+        ])
+      )
+    })
+  ).min(1)
+});
+function validateBid(input) {
+  return bidSchema.safeParse(input);
+}
+
+// src/adapter/toEditor.ts
+function convertBlock(block, nextListId) {
+  switch (block.type) {
+    case "paragraph":
+      return [{ value: block.text + "\n" }];
+    case "heading":
+      return [
+        {
+          value: block.text,
+          type: "title",
+          level: block.level
+        }
+      ];
+    case "list": {
+      const listId = nextListId();
+      const listType = block.ordered ? "ol" : "ul";
+      return block.items.map((item) => ({
+        value: item + "\n",
+        listType,
+        listId,
+        valueList: [{ value: item }]
+      }));
+    }
+    case "table": {
+      const out = [];
+      if (block.caption) {
+        out.push({ value: block.caption + "\n" });
+      }
+      for (const row of block.rows) {
+        out.push({ value: row.join("	") + "\n" });
+      }
+      return out;
+    }
+    case "image": {
+      const out = [];
+      if (block.caption) {
+        out.push({ value: block.caption + "\n" });
+      }
+      out.push({
+        value: block.src,
+        type: "image",
+        alt: block.alt
+      });
+      return out;
+    }
+  }
+}
+function bidToEditorElements(sections) {
+  const result = [];
+  let listCounter = 0;
+  const nextListId = () => `bid-list-${++listCounter}`;
+  for (const section of sections) {
+    result.push({
+      value: section.title,
+      type: "title",
+      level: section.level
+    });
+    for (const block of section.blocks) {
+      result.push(...convertBlock(block, nextListId));
+    }
+  }
+  return result;
+}
+
+// src/adapter/toBid.ts
+function isTabRow(value) {
+  return value.includes("	") && value.endsWith("\n");
+}
+function editorElementsToSections(elements) {
+  const sections = [];
+  let current = null;
+  let pendingList = null;
+  let pendingTableRows = [];
+  function flushList() {
+    if (current && pendingList && pendingList.items.length > 0) {
+      current.blocks.push({
+        type: "list",
+        ordered: pendingList.ordered,
+        items: pendingList.items
+      });
+    }
+    pendingList = null;
+  }
+  function flushTable() {
+    if (current && pendingTableRows.length > 0) {
+      current.blocks.push({
+        type: "table",
+        rows: pendingTableRows
+      });
+    }
+    pendingTableRows = [];
+  }
+  for (const el of elements) {
+    if (el.type === "title" && el.level === 1) {
+      flushList();
+      flushTable();
+      current = {
+        id: `sec-${sections.length + 1}`,
+        title: el.value,
+        level: 1,
+        blocks: []
+      };
+      sections.push(current);
+      continue;
+    }
+    if (!current) {
+      continue;
+    }
+    if (el.type === "title" && typeof el.level === "number" && el.level >= 2) {
+      flushList();
+      flushTable();
+      current.blocks.push({
+        type: "heading",
+        level: el.level,
+        text: el.value
+      });
+      continue;
+    }
+    if (el.listType && el.listId) {
+      flushTable();
+      if (!pendingList || pendingList.listId !== el.listId) {
+        flushList();
+        pendingList = {
+          ordered: el.listType === "ol",
+          items: [],
+          listId: el.listId
+        };
+      }
+      pendingList.items.push(el.value.replace(/\n$/, ""));
+      continue;
+    }
+    if (el.type === "image") {
+      flushList();
+      flushTable();
+      current.blocks.push({
+        type: "image",
+        src: el.value,
+        alt: el.alt
+      });
+      continue;
+    }
+    if (isTabRow(el.value)) {
+      flushList();
+      const cells = el.value.slice(0, -1).split("	");
+      pendingTableRows.push(cells);
+      continue;
+    }
+    flushList();
+    flushTable();
+    const text = el.value.replace(/\n$/, "");
+    if (text.length > 0) {
+      current.blocks.push({ type: "paragraph", text });
+    }
+  }
+  flushList();
+  flushTable();
+  return sections;
+}
+
+// src/editor/BidEditor.ts
+var import_canvas_editor = __toESM(require("@hufe921/canvas-editor"), 1);
+var BidEditor = class {
+  constructor(container, bid) {
+    this.container = container;
+    this.meta = bid.meta;
+    this.page = bid.page;
+    const elements = bidToEditorElements(bid.sections);
+    this.editor = new import_canvas_editor.default(
+      container,
+      { main: elements }
+    );
+  }
+  load(bid) {
+    this.meta = bid.meta;
+    this.page = bid.page;
+    const elements = bidToEditorElements(bid.sections);
+    const cmd = this.editor.command;
+    if (typeof cmd.executeSelectAll === "function" && typeof cmd.executeBackspace === "function") {
+      cmd.executeSelectAll();
+      cmd.executeBackspace();
+    }
+    cmd.executeInsertElementList(elements);
+  }
+  getBid() {
+    const value = this.editor.command.getValue();
+    const sections = editorElementsToSections(value.data.main || []);
+    return {
+      meta: this.meta,
+      page: this.page,
+      sections
+    };
+  }
+  getCommand() {
+    return this.editor.command;
+  }
+  /** 直接暴露 canvas-editor 的 command，便于 hooks 模式访问 */
+  get command() {
+    return this.editor.command;
+  }
+  destroy() {
+    if (typeof this.editor.destroy === "function") {
+      ;
+      this.editor.destroy();
+    }
+    this.container.innerHTML = "";
+  }
+};
+
+// src/export/pdf.ts
+function printBid() {
+  window.print();
+}
+
+// src/react/BidEditor.tsx
+var import_react10 = require("react");
+
+// src/react/hooks/useBidEditor.ts
+var import_react = require("react");
+function useBidEditor({ containerRef, bid, onChange }) {
+  const editorRef = (0, import_react.useRef)(null);
+  const [, force] = (0, import_react.useState)(0);
+  const onChangeRef = (0, import_react.useRef)(onChange);
+  onChangeRef.current = onChange;
+  (0, import_react.useEffect)(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    editorRef.current = new BidEditor(container, bid);
+    force((x) => x + 1);
+    return () => {
+      editorRef.current?.destroy();
+      editorRef.current = null;
+    };
+  }, [containerRef, bid]);
+  const handle = {
+    getBid: (0, import_react.useCallback)(() => {
+      const e = editorRef.current;
+      if (!e) return bid;
+      const next = e.getBid();
+      onChangeRef.current?.(next);
+      return next;
+    }, [bid]),
+    getCommand: (0, import_react.useCallback)(() => editorRef.current?.getCommand(), []),
+    print: (0, import_react.useCallback)(() => printBid(), []),
+    focus: (0, import_react.useCallback)(() => {
+    }, [])
+  };
+  return { handle, editorRef };
+}
+
+// src/react/hooks/useFormatState.ts
+var import_react2 = require("react");
+var EMPTY = {
+  bold: false,
+  italic: false,
+  underline: false,
+  strikeout: false,
+  superscript: false,
+  subscript: false,
+  align: null,
+  level: null,
+  listType: null,
+  color: null,
+  highlight: null
+};
+function useFormatState(editorRef) {
+  const [state, setState] = (0, import_react2.useState)(EMPTY);
+  (0, import_react2.useEffect)(() => {
+    let readyTimer;
+    let pollTimer;
+    let attempts = 0;
+    const read = () => {
+      const editor = editorRef.current;
+      const getFormat = editor?.command?.getFormat;
+      if (typeof getFormat !== "function") return false;
+      const raw = getFormat.call(editor.command);
+      setState({
+        bold: !!raw.bold,
+        italic: !!raw.italic,
+        underline: !!raw.underline,
+        strikeout: !!raw.strikeout,
+        superscript: !!raw.superscript,
+        subscript: !!raw.subscript,
+        align: raw.rowFlex ?? null,
+        level: raw.level ?? null,
+        listType: raw.listType ?? null,
+        color: raw.color ?? null,
+        highlight: raw.highlight ?? null
+      });
+      return true;
+    };
+    const startPolling = () => {
+      if (read()) {
+        clearInterval(readyTimer);
+        readyTimer = void 0;
+        pollTimer = setInterval(read, 200);
+      } else {
+        attempts++;
+        if (attempts > 100) {
+          clearInterval(readyTimer);
+          readyTimer = void 0;
+        }
+      }
+    };
+    readyTimer = setInterval(startPolling, 100);
+    startPolling();
+    return () => {
+      if (readyTimer) clearInterval(readyTimer);
+      if (pollTimer) clearInterval(pollTimer);
+    };
+  }, [editorRef]);
+  return state;
+}
+
+// src/react/hooks/useBreakpoint.ts
+var import_react3 = require("react");
+var MOBILE_QUERY = "(max-width: 767px)";
+var TABLET_QUERY = "(min-width: 768px) and (max-width: 1023px)";
+function readBreakpoint() {
+  if (typeof window === "undefined" || !window.matchMedia) return "desktop";
+  if (window.matchMedia(MOBILE_QUERY).matches) return "mobile";
+  if (window.matchMedia(TABLET_QUERY).matches) return "tablet";
+  return "desktop";
+}
+function useBreakpoint(forced) {
+  const [bp, setBp] = (0, import_react3.useState)(forced ?? readBreakpoint);
+  (0, import_react3.useEffect)(() => {
+    if (forced) {
+      setBp(forced);
+      return;
+    }
+    if (typeof window === "undefined" || !window.matchMedia) return;
+    const mobileMql = window.matchMedia(MOBILE_QUERY);
+    const tabletMql = window.matchMedia(TABLET_QUERY);
+    const handler = () => setBp(readBreakpoint());
+    mobileMql.addEventListener("change", handler);
+    tabletMql.addEventListener("change", handler);
+    return () => {
+      mobileMql.removeEventListener("change", handler);
+      tabletMql.removeEventListener("change", handler);
+    };
+  }, [forced]);
+  return bp;
+}
+
+// src/react/theme/tokens.ts
+var LIGHT_TOKENS = {
+  colors: {
+    primary: "#2383E2",
+    text: "#37352F",
+    border: "#EDEDED",
+    background: "#FAFAFA",
+    hover: "#F1F1F0",
+    active: "#E8E8E7"
+  },
+  radius: { button: 4, container: 8 },
+  spacing: { button: 6, group: 4 },
+  fontSize: 13,
+  fontFamily: "system-ui, -apple-system, 'Segoe UI', sans-serif"
+};
+var DARK_TOKENS = {
+  ...LIGHT_TOKENS,
+  dark: true,
+  colors: {
+    primary: "#4A9BE8",
+    text: "#E6E6E6",
+    border: "#2A2A2A",
+    background: "#1F1F1F",
+    hover: "#2D2D2D",
+    active: "#3A3A3A"
+  }
+};
+
+// src/react/theme/mergeTheme.ts
+function deepMerge(base, override) {
+  if (!override) return base;
+  const result = { ...base };
+  for (const key of Object.keys(override)) {
+    const ov = override[key];
+    if (ov && typeof ov === "object" && !Array.isArray(ov)) {
+      result[key] = deepMerge(
+        base[key],
+        ov
+      );
+    } else if (ov !== void 0) {
+      result[key] = ov;
+    }
+  }
+  return result;
+}
+function mergeTheme(override) {
+  const base = override?.dark ? DARK_TOKENS : LIGHT_TOKENS;
+  const merged = deepMerge(base, override);
+  if (override?.dark !== void 0) {
+    merged.dark = override.dark;
+  }
+  return merged;
+}
+
+// src/react/theme/cssVars.ts
+function themeToCssVars(theme) {
+  return {
+    "--bke-color-primary": theme.colors.primary,
+    "--bke-color-text": theme.colors.text,
+    "--bke-color-border": theme.colors.border,
+    "--bke-color-bg": theme.colors.background,
+    "--bke-color-hover": theme.colors.hover,
+    "--bke-color-active": theme.colors.active,
+    "--bke-radius-button": `${theme.radius.button}px`,
+    "--bke-radius-container": `${theme.radius.container}px`,
+    "--bke-spacing-button": `${theme.spacing.button}px`,
+    "--bke-spacing-group": `${theme.spacing.group}px`,
+    "--bke-font-size": `${theme.fontSize}px`,
+    "--bke-font-family": theme.fontFamily
+  };
+}
+
+// src/react/Toolbar.tsx
+var import_react9 = require("react");
+
+// src/react/config/buttonCommands.ts
+var DEFAULT_TOOLBAR_GROUPS = [
+  {
+    id: "font",
+    buttons: ["font-family", "font-size"]
+  },
+  {
+    id: "format",
+    buttons: ["bold", "italic", "underline", "strikeout", "superscript", "subscript"]
+  },
+  {
+    id: "color",
+    buttons: ["color", "highlight"]
+  },
+  {
+    id: "layout",
+    buttons: ["align-left", "align-center", "align-right", "align-justify", "line-height"]
+  },
+  {
+    id: "structure",
+    buttons: ["h1", "h2", "h3", "h4", "list-ol", "list-ul", "indent", "outdent"]
+  },
+  {
+    id: "history",
+    buttons: ["undo", "redo", "format-painter", "clear-format"]
+  },
+  {
+    id: "insert",
+    buttons: ["table", "image", "hyperlink", "separator", "page-break", "math", "control", "date"]
+  },
+  {
+    id: "collab",
+    buttons: ["comment"]
+  }
+];
+var ALL_TOOLBAR_BUTTON_IDS = DEFAULT_TOOLBAR_GROUPS.flatMap(
+  (g) => g.buttons.filter((b) => b !== "|")
+);
+var TABLET_COLLAPSE_GROUP_IDS = ["history", "insert", "collab"];
+
+// src/react/config/mergeConfig.ts
+var VALID_BUTTON_SET = new Set(ALL_TOOLBAR_BUTTON_IDS);
+function isValidButton(id) {
+  return VALID_BUTTON_SET.has(id);
+}
+function filterValidItems(items) {
+  return items.filter((item) => item === "|" || isValidButton(item));
+}
+function applyHide(groups, hide) {
+  const hideSet = new Set(hide);
+  return groups.map((g) => ({
+    ...g,
+    buttons: g.buttons.filter((b) => b === "|" || !hideSet.has(b))
+  })).filter((g) => g.buttons.length > 0);
+}
+function mergeToolbarConfig(config) {
+  if (config === false) return [];
+  if (config === true) {
+    return DEFAULT_TOOLBAR_GROUPS.map((g) => ({ ...g, buttons: [...g.buttons] }));
+  }
+  if (Array.isArray(config)) {
+    return [{ id: "custom", buttons: filterValidItems(config) }];
+  }
+  if (config.groups) {
+    return config.groups.map((g) => ({
+      id: g.id,
+      buttons: filterValidItems(g.buttons)
+    }));
+  }
+  if (config.hide) {
+    return applyHide(
+      DEFAULT_TOOLBAR_GROUPS.map((g) => ({ ...g, buttons: [...g.buttons] })),
+      config.hide
+    );
+  }
+  return DEFAULT_TOOLBAR_GROUPS.map((g) => ({ ...g, buttons: [...g.buttons] }));
+}
+
+// src/react/hooks/useCommand.ts
+var import_react4 = require("react");
+var METHOD_MAP = {
+  bold: "executeBold",
+  italic: "executeItalic",
+  underline: "executeUnderline",
+  strikeout: "executeStrikeout",
+  superscript: "executeSuperscript",
+  subscript: "executeSubscript",
+  color: "executeColor",
+  highlight: "executeHighlight",
+  "align-left": "executeRowFlex",
+  "align-center": "executeRowFlex",
+  "align-right": "executeRowFlex",
+  "align-justify": "executeRowFlex",
+  "line-height": "executeRowMargin",
+  h1: "executeTitle",
+  h2: "executeTitle",
+  h3: "executeTitle",
+  h4: "executeTitle",
+  "list-ol": "executeList",
+  "list-ul": "executeList",
+  indent: "executeIndent",
+  outdent: "executeOutdent",
+  undo: "executeUndo",
+  redo: "executeRedo",
+  "format-painter": "executePainter",
+  "clear-format": "executeFormat",
+  table: "executeInsertTable",
+  image: "executeImage",
+  hyperlink: "executeHyperlink",
+  separator: "executeSeparator",
+  "page-break": "executePageBreak",
+  math: "executeInsertElementList",
+  control: "executeInsertControl",
+  date: "executeInsertControl",
+  comment: "executeInsertGroupAnnotation",
+  "font-family": "executeFont",
+  "font-size": "executeSize"
+};
+function useCommand(editorRef) {
+  return {
+    execute: (0, import_react4.useCallback)(
+      (buttonId, ...args) => {
+        const editor = editorRef.current;
+        const method = METHOD_MAP[buttonId];
+        if (!editor?.command || !method) return;
+        const fn = editor.command[method];
+        if (typeof fn !== "function") return;
+        if (buttonId === "align-left" || buttonId === "align-center" || buttonId === "align-right" || buttonId === "align-justify") {
+          const align = buttonId.replace("align-", "");
+          fn.call(editor.command, align);
+          return;
+        }
+        if (buttonId === "h1" || buttonId === "h2" || buttonId === "h3" || buttonId === "h4") {
+          const level = Number(buttonId[1]);
+          fn.call(editor.command, level);
+          return;
+        }
+        if (buttonId === "list-ol") {
+          ;
+          fn.call(editor.command, "ol", "decimal");
+          return;
+        }
+        if (buttonId === "list-ul") {
+          ;
+          fn.call(editor.command, "ul", "disc");
+          return;
+        }
+        if (buttonId === "date") {
+          ;
+          fn.call(editor.command, {
+            type: "control",
+            value: "",
+            control: { type: "date", code: "bid-date", placeholder: "\u9009\u62E9\u65E5\u671F" }
+          });
+          return;
+        }
+        ;
+        fn.apply(editor.command, args);
+      },
+      [editorRef]
+    )
+  };
+}
+
+// src/react/icons.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var B = ({ d }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d }) });
+var ICONS = {
+  "font-family": /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: 12 }, children: "Aa" }),
+  "font-size": /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: 12 }, children: "14" }),
+  bold: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(B, { d: "M6 4h8a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z M6 12h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z" }),
+  italic: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(B, { d: "M19 4h-9 M14 20H5 M15 4L9 20" }),
+  underline: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(B, { d: "M6 3v9a6 6 0 0 0 6 6 6 6 0 0 0 6-6V3 M4 21h16" }),
+  strikeout: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(B, { d: "M16 4H9a3 3 0 0 0-2.83 4 M14 12a3 3 0 0 1 2.83 4H7 M4 12h16" }),
+  superscript: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(B, { d: "M4 19l6-6 6 6 M14 5l4-2 0 4" }),
+  subscript: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(B, { d: "M4 5l6 6 6-6 M14 14l4 4 M18 14v4h-4" }),
+  color: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M4 4h16v12H4z", fill: "currentColor", opacity: "0.2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M4 4h16v12H4z M4 20h16", stroke: "currentColor", strokeWidth: "2", fill: "none" })
+  ] }),
+  highlight: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M9 11l-4 4v4h4l4-4 M14 7l3-3 4 4-3 3-4-4z", fill: "currentColor", stroke: "currentColor", strokeWidth: "2", fillOpacity: "0.3" }) }),
+  "align-left": /* @__PURE__ */ (0, import_jsx_runtime.jsx)(B, { d: "M3 6h18 M3 12h12 M3 18h18 M3 24h8" }),
+  "align-center": /* @__PURE__ */ (0, import_jsx_runtime.jsx)(B, { d: "M3 6h18 M6 12h12 M3 18h18 M6 24h12" }),
+  "align-right": /* @__PURE__ */ (0, import_jsx_runtime.jsx)(B, { d: "M3 6h18 M9 12h12 M3 18h18 M12 24h9" }),
+  "align-justify": /* @__PURE__ */ (0, import_jsx_runtime.jsx)(B, { d: "M3 6h18 M3 12h18 M3 18h18 M3 24h18" }),
+  "line-height": /* @__PURE__ */ (0, import_jsx_runtime.jsx)(B, { d: "M4 12h16 M7 6l-3 6 3 6 M17 6l3 6-3 6" }),
+  h1: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: 12, fontWeight: 700 }, children: "H1" }),
+  h2: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: 12, fontWeight: 700 }, children: "H2" }),
+  h3: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: 12, fontWeight: 700 }, children: "H3" }),
+  h4: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: 12, fontWeight: 700 }, children: "H4" }),
+  "list-ol": /* @__PURE__ */ (0, import_jsx_runtime.jsx)(B, { d: "M10 6h10 M10 12h10 M10 18h10 M4 6l1-1v4 M4 12h2a1 1 0 0 1 0 2H4l2 2 M4 18h2a1 1 0 0 1 0 2H4l2 2" }),
+  "list-ul": /* @__PURE__ */ (0, import_jsx_runtime.jsx)(B, { d: "M10 6h10 M10 12h10 M10 18h10 M4 6h.01 M4 12h.01 M4 18h.01" }),
+  indent: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(B, { d: "M3 4h18 M3 12h10 M21 12h-8 M3 20h18 M14 9l3 3-3 3" }),
+  outdent: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(B, { d: "M3 4h18 M11 12h10 M3 20h18 M7 9l-3 3 3 3" }),
+  undo: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(B, { d: "M3 8h11a5 5 0 0 1 0 10h-5 M3 8l4-4 M3 8l4 4" }),
+  redo: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(B, { d: "M21 8H10a5 5 0 0 0 0 10h5 M21 8l-4-4 M21 8l-4 4" }),
+  "format-painter": /* @__PURE__ */ (0, import_jsx_runtime.jsx)(B, { d: "M3 7l4-4h7l4 4-3 3-2-2v6H8V8L6 10z" }),
+  "clear-format": /* @__PURE__ */ (0, import_jsx_runtime.jsx)(B, { d: "M4 7V4h16v3 M9 20h6 M12 4v16" }),
+  table: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(B, { d: "M3 3h18v18H3z M3 9h18 M3 15h18 M9 3v18 M15 3v18" }),
+  image: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(B, { d: "M3 3h18v18H3z M3 15l5-5 4 4 3-3 6 6 M8.5 8a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z" }),
+  hyperlink: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(B, { d: "M10 14a4 4 0 0 0 5.66 0l3-3a4 4 0 0 0-5.66-5.66l-1 1 M14 10a4 4 0 0 0-5.66 0l-3 3a4 4 0 1 0 5.66 5.66l1-1" }),
+  separator: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(B, { d: "M3 12h18" }),
+  "page-break": /* @__PURE__ */ (0, import_jsx_runtime.jsx)(B, { d: "M3 7h18 M3 13l3-3 3 3 3-3 3 3 3-3 3 3 M3 19h18" }),
+  math: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: 12, fontStyle: "italic" }, children: "\u2211" }),
+  control: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(B, { d: "M3 6h18v12H3z M7 10h10" }),
+  date: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(B, { d: "M3 5h18v16H3z M3 9h18 M8 3v4 M16 3v4" }),
+  comment: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(B, { d: "M3 4h18v12H7l-4 4V4z" })
+};
+
+// src/react/ToolbarButton.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function ToolbarButton({
+  id,
+  active = false,
+  disabled = false,
+  onClick,
+  renderer: Renderer,
+  label,
+  shortcut
+}) {
+  if (Renderer) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      Renderer,
+      {
+        id,
+        active,
+        disabled,
+        onClick,
+        icon: ICONS[id],
+        label,
+        shortcut
+      }
+    );
+  }
+  const className = [
+    "bke-btn",
+    active ? "bke-btn-active" : "",
+    disabled ? "bke-btn-disabled" : ""
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "button",
+    {
+      type: "button",
+      className,
+      disabled,
+      title: shortcut ?? label,
+      onClick,
+      "data-bke-id": id,
+      children: ICONS[id]
+    }
+  );
+}
+
+// src/react/Dropdown.tsx
+var import_react5 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function Dropdown({ trigger, children, open, onOpenChange, align = "left" }) {
+  const [internalOpen, setInternalOpen] = (0, import_react5.useState)(false);
+  const isControlled = open !== void 0;
+  const isOpen = isControlled ? open : internalOpen;
+  const ref = (0, import_react5.useRef)(null);
+  const setOpen = (next) => {
+    if (!isControlled) setInternalOpen(next);
+    onOpenChange?.(next);
+  };
+  (0, import_react5.useEffect)(() => {
+    if (!isOpen) return;
+    const onDocClick = (e) => {
+      if (ref.current && !ref.current.contains(e.target)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", onDocClick);
+    return () => document.removeEventListener("mousedown", onDocClick);
+  }, [isOpen]);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "bke-dropdown", ref, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "bke-dropdown-trigger", onClick: () => setOpen(!isOpen), children: trigger }),
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: `bke-dropdown-panel bke-dropdown-align-${align}`, children })
+  ] });
+}
+
+// src/react/ColorPicker.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var DEFAULT_COLOR_PALETTE = [
+  "#000000",
+  "#666666",
+  "#999999",
+  "#FFFFFF",
+  "#FF0000",
+  "#FF6B35",
+  "#FFD700",
+  "#00C853",
+  "#2383E2",
+  "#6C5CE7",
+  "#E84393",
+  "#00B894"
+];
+function ColorPicker({ palette = DEFAULT_COLOR_PALETTE, onSelect }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "bke-color-picker", children: palette.map((color) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "button",
+    {
+      type: "button",
+      className: "bke-color-swatch",
+      title: color,
+      style: { backgroundColor: color },
+      onClick: () => onSelect(color)
+    },
+    color
+  )) });
+}
+
+// src/react/TableGridPicker.tsx
+var import_react6 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function TableGridPicker({ maxRows = 6, maxCols = 6, onSelect }) {
+  const [hoverRow, setHoverRow] = (0, import_react6.useState)(0);
+  const [hoverCol, setHoverCol] = (0, import_react6.useState)(0);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "bke-table-grid", children: [
+    Array.from({ length: maxRows }).map((_, r) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "bke-grid-row", children: Array.from({ length: maxCols }).map((_2, c) => {
+      const active = r < hoverRow && c < hoverCol;
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "button",
+        {
+          type: "button",
+          className: active ? "bke-grid-cell bke-grid-cell-active" : "bke-grid-cell",
+          onMouseEnter: () => {
+            setHoverRow(r + 1);
+            setHoverCol(c + 1);
+          },
+          onClick: () => onSelect(r + 1, c + 1)
+        },
+        c
+      );
+    }) }, r)),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "bke-grid-label", children: hoverRow > 0 && hoverCol > 0 ? `${hoverRow} \xD7 ${hoverCol}` : "\u9009\u62E9\u884C\u5217" })
+  ] });
+}
+
+// src/react/HyperlinkDialog.tsx
+var import_react7 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function HyperlinkDialog({
+  open,
+  initialUrl = "",
+  initialText = "",
+  onSubmit,
+  onCancel
+}) {
+  const [url, setUrl] = (0, import_react7.useState)(initialUrl);
+  const [text, setText] = (0, import_react7.useState)(initialText);
+  (0, import_react7.useEffect)(() => {
+    if (open) {
+      setUrl(initialUrl);
+      setText(initialText);
+    }
+  }, [open, initialUrl, initialText]);
+  if (!open) return null;
+  const submit = () => {
+    if (!url.trim()) return;
+    onSubmit({ url: url.trim(), text: text.trim() });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "bke-dialog-overlay", onClick: onCancel, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "bke-dialog", onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h3", { className: "bke-dialog-title", children: "\u63D2\u5165\u94FE\u63A5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { className: "bke-field", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: "URL" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "input",
+        {
+          type: "url",
+          placeholder: "https://",
+          value: url,
+          onChange: (e) => setUrl(e.target.value),
+          autoFocus: true
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { className: "bke-field", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: "\u6587\u5B57" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "input",
+        {
+          type: "text",
+          placeholder: "\u94FE\u63A5\u6587\u5B57\uFF08\u53EF\u9009\uFF09",
+          value: text,
+          onChange: (e) => setText(e.target.value)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "bke-dialog-actions", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", onClick: onCancel, children: "\u53D6\u6D88" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", onClick: submit, disabled: !url.trim(), children: "\u786E\u5B9A" })
+    ] })
+  ] }) });
+}
+
+// src/react/LatexDialog.tsx
+var import_react8 = require("react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function LatexDialog({ open, onSubmit, onCancel }) {
+  const [latex, setLatex] = (0, import_react8.useState)("");
+  (0, import_react8.useEffect)(() => {
+    if (open) setLatex("");
+  }, [open]);
+  if (!open) return null;
+  const submit = () => {
+    if (!latex.trim()) return;
+    onSubmit(latex.trim());
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "bke-dialog-overlay", onClick: onCancel, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "bke-dialog", onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h3", { className: "bke-dialog-title", children: "\u63D2\u5165\u516C\u5F0F" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { className: "bke-field", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: "LaTeX" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        "textarea",
+        {
+          placeholder: "E = mc^2",
+          value: latex,
+          onChange: (e) => setLatex(e.target.value),
+          rows: 4,
+          autoFocus: true
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "bke-dialog-actions", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", onClick: onCancel, children: "\u53D6\u6D88" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", onClick: submit, disabled: !latex.trim(), children: "\u786E\u5B9A" })
+    ] })
+  ] }) });
+}
+
+// src/react/Toolbar.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var ACTIVE_MAP = {
+  bold: (f) => f.bold,
+  italic: (f) => f.italic,
+  underline: (f) => f.underline,
+  strikeout: (f) => f.strikeout,
+  superscript: (f) => f.superscript,
+  subscript: (f) => f.subscript,
+  "align-left": (f) => f.align === "left",
+  "align-center": (f) => f.align === "center",
+  "align-right": (f) => f.align === "right",
+  "align-justify": (f) => f.align === "justify",
+  "list-ol": (f) => f.listType === "ol",
+  "list-ul": (f) => f.listType === "ul",
+  h1: (f) => f.level === 1,
+  h2: (f) => f.level === 2,
+  h3: (f) => f.level === 3,
+  h4: (f) => f.level === 4
+};
+var MORE_BUTTON_RESERVED_WIDTH = 48;
+function Toolbar({
+  editorRef,
+  config,
+  formatState,
+  breakpoint,
+  renderers,
+  readOnly = false
+}) {
+  const { execute } = useCommand(editorRef);
+  const [hyperlinkOpen, setHyperlinkOpen] = (0, import_react9.useState)(false);
+  const [latexOpen, setLatexOpen] = (0, import_react9.useState)(false);
+  const [colorOpen, setColorOpen] = (0, import_react9.useState)(false);
+  const [highlightOpen, setHighlightOpen] = (0, import_react9.useState)(false);
+  const [tableOpen, setTableOpen] = (0, import_react9.useState)(false);
+  const [fontOpen, setFontOpen] = (0, import_react9.useState)(false);
+  const [sizeOpen, setSizeOpen] = (0, import_react9.useState)(false);
+  const [lineHeightOpen, setLineHeightOpen] = (0, import_react9.useState)(false);
+  const [overflowIds, setOverflowIds] = (0, import_react9.useState)([]);
+  const disabled = config === false || readOnly || breakpoint === "mobile";
+  const groups = (0, import_react9.useMemo)(
+    () => disabled ? [] : mergeToolbarConfig(config),
+    [disabled, config]
+  );
+  const isTablet = breakpoint === "tablet";
+  const toolbarRef = (0, import_react9.useRef)(null);
+  const measureRef = (0, import_react9.useRef)(null);
+  (0, import_react9.useLayoutEffect)(() => {
+    if (disabled) {
+      setOverflowIds([]);
+      return;
+    }
+    const toolbar = toolbarRef.current;
+    const measure = measureRef.current;
+    if (!toolbar || !measure) return;
+    const compute = () => {
+      const widths = /* @__PURE__ */ new Map();
+      measure.querySelectorAll("[data-group-id]").forEach((el) => {
+        const id = el.dataset.groupId;
+        if (id) widths.set(id, el.offsetWidth);
+      });
+      const available = toolbar.clientWidth - MORE_BUTTON_RESERVED_WIDTH;
+      const result = [];
+      let acc = 0;
+      let crossed = false;
+      for (const g of groups) {
+        const w = widths.get(g.id) ?? 0;
+        if (crossed) {
+          result.push(g.id);
+          continue;
+        }
+        acc += w;
+        if (acc > available) {
+          crossed = true;
+          result.push(g.id);
+        }
+      }
+      setOverflowIds((prev) => {
+        const same = prev.length === result.length && prev.every((v, i) => v === result[i]);
+        return same ? prev : result;
+      });
+    };
+    compute();
+    const ro = new ResizeObserver(compute);
+    ro.observe(toolbar);
+    return () => ro.disconnect();
+  }, [disabled, groups, isTablet]);
+  if (disabled) return null;
+  const renderButtonItem = (id, keySuffix = "") => {
+    const renderer = renderers?.button?.[id];
+    const active = ACTIVE_MAP[id]?.(formatState) ?? false;
+    const key = `${id}${keySuffix}`;
+    if (id === "color" || id === "highlight") {
+      const open = id === "color" ? colorOpen : highlightOpen;
+      const setOpen = id === "color" ? setColorOpen : setHighlightOpen;
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        Dropdown,
+        {
+          open,
+          onOpenChange: setOpen,
+          trigger: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ToolbarButton, { id, active, renderer, onClick: () => {
+          } }),
+          children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ColorPicker, { onSelect: (c) => {
+            execute(id, c);
+            setOpen(false);
+          } })
+        },
+        key
+      );
+    }
+    if (id === "table") {
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        Dropdown,
+        {
+          open: tableOpen,
+          onOpenChange: setTableOpen,
+          trigger: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ToolbarButton, { id, active, renderer, onClick: () => {
+          } }),
+          children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            TableGridPicker,
+            {
+              onSelect: (rows, cols) => {
+                execute("table", rows, cols);
+                setTableOpen(false);
+              }
+            }
+          )
+        },
+        key
+      );
+    }
+    if (id === "font-family") {
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        Dropdown,
+        {
+          open: fontOpen,
+          onOpenChange: setFontOpen,
+          trigger: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ToolbarButton, { id, label: "\u5B57\u4F53", renderer, onClick: () => {
+          } }),
+          children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "bke-list-menu", children: ["\u5B8B\u4F53", "\u9ED1\u4F53", "\u5FAE\u8F6F\u96C5\u9ED1", "Arial", "Times New Roman"].map((name) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            "button",
+            {
+              type: "button",
+              style: { fontFamily: name },
+              onClick: () => {
+                execute("font-family", name);
+                setFontOpen(false);
+              },
+              children: name
+            },
+            name
+          )) })
+        },
+        key
+      );
+    }
+    if (id === "font-size") {
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        Dropdown,
+        {
+          open: sizeOpen,
+          onOpenChange: setSizeOpen,
+          trigger: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ToolbarButton, { id, label: "\u5B57\u53F7", renderer, onClick: () => {
+          } }),
+          children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "bke-list-menu", children: [12, 14, 16, 18, 24, 32].map((size) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                execute("font-size", size);
+                setSizeOpen(false);
+              },
+              children: size
+            },
+            size
+          )) })
+        },
+        key
+      );
+    }
+    if (id === "line-height") {
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        Dropdown,
+        {
+          open: lineHeightOpen,
+          onOpenChange: setLineHeightOpen,
+          trigger: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ToolbarButton, { id, label: "\u884C\u8DDD", renderer, onClick: () => {
+          } }),
+          children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "bke-list-menu", children: [1, 1.15, 1.5, 2, 2.5].map((v) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                execute("line-height", v);
+                setLineHeightOpen(false);
+              },
+              children: v
+            },
+            v
+          )) })
+        },
+        key
+      );
+    }
+    if (id === "image") {
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        ToolbarButton,
+        {
+          id,
+          active,
+          renderer,
+          onClick: () => {
+            const input = document.createElement("input");
+            input.type = "file";
+            input.accept = "image/*";
+            input.onchange = () => {
+              const file = input.files?.[0];
+              if (!file) return;
+              const reader = new FileReader();
+              reader.onload = () => {
+                execute("image", { value: reader.result, width: 200, height: 150 });
+              };
+              reader.readAsDataURL(file);
+            };
+            input.click();
+          }
+        },
+        key
+      );
+    }
+    if (id === "hyperlink") {
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        ToolbarButton,
+        {
+          id,
+          renderer,
+          onClick: () => setHyperlinkOpen(true)
+        },
+        key
+      );
+    }
+    if (id === "math") {
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        ToolbarButton,
+        {
+          id,
+          renderer,
+          onClick: () => setLatexOpen(true)
+        },
+        key
+      );
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      ToolbarButton,
+      {
+        id,
+        active,
+        renderer,
+        onClick: () => execute(id)
+      },
+      key
+    );
+  };
+  const renderGroup = (group, keySuffix = "") => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    "div",
+    {
+      className: "bke-toolbar-group",
+      "data-group-id": group.id,
+      children: group.buttons.map(
+        (b, i) => b === "|" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "bke-toolbar-divider" }, `d-${i}`) : renderButtonItem(b, keySuffix)
+      )
+    },
+    `${group.id}${keySuffix}`
+  );
+  const forcedOverflow = isTablet ? TABLET_COLLAPSE_GROUP_IDS : [];
+  const finalOverflow = /* @__PURE__ */ new Set([...overflowIds, ...forcedOverflow]);
+  const visibleGroups = groups.filter((g) => !finalOverflow.has(g.id));
+  const hiddenGroups = groups.filter((g) => finalOverflow.has(g.id));
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "bke-toolbar bke-toolbar-main", ref: toolbarRef, children: [
+      visibleGroups.map((g) => renderGroup(g)),
+      hiddenGroups.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        Dropdown,
+        {
+          align: "right",
+          trigger: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            "button",
+            {
+              type: "button",
+              className: "bke-btn bke-more-btn",
+              title: "\u66F4\u591A",
+              "aria-label": "\u66F4\u591A",
+              children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("circle", { cx: "5", cy: "12", r: "1.6" }),
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("circle", { cx: "12", cy: "12", r: "1.6" }),
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("circle", { cx: "19", cy: "12", r: "1.6" })
+              ] })
+            }
+          ),
+          children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "bke-toolbar-overflow", children: hiddenGroups.map((g) => renderGroup(g, "-overflow")) })
+        },
+        "more"
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "bke-toolbar-measure", ref: measureRef, "aria-hidden": "true", children: groups.map((g) => renderGroup(g, "-measure")) }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      HyperlinkDialog,
+      {
+        open: hyperlinkOpen,
+        onSubmit: ({ url, text }) => {
+          execute("hyperlink", { url, valueList: text ? [{ value: text }] : void 0 });
+          setHyperlinkOpen(false);
+        },
+        onCancel: () => setHyperlinkOpen(false)
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      LatexDialog,
+      {
+        open: latexOpen,
+        onSubmit: (latex) => {
+          execute("math", [{ type: "latex", value: latex }]);
+          setLatexOpen(false);
+        },
+        onCancel: () => setLatexOpen(false)
+      }
+    )
+  ] });
+}
+
+// src/react/FieldPanel.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function FieldPanel({ visible }) {
+  if (!visible) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("aside", { className: "bke-field-panel", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h3", { children: "\u5B57\u6BB5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { style: { fontSize: 12, opacity: 0.6 }, children: "\u5B57\u6BB5\u9762\u677F\u5C06\u5728 M3 \u5B9E\u73B0" })
+  ] });
+}
+
+// src/react/BidEditor.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var BidEditor2 = (0, import_react10.forwardRef)(function BidEditor3(props, ref) {
+  const {
+    bid,
+    onChange,
+    readOnly = false,
+    toolbar = true,
+    theme,
+    renderers,
+    fieldPanel = false,
+    breakpoint: forcedBreakpoint,
+    className,
+    style
+  } = props;
+  const containerRef = (0, import_react10.useRef)(null);
+  const { handle, editorRef } = useBidEditor({ containerRef, bid, onChange, readOnly });
+  const formatState = useFormatState(editorRef);
+  const breakpoint = useBreakpoint(forcedBreakpoint);
+  (0, import_react10.useImperativeHandle)(ref, () => handle, [handle]);
+  const mergedTheme = mergeTheme(theme);
+  const cssVars = themeToCssVars(mergedTheme);
+  const rootClass = ["bke-root", mergedTheme.dark ? "bke-dark" : "", className ?? ""].filter(Boolean).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: rootClass, style: { ...cssVars, ...style }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      Toolbar,
+      {
+        editorRef,
+        config: toolbar,
+        formatState,
+        breakpoint,
+        renderers,
+        readOnly
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "bke-editor-host", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "bke-editor-canvas", ref: containerRef }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(FieldPanel, { visible: fieldPanel })
+  ] });
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  BidEditor,
+  BidEditorCore,
+  bidSchema,
+  bidToEditorElements,
+  editorElementsToSections,
+  printBid,
+  validateBid
+});
+//# sourceMappingURL=index.cjs.map