@lumir-company/editor 0.4.14 → 0.4.15

package/dist/index.js

@@ -40,10 +40,11 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/components/LumirEditor.tsx
-var import_react23 = require("react");
-var import_react24 = require("@blocknote/react");
+var import_react30 = require("react");
+var import_react31 = require("@blocknote/react");
 var import_mantine = require("@blocknote/mantine");
-var import_core4 = require("@blocknote/core");
+var import_core5 = require("@blocknote/core");
+var import_locales = require("@blocknote/core/locales");
 
 // src/utils/cn.ts
 function cn(...inputs) {
@@ -1834,6 +1835,66 @@ var TextStyleButton = ({
 
 // src/components/FloatingMenu/components/AlignButton.tsx
 var import_react9 = require("react");
+
+// src/utils/prosemirror-table-utils.ts
+function getSelectedCellPositions(editor) {
+  const tiptap = editor._tiptapEditor;
+  if (!tiptap) return [];
+  const { state } = tiptap;
+  const { selection } = state;
+  if (typeof selection.forEachCell === "function") {
+    const positions = [];
+    selection.forEachCell((_node, pos) => {
+      positions.push(pos);
+    });
+    return positions;
+  }
+  const $pos = selection.$from;
+  for (let depth = $pos.depth; depth > 0; depth--) {
+    const node = $pos.node(depth);
+    if (node.type.name === "tableCell" || node.type.name === "tableHeader") {
+      return [$pos.before(depth)];
+    }
+  }
+  return [];
+}
+function setCellAttrAtPositions(editor, positions, attr, value) {
+  const tiptap = editor?._tiptapEditor;
+  if (!tiptap || positions.length === 0) return false;
+  let tr = tiptap.state.tr;
+  let changed = false;
+  for (const pos of positions) {
+    const node = tr.doc.nodeAt(pos);
+    if (node && (node.type.name === "tableCell" || node.type.name === "tableHeader")) {
+      tr = tr.setNodeMarkup(pos, void 0, { ...node.attrs, [attr]: value });
+      changed = true;
+    }
+  }
+  if (changed) {
+    tiptap.view?.dispatch(tr);
+  }
+  return changed;
+}
+function setSelectedCellsAttr(editor, attr, value) {
+  return setCellAttrAtPositions(
+    editor,
+    getSelectedCellPositions(editor),
+    attr,
+    value
+  );
+}
+function isInTableCell(editor) {
+  return getSelectedCellPositions(editor).length > 0;
+}
+function getFirstSelectedCellAttr(editor, attr) {
+  const tiptap = editor?._tiptapEditor;
+  const positions = getSelectedCellPositions(editor);
+  if (!tiptap || positions.length === 0) return void 0;
+  const node = tiptap.state.doc.nodeAt(positions[0]);
+  return node?.attrs?.[attr];
+}
+
+// src/components/FloatingMenu/components/AlignButton.tsx
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var iconMap2 = {
   left: Icons.alignLeft,
@@ -1851,6 +1912,9 @@ var AlignButton = ({
 }) => {
   const getCurrentAlignment = () => {
     try {
+      if (isInTableCell(editor)) {
+        return getFirstSelectedCellAttr(editor, "textAlignment") || "left";
+      }
       const block = editor?.getTextCursorPosition()?.block;
       return block?.props?.textAlignment || "left";
     } catch {
@@ -1860,6 +1924,9 @@ var AlignButton = ({
   const isActive = getCurrentAlignment() === alignment;
   const handleClick = (0, import_react9.useCallback)(() => {
     try {
+      if (setSelectedCellsAttr(editor, "textAlignment", alignment)) {
+        return;
+      }
       const block = editor?.getTextCursorPosition()?.block;
       if (block && editor?.updateBlock) {
         editor.updateBlock(block, { props: { textAlignment: alignment } });
@@ -2025,6 +2092,10 @@ var ColorButton = ({ editor, type }) => {
   const colors = type === "text" ? TEXT_COLORS : BACKGROUND_COLORS;
   const getCurrentColor = (0, import_react12.useCallback)(() => {
     try {
+      if (isInTableCell(editor)) {
+        const attr = type === "text" ? "textColor" : "backgroundColor";
+        return getFirstSelectedCellAttr(editor, attr) || "default";
+      }
       const activeStyles = editor?.getActiveStyles?.() || {};
       if (type === "text" && activeStyles.textColor) {
         return activeStyles.textColor;
@@ -2054,13 +2125,15 @@ var ColorButton = ({ editor, type }) => {
     (color) => {
       try {
         if (!editor) return;
-        if (type === "text") {
-          editor.toggleStyles({ textColor: color });
-        } else {
-          editor.toggleStyles({ backgroundColor: color });
+        const attr = type === "text" ? "textColor" : "backgroundColor";
+        if (!setSelectedCellsAttr(editor, attr, color)) {
+          editor.toggleStyles(
+            type === "text" ? { textColor: color } : { backgroundColor: color }
+          );
         }
         setCurrentColor(color);
         setIsOpen(false);
+        setTimeout(() => editor.focus?.());
       } catch (err) {
         console.error(`Color apply failed:`, err);
       }
@@ -2864,37 +2937,12 @@ var VerticalAlignmentExtension = import_core2.Extension.create({
 });
 
 // src/components/CustomFormattingToolbar.tsx
-var import_react22 = require("@blocknote/react");
+var import_react24 = require("@blocknote/react");
 
 // src/components/TextAlignButtonWithVA.tsx
 var import_core3 = require("@blocknote/core");
 var import_react18 = require("react");
 var import_react19 = require("@blocknote/react");
-
-// src/utils/prosemirror-table-utils.ts
-function getSelectedCellPositions(editor) {
-  const tiptap = editor._tiptapEditor;
-  if (!tiptap) return [];
-  const { state } = tiptap;
-  const { selection } = state;
-  if (typeof selection.forEachCell === "function") {
-    const positions = [];
-    selection.forEachCell((_node, pos) => {
-      positions.push(pos);
-    });
-    return positions;
-  }
-  const $pos = selection.$from;
-  for (let depth = $pos.depth; depth > 0; depth--) {
-    const node = $pos.node(depth);
-    if (node.type.name === "tableCell" || node.type.name === "tableHeader") {
-      return [$pos.before(depth)];
-    }
-  }
-  return [];
-}
-
-// src/components/TextAlignButtonWithVA.tsx
 var import_jsx_runtime17 = require("react/jsx-runtime");
 var icons = {
   left: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M15 15H3v2h12v-2zm0-8H3v2h12V7zM3 13h18v-2H3v2zm0 8h18v-2H3v2zM3 3v2h18V3H3z" }) }),
@@ -3071,77 +3119,759 @@ var VerticalAlignButton = (props) => {
   );
 };
 
-// src/components/CustomFormattingToolbar.tsx
+// src/components/color/LumirColorControls.tsx
+var import_core4 = require("@blocknote/core");
+var import_react22 = require("@blocknote/react");
+var import_react23 = require("react");
 var import_jsx_runtime19 = require("react/jsx-runtime");
-var CustomFormattingToolbar = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react22.FormattingToolbar, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react22.BlockTypeSelect, {}, "blockTypeSelect"),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react22.TableCellMergeButton, {}, "tableCellMergeButton"),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react22.FileCaptionButton, {}, "fileCaptionButton"),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react22.FileReplaceButton, {}, "replaceFileButton"),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react22.FileRenameButton, {}, "fileRenameButton"),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react22.FileDeleteButton, {}, "fileDeleteButton"),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react22.FileDownloadButton, {}, "fileDownloadButton"),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react22.FilePreviewButton, {}, "filePreviewButton"),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react22.BasicTextStyleButton, { basicTextStyle: "bold" }, "boldStyleButton"),
+var COLORS = [
+  "default",
+  "gray",
+  "brown",
+  "red",
+  "orange",
+  "yellow",
+  "green",
+  "blue",
+  "purple",
+  "pink"
+];
+function ColorIcon(props) {
+  const textColor = props.textColor || "default";
+  const backgroundColor = props.backgroundColor || "default";
+  const size = props.size || 16;
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    "div",
+    {
+      className: "bn-color-icon",
+      "data-background-color": backgroundColor,
+      "data-text-color": textColor,
+      style: {
+        pointerEvents: "none",
+        fontSize: `${size * 0.75}px`,
+        height: `${size}px`,
+        lineHeight: `${size}px`,
+        textAlign: "center",
+        width: `${size}px`
+      },
+      children: "A"
+    }
+  );
+}
+function CellFillIcon({ size = 18 }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "currentColor",
+      style: { pointerEvents: "none" },
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("path", { d: "M16.56 8.94 7.62 0 6.21 1.41l2.38 2.38-5.15 5.15c-.59.59-.59 1.54 0 2.12l5.5 5.5c.29.29.68.44 1.06.44s.77-.15 1.06-.44l5.5-5.5c.59-.58.59-1.53 0-2.12zM5.21 10 10 5.21 14.79 10H5.21zM19 11.5s-2 2.17-2 3.5c0 1.1.9 2 2 2s2-.9 2-2c0-1.33-2-3.5-2-3.5z" })
+    }
+  );
+}
+function LumirColorPicker(props) {
+  const Components = (0, import_react22.useComponentsContext)();
+  const dict = (0, import_react22.useDictionary)();
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
+    props.text ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Components.Generic.Menu.Label, { children: props.textTitle ?? dict.color_picker.text_title }),
+      COLORS.map((color) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        Components.Generic.Menu.Item,
+        {
+          onClick: () => {
+            props.onClick?.();
+            props.text.setColor(color);
+          },
+          "data-test": "text-color-" + color,
+          icon: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ColorIcon, { textColor: color, size: props.iconSize }),
+          checked: props.text.color === color,
+          children: dict.color_picker.colors[color]
+        },
+        "text-color-" + color
+      ))
+    ] }) : null,
+    props.background ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Components.Generic.Menu.Label, { children: props.backgroundTitle ?? dict.color_picker.background_title }),
+      COLORS.map((color) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        Components.Generic.Menu.Item,
+        {
+          onClick: () => {
+            props.onClick?.();
+            props.background.setColor(color);
+          },
+          "data-test": "background-color-" + color,
+          icon: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ColorIcon, { backgroundColor: color, size: props.iconSize }),
+          checked: props.background.color === color,
+          children: dict.color_picker.colors[color]
+        },
+        "background-color-" + color
+      ))
+    ] }) : null
+  ] });
+}
+function LumirColorStyleButton() {
+  const Components = (0, import_react22.useComponentsContext)();
+  const editor = (0, import_react22.useBlockNoteEditor)();
+  const ed = editor;
+  const styleSchema = editor.schema.styleSchema;
+  const textColorInSchema = styleSchema.textColor?.type === "textColor" && styleSchema.textColor?.propSchema === "string";
+  const backgroundColorInSchema = styleSchema.backgroundColor?.type === "backgroundColor" && styleSchema.backgroundColor?.propSchema === "string";
+  const selectedBlocks = (0, import_react22.useSelectedBlocks)(editor);
+  const [currentTextColor, setCurrentTextColor] = (0, import_react23.useState)(
+    textColorInSchema ? ed.getActiveStyles().textColor || "default" : "default"
+  );
+  const [currentBackgroundColor, setCurrentBackgroundColor] = (0, import_react23.useState)(
+    backgroundColorInSchema ? ed.getActiveStyles().backgroundColor || "default" : "default"
+  );
+  (0, import_react22.useEditorContentOrSelectionChange)(() => {
+    const active = ed.getActiveStyles();
+    if (textColorInSchema) {
+      setCurrentTextColor(active.textColor || "default");
+    }
+    if (backgroundColorInSchema) {
+      setCurrentBackgroundColor(active.backgroundColor || "default");
+    }
+  }, editor);
+  const setTextColor = (0, import_react23.useCallback)(
+    (color) => {
+      color === "default" ? ed.removeStyles({ textColor: color }) : ed.addStyles({ textColor: color });
+      setTimeout(() => editor.focus());
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [editor]
+  );
+  const setBackgroundColor = (0, import_react23.useCallback)(
+    (color) => {
+      color === "default" ? ed.removeStyles({ backgroundColor: color }) : ed.addStyles({ backgroundColor: color });
+      setTimeout(() => editor.focus());
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [editor]
+  );
+  const show = (0, import_react23.useMemo)(() => {
+    if (!textColorInSchema && !backgroundColorInSchema) {
+      return false;
+    }
+    for (const block of selectedBlocks) {
+      if (block.content !== void 0) {
+        return true;
+      }
+    }
+    return false;
+  }, [backgroundColorInSchema, selectedBlocks, textColorInSchema]);
+  if (!show || !editor.isEditable) {
+    return null;
+  }
+  const tooltip = "\uD14D\uC2A4\uD2B8 \uC0C9\xB7\uBC30\uACBD";
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Components.Generic.Menu.Root, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Components.Generic.Menu.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      Components.FormattingToolbar.Button,
+      {
+        className: "bn-button",
+        "data-test": "colors",
+        label: tooltip,
+        mainTooltip: tooltip,
+        icon: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          ColorIcon,
+          {
+            textColor: currentTextColor,
+            backgroundColor: currentBackgroundColor,
+            size: 20
+          }
+        )
+      }
+    ) }),
     /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-      import_react22.BasicTextStyleButton,
