@lumir-company/editor 0.4.14 → 0.4.15

package/dist/index.mjs

@@ -1,7 +1,7 @@
 "use client";
 
 // src/components/LumirEditor.tsx
-import { useEffect as useEffect8, useMemo as useMemo3, useCallback as useCallback16, useState as useState8, useRef as useRef9 } from "react";
+import { useEffect as useEffect10, useMemo as useMemo6, useCallback as useCallback18, useState as useState10, useRef as useRef11 } from "react";
 import {
   useCreateBlockNote,
   SideMenu as BlockSideMenu,
@@ -11,14 +11,15 @@ import {
   getDefaultReactSlashMenuItems,
   LinkToolbarController,
   FormattingToolbarController,
-  useBlockNoteEditor as useBlockNoteEditor3,
-  useComponentsContext as useComponentsContext3,
+  useBlockNoteEditor as useBlockNoteEditor5,
+  useComponentsContext as useComponentsContext4,
   EditLinkButton,
   OpenLinkButton,
   DeleteLinkButton
 } from "@blocknote/react";
 import { BlockNoteView } from "@blocknote/mantine";
 import { insertOrUpdateBlock } from "@blocknote/core";
+import { ko, en } from "@blocknote/core/locales";
 
 // src/utils/cn.ts
 function cn(...inputs) {
@@ -1814,6 +1815,66 @@ var TextStyleButton = ({
 
 // src/components/FloatingMenu/components/AlignButton.tsx
 import { useCallback as useCallback6 } from "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
 import { jsx as jsx8 } from "react/jsx-runtime";
 var iconMap2 = {
   left: Icons.alignLeft,
@@ -1831,6 +1892,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 {
@@ -1840,6 +1904,9 @@ var AlignButton = ({
   const isActive = getCurrentAlignment() === alignment;
   const handleClick = useCallback6(() => {
     try {
+      if (setSelectedCellsAttr(editor, "textAlignment", alignment)) {
+        return;
+      }
       const block = editor?.getTextCursorPosition()?.block;
       if (block && editor?.updateBlock) {
         editor.updateBlock(block, { props: { textAlignment: alignment } });
@@ -2005,6 +2072,10 @@ var ColorButton = ({ editor, type }) => {
   const colors = type === "text" ? TEXT_COLORS : BACKGROUND_COLORS;
   const getCurrentColor = useCallback9(() => {
     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;
@@ -2034,13 +2105,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);
       }
@@ -2847,7 +2920,6 @@ var VerticalAlignmentExtension = Extension.create({
 import {
   BasicTextStyleButton,
   BlockTypeSelect as BlockTypeSelect2,
-  ColorStyleButton,
   CreateLinkButton,
   FileCaptionButton,
   FileDeleteButton,
@@ -2873,31 +2945,6 @@ import {
   useBlockNoteEditor,
   useSelectedBlocks
 } from "@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
 import { jsx as jsx17 } from "react/jsx-runtime";
 var icons = {
   left: /* @__PURE__ */ jsx17("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: /* @__PURE__ */ jsx17("path", { d: "M15 15H3v2h12v-2zm0-8H3v2h12V7zM3 13h18v-2H3v2zm0 8h18v-2H3v2zM3 3v2h18V3H3z" }) }),
@@ -3078,77 +3125,782 @@ var VerticalAlignButton = (props) => {
   );
 };
 
+// src/components/color/LumirColorControls.tsx
+import {
+  isTableCell,
+  mapTableCell as mapTableCell2
+} from "@blocknote/core";
+import {
+  SplitButton,
+  useBlockNoteEditor as useBlockNoteEditor3,
+  useComponentsContext as useComponentsContext3,
+  useDictionary,
+  useEditorContentOrSelectionChange,
+  useSelectedBlocks as useSelectedBlocks3
+} from "@blocknote/react";
+import { useCallback as useCallback16, useMemo as useMemo3, useRef as useRef9, useState as useState8 } from "react";
+import { Fragment as Fragment5, jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
+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__ */ jsx19(
+    "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__ */ jsx19(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "currentColor",
+      style: { pointerEvents: "none" },
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx19("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 = useComponentsContext3();
+  const dict = useDictionary();
+  return /* @__PURE__ */ jsxs12(Fragment5, { children: [
+    props.text ? /* @__PURE__ */ jsxs12(Fragment5, { children: [
+      /* @__PURE__ */ jsx19(Components.Generic.Menu.Label, { children: props.textTitle ?? dict.color_picker.text_title }),
+      COLORS.map((color) => /* @__PURE__ */ jsx19(
+        Components.Generic.Menu.Item,
+        {
+          onClick: () => {
+            props.onClick?.();
+            props.text.setColor(color);
+          },
+          "data-test": "text-color-" + color,
+          icon: /* @__PURE__ */ jsx19(ColorIcon, { textColor: color, size: props.iconSize }),
+          checked: props.text.color === color,
+          children: dict.color_picker.colors[color]
+        },
+        "text-color-" + color
+      ))
+    ] }) : null,
+    props.background ? /* @__PURE__ */ jsxs12(Fragment5, { children: [
+      /* @__PURE__ */ jsx19(Components.Generic.Menu.Label, { children: props.backgroundTitle ?? dict.color_picker.background_title }),
+      COLORS.map((color) => /* @__PURE__ */ jsx19(
+        Components.Generic.Menu.Item,
+        {
+          onClick: () => {
+            props.onClick?.();
+            props.background.setColor(color);
+          },
+          "data-test": "background-color-" + color,
+          icon: /* @__PURE__ */ jsx19(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 = useComponentsContext3();
+  const editor = useBlockNoteEditor3();
+  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 = useSelectedBlocks3(editor);
+  const [currentTextColor, setCurrentTextColor] = useState8(
+    textColorInSchema ? ed.getActiveStyles().textColor || "default" : "default"
+  );
+  const [currentBackgroundColor, setCurrentBackgroundColor] = useState8(
+    backgroundColorInSchema ? ed.getActiveStyles().backgroundColor || "default" : "default"
+  );
+  useEditorContentOrSelectionChange(() => {
+    const active = ed.getActiveStyles();
+    if (textColorInSchema) {
+      setCurrentTextColor(active.textColor || "default");
+    }
+    if (backgroundColorInSchema) {
+      setCurrentBackgroundColor(active.backgroundColor || "default");
+    }
+  }, editor);
+  const setTextColor = useCallback16(
+    (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 = useCallback16(
+    (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 = useMemo3(() => {
+    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__ */ jsxs12(Components.Generic.Menu.Root, { children: [
+    /* @__PURE__ */ jsx19(Components.Generic.Menu.Trigger, { children: /* @__PURE__ */ jsx19(
+      Components.FormattingToolbar.Button,
+      {
+        className: "bn-button",
+        "data-test": "colors",
+        label: tooltip,
+        mainTooltip: tooltip,
+        icon: /* @__PURE__ */ jsx19(
+          ColorIcon,
+          {
+            textColor: currentTextColor,
+            backgroundColor: currentBackgroundColor,
+            size: 20
+          }
+        )
+      }
+    ) }),
+    /* @__PURE__ */ jsx19(
+      Components.Generic.Menu.Dropdown,
+      {
+        className: "bn-menu-dropdown bn-color-picker-dropdown",
+        children: /* @__PURE__ */ jsx19(
+          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 = useComponentsContext3();
+  const editor = useBlockNoteEditor3();
+  const selectedBlocks = useSelectedBlocks3(editor);
+  const isMultiCell = useMemo3(() => {
+    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 = useRef9([]);
+  const applyBackground = useCallback16(
+    (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__ */ jsxs12(
+    Components.Generic.Menu.Root,
+    {
+      onOpenChange: (open) => {
+        if (open) {
+          stashRef.current = getSelectedCellPositions(editor);
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsx19(Components.Generic.Menu.Trigger, { children: /* @__PURE__ */ jsx19(
+          Components.FormattingToolbar.Button,
+          {
+            className: "bn-button",
+            "data-test": "cell-colors",
+            label: tooltip,
+            mainTooltip: tooltip,
+            icon: /* @__PURE__ */ jsx19(CellFillIcon, { size: 18 })
+          }
+        ) }),
+        /* @__PURE__ */ jsx19(
+          Components.Generic.Menu.Dropdown,
+          {
+            className: "bn-menu-dropdown bn-color-picker-dropdown",
+            children: /* @__PURE__ */ jsx19(
+              LumirColorPicker,
+              {
+                backgroundTitle: "\uC140 \uBC30\uACBD",
+                background: { color: "default", setColor: applyBackground }
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function LumirCellColorPickerButton(props) {
+  const Components = useComponentsContext3();
+  const editor = useBlockNoteEditor3();
+  const updateColor = (color, type) => {
+    const newTable = props.block.content.rows.map((row) => ({
+      ...row,
+      cells: row.cells.map((cell) => mapTableCell2(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__ */ jsxs12(Components.Generic.Menu.Root, { position: "right", sub: true, children: [
+    /* @__PURE__ */ jsx19(Components.Generic.Menu.Trigger, { sub: true, children: /* @__PURE__ */ jsx19(Components.Generic.Menu.Item, { className: "bn-menu-item", subTrigger: true, children: "\uC140 \uC0C9\xB7\uBC30\uACBD" }) }),
+    /* @__PURE__ */ jsx19(
+      Components.Generic.Menu.Dropdown,
+      {
+        sub: true,
+        className: "bn-menu-dropdown bn-color-picker-dropdown",
+        children: /* @__PURE__ */ jsx19(
+          LumirColorPicker,
+          {
+            iconSize: 18,
+            textTitle: "\uC140 \uAE00\uC790\uC0C9",
+            backgroundTitle: "\uC140 \uBC30\uACBD",
+            text: editor.settings.tables.cellTextColor ? {
+              color: isTableCell(currentCell) ? currentCell.props.textColor : "default",
+              setColor: (color) => updateColor(color, "text")
+            } : void 0,
+            background: editor.settings.tables.cellBackgroundColor ? {
+              color: isTableCell(currentCell) ? currentCell.props.backgroundColor : "default",
+              setColor: (color) => updateColor(color, "background")
+            } : void 0
+          }
+        )
+      }
+    )
+  ] });
+}
+function LumirTableCellMenu(props) {
+  const Components = useComponentsContext3();
+  return /* @__PURE__ */ jsx19(
+    Components.Generic.Menu.Dropdown,
+    {
+      className: "bn-menu-dropdown bn-drag-handle-menu",
+      children: props.children || /* @__PURE__ */ jsxs12(Fragment5, { children: [
+        /* @__PURE__ */ jsx19(
+          SplitButton,
+          {
+            block: props.block,
+            rowIndex: props.rowIndex,
+            colIndex: props.colIndex
+          }
+        ),
+        /* @__PURE__ */ jsx19(
+          LumirCellColorPickerButton,
+          {
+            block: props.block,
+            rowIndex: props.rowIndex,
+            colIndex: props.colIndex
+          }
+        )
+      ] })
+    }
+  );
+}
+
 // src/components/CustomFormattingToolbar.tsx
-import { jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
 var CustomFormattingToolbar = () => {
-  return /* @__PURE__ */ jsxs12(FormattingToolbar, { children: [
-    /* @__PURE__ */ jsx19(BlockTypeSelect2, {}, "blockTypeSelect"),
-    /* @__PURE__ */ jsx19(TableCellMergeButton, {}, "tableCellMergeButton"),
-    /* @__PURE__ */ jsx19(FileCaptionButton, {}, "fileCaptionButton"),
-    /* @__PURE__ */ jsx19(FileReplaceButton, {}, "replaceFileButton"),
-    /* @__PURE__ */ jsx19(FileRenameButton, {}, "fileRenameButton"),
-    /* @__PURE__ */ jsx19(FileDeleteButton, {}, "fileDeleteButton"),
-    /* @__PURE__ */ jsx19(FileDownloadButton, {}, "fileDownloadButton"),
-    /* @__PURE__ */ jsx19(FilePreviewButton, {}, "filePreviewButton"),
-    /* @__PURE__ */ jsx19(BasicTextStyleButton, { basicTextStyle: "bold" }, "boldStyleButton"),
-    /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsxs13(FormattingToolbar, { children: [
+    /* @__PURE__ */ jsx20(BlockTypeSelect2, {}, "blockTypeSelect"),
+    /* @__PURE__ */ jsx20(TableCellMergeButton, {}, "tableCellMergeButton"),
+    /* @__PURE__ */ jsx20(FileCaptionButton, {}, "fileCaptionButton"),
+    /* @__PURE__ */ jsx20(FileReplaceButton, {}, "replaceFileButton"),
+    /* @__PURE__ */ jsx20(FileRenameButton, {}, "fileRenameButton"),
+    /* @__PURE__ */ jsx20(FileDeleteButton, {}, "fileDeleteButton"),
+    /* @__PURE__ */ jsx20(FileDownloadButton, {}, "fileDownloadButton"),
+    /* @__PURE__ */ jsx20(FilePreviewButton, {}, "filePreviewButton"),
+    /* @__PURE__ */ jsx20(BasicTextStyleButton, { basicTextStyle: "bold" }, "boldStyleButton"),
+    /* @__PURE__ */ jsx20(
       BasicTextStyleButton,
       {
         basicTextStyle: "italic"
       },
       "italicStyleButton"
     ),
-    /* @__PURE__ */ jsx19(
+    /* @__PURE__ */ jsx20(
       BasicTextStyleButton,
       {
         basicTextStyle: "underline"
       },
       "underlineStyleButton"
     ),
-    /* @__PURE__ */ jsx19(
+    /* @__PURE__ */ jsx20(
       BasicTextStyleButton,
       {
         basicTextStyle: "strike"
       },
       "strikeStyleButton"
     ),
-    /* @__PURE__ */ jsx19(TextAlignButtonWithVA, { textAlignment: "left" }, "textAlignLeftButton"),
-    /* @__PURE__ */ jsx19(
+    /* @__PURE__ */ jsx20(TextAlignButtonWithVA, { textAlignment: "left" }, "textAlignLeftButton"),
+    /* @__PURE__ */ jsx20(
       TextAlignButtonWithVA,
       {
         textAlignment: "center"
       },
       "textAlignCenterButton"
     ),
-    /* @__PURE__ */ jsx19(TextAlignButtonWithVA, { textAlignment: "right" }, "textAlignRightButton"),
-    /* @__PURE__ */ jsx19(
+    /* @__PURE__ */ jsx20(TextAlignButtonWithVA, { textAlignment: "right" }, "textAlignRightButton"),
+    /* @__PURE__ */ jsx20(
       VerticalAlignButton,
       {
         verticalAlignment: "top"
       },
       "verticalAlignTop"
     ),
-    /* @__PURE__ */ jsx19(
+    /* @__PURE__ */ jsx20(
       VerticalAlignButton,
       {
         verticalAlignment: "middle"
       },
       "verticalAlignMiddle"
     ),
-    /* @__PURE__ */ jsx19(
+    /* @__PURE__ */ jsx20(
       VerticalAlignButton,
       {
         verticalAlignment: "bottom"
       },
       "verticalAlignBottom"
     ),
-    /* @__PURE__ */ jsx19(ColorStyleButton, {}, "colorStyleButton"),
-    /* @__PURE__ */ jsx19(NestBlockButton, {}, "nestBlockButton"),
-    /* @__PURE__ */ jsx19(UnnestBlockButton, {}, "unnestBlockButton"),
-    /* @__PURE__ */ jsx19(CreateLinkButton, {}, "createLinkButton")
+    /* @__PURE__ */ jsx20(LumirColorStyleButton, {}, "colorStyleButton"),
+    /* @__PURE__ */ jsx20(LumirCellColorToolbarButton, {}, "cellColorButton"),
+    /* @__PURE__ */ jsx20(NestBlockButton, {}, "nestBlockButton"),
+    /* @__PURE__ */ jsx20(UnnestBlockButton, {}, "unnestBlockButton"),
+    /* @__PURE__ */ jsx20(CreateLinkButton, {}, "createLinkButton")
   ] });
 };
 
+// src/components/LumirTableHandlesController.tsx
+import {
+  ExtendButton,
+  TableCellButton,
+  TableHandle,
+  useBlockNoteEditor as useBlockNoteEditor4,
+  useEditorContentOrSelectionChange as useEditorContentOrSelectionChange2,
+  useExtendButtonsPositioning,
+  useUIPluginState
+} from "@blocknote/react";
+import { autoUpdate as autoUpdate2, FloatingPortal } from "@floating-ui/react";
+import { useCallback as useCallback17, useEffect as useEffect9, useMemo as useMemo5, useRef as useRef10, useState as useState9 } from "react";
+
+// src/components/hooks/useFocusedCellHandlePositioning.ts
+import {
+  autoUpdate,
+  offset,
+  useFloating,
+  useTransitionStyles
+} from "@floating-ui/react";
+import { useEffect as useEffect8, useMemo as useMemo4 } from "react";
+function useFocusedCellHandlePositioning(cellEl, tbodyEl, orientation, show) {
+  const { refs, floatingStyles, context } = useFloating({
+    open: show,
+    placement: orientation === "row" ? "left" : orientation === "col" ? "top" : "right",
+    // col/row: 가장자리 선(zero-size)에, cell: 셀 우측 보더에 14px hit-area 중앙 정렬(-7).
+    middleware: [offset(-7)],
+    whileElementsMounted: autoUpdate
+  });
+  const { isMounted, styles } = useTransitionStyles(context);
+  useEffect8(() => {
+    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 useMemo4(
+    () => ({
+      isMounted,
+      ref: refs.setFloating,
+      // display는 CSS 클래스에서 제어한다(absolute 자식 stacking).
+      style: {
+        ...styles,
+        ...floatingStyles
+      }
+    }),
+    [floatingStyles, isMounted, refs.setFloating, styles]
+  );
+}
+
+// src/components/LumirTableHandlesController.tsx
+import { Fragment as Fragment6, jsx as jsx21, jsxs as jsxs14 } from "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 = useBlockNoteEditor4();
+  const [focused, setFocused] = useState9(null);
+  const [menuContainerRef, setMenuContainerRef] = useState9(null);
+  const [overlayEl, setOverlayEl] = useState9(null);
+  const [openMenu, setOpenMenu] = useState9(null);
+  const frozenRef = useRef10(false);
+  const menuOpenRef = useRef10(false);
+  const draggingRef = useRef10(false);
+  const recompute = useCallback17(() => {
+    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]);
+  useEditorContentOrSelectionChange2(recompute, editor);
+  useEffect9(() => {
+    recompute();
+  }, [recompute]);
+  useEffect9(() => {
+    const onUp = () => {
+      requestAnimationFrame(() => {
+        if (!menuOpenRef.current && !draggingRef.current && frozenRef.current) {
+          frozenRef.current = false;
+          recompute();
+        }
+      });
+    };
+    window.addEventListener("pointerup", onUp);
+    return () => window.removeEventListener("pointerup", onUp);
+  }, [recompute]);
+  useEffect9(() => {
+    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 autoUpdate2(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 = useUIPluginState(
+    editor.tableHandles.onUpdate.bind(editor.tableHandles)
+  );
+  const { addOrRemoveColumnsButton, addOrRemoveRowsButton } = useExtendButtonsPositioning(
+    coreState?.showAddOrRemoveColumnsButton || false,
+    coreState?.showAddOrRemoveRowsButton || false,
+    coreState?.referencePosTable || null
+  );
+  const onStartExtend = useCallback17(() => {
+    editor.tableHandles?.freezeHandles();
+  }, [editor]);
+  const onEndExtend = useCallback17(() => {
+    editor.tableHandles?.unfreezeHandles();
+  }, [editor]);
+  const menuHandlers = useMemo5(() => {
+    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 = useCallback17(() => {
+    frozenRef.current = true;
+  }, []);
+  const onGutterPointerEnter = useCallback17(
+    (e) => {
+      if (e.buttons === 0 && focused) {
+        syncCoreHoverToFocusedCell(focused.cellEl);
+      }
+    },
+    [focused]
+  );
+  const makeDragStart = useCallback17(
+    (dir) => (e) => {
+      draggingRef.current = true;
+      frozenRef.current = true;
+      if (dir === "row") {
+        editor.tableHandles?.rowDragStart(e);
+      } else {
+        editor.tableHandles?.colDragStart(e);
+      }
+    },
+    [editor]
+  );
+  const onDragEnd = useCallback17(() => {
+    editor.tableHandles?.dragEnd();
+    draggingRef.current = false;
+    frozenRef.current = false;
+    recompute();
+  }, [editor, recompute]);
+  const noop = useCallback17(() => {
+  }, []);
+  return /* @__PURE__ */ jsxs14(Fragment6, { children: [
+    /* @__PURE__ */ jsx21("div", { ref: setMenuContainerRef }),
+    th && focused && menuContainerRef && /* @__PURE__ */ jsxs14(FloatingPortal, { root: focused.widgetContainer, children: [
+      /* @__PURE__ */ jsx21("div", { ref: setOverlayEl, className: "lumir-tbl-cell-focus" }),
+      colHandle.isMounted && /* @__PURE__ */ jsxs14(
+        "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__ */ jsx21("span", { className: "lumir-tbl-gutter" }),
+            /* @__PURE__ */ jsx21("div", { className: "lumir-tbl-grip", children: /* @__PURE__ */ jsx21(
+              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__ */ jsxs14(
+        "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__ */ jsx21("span", { className: "lumir-tbl-gutter" }),
+            /* @__PURE__ */ jsx21("div", { className: "lumir-tbl-grip", children: /* @__PURE__ */ jsx21(
+              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__ */ jsxs14(
+        "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__ */ jsx21("span", { className: "lumir-tbl-gutter" }),
+            /* @__PURE__ */ jsx21("div", { className: "lumir-tbl-grip", children: /* @__PURE__ */ jsx21(
+              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__ */ jsxs14(FloatingPortal, { root: coreState.widgetContainer, children: [
+      /* @__PURE__ */ jsx21("div", { ref: addOrRemoveRowsButton.ref, style: addOrRemoveRowsButton.style, children: /* @__PURE__ */ jsx21(
+        ExtendButton,
+        {
+          editor,
+          orientation: "addOrRemoveRows",
+          block: coreState.block,
+          onMouseDown: onStartExtend,
+          onMouseUp: onEndExtend
+        }
+      ) }),
+      /* @__PURE__ */ jsx21(
+        "div",
+        {
+          ref: addOrRemoveColumnsButton.ref,
+          style: addOrRemoveColumnsButton.style,
+          children: /* @__PURE__ */ jsx21(
+            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;
@@ -3479,7 +4231,7 @@ var ALLOWED_VIDEO_EXTENSIONS = [
 ];
 
 // src/components/LumirEditor.tsx
-import { Fragment as Fragment5, jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx22, jsxs as jsxs15 } from "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",
@@ -3704,9 +4456,9 @@ var findBlockWithLink = (blocks, targetUrl) => {
   return null;
 };
 var ConvertToPreviewButton = ({ url }) => {
-  const editor = useBlockNoteEditor3();
-  const Components = useComponentsContext3();
-  return /* @__PURE__ */ jsx20(
+  const editor = useBlockNoteEditor5();
+  const Components = useComponentsContext4();
+  return /* @__PURE__ */ jsx22(
     Components.LinkToolbar.Button,
     {
       className: "bn-button",
@@ -3725,29 +4477,29 @@ var ConvertToPreviewButton = ({ url }) => {
           console.error("Convert to link preview failed:", err);
         }
       },
-      icon: /* @__PURE__ */ jsxs13("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-        /* @__PURE__ */ jsx20("rect", { x: "1", y: "3", width: "14", height: "10", rx: "2", stroke: "currentColor", strokeWidth: "1.5", fill: "none" }),
-        /* @__PURE__ */ jsx20("line", { x1: "1", y1: "9", x2: "15", y2: "9", stroke: "currentColor", strokeWidth: "1.5" }),
-        /* @__PURE__ */ jsx20("circle", { cx: "5", cy: "6.5", r: "1.5", stroke: "currentColor", strokeWidth: "1", fill: "none" })
+      icon: /* @__PURE__ */ jsxs15("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+        /* @__PURE__ */ jsx22("rect", { x: "1", y: "3", width: "14", height: "10", rx: "2", stroke: "currentColor", strokeWidth: "1.5", fill: "none" }),
+        /* @__PURE__ */ jsx22("line", { x1: "1", y1: "9", x2: "15", y2: "9", stroke: "currentColor", strokeWidth: "1.5" }),
+        /* @__PURE__ */ jsx22("circle", { cx: "5", cy: "6.5", r: "1.5", stroke: "currentColor", strokeWidth: "1", fill: "none" })
       ] })
     }
   );
 };
 var CustomLinkToolbar = (props) => {
-  const editor = useBlockNoteEditor3();
-  const Components = useComponentsContext3();
+  const editor = useBlockNoteEditor5();
+  const Components = useComponentsContext4();
   const hasLinkPreview = !!editor?._linkPreviewApiEndpoint;
-  return /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs15(
     Components.LinkToolbar.Root,
     {
       className: "bn-toolbar bn-link-toolbar",
       onMouseEnter: props.stopHideTimer,
       onMouseLeave: props.startHideTimer,
       children: [
-        /* @__PURE__ */ jsx20(EditLinkButton, { url: props.url, text: props.text, editLink: props.editLink }),
-        /* @__PURE__ */ jsx20(OpenLinkButton, { url: props.url }),
-        /* @__PURE__ */ jsx20(DeleteLinkButton, { deleteLink: props.deleteLink }),
-        hasLinkPreview && /* @__PURE__ */ jsx20(ConvertToPreviewButton, { url: props.url })
+        /* @__PURE__ */ jsx22(EditLinkButton, { url: props.url, text: props.text, editLink: props.editLink }),
+        /* @__PURE__ */ jsx22(OpenLinkButton, { url: props.url }),
+        /* @__PURE__ */ jsx22(DeleteLinkButton, { deleteLink: props.deleteLink }),
+        hasLinkPreview && /* @__PURE__ */ jsx22(ConvertToPreviewButton, { url: props.url })
       ]
     }
   );
@@ -3791,13 +4543,13 @@ function LumirEditor({
   onError,
   onImageDelete
 }) {
-  const [isUploading, setIsUploading] = useState8(false);
-  const [uploadProgress, setUploadProgress] = useState8(null);
-  const [errorMessage, setErrorMessage] = useState8(null);
-  const floatingMenuFileInputRef = useRef9(null);
-  const floatingMenuBlockRef = useRef9(null);
-  const floatingMenuUploadStartTimeRef = useRef9(0);
-  const handleError = useCallback16(
+  const [isUploading, setIsUploading] = useState10(false);
+  const [uploadProgress, setUploadProgress] = useState10(null);
+  const [errorMessage, setErrorMessage] = useState10(null);
+  const floatingMenuFileInputRef = useRef11(null);
+  const floatingMenuBlockRef = useRef11(null);
+  const floatingMenuUploadStartTimeRef = useRef11(0);
+  const handleError = useCallback18(
     (error) => {
       onError?.(error);
       setErrorMessage(error.getUserMessage());
@@ -3805,10 +4557,10 @@ function LumirEditor({
     },
     [onError]
   );
-  const validatedContent = useMemo3(() => {
+  const validatedContent = useMemo6(() => {
     return ContentUtils.validateContent(initialContent, initialEmptyBlocks);
   }, [initialContent, initialEmptyBlocks]);
-  const tableConfig = useMemo3(() => {
+  const tableConfig = useMemo6(() => {
     return EditorConfig.getDefaultTableConfig(tables);
   }, [
     tables?.splitCells,
@@ -3816,10 +4568,10 @@ function LumirEditor({
     tables?.cellTextColor,
     tables?.headers
   ]);
-  const headingConfig = useMemo3(() => {
+  const headingConfig = useMemo6(() => {
     return EditorConfig.getDefaultHeadingConfig(heading);
   }, [heading?.levels?.join(",") ?? ""]);
-  const disabledExtensions = useMemo3(() => {
+  const disabledExtensions = useMemo6(() => {
     return EditorConfig.getDisabledExtensions(
       disableExtensions,
       allowVideoUpload,
@@ -3827,18 +4579,18 @@ function LumirEditor({
       allowFileUpload
     );
   }, [disableExtensions, allowVideoUpload, allowAudioUpload, allowFileUpload]);
-  useEffect8(() => {
+  useEffect10(() => {
     DEBUG_LOG("LumirEditor:init:disabledExtensions", "snapshot", {
       allowVideoUpload,
       hasVideoInDisabled: disabledExtensions.includes("video"),
       disabledList: disabledExtensions.slice(0, 15)
     });
   }, [allowVideoUpload, disabledExtensions]);
-  const fileNameTransformRef = useRef9(s3Upload?.fileNameTransform);
-  useEffect8(() => {
+  const fileNameTransformRef = useRef11(s3Upload?.fileNameTransform);
+  useEffect10(() => {
     fileNameTransformRef.current = s3Upload?.fileNameTransform;
   }, [s3Upload?.fileNameTransform]);
-  const memoizedS3Upload = useMemo3(() => {
+  const memoizedS3Upload = useMemo6(() => {
     if (!s3Upload) return void 0;
     return {
       apiEndpoint: s3Upload.apiEndpoint,
@@ -3871,6 +4623,15 @@ function LumirEditor({
     {
       // HTML 미리보기 블록이 포함된 커스텀 스키마 사용
       schema,
+      // 모든 BlockNote UI 텍스트(테이블 드롭다운 등) 한글 적용 + "색깔"→"색"
+      dictionary: {
+        ...ko,
+        drag_handle: { ...ko.drag_handle, colors_menuitem: "\uC0C9" },
+        formatting_toolbar: {
+          ...ko.formatting_toolbar,
+          colors: { ...ko.formatting_toolbar.colors, tooltip: "\uC0C9" }
+        }
+      },
       initialContent: validatedContent,
       tables: tableConfig,
       heading: headingConfig,
@@ -4062,12 +4823,12 @@ function LumirEditor({
   if (editor && linkPreview?.apiEndpoint) {
     editor._linkPreviewApiEndpoint = linkPreview.apiEndpoint;
   }
-  useEffect8(() => {
+  useEffect10(() => {
     if (editor) {
       editor.isEditable = editable;
     }
   }, [editor, editable]);
-  useEffect8(() => {
+  useEffect10(() => {
     if (!editor || !onContentChange) return;
     const handleContentChange = () => {
       const blocks = editor.topLevelBlocks;
@@ -4076,13 +4837,13 @@ function LumirEditor({
     };
     return editor.onEditorContentChange(handleContentChange);
   }, [editor, onContentChange]);
-  const previousMediaUrlsRef = useRef9(/* @__PURE__ */ new Set());
-  useEffect8(() => {
+  const previousMediaUrlsRef = useRef11(/* @__PURE__ */ new Set());
+  useEffect10(() => {
     if (!editor) return;
     const initialBlocks = editor.topLevelBlocks;
     previousMediaUrlsRef.current = extractMediaUrls(initialBlocks);
   }, [editor]);
-  useEffect8(() => {
+  useEffect10(() => {
     if (!editor || !onImageDelete) return;
     const handleMediaDeleteCheck = () => {
       const currentBlocks = editor.topLevelBlocks;
@@ -4096,7 +4857,7 @@ function LumirEditor({
     };
     return editor.onEditorContentChange(handleMediaDeleteCheck);
   }, [editor, onImageDelete]);
-  useEffect8(() => {
+  useEffect10(() => {
     const el = editor?.domElement;
     if (!el) return;
     const handleDragOver = (e) => {
@@ -4227,20 +4988,20 @@ function LumirEditor({
       el.removeEventListener("drop", handleDrop, { capture: true });
     };
   }, [editor, allowVideoUpload]);
-  const computedSideMenu = useMemo3(() => {
+  const computedSideMenu = useMemo6(() => {
     return sideMenuAddButton ? sideMenu : false;
   }, [sideMenuAddButton, sideMenu]);
-  const DragHandleOnlySideMenu = useMemo3(() => {
-    return (props) => /* @__PURE__ */ jsx20(BlockSideMenu, { ...props, children: /* @__PURE__ */ jsx20(DragHandleButton, { ...props }) });
+  const DragHandleOnlySideMenu = useMemo6(() => {
+    return (props) => /* @__PURE__ */ jsx22(BlockSideMenu, { ...props, children: /* @__PURE__ */ jsx22(DragHandleButton, { ...props }) });
   }, []);
-  return /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs15(
     "div",
     {
       className: cn("lumirEditor", className),
       style: { position: "relative", display: "flex", flexDirection: "column" },
       children: [
-        floatingMenu && editor && /* @__PURE__ */ jsxs13(Fragment5, { children: [
-          /* @__PURE__ */ jsx20(
+        floatingMenu && editor && /* @__PURE__ */ jsxs15(Fragment7, { children: [
+          /* @__PURE__ */ jsx22(
             "input",
             {
               ref: floatingMenuFileInputRef,
@@ -4311,7 +5072,7 @@ function LumirEditor({
               }
             }
           ),
-          /* @__PURE__ */ jsx20(
+          /* @__PURE__ */ jsx22(
             FloatingMenu,
             {
               editor,
@@ -4343,7 +5104,7 @@ function LumirEditor({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs13(
+        /* @__PURE__ */ jsxs15(
           BlockNoteView,
           {
             editor,
@@ -4355,21 +5116,22 @@ function LumirEditor({
             slashMenu: false,
             emojiPicker,
             filePanel,
-            tableHandles,
+            tableHandles: false,
             onSelectionChange,
             children: [
-              formattingToolbar && /* @__PURE__ */ jsx20(
+              tableHandles && /* @__PURE__ */ jsx22(LumirTableHandlesController, {}),
+              formattingToolbar && /* @__PURE__ */ jsx22(
                 FormattingToolbarController,
                 {
                   formattingToolbar: CustomFormattingToolbar
                 }
               ),
-              linkToolbar && (linkPreview?.apiEndpoint ? /* @__PURE__ */ jsx20(LinkToolbarController, { linkToolbar: CustomLinkToolbar }) : /* @__PURE__ */ jsx20(LinkToolbarController, {})),
-              /* @__PURE__ */ jsx20(
+              linkToolbar && (linkPreview?.apiEndpoint ? /* @__PURE__ */ jsx22(LinkToolbarController, { linkToolbar: CustomLinkToolbar }) : /* @__PURE__ */ jsx22(LinkToolbarController, {})),
+              /* @__PURE__ */ jsx22(
                 SuggestionMenuController,
                 {
                   triggerCharacter: "/",
-                  getItems: useCallback16(
+                  getItems: useCallback18(
                     async (query) => {
                       const items = getDefaultReactSlashMenuItems(editor);
                       const filtered = items.filter((item) => {
@@ -4413,7 +5175,7 @@ function LumirEditor({
                         },
                         aliases: ["html", "preview", "\uC6F9", "\uC6F9\uD398\uC774\uC9C0"],
                         group: "Embeds",
-                        icon: /* @__PURE__ */ jsxs13(
+                        icon: /* @__PURE__ */ jsxs15(
                           "svg",
                           {
                             width: "18",
@@ -4425,8 +5187,8 @@ function LumirEditor({
                             strokeLinecap: "round",
                             strokeLinejoin: "round",
                             children: [
-                              /* @__PURE__ */ jsx20("polyline", { points: "16 18 22 12 16 6" }),
-                              /* @__PURE__ */ jsx20("polyline", { points: "8 6 2 12 8 18" })
+                              /* @__PURE__ */ jsx22("polyline", { points: "16 18 22 12 16 6" }),
+                              /* @__PURE__ */ jsx22("polyline", { points: "8 6 2 12 8 18" })
                             ]
                           }
                         ),
@@ -4451,7 +5213,7 @@ function LumirEditor({
                             "\uD504\uB9AC\uBDF0"
                           ],
                           group: "Embeds",
-                          icon: /* @__PURE__ */ jsxs13(
+                          icon: /* @__PURE__ */ jsxs15(
                             "svg",
                             {
                               width: "18",
@@ -4463,14 +5225,31 @@ function LumirEditor({
                               strokeLinecap: "round",
                               strokeLinejoin: "round",
                               children: [
-                                /* @__PURE__ */ jsx20("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__ */ jsx20("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__ */ jsx22("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__ */ jsx22("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 = 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(
@@ -4483,21 +5262,21 @@ function LumirEditor({
                   )
                 }
               ),
-              !sideMenuAddButton && /* @__PURE__ */ jsx20(SideMenuController, { sideMenu: DragHandleOnlySideMenu })
+              !sideMenuAddButton && /* @__PURE__ */ jsx22(SideMenuController, { sideMenu: DragHandleOnlySideMenu })
             ]
           }
         ),
-        isUploading && /* @__PURE__ */ jsxs13("div", { className: "lumirEditor-upload-overlay", children: [
-          /* @__PURE__ */ jsx20("div", { className: "lumirEditor-spinner" }),
-          uploadProgress !== null && /* @__PURE__ */ jsxs13("span", { className: "lumirEditor-upload-progress", children: [
+        isUploading && /* @__PURE__ */ jsxs15("div", { className: "lumirEditor-upload-overlay", children: [
+          /* @__PURE__ */ jsx22("div", { className: "lumirEditor-spinner" }),
+          uploadProgress !== null && /* @__PURE__ */ jsxs15("span", { className: "lumirEditor-upload-progress", children: [
             uploadProgress,
             "%"
           ] })
         ] }),
-        errorMessage && /* @__PURE__ */ jsxs13("div", { className: "lumirEditor-error-toast", children: [
-          /* @__PURE__ */ jsx20("span", { className: "lumirEditor-error-icon", children: "\u26A0\uFE0F" }),
-          /* @__PURE__ */ jsx20("span", { className: "lumirEditor-error-message", children: errorMessage }),
-          /* @__PURE__ */ jsx20(
+        errorMessage && /* @__PURE__ */ jsxs15("div", { className: "lumirEditor-error-toast", children: [
+          /* @__PURE__ */ jsx22("span", { className: "lumirEditor-error-icon", children: "\u26A0\uFE0F" }),
+          /* @__PURE__ */ jsx22("span", { className: "lumirEditor-error-message", children: errorMessage }),
+          /* @__PURE__ */ jsx22(
             "button",
             {
               className: "lumirEditor-error-close",