+      Components.Generic.Menu.Dropdown,
+      {
+        className: "bn-menu-dropdown bn-color-picker-dropdown",
+        children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          LumirColorPicker,
+          {
+            textTitle: "\uD14D\uC2A4\uD2B8 \uC0C9",
+            backgroundTitle: "\uD14D\uC2A4\uD2B8 \uBC30\uACBD",
+            text: textColorInSchema ? { color: currentTextColor, setColor: setTextColor } : void 0,
+            background: backgroundColorInSchema ? { color: currentBackgroundColor, setColor: setBackgroundColor } : void 0
+          }
+        )
+      }
+    )
+  ] });
+}
+function LumirCellColorToolbarButton() {
+  const Components = (0, import_react22.useComponentsContext)();
+  const editor = (0, import_react22.useBlockNoteEditor)();
+  const selectedBlocks = (0, import_react22.useSelectedBlocks)(editor);
+  const isMultiCell = (0, import_react23.useMemo)(() => {
+    if (selectedBlocks.length !== 1 || selectedBlocks[0].type !== "table") {
+      return false;
+    }
+    const cs = editor.tableHandles?.getCellSelection();
+    return !!cs && cs.cells.length > 1;
+  }, [editor, selectedBlocks]);
+  const stashRef = (0, import_react23.useRef)([]);
+  const applyBackground = (0, import_react23.useCallback)(
+    (color) => {
+      const live = getSelectedCellPositions(editor);
+      const positions = live.length > 0 ? live : stashRef.current;
+      setCellAttrAtPositions(editor, positions, "backgroundColor", color);
+      setTimeout(() => editor.focus());
+    },
+    [editor]
+  );
+  if (!editor.isEditable || !isMultiCell) {
+    return null;
+  }
+  const tooltip = "\uC140 \uBC30\uACBD\uC0C9";
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+    Components.Generic.Menu.Root,
+    {
+      onOpenChange: (open) => {
+        if (open) {
+          stashRef.current = getSelectedCellPositions(editor);
+        }
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Components.Generic.Menu.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          Components.FormattingToolbar.Button,
+          {
+            className: "bn-button",
+            "data-test": "cell-colors",
+            label: tooltip,
+            mainTooltip: tooltip,
+            icon: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(CellFillIcon, { size: 18 })
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          Components.Generic.Menu.Dropdown,
+          {
+            className: "bn-menu-dropdown bn-color-picker-dropdown",
+            children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+              LumirColorPicker,
+              {
+                backgroundTitle: "\uC140 \uBC30\uACBD",
+                background: { color: "default", setColor: applyBackground }
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function LumirCellColorPickerButton(props) {
+  const Components = (0, import_react22.useComponentsContext)();
+  const editor = (0, import_react22.useBlockNoteEditor)();
+  const updateColor = (color, type) => {
+    const newTable = props.block.content.rows.map((row) => ({
+      ...row,
+      cells: row.cells.map((cell) => (0, import_core4.mapTableCell)(cell))
+    }));
+    if (type === "text") {
+      newTable[props.rowIndex].cells[props.colIndex].props.textColor = color;
+    } else {
+      newTable[props.rowIndex].cells[props.colIndex].props.backgroundColor = color;
+    }
+    editor.updateBlock(props.block, {
+      type: "table",
+      content: { ...props.block.content, rows: newTable }
+    });
+    editor.setTextCursorPosition(props.block);
+  };
+  const currentCell = props.block.content.rows[props.rowIndex]?.cells?.[props.colIndex];
+  if (!currentCell || editor.settings.tables.cellTextColor === false && editor.settings.tables.cellBackgroundColor === false) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Components.Generic.Menu.Root, { position: "right", sub: true, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Components.Generic.Menu.Trigger, { sub: true, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Components.Generic.Menu.Item, { className: "bn-menu-item", subTrigger: true, children: "\uC140 \uC0C9\xB7\uBC30\uACBD" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      Components.Generic.Menu.Dropdown,
+      {
+        sub: true,
+        className: "bn-menu-dropdown bn-color-picker-dropdown",
+        children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          LumirColorPicker,
+          {
+            iconSize: 18,
+            textTitle: "\uC140 \uAE00\uC790\uC0C9",
+            backgroundTitle: "\uC140 \uBC30\uACBD",
+            text: editor.settings.tables.cellTextColor ? {
+              color: (0, import_core4.isTableCell)(currentCell) ? currentCell.props.textColor : "default",
+              setColor: (color) => updateColor(color, "text")
+            } : void 0,
+            background: editor.settings.tables.cellBackgroundColor ? {
+              color: (0, import_core4.isTableCell)(currentCell) ? currentCell.props.backgroundColor : "default",
+              setColor: (color) => updateColor(color, "background")
+            } : void 0
+          }
+        )
+      }
+    )
+  ] });
+}
+function LumirTableCellMenu(props) {
+  const Components = (0, import_react22.useComponentsContext)();
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    Components.Generic.Menu.Dropdown,
+    {
+      className: "bn-menu-dropdown bn-drag-handle-menu",
+      children: props.children || /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          import_react22.SplitButton,
+          {
+            block: props.block,
+            rowIndex: props.rowIndex,
+            colIndex: props.colIndex
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          LumirCellColorPickerButton,
+          {
+            block: props.block,
+            rowIndex: props.rowIndex,
+            colIndex: props.colIndex
+          }
+        )
+      ] })
+    }
+  );
+}
+
+// src/components/CustomFormattingToolbar.tsx
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var CustomFormattingToolbar = () => {
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react24.FormattingToolbar, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react24.BlockTypeSelect, {}, "blockTypeSelect"),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react24.TableCellMergeButton, {}, "tableCellMergeButton"),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react24.FileCaptionButton, {}, "fileCaptionButton"),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react24.FileReplaceButton, {}, "replaceFileButton"),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react24.FileRenameButton, {}, "fileRenameButton"),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react24.FileDeleteButton, {}, "fileDeleteButton"),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react24.FileDownloadButton, {}, "fileDownloadButton"),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react24.FilePreviewButton, {}, "filePreviewButton"),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react24.BasicTextStyleButton, { basicTextStyle: "bold" }, "boldStyleButton"),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      import_react24.BasicTextStyleButton,
       {
         basicTextStyle: "italic"
       },
       "italicStyleButton"
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-      import_react22.BasicTextStyleButton,
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      import_react24.BasicTextStyleButton,
       {
         basicTextStyle: "underline"
       },
       "underlineStyleButton"
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-      import_react22.BasicTextStyleButton,
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      import_react24.BasicTextStyleButton,
       {
         basicTextStyle: "strike"
       },
       "strikeStyleButton"
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(TextAlignButtonWithVA, { textAlignment: "left" }, "textAlignLeftButton"),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TextAlignButtonWithVA, { textAlignment: "left" }, "textAlignLeftButton"),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       TextAlignButtonWithVA,
       {
         textAlignment: "center"
       },
       "textAlignCenterButton"
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(TextAlignButtonWithVA, { textAlignment: "right" }, "textAlignRightButton"),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TextAlignButtonWithVA, { textAlignment: "right" }, "textAlignRightButton"),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       VerticalAlignButton,
       {
         verticalAlignment: "top"
       },
       "verticalAlignTop"
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       VerticalAlignButton,
       {
         verticalAlignment: "middle"
       },
       "verticalAlignMiddle"
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       VerticalAlignButton,
       {
         verticalAlignment: "bottom"
       },
       "verticalAlignBottom"
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react22.ColorStyleButton, {}, "colorStyleButton"),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react22.NestBlockButton, {}, "nestBlockButton"),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react22.UnnestBlockButton, {}, "unnestBlockButton"),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react22.CreateLinkButton, {}, "createLinkButton")
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(LumirColorStyleButton, {}, "colorStyleButton"),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(LumirCellColorToolbarButton, {}, "cellColorButton"),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react24.NestBlockButton, {}, "nestBlockButton"),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react24.UnnestBlockButton, {}, "unnestBlockButton"),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react24.CreateLinkButton, {}, "createLinkButton")
   ] });
 };
 
+// src/components/LumirTableHandlesController.tsx
+var import_react27 = require("@blocknote/react");
+var import_react28 = require("@floating-ui/react");
+var import_react29 = require("react");
+
+// src/components/hooks/useFocusedCellHandlePositioning.ts
+var import_react25 = require("@floating-ui/react");
+var import_react26 = require("react");
+function useFocusedCellHandlePositioning(cellEl, tbodyEl, orientation, show) {
+  const { refs, floatingStyles, context } = (0, import_react25.useFloating)({
+    open: show,
+    placement: orientation === "row" ? "left" : orientation === "col" ? "top" : "right",
+    // col/row: 가장자리 선(zero-size)에, cell: 셀 우측 보더에 14px hit-area 중앙 정렬(-7).
+    middleware: [(0, import_react25.offset)(-7)],
+    whileElementsMounted: import_react25.autoUpdate
+  });
+  const { isMounted, styles } = (0, import_react25.useTransitionStyles)(context);
+  (0, import_react26.useEffect)(() => {
+    if (!cellEl) {
+      refs.setReference(null);
+      return;
+    }
+    refs.setReference({
+      contextElement: cellEl,
+      getBoundingClientRect: () => {
+        const c = cellEl.getBoundingClientRect();
+        const t = tbodyEl?.getBoundingClientRect() ?? c;
+        if (orientation === "col") {
+          return new DOMRect(c.left, t.top, c.width, 0);
+        }
+        if (orientation === "row") {
+          return new DOMRect(t.left, c.top, 0, c.height);
+        }
+        return c;
+      }
+    });
+  }, [cellEl, tbodyEl, orientation, refs]);
+  return (0, import_react26.useMemo)(
+    () => ({
+      isMounted,
+      ref: refs.setFloating,
+      // display는 CSS 클래스에서 제어한다(absolute 자식 stacking).
+      style: {
+        ...styles,
+        ...floatingStyles
+      }
+    }),
+    [floatingStyles, isMounted, refs.setFloating, styles]
+  );
+}
+
+// src/components/LumirTableHandlesController.tsx
+var import_jsx_runtime21 = require("react/jsx-runtime");
+function syncCoreHoverToFocusedCell(cellEl) {
+  const r = cellEl.getBoundingClientRect();
+  cellEl.dispatchEvent(
+    new MouseEvent("mousemove", {
+      bubbles: true,
+      cancelable: true,
+      view: window,
+      clientX: r.left + r.width / 2,
+      clientY: r.top + r.height / 2
+    })
+  );
+}
+function LumirTableHandlesController() {
+  const editor = (0, import_react27.useBlockNoteEditor)();
+  const [focused, setFocused] = (0, import_react29.useState)(null);
+  const [menuContainerRef, setMenuContainerRef] = (0, import_react29.useState)(null);
+  const [overlayEl, setOverlayEl] = (0, import_react29.useState)(null);
+  const [openMenu, setOpenMenu] = (0, import_react29.useState)(null);
+  const frozenRef = (0, import_react29.useRef)(false);
+  const menuOpenRef = (0, import_react29.useRef)(false);
+  const draggingRef = (0, import_react29.useRef)(false);
+  const recompute = (0, import_react29.useCallback)(() => {
+    if (frozenRef.current) {
+      return;
+    }
+    const th2 = editor.tableHandles;
+    const view = editor.prosemirrorView;
+    if (!th2 || !view) {
+      setFocused(null);
+      return;
+    }
+    let cellEl2 = null;
+    try {
+      const { node } = view.domAtPos(view.state.selection.from);
+      const el = node.nodeType === Node.TEXT_NODE ? node.parentElement : node;
+      cellEl2 = el?.closest?.("td, th") ?? null;
+    } catch {
+      cellEl2 = null;
+    }
+    if (!cellEl2 || !cellEl2.isConnected) {
+      setFocused(null);
+      return;
+    }
+    const blockId = cellEl2.closest("[data-id]")?.getAttribute("data-id");
+    const block = blockId ? editor.getBlock(blockId) : void 0;
+    if (!block || block.type !== "table") {
+      setFocused(null);
+      return;
+    }
+    const cellSel = th2.getCellSelection();
+    if (!cellSel) {
+      setFocused(null);
+      return;
+    }
+    const widgetContainer = cellEl2.closest(".tableWrapper")?.querySelector(".table-widgets-container");
+    const tbodyEl2 = cellEl2.closest("tbody");
+    if (!widgetContainer || !tbodyEl2) {
+      setFocused(null);
+      return;
+    }
+    setFocused({
+      block,
+      rowIndex: cellSel.from.row,
+      colIndex: cellSel.from.col,
+      cellEl: cellEl2,
+      tbodyEl: tbodyEl2,
+      widgetContainer
+    });
+  }, [editor]);
+  (0, import_react27.useEditorContentOrSelectionChange)(recompute, editor);
+  (0, import_react29.useEffect)(() => {
+    recompute();
+  }, [recompute]);
+  (0, import_react29.useEffect)(() => {
+    const onUp = () => {
+      requestAnimationFrame(() => {
+        if (!menuOpenRef.current && !draggingRef.current && frozenRef.current) {
+          frozenRef.current = false;
+          recompute();
+        }
+      });
+    };
+    window.addEventListener("pointerup", onUp);
+    return () => window.removeEventListener("pointerup", onUp);
+  }, [recompute]);
+  (0, import_react29.useEffect)(() => {
+    const f = focused;
+    if (!f || !overlayEl) {
+      return;
+    }
+    const PAD = 1;
+    const update = () => {
+      const cr = f.cellEl.getBoundingClientRect();
+      const tr = f.tbodyEl.getBoundingClientRect();
+      const kr = f.widgetContainer.getBoundingClientRect();
+      const x1 = openMenu === "row" ? tr.left : cr.left;
+      const y1 = openMenu === "col" ? tr.top : cr.top;
+      const x2 = openMenu === "row" ? tr.right : cr.right;
+      const y2 = openMenu === "col" ? tr.bottom : cr.bottom;
+      const dpr = window.devicePixelRatio || 1;
+      const rd = (v) => Math.round(v * dpr) / dpr;
+      const left = rd(x1 - kr.left) - PAD;
+      const top = rd(y1 - kr.top) - PAD;
+      const right = rd(x2 - kr.left) + PAD;
+      const bottom = rd(y2 - kr.top) + PAD;
+      overlayEl.style.transform = `translate(${left}px, ${top}px)`;
+      overlayEl.style.width = `${right - left}px`;
+      overlayEl.style.height = `${bottom - top}px`;
+    };
+    update();
+    return (0, import_react28.autoUpdate)(f.cellEl, overlayEl, update);
+  }, [focused, overlayEl, openMenu]);
+  const cellEl = focused?.cellEl ?? null;
+  const tbodyEl = focused?.tbodyEl ?? null;
+  const show = focused !== null;
+  const rowHandle = useFocusedCellHandlePositioning(cellEl, tbodyEl, "row", show);
+  const colHandle = useFocusedCellHandlePositioning(cellEl, tbodyEl, "col", show);
+  const cellHandle = useFocusedCellHandlePositioning(
+    cellEl,
+    tbodyEl,
+    "cell",
+    show
+  );
+  const th = editor.tableHandles;
+  const coreState = (0, import_react27.useUIPluginState)(
+    editor.tableHandles.onUpdate.bind(editor.tableHandles)
+  );
+  const { addOrRemoveColumnsButton, addOrRemoveRowsButton } = (0, import_react27.useExtendButtonsPositioning)(
+    coreState?.showAddOrRemoveColumnsButton || false,
+    coreState?.showAddOrRemoveRowsButton || false,
+    coreState?.referencePosTable || null
+  );
+  const onStartExtend = (0, import_react29.useCallback)(() => {
+    editor.tableHandles?.freezeHandles();
+  }, [editor]);
+  const onEndExtend = (0, import_react29.useCallback)(() => {
+    editor.tableHandles?.unfreezeHandles();
+  }, [editor]);
+  const menuHandlers = (0, import_react29.useMemo)(() => {
+    const mk = (kind) => ({
+      freeze: () => {
+        menuOpenRef.current = true;
+        frozenRef.current = true;
+        setOpenMenu(kind);
+        editor.tableHandles?.freezeHandles();
+      },
+      unfreeze: () => {
+        menuOpenRef.current = false;
+        frozenRef.current = false;
+        setOpenMenu(null);
+        editor.tableHandles?.unfreezeHandles();
+        recompute();
+      }
+    });
+    return { col: mk("col"), row: mk("row"), cell: mk("cell") };
+  }, [editor, recompute]);
+  const onGutterPointerDown = (0, import_react29.useCallback)(() => {
+    frozenRef.current = true;
+  }, []);
+  const onGutterPointerEnter = (0, import_react29.useCallback)(
+    (e) => {
+      if (e.buttons === 0 && focused) {
+        syncCoreHoverToFocusedCell(focused.cellEl);
+      }
+    },
+    [focused]
+  );
+  const makeDragStart = (0, import_react29.useCallback)(
+    (dir) => (e) => {
+      draggingRef.current = true;
+      frozenRef.current = true;
+      if (dir === "row") {
+        editor.tableHandles?.rowDragStart(e);
+      } else {
+        editor.tableHandles?.colDragStart(e);
+      }
+    },
+    [editor]
+  );
+  const onDragEnd = (0, import_react29.useCallback)(() => {
+    editor.tableHandles?.dragEnd();
+    draggingRef.current = false;
+    frozenRef.current = false;
+    recompute();
+  }, [editor, recompute]);
+  const noop = (0, import_react29.useCallback)(() => {
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { ref: setMenuContainerRef }),
+    th && focused && menuContainerRef && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_react28.FloatingPortal, { root: focused.widgetContainer, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { ref: setOverlayEl, className: "lumir-tbl-cell-focus" }),
+      colHandle.isMounted && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+        "div",
+        {
+          ref: colHandle.ref,
+          style: colHandle.style,
+          className: "lumir-tbl-gutter-wrap lumir-tbl-gutter-wrap--col" + (openMenu === "col" ? " lumir-tbl-gutter-wrap--active" : ""),
+          onPointerEnter: onGutterPointerEnter,
+          onPointerDown: onGutterPointerDown,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "lumir-tbl-gutter" }),
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "lumir-tbl-grip", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+              import_react27.TableHandle,
+              {
+                editor,
+                orientation: "column",
+                index: focused.colIndex,
+                block: focused.block,
+                dragStart: makeDragStart("col"),
+                dragEnd: onDragEnd,
+                freezeHandles: menuHandlers.col.freeze,
+                unfreezeHandles: menuHandlers.col.unfreeze,
+                menuContainer: menuContainerRef,
+                showOtherSide: noop,
+                hideOtherSide: noop
+              }
+            ) })
+          ]
+        }
+      ),
+      rowHandle.isMounted && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+        "div",
+        {
+          ref: rowHandle.ref,
+          style: rowHandle.style,
+          className: "lumir-tbl-gutter-wrap lumir-tbl-gutter-wrap--row" + (openMenu === "row" ? " lumir-tbl-gutter-wrap--active" : ""),
+          onPointerEnter: onGutterPointerEnter,
+          onPointerDown: onGutterPointerDown,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "lumir-tbl-gutter" }),
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "lumir-tbl-grip", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+              import_react27.TableHandle,
+              {
+                editor,
+                orientation: "row",
+                index: focused.rowIndex,
+                block: focused.block,
+                dragStart: makeDragStart("row"),
+                dragEnd: onDragEnd,
+                freezeHandles: menuHandlers.row.freeze,
+                unfreezeHandles: menuHandlers.row.unfreeze,
+                menuContainer: menuContainerRef,
+                showOtherSide: noop,
+                hideOtherSide: noop
+              }
+            ) })
+          ]
+        }
+      ),
+      cellHandle.isMounted && openMenu !== "col" && openMenu !== "row" && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+        "div",
+        {
+          ref: cellHandle.ref,
+          style: cellHandle.style,
+          className: "lumir-tbl-gutter-wrap lumir-tbl-gutter-wrap--cell" + (openMenu === "cell" ? " lumir-tbl-gutter-wrap--active" : ""),
+          onPointerDown: onGutterPointerDown,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "lumir-tbl-gutter" }),
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "lumir-tbl-grip", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+              import_react27.TableCellButton,
+              {
+                editor,
+                rowIndex: focused.rowIndex,
+                colIndex: focused.colIndex,
+                block: focused.block,
+                tableCellMenu: LumirTableCellMenu,
+                menuContainer: menuContainerRef,
+                freezeHandles: menuHandlers.cell.freeze,
+                unfreezeHandles: menuHandlers.cell.unfreeze
+              }
+            ) })
+          ]
+        }
+      )
+    ] }),
+    th && coreState?.widgetContainer && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_react28.FloatingPortal, { root: coreState.widgetContainer, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { ref: addOrRemoveRowsButton.ref, style: addOrRemoveRowsButton.style, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        import_react27.ExtendButton,
+        {
+          editor,
+          orientation: "addOrRemoveRows",
+          block: coreState.block,
+          onMouseDown: onStartExtend,
+          onMouseUp: onEndExtend
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        "div",
+        {
+          ref: addOrRemoveColumnsButton.ref,
+          style: addOrRemoveColumnsButton.style,
+          children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            import_react27.ExtendButton,
+            {
+              editor,
+              orientation: "addOrRemoveColumns",
+              block: coreState.block,
+              onMouseDown: onStartExtend,
+              onMouseUp: onEndExtend
+            }
+          )
+        }
+      )
+    ] })
+  ] });
+}
+
 // src/utils/table-vertical-alignment.ts
 function injectVerticalAlignment(blocks, editor) {
   const tiptap = editor?._tiptapEditor;
@@ -3472,7 +4202,7 @@ var ALLOWED_VIDEO_EXTENSIONS = [
 ];
 
 // src/components/LumirEditor.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var DEBUG_LOG = (loc, msg, data) => {
   const p = fetch("http://127.0.0.1:7686/ingest/1f8ee1c5-0cf0-4ae7-91ed-5ea7ed17130a", {
     method: "POST",
@@ -3697,9 +4427,9 @@ var findBlockWithLink = (blocks, targetUrl) => {
   return null;
 };
 var ConvertToPreviewButton = ({ url }) => {
-  const editor = (0, import_react24.useBlockNoteEditor)();
-  const Components = (0, import_react24.useComponentsContext)();
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  const editor = (0, import_react31.useBlockNoteEditor)();
+  const Components = (0, import_react31.useComponentsContext)();
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     Components.LinkToolbar.Button,
     {
       className: "bn-button",
@@ -3718,29 +4448,29 @@ var ConvertToPreviewButton = ({ url }) => {
           console.error("Convert to link preview failed:", err);
         }
       },
-      icon: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("rect", { x: "1", y: "3", width: "14", height: "10", rx: "2", stroke: "currentColor", strokeWidth: "1.5", fill: "none" }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("line", { x1: "1", y1: "9", x2: "15", y2: "9", stroke: "currentColor", strokeWidth: "1.5" }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("circle", { cx: "5", cy: "6.5", r: "1.5", stroke: "currentColor", strokeWidth: "1", fill: "none" })
+      icon: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("rect", { x: "1", y: "3", width: "14", height: "10", rx: "2", stroke: "currentColor", strokeWidth: "1.5", fill: "none" }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("line", { x1: "1", y1: "9", x2: "15", y2: "9", stroke: "currentColor", strokeWidth: "1.5" }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("circle", { cx: "5", cy: "6.5", r: "1.5", stroke: "currentColor", strokeWidth: "1", fill: "none" })
       ] })
     }
   );
 };
 var CustomLinkToolbar = (props) => {
-  const editor = (0, import_react24.useBlockNoteEditor)();
-  const Components = (0, import_react24.useComponentsContext)();
+  const editor = (0, import_react31.useBlockNoteEditor)();
+  const Components = (0, import_react31.useComponentsContext)();
   const hasLinkPreview = !!editor?._linkPreviewApiEndpoint;
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
     Components.LinkToolbar.Root,
     {
       className: "bn-toolbar bn-link-toolbar",
       onMouseEnter: props.stopHideTimer,
       onMouseLeave: props.startHideTimer,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react24.EditLinkButton, { url: props.url, text: props.text, editLink: props.editLink }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react24.OpenLinkButton, { url: props.url }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react24.DeleteLinkButton, { deleteLink: props.deleteLink }),
-        hasLinkPreview && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ConvertToPreviewButton, { url: props.url })
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react31.EditLinkButton, { url: props.url, text: props.text, editLink: props.editLink }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react31.OpenLinkButton, { url: props.url }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react31.DeleteLinkButton, { deleteLink: props.deleteLink }),
+        hasLinkPreview && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ConvertToPreviewButton, { url: props.url })
       ]
     }
   );
@@ -3784,13 +4514,13 @@ function LumirEditor({
   onError,
   onImageDelete
 }) {
-  const [isUploading, setIsUploading] = (0, import_react23.useState)(false);
-  const [uploadProgress, setUploadProgress] = (0, import_react23.useState)(null);
-  const [errorMessage, setErrorMessage] = (0, import_react23.useState)(null);
-  const floatingMenuFileInputRef = (0, import_react23.useRef)(null);
-  const floatingMenuBlockRef = (0, import_react23.useRef)(null);
-  const floatingMenuUploadStartTimeRef = (0, import_react23.useRef)(0);
-  const handleError = (0, import_react23.useCallback)(
+  const [isUploading, setIsUploading] = (0, import_react30.useState)(false);
+  const [uploadProgress, setUploadProgress] = (0, import_react30.useState)(null);
+  const [errorMessage, setErrorMessage] = (0, import_react30.useState)(null);
+  const floatingMenuFileInputRef = (0, import_react30.useRef)(null);
+  const floatingMenuBlockRef = (0, import_react30.useRef)(null);
+  const floatingMenuUploadStartTimeRef = (0, import_react30.useRef)(0);
+  const handleError = (0, import_react30.useCallback)(
     (error) => {
       onError?.(error);
       setErrorMessage(error.getUserMessage());
@@ -3798,10 +4528,10 @@ function LumirEditor({
     },
     [onError]
   );
-  const validatedContent = (0, import_react23.useMemo)(() => {
+  const validatedContent = (0, import_react30.useMemo)(() => {
     return ContentUtils.validateContent(initialContent, initialEmptyBlocks);
   }, [initialContent, initialEmptyBlocks]);
-  const tableConfig = (0, import_react23.useMemo)(() => {
+  const tableConfig = (0, import_react30.useMemo)(() => {
     return EditorConfig.getDefaultTableConfig(tables);
   }, [
     tables?.splitCells,
@@ -3809,10 +4539,10 @@ function LumirEditor({
     tables?.cellTextColor,
     tables?.headers
   ]);
-  const headingConfig = (0, import_react23.useMemo)(() => {
+  const headingConfig = (0, import_react30.useMemo)(() => {
     return EditorConfig.getDefaultHeadingConfig(heading);
   }, [heading?.levels?.join(",") ?? ""]);
-  const disabledExtensions = (0, import_react23.useMemo)(() => {
+  const disabledExtensions = (0, import_react30.useMemo)(() => {
     return EditorConfig.getDisabledExtensions(
       disableExtensions,
       allowVideoUpload,
@@ -3820,18 +4550,18 @@ function LumirEditor({
       allowFileUpload
     );
   }, [disableExtensions, allowVideoUpload, allowAudioUpload, allowFileUpload]);
-  (0, import_react23.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     DEBUG_LOG("LumirEditor:init:disabledExtensions", "snapshot", {
       allowVideoUpload,
       hasVideoInDisabled: disabledExtensions.includes("video"),
       disabledList: disabledExtensions.slice(0, 15)
     });
   }, [allowVideoUpload, disabledExtensions]);
-  const fileNameTransformRef = (0, import_react23.useRef)(s3Upload?.fileNameTransform);
-  (0, import_react23.useEffect)(() => {
+  const fileNameTransformRef = (0, import_react30.useRef)(s3Upload?.fileNameTransform);
+  (0, import_react30.useEffect)(() => {
     fileNameTransformRef.current = s3Upload?.fileNameTransform;
   }, [s3Upload?.fileNameTransform]);
-  const memoizedS3Upload = (0, import_react23.useMemo)(() => {
+  const memoizedS3Upload = (0, import_react30.useMemo)(() => {
     if (!s3Upload) return void 0;
     return {
       apiEndpoint: s3Upload.apiEndpoint,
@@ -3860,10 +4590,19 @@ function LumirEditor({
     s3Upload?.maxRetries,
     s3Upload?.onProgress
   ]);
-  const editor = (0, import_react24.useCreateBlockNote)(
+  const editor = (0, import_react31.useCreateBlockNote)(
     {
       // HTML 미리보기 블록이 포함된 커스텀 스키마 사용
       schema,
+      // 모든 BlockNote UI 텍스트(테이블 드롭다운 등) 한글 적용 + "색깔"→"색"
+      dictionary: {
+        ...import_locales.ko,
+        drag_handle: { ...import_locales.ko.drag_handle, colors_menuitem: "\uC0C9" },
+        formatting_toolbar: {
+          ...import_locales.ko.formatting_toolbar,
+          colors: { ...import_locales.ko.formatting_toolbar.colors, tooltip: "\uC0C9" }
+        }
+      },
       initialContent: validatedContent,
       tables: tableConfig,
       heading: headingConfig,
@@ -4055,12 +4794,12 @@ function LumirEditor({
   if (editor && linkPreview?.apiEndpoint) {
     editor._linkPreviewApiEndpoint = linkPreview.apiEndpoint;
   }
-  (0, import_react23.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     if (editor) {
       editor.isEditable = editable;
     }
   }, [editor, editable]);
-  (0, import_react23.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     if (!editor || !onContentChange) return;
     const handleContentChange = () => {
       const blocks = editor.topLevelBlocks;
@@ -4069,13 +4808,13 @@ function LumirEditor({
     };
     return editor.onEditorContentChange(handleContentChange);
   }, [editor, onContentChange]);
-  const previousMediaUrlsRef = (0, import_react23.useRef)(/* @__PURE__ */ new Set());
-  (0, import_react23.useEffect)(() => {
+  const previousMediaUrlsRef = (0, import_react30.useRef)(/* @__PURE__ */ new Set());
+  (0, import_react30.useEffect)(() => {
     if (!editor) return;
     const initialBlocks = editor.topLevelBlocks;
     previousMediaUrlsRef.current = extractMediaUrls(initialBlocks);
   }, [editor]);
-  (0, import_react23.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     if (!editor || !onImageDelete) return;
     const handleMediaDeleteCheck = () => {
       const currentBlocks = editor.topLevelBlocks;
@@ -4089,7 +4828,7 @@ function LumirEditor({
     };
     return editor.onEditorContentChange(handleMediaDeleteCheck);
   }, [editor, onImageDelete]);
-  (0, import_react23.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     const el = editor?.domElement;
     if (!el) return;
     const handleDragOver = (e) => {
@@ -4220,20 +4959,20 @@ function LumirEditor({
       el.removeEventListener("drop", handleDrop, { capture: true });
     };
   }, [editor, allowVideoUpload]);
-  const computedSideMenu = (0, import_react23.useMemo)(() => {
+  const computedSideMenu = (0, import_react30.useMemo)(() => {
     return sideMenuAddButton ? sideMenu : false;
   }, [sideMenuAddButton, sideMenu]);
-  const DragHandleOnlySideMenu = (0, import_react23.useMemo)(() => {
-    return (props) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react24.SideMenu, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react24.DragHandleButton, { ...props }) });
+  const DragHandleOnlySideMenu = (0, import_react30.useMemo)(() => {
+    return (props) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react31.SideMenu, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react31.DragHandleButton, { ...props }) });
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
     "div",
     {
       className: cn("lumirEditor", className),
       style: { position: "relative", display: "flex", flexDirection: "column" },
       children: [
-        floatingMenu && editor && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        floatingMenu && editor && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
             "input",
             {
               ref: floatingMenuFileInputRef,
@@ -4304,7 +5043,7 @@ function LumirEditor({
               }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
             FloatingMenu,
             {
               editor,
@@ -4336,7 +5075,7 @@ function LumirEditor({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
           import_mantine.BlockNoteView,
           {
             editor,
@@ -4348,23 +5087,24 @@ function LumirEditor({
             slashMenu: false,
             emojiPicker,
             filePanel,
-            tableHandles,
+            tableHandles: false,
             onSelectionChange,
             children: [
-              formattingToolbar && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-                import_react24.FormattingToolbarController,
+              tableHandles && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(LumirTableHandlesController, {}),
+              formattingToolbar && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                import_react31.FormattingToolbarController,
                 {
                   formattingToolbar: CustomFormattingToolbar
                 }
               ),
-              linkToolbar && (linkPreview?.apiEndpoint ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react24.LinkToolbarController, { linkToolbar: CustomLinkToolbar }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react24.LinkToolbarController, {})),
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-                import_react24.SuggestionMenuController,
+              linkToolbar && (linkPreview?.apiEndpoint ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react31.LinkToolbarController, { linkToolbar: CustomLinkToolbar }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react31.LinkToolbarController, {})),
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                import_react31.SuggestionMenuController,
                 {
                   triggerCharacter: "/",
-                  getItems: (0, import_react23.useCallback)(
+                  getItems: (0, import_react30.useCallback)(
                     async (query) => {
-                      const items = (0, import_react24.getDefaultReactSlashMenuItems)(editor);
+                      const items = (0, import_react31.getDefaultReactSlashMenuItems)(editor);
                       const filtered = items.filter((item) => {
                         const key = (item?.key || "").toString().toLowerCase();
                         const title = (item?.title || "").toString().toLowerCase();
@@ -4406,7 +5146,7 @@ function LumirEditor({
                         },
                         aliases: ["html", "preview", "\uC6F9", "\uC6F9\uD398\uC774\uC9C0"],
                         group: "Embeds",
-                        icon: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+                        icon: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
                           "svg",
                           {
                             width: "18",
@@ -4418,8 +5158,8 @@ function LumirEditor({
                             strokeLinecap: "round",
                             strokeLinejoin: "round",
                             children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("polyline", { points: "16 18 22 12 16 6" }),
-                              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("polyline", { points: "8 6 2 12 8 18" })
+                              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("polyline", { points: "16 18 22 12 16 6" }),
+                              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("polyline", { points: "8 6 2 12 8 18" })
                             ]
                           }
                         ),
@@ -4430,7 +5170,7 @@ function LumirEditor({
                         allItems.push({
                           title: "Link Preview",
                           onItemClick: () => {
-                            (0, import_core4.insertOrUpdateBlock)(editor, {
+                            (0, import_core5.insertOrUpdateBlock)(editor, {
                               type: "linkPreview",
                               props: { url: "" }
                             });
@@ -4444,7 +5184,7 @@ function LumirEditor({
                             "\uD504\uB9AC\uBDF0"
                           ],
                           group: "Embeds",
-                          icon: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+                          icon: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
                             "svg",
                             {
                               width: "18",
@@ -4456,14 +5196,31 @@ function LumirEditor({
                               strokeLinecap: "round",
                               strokeLinejoin: "round",
                               children: [
-                                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("path", { d: "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" }),
-                                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("path", { d: "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" })
+                                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("path", { d: "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" }),
+                                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("path", { d: "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" })
                               ]
                             }
                           ),
                           subtext: "URL\uC758 \uBBF8\uB9AC\uBCF4\uAE30 \uCE74\uB4DC\uB97C \uC0BD\uC785"
                         });
                       }
+                      const enSlash = import_locales.en.slash_menu;
+                      for (const it of allItems) {
+                        const enEntry = it.key ? enSlash[it.key] : void 0;
+                        if (!enEntry) continue;
+                        const extra = [...enEntry.aliases ?? [], enEntry.title].filter((s) => Boolean(s)).map((s) => s.toLowerCase());
+                        it.aliases = Array.from(
+                          /* @__PURE__ */ new Set([...it.aliases ?? [], ...extra])
+                        );
+                      }
+                      const groupOrder = [];
+                      for (const it of allItems) {
+                        const g = it.group ?? "";
+                        if (!groupOrder.includes(g)) groupOrder.push(g);
+                      }
+                      allItems.sort(
+                        (a, b) => groupOrder.indexOf(a.group ?? "") - groupOrder.indexOf(b.group ?? "")
+                      );
                       if (!query) return allItems;
                       const q = query.toLowerCase();
                       return allItems.filter(
@@ -4476,21 +5233,21 @@ function LumirEditor({
                   )
                 }
               ),
-              !sideMenuAddButton && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react24.SideMenuController, { sideMenu: DragHandleOnlySideMenu })
+              !sideMenuAddButton && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react31.SideMenuController, { sideMenu: DragHandleOnlySideMenu })
             ]
           }
         ),
-        isUploading && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "lumirEditor-upload-overlay", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "lumirEditor-spinner" }),
-          uploadProgress !== null && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { className: "lumirEditor-upload-progress", children: [
+        isUploading && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "lumirEditor-upload-overlay", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "lumirEditor-spinner" }),
+          uploadProgress !== null && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("span", { className: "lumirEditor-upload-progress", children: [
             uploadProgress,
             "%"
           ] })
         ] }),
-        errorMessage && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "lumirEditor-error-toast", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "lumirEditor-error-icon", children: "\u26A0\uFE0F" }),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "lumirEditor-error-message", children: errorMessage }),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        errorMessage && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "lumirEditor-error-toast", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "lumirEditor-error-icon", children: "\u26A0\uFE0F" }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "lumirEditor-error-message", children: errorMessage }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
             "button",
             {
               className: "lumirEditor-error-close",