@underverse-ui/underverse 1.0.75 → 1.0.76

package/dist/index.cjs

@@ -889,6 +889,17 @@ var en_default = {
       undo: "Undo (Ctrl+Z)",
       redo: "Redo (Ctrl+Y)",
       textStyle: "Text Style",
+      fontFamily: "Font Family",
+      fontSize: "Font Size",
+      lineHeight: "Line Height",
+      fontDefault: "Default Font",
+      sizeDefault: "Default Size",
+      lineHeightDefault: "Default Leading",
+      letterSpacing: "Letter Spacing",
+      letterSpacingDefault: "Default Tracking",
+      fontSans: "Sans",
+      fontSerif: "Serif",
+      fontMono: "Mono",
       normal: "Normal text",
       heading1: "Heading 1",
       heading2: "Heading 2",
@@ -962,6 +973,8 @@ var en_default = {
     },
     tableMenu: {
       insert3x3: "Insert 3\xD73 Table",
+      insertTable: "Insert Table",
+      gridPreview: "Insert {rows}\xD7{cols} Table",
       addColumnBefore: "Add Column Before",
       addColumnAfter: "Add Column After",
       addRowBefore: "Add Row Before",
@@ -980,7 +993,10 @@ var en_default = {
       quickAddRowAfter: "Quick Add Row After",
       expandTable: "Expand Table",
       dragRow: "Drag Row",
-      dragColumn: "Drag Column"
+      dragColumn: "Drag Column",
+      alignLeft: "Align Table Left",
+      alignCenter: "Align Table Center",
+      alignRight: "Align Table Right"
     }
   }
 };
@@ -1138,6 +1154,17 @@ var vi_default = {
       undo: "Ho\xE0n t\xE1c (Ctrl+Z)",
       redo: "L\xE0m l\u1EA1i (Ctrl+Y)",
       textStyle: "Ki\u1EC3u ch\u1EEF",
+      fontFamily: "Ph\xF4ng ch\u1EEF",
+      fontSize: "C\u1EE1 ch\u1EEF",
+      lineHeight: "Gi\xE3n d\xF2ng",
+      fontDefault: "Ph\xF4ng m\u1EB7c \u0111\u1ECBnh",
+      sizeDefault: "C\u1EE1 m\u1EB7c \u0111\u1ECBnh",
+      lineHeightDefault: "Gi\xE3n d\xF2ng m\u1EB7c \u0111\u1ECBnh",
+      letterSpacing: "Gi\xE3n ch\u1EEF",
+      letterSpacingDefault: "Gi\xE3n ch\u1EEF m\u1EB7c \u0111\u1ECBnh",
+      fontSans: "Sans",
+      fontSerif: "Serif",
+      fontMono: "Mono",
       normal: "V\u0103n b\u1EA3n th\u01B0\u1EDDng",
       heading1: "Ti\xEAu \u0111\u1EC1 1",
       heading2: "Ti\xEAu \u0111\u1EC1 2",
@@ -1211,6 +1238,8 @@ var vi_default = {
     },
     tableMenu: {
       insert3x3: "Ch\xE8n b\u1EA3ng 3\xD73",
+      insertTable: "Ch\xE8n b\u1EA3ng",
+      gridPreview: "Ch\xE8n b\u1EA3ng {rows}\xD7{cols}",
       addColumnBefore: "Th\xEAm c\u1ED9t tr\u01B0\u1EDBc",
       addColumnAfter: "Th\xEAm c\u1ED9t sau",
       addRowBefore: "Th\xEAm h\xE0ng tr\u01B0\u1EDBc",
@@ -1229,7 +1258,10 @@ var vi_default = {
       quickAddRowAfter: "Th\xEAm nhanh h\xE0ng sau",
       expandTable: "M\u1EDF r\u1ED9ng b\u1EA3ng",
       dragRow: "K\xE9o h\xE0ng",
-      dragColumn: "K\xE9o c\u1ED9t"
+      dragColumn: "K\xE9o c\u1ED9t",
+      alignLeft: "C\u0103n b\u1EA3ng tr\xE1i",
+      alignCenter: "C\u0103n b\u1EA3ng gi\u1EEFa",
+      alignRight: "C\u0103n b\u1EA3ng ph\u1EA3i"
     }
   }
 };
@@ -1387,6 +1419,17 @@ var ko_default = {
       undo: "\uC2E4\uD589 \uCDE8\uC18C",
       redo: "\uB2E4\uC2DC \uC2E4\uD589",
       textStyle: "\uD14D\uC2A4\uD2B8 \uC2A4\uD0C0\uC77C",
+      fontFamily: "\uAE00\uAF34",
+      fontSize: "\uAE00\uC790 \uD06C\uAE30",
+      lineHeight: "\uC904 \uAC04\uACA9",
+      fontDefault: "\uAE30\uBCF8 \uAE00\uAF34",
+      sizeDefault: "\uAE30\uBCF8 \uD06C\uAE30",
+      lineHeightDefault: "\uAE30\uBCF8 \uC904 \uAC04\uACA9",
+      letterSpacing: "\uC790\uAC04",
+      letterSpacingDefault: "\uAE30\uBCF8 \uC790\uAC04",
+      fontSans: "Sans",
+      fontSerif: "Serif",
+      fontMono: "Mono",
       normal: "\uC77C\uBC18 \uD14D\uC2A4\uD2B8",
       heading1: "\uC81C\uBAA9 1",
       heading2: "\uC81C\uBAA9 2",
@@ -1459,6 +1502,8 @@ var ko_default = {
     },
     tableMenu: {
       insert3x3: "3x3 \uD45C \uC0BD\uC785",
+      insertTable: "\uD45C \uC0BD\uC785",
+      gridPreview: "{rows}\xD7{cols} \uD45C \uC0BD\uC785",
       addColumnBefore: "\uC55E\uC5D0 \uC5F4 \uCD94\uAC00",
       addColumnAfter: "\uB4A4\uC5D0 \uC5F4 \uCD94\uAC00",
       addRowBefore: "\uC704\uC5D0 \uD589 \uCD94\uAC00",
@@ -1477,7 +1522,10 @@ var ko_default = {
       quickAddRowAfter: "\uC544\uB798 \uD589 \uBE60\uB974\uAC8C \uCD94\uAC00",
       expandTable: "\uD45C \uD655\uC7A5",
       dragRow: "\uD589 \uB4DC\uB798\uADF8",
-      dragColumn: "\uC5F4 \uB4DC\uB798\uADF8"
+      dragColumn: "\uC5F4 \uB4DC\uB798\uADF8",
+      alignLeft: "\uD45C \uC67C\uCABD \uC815\uB82C",
+      alignCenter: "\uD45C \uAC00\uC6B4\uB370 \uC815\uB82C",
+      alignRight: "\uD45C \uC624\uB978\uCABD \uC815\uB82C"
     }
   }
 };
@@ -1635,6 +1683,17 @@ var ja_default = {
       undo: "\u5143\u306B\u623B\u3059",
       redo: "\u3084\u308A\u76F4\u3057",
       textStyle: "\u30C6\u30AD\u30B9\u30C8\u30B9\u30BF\u30A4\u30EB",
+      fontFamily: "\u30D5\u30A9\u30F3\u30C8",
+      fontSize: "\u6587\u5B57\u30B5\u30A4\u30BA",
+      lineHeight: "\u884C\u9593",
+      fontDefault: "\u6A19\u6E96\u30D5\u30A9\u30F3\u30C8",
+      sizeDefault: "\u6A19\u6E96\u30B5\u30A4\u30BA",
+      lineHeightDefault: "\u6A19\u6E96\u306E\u884C\u9593",
+      letterSpacing: "\u6587\u5B57\u9593\u9694",
+      letterSpacingDefault: "\u6A19\u6E96\u306E\u5B57\u9593",
+      fontSans: "Sans",
+      fontSerif: "Serif",
+      fontMono: "Mono",
       normal: "\u6A19\u6E96\u30C6\u30AD\u30B9\u30C8",
       heading1: "\u898B\u51FA\u3057 1",
       heading2: "\u898B\u51FA\u3057 2",
@@ -1707,6 +1766,8 @@ var ja_default = {
     },
     tableMenu: {
       insert3x3: "3x3 \u8868\u3092\u633F\u5165",
+      insertTable: "\u8868\u3092\u633F\u5165",
+      gridPreview: "{rows}\xD7{cols} \u306E\u8868\u3092\u633F\u5165",
       addColumnBefore: "\u524D\u306B\u5217\u3092\u8FFD\u52A0",
       addColumnAfter: "\u5F8C\u306B\u5217\u3092\u8FFD\u52A0",
       addRowBefore: "\u524D\u306B\u884C\u3092\u8FFD\u52A0",
@@ -1725,7 +1786,10 @@ var ja_default = {
       quickAddRowAfter: "\u4E0B\u306B\u884C\u3092\u3059\u3070\u3084\u304F\u8FFD\u52A0",
       expandTable: "\u8868\u3092\u62E1\u5F35",
       dragRow: "\u884C\u3092\u30C9\u30E9\u30C3\u30B0",
-      dragColumn: "\u5217\u3092\u30C9\u30E9\u30C3\u30B0"
+      dragColumn: "\u5217\u3092\u30C9\u30E9\u30C3\u30B0",
+      alignLeft: "\u8868\u3092\u5DE6\u5BC4\u305B",
+      alignCenter: "\u8868\u3092\u4E2D\u592E\u63C3\u3048",
+      alignRight: "\u8868\u3092\u53F3\u5BC4\u305B"
     }
   }
 };
@@ -22190,7 +22254,6 @@ var import_extension_text_style = require("@tiptap/extension-text-style");
 var import_extension_color = __toESM(require("@tiptap/extension-color"), 1);
 var import_extension_highlight = __toESM(require("@tiptap/extension-highlight"), 1);
 var import_extension_text_align = __toESM(require("@tiptap/extension-text-align"), 1);
-var import_extension_table = require("@tiptap/extension-table");
 var import_extension_table_cell = __toESM(require("@tiptap/extension-table-cell"), 1);
 var import_extension_table_header = __toESM(require("@tiptap/extension-table-header"), 1);
 var import_extension_character_count = __toESM(require("@tiptap/extension-character-count"), 1);
@@ -23158,6 +23221,283 @@ var UEditorTableRow = import_extension_table_row.default.extend({
 });
 var table_row_default = UEditorTableRow;
 
+// src/components/UEditor/font-family.ts
+var import_core6 = require("@tiptap/core");
+var FontFamily = import_core6.Extension.create({
+  name: "fontFamily",
+  addOptions() {
+    return {
+      types: ["textStyle"]
+    };
+  },
+  addGlobalAttributes() {
+    return [
+      {
+        types: this.options.types,
+        attributes: {
+          fontFamily: {
+            default: null,
+            parseHTML: (element) => element.style.fontFamily || null,
+            renderHTML: (attributes) => {
+              const fontFamily = typeof attributes.fontFamily === "string" ? attributes.fontFamily.trim() : "";
+              if (!fontFamily) return {};
+              return { style: `font-family: ${fontFamily}` };
+            }
+          }
+        }
+      }
+    ];
+  },
+  addCommands() {
+    return {
+      setFontFamily: (fontFamily) => ({ chain }) => chain().setMark("textStyle", { fontFamily }).run(),
+      unsetFontFamily: () => ({ chain }) => chain().setMark("textStyle", { fontFamily: null }).removeEmptyTextStyle().run()
+    };
+  }
+});
+var font_family_default = FontFamily;
+
+// src/components/UEditor/font-size.ts
+var import_core7 = require("@tiptap/core");
+var FontSize = import_core7.Extension.create({
+  name: "fontSize",
+  addOptions() {
+    return {
+      types: ["textStyle"]
+    };
+  },
+  addGlobalAttributes() {
+    return [
+      {
+        types: this.options.types,
+        attributes: {
+          fontSize: {
+            default: null,
+            parseHTML: (element) => element.style.fontSize || null,
+            renderHTML: (attributes) => {
+              const fontSize = typeof attributes.fontSize === "string" ? attributes.fontSize.trim() : "";
+              if (!fontSize) return {};
+              return { style: `font-size: ${fontSize}` };
+            }
+          }
+        }
+      }
+    ];
+  },
+  addCommands() {
+    return {
+      setFontSize: (fontSize) => ({ chain }) => chain().setMark("textStyle", { fontSize }).run(),
+      unsetFontSize: () => ({ chain }) => chain().setMark("textStyle", { fontSize: null }).removeEmptyTextStyle().run()
+    };
+  }
+});
+var font_size_default = FontSize;
+
+// src/components/UEditor/line-height.ts
+var import_core8 = require("@tiptap/core");
+var LineHeight = import_core8.Extension.create({
+  name: "lineHeight",
+  addOptions() {
+    return {
+      types: ["textStyle"]
+    };
+  },
+  addGlobalAttributes() {
+    return [
+      {
+        types: this.options.types,
+        attributes: {
+          lineHeight: {
+            default: null,
+            parseHTML: (element) => element.style.lineHeight || null,
+            renderHTML: (attributes) => {
+              const lineHeight = typeof attributes.lineHeight === "string" ? attributes.lineHeight.trim() : "";
+              if (!lineHeight) return {};
+              return { style: `line-height: ${lineHeight}` };
+            }
+          }
+        }
+      }
+    ];
+  },
+  addCommands() {
+    return {
+      setLineHeight: (lineHeight) => ({ chain }) => chain().setMark("textStyle", { lineHeight }).run(),
+      unsetLineHeight: () => ({ chain }) => chain().setMark("textStyle", { lineHeight: null }).removeEmptyTextStyle().run()
+    };
+  }
+});
+var line_height_default = LineHeight;
+
+// src/components/UEditor/letter-spacing.ts
+var import_core9 = require("@tiptap/core");
+var LetterSpacing = import_core9.Extension.create({
+  name: "letterSpacing",
+  addOptions() {
+    return {
+      types: ["textStyle"]
+    };
+  },
+  addGlobalAttributes() {
+    return [
+      {
+        types: this.options.types,
+        attributes: {
+          letterSpacing: {
+            default: null,
+            parseHTML: (element) => element.style.letterSpacing || null,
+            renderHTML: (attributes) => {
+              const letterSpacing = typeof attributes.letterSpacing === "string" ? attributes.letterSpacing.trim() : "";
+              if (!letterSpacing) return {};
+              return { style: `letter-spacing: ${letterSpacing}` };
+            }
+          }
+        }
+      }
+    ];
+  },
+  addCommands() {
+    return {
+      setLetterSpacing: (letterSpacing) => ({ chain }) => chain().setMark("textStyle", { letterSpacing }).run(),
+      unsetLetterSpacing: () => ({ chain }) => chain().setMark("textStyle", { letterSpacing: null }).removeEmptyTextStyle().run()
+    };
+  }
+});
+var letter_spacing_default = LetterSpacing;
+
+// src/components/UEditor/table-align.ts
+var import_extension_table = require("@tiptap/extension-table");
+
+// src/components/UEditor/table-align-utils.ts
+function findTableNodeInfoAtResolvedPos($pos) {
+  for (let depth = $pos.depth; depth > 0; depth -= 1) {
+    const node = $pos.node(depth);
+    if (node.type.name === "table") {
+      return {
+        depth,
+        pos: $pos.before(depth),
+        node
+      };
+    }
+  }
+  return null;
+}
+function findTableNodeInfoFromState(state, anchorPos) {
+  if (typeof anchorPos === "number" && Number.isFinite(anchorPos)) {
+    const safePos = Math.max(0, Math.min(anchorPos, state.doc.content.size));
+    return findTableNodeInfoAtResolvedPos(state.doc.resolve(safePos));
+  }
+  return findTableNodeInfoAtResolvedPos(state.selection.$from);
+}
+function applyTableAlignment(editor, tableAlign, anchorPos) {
+  const tableInfo = findTableNodeInfoFromState(editor.state, anchorPos);
+  if (!tableInfo) return false;
+  editor.view.dispatch(
+    editor.state.tr.setNodeMarkup(tableInfo.pos, tableInfo.node.type, {
+      ...tableInfo.node.attrs,
+      tableAlign
+    })
+  );
+  const tableDom = editor.view.nodeDOM(tableInfo.pos);
+  const tableElement = tableDom instanceof HTMLTableElement ? tableDom : tableDom instanceof HTMLElement ? tableDom.querySelector("table") : null;
+  if (tableElement instanceof HTMLTableElement) {
+    if (tableAlign) {
+      tableElement.setAttribute("data-table-align", tableAlign);
+      tableElement.style.width = "max-content";
+      tableElement.style.maxWidth = "100%";
+      tableElement.style.marginLeft = tableAlign === "center" || tableAlign === "right" ? "auto" : "0";
+      tableElement.style.marginRight = tableAlign === "center" ? "auto" : tableAlign === "right" ? "0" : "auto";
+    } else {
+      tableElement.removeAttribute("data-table-align");
+      tableElement.style.removeProperty("width");
+      tableElement.style.removeProperty("max-width");
+      tableElement.style.removeProperty("margin-left");
+      tableElement.style.removeProperty("margin-right");
+    }
+  }
+  return true;
+}
+
+// src/components/UEditor/table-align.ts
+function normalizeTableAlign(value) {
+  if (value === "left" || value === "center" || value === "right") {
+    return value;
+  }
+  return null;
+}
+function parseTableAlign(element) {
+  const dataAlign = normalizeTableAlign(element.getAttribute("data-table-align"));
+  if (dataAlign) return dataAlign;
+  const marginLeft = element.style.marginLeft?.trim();
+  const marginRight = element.style.marginRight?.trim();
+  if (marginLeft === "auto" && marginRight === "auto") return "center";
+  if (marginLeft === "auto" && (marginRight === "0px" || marginRight === "0")) return "right";
+  if ((marginLeft === "0px" || marginLeft === "0") && marginRight === "auto") return "left";
+  return null;
+}
+function renderTableAlignStyle(tableAlign) {
+  switch (tableAlign) {
+    case "center":
+      return "width: max-content; max-width: 100%; margin-left: auto; margin-right: auto;";
+    case "right":
+      return "width: max-content; max-width: 100%; margin-left: auto; margin-right: 0;";
+    case "left":
+      return "width: max-content; max-width: 100%; margin-left: 0; margin-right: auto;";
+    default:
+      return "";
+  }
+}
+var UEditorTable = import_extension_table.Table.extend({
+  addAttributes() {
+    return {
+      ...this.parent?.(),
+      tableAlign: {
+        default: null,
+        parseHTML: (element) => {
+          if (!(element instanceof HTMLElement)) return null;
+          return parseTableAlign(element);
+        },
+        renderHTML: (attributes) => {
+          const tableAlign = normalizeTableAlign(attributes.tableAlign);
+          if (!tableAlign) return {};
+          return {
+            "data-table-align": tableAlign,
+            style: renderTableAlignStyle(tableAlign)
+          };
+        }
+      }
+    };
+  },
+  addCommands() {
+    return {
+      ...this.parent?.(),
+      setTableAlign: (tableAlign) => ({ state, dispatch }) => {
+        const tableInfo = findTableNodeInfoFromState(state);
+        if (!tableInfo) return false;
+        dispatch?.(
+          state.tr.setNodeMarkup(tableInfo.pos, tableInfo.node.type, {
+            ...tableInfo.node.attrs,
+            tableAlign
+          })
+        );
+        return true;
+      },
+      unsetTableAlign: () => ({ state, dispatch }) => {
+        const tableInfo = findTableNodeInfoFromState(state);
+        if (!tableInfo) return false;
+        dispatch?.(
+          state.tr.setNodeMarkup(tableInfo.pos, tableInfo.node.type, {
+            ...tableInfo.node.attrs,
+            tableAlign: null
+          })
+        );
+        return true;
+      }
+    };
+  }
+});
+var table_align_default = UEditorTable;
+
 // src/components/UEditor/extensions.ts
 var lowlight = (0, import_lowlight.createLowlight)(import_lowlight.common);
 function buildUEditorExtensions({
@@ -23213,7 +23553,7 @@ function buildUEditorExtensions({
     import_extension_code_block_lowlight.default.configure({
       lowlight,
       HTMLAttributes: {
-        class: "rounded-lg bg-[#1e1e1e] p-4 font-mono text-sm overflow-x-auto"
+        class: "rounded-lg border border-border/60 bg-muted/40 text-foreground p-4 font-mono text-sm overflow-x-auto"
       }
     }),
     import_extension_horizontal_rule.default,
@@ -23226,6 +23566,10 @@ function buildUEditorExtensions({
     resizable_image_default,
     ClipboardImages.configure({ upload: uploadImage, insertMode: imageInsertMode }),
     import_extension_text_style.TextStyle,
+    font_family_default,
+    font_size_default,
+    line_height_default,
+    letter_spacing_default,
     import_extension_color.default,
     import_extension_highlight.default.configure({
       multicolor: true
@@ -23233,7 +23577,7 @@ function buildUEditorExtensions({
     import_extension_text_align.default.configure({
       types: ["heading", "paragraph", "image"]
     }),
-    import_extension_table.Table.configure({
+    table_align_default.configure({
       resizable: true,
       handleWidth: 10,
       allowTableNodeSelection: true,
@@ -23541,6 +23885,48 @@ var EmojiPicker2 = ({ onSelect }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(EmojiPicker, { onEmojiSelect: onSelect });
 };
 
+// src/components/UEditor/typography-options.ts
+function normalizeStyleValue(value) {
+  return typeof value === "string" ? value.trim().replace(/^['"]|['"]$/g, "") : "";
+}
+function getDefaultFontFamilies(t) {
+  return [
+    { label: "Inter", value: "Inter, ui-sans-serif, system-ui, sans-serif" },
+    { label: "System UI", value: "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" },
+    { label: "Georgia", value: "Georgia, 'Times New Roman', serif" },
+    { label: "Palatino", value: "'Palatino Linotype', Palatino, Georgia, serif" },
+    { label: "Times", value: "'Times New Roman', Times, serif" },
+    { label: "JetBrains Mono", value: "'JetBrains Mono', 'Fira Code', 'SFMono-Regular', Consolas, monospace" }
+  ];
+}
+function getDefaultFontSizes() {
+  return [
+    { label: "12", value: "12px" },
+    { label: "14", value: "14px" },
+    { label: "16", value: "16px" },
+    { label: "18", value: "18px" },
+    { label: "24", value: "24px" },
+    { label: "32", value: "32px" }
+  ];
+}
+function getDefaultLineHeights() {
+  return [
+    { label: "1.2", value: "1.2" },
+    { label: "1.5", value: "1.5" },
+    { label: "1.75", value: "1.75" },
+    { label: "2", value: "2" }
+  ];
+}
+function getDefaultLetterSpacings() {
+  return [
+    { label: "-0.02em", value: "-0.02em" },
+    { label: "0", value: "0" },
+    { label: "0.02em", value: "0.02em" },
+    { label: "0.05em", value: "0.05em" },
+    { label: "0.08em", value: "0.08em" }
+  ];
+}
+
 // src/components/UEditor/toolbar.tsx
 var import_jsx_runtime80 = require("react/jsx-runtime");
 function fileToDataUrl2(file) {
@@ -23551,12 +23937,16 @@ function fileToDataUrl2(file) {
     reader.readAsDataURL(file);
   });
 }
+function formatTableInsertLabel(template, rows, cols) {
+  return template.replace("{rows}", String(rows)).replace("{cols}", String(cols));
+}
 var ToolbarButton = import_react49.default.forwardRef(({ onClick, onMouseDown, active, disabled, children, title, className }, ref) => {
   const button = /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
     "button",
     {
       ref,
       type: "button",
+      "aria-label": title,
       onMouseDown: (e) => {
         onMouseDown?.(e);
         e.preventDefault();
@@ -23581,22 +23971,115 @@ var ToolbarButton = import_react49.default.forwardRef(({ onClick, onMouseDown, a
 });
 ToolbarButton.displayName = "ToolbarButton";
 var ToolbarDivider = () => /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "w-px h-6 bg-border/50 mx-1" });
+var TableInsertGrid = ({
+  insertLabel,
+  previewTemplate,
+  onInsert
+}) => {
+  const [selection, setSelection] = import_react49.default.useState({ rows: 3, cols: 3 });
+  const maxRows = 8;
+  const maxCols = 8;
+  return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "mb-2 rounded-xl border border-border/60 bg-muted/20 p-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "mb-2 text-sm font-medium text-foreground", children: formatTableInsertLabel(previewTemplate, selection.rows, selection.cols) }),
+    /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+      "div",
+      {
+        className: "grid grid-cols-8 gap-1",
+        onMouseLeave: () => setSelection((prev) => prev),
+        children: Array.from({ length: maxRows }).map(
+          (_, rowIndex) => Array.from({ length: maxCols }).map((__, colIndex) => {
+            const rows = rowIndex + 1;
+            const cols = colIndex + 1;
+            const active = rows <= selection.rows && cols <= selection.cols;
+            return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+              "button",
+              {
+                type: "button",
+                "aria-label": formatTableInsertLabel(previewTemplate, rows, cols),
+                onMouseDown: (e) => e.preventDefault(),
+                onMouseEnter: () => setSelection({ rows, cols }),
+                onFocus: () => setSelection({ rows, cols }),
+                onClick: () => onInsert(rows, cols),
+                className: cn(
+                  "h-5 w-5 rounded-[4px] border transition-colors",
+                  active ? "border-primary bg-primary/20" : "border-border/70 bg-background hover:border-primary/60 hover:bg-primary/10"
+                )
+              },
+              `${rows}-${cols}`
+            );
+          })
+        )
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "mt-2 text-xs text-muted-foreground", children: insertLabel })
+  ] });
+};
 var EditorToolbar = ({
   editor,
   variant,
   uploadImage,
-  imageInsertMode = "base64"
+  imageInsertMode = "base64",
+  fontFamilies,
+  fontSizes,
+  lineHeights,
+  letterSpacings
 }) => {
   const t = useSmartTranslations("UEditor");
   const { textColors, highlightColors } = useEditorColors();
   const [showImageInput, setShowImageInput] = (0, import_react49.useState)(false);
+  const [isTableMenuOpen, setIsTableMenuOpen] = (0, import_react49.useState)(false);
+  const tableCommandAnchorPosRef = (0, import_react49.useRef)(null);
   const fileInputRef = (0, import_react49.useRef)(null);
   const [isUploadingImage, setIsUploadingImage] = (0, import_react49.useState)(false);
   const [imageUploadError, setImageUploadError] = (0, import_react49.useState)(null);
+  const [fontSizeDraft, setFontSizeDraft] = (0, import_react49.useState)("");
   const isImageSelected = editor.isActive("image");
   const imageAttrs = editor.getAttributes("image");
+  const tableAttrs = editor.getAttributes("table");
+  const textStyleAttrs = editor.getAttributes("textStyle");
   const imageLayout = imageAttrs.imageLayout === "left" || imageAttrs.imageLayout === "right" ? imageAttrs.imageLayout : "block";
   const imageWidthPreset = imageAttrs.imageWidthPreset === "sm" || imageAttrs.imageWidthPreset === "md" || imageAttrs.imageWidthPreset === "lg" ? imageAttrs.imageWidthPreset : null;
+  const currentTableAlign = tableAttrs.tableAlign === "center" || tableAttrs.tableAlign === "right" ? tableAttrs.tableAlign : "left";
+  const isTableSelected = editor.isActive("table");
+  const hasTableContext = isTableSelected || tableCommandAnchorPosRef.current !== null;
+  const currentFontFamily = normalizeStyleValue(textStyleAttrs.fontFamily);
+  const currentFontSize = normalizeStyleValue(textStyleAttrs.fontSize);
+  const currentLineHeight = normalizeStyleValue(textStyleAttrs.lineHeight);
+  const currentLetterSpacing = normalizeStyleValue(textStyleAttrs.letterSpacing);
+  const availableFontFamilies = import_react49.default.useMemo(
+    () => fontFamilies ?? getDefaultFontFamilies(t),
+    [fontFamilies, t]
+  );
+  const availableFontSizes = import_react49.default.useMemo(
+    () => fontSizes ?? getDefaultFontSizes(),
+    [fontSizes]
+  );
+  const availableLineHeights = import_react49.default.useMemo(
+    () => lineHeights ?? getDefaultLineHeights(),
+    [lineHeights]
+  );
+  const availableLetterSpacings = import_react49.default.useMemo(
+    () => letterSpacings ?? getDefaultLetterSpacings(),
+    [letterSpacings]
+  );
+  const currentFontFamilyLabel = availableFontFamilies.find((option) => normalizeStyleValue(option.value) === currentFontFamily)?.label ?? t("toolbar.fontDefault");
+  const currentFontSizeLabel = availableFontSizes.find((option) => normalizeStyleValue(option.value) === currentFontSize)?.label ?? t("toolbar.sizeDefault");
+  const currentLineHeightLabel = availableLineHeights.find((option) => normalizeStyleValue(option.value) === currentLineHeight)?.label ?? t("toolbar.lineHeightDefault");
+  const currentLetterSpacingLabel = availableLetterSpacings.find((option) => normalizeStyleValue(option.value) === currentLetterSpacing)?.label ?? t("toolbar.letterSpacingDefault");
+  import_react49.default.useEffect(() => {
+    setFontSizeDraft(currentFontSize.replace(/px$/i, ""));
+  }, [currentFontSize]);
+  const applyFontSizeDraft = () => {
+    const normalized = fontSizeDraft.trim();
+    if (!normalized) {
+      editor.chain().focus().unsetFontSize().run();
+      return;
+    }
+    const parsed = Number.parseFloat(normalized);
+    if (!Number.isFinite(parsed) || parsed <= 0) return;
+    const clamped = Math.min(96, Math.max(8, parsed));
+    editor.chain().focus().setFontSize(`${clamped}px`).run();
+  };
   const insertImageFiles = async (files) => {
     if (files.length === 0) return;
     setIsUploadingImage(true);
@@ -23633,6 +24116,7 @@ var EditorToolbar = ({
     /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(
       DropdownMenu,
       {
+        contentClassName: "p-2",
         trigger: /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(ToolbarButton, { onClick: () => {
         }, title: t("toolbar.textStyle"), className: "px-2 w-auto gap-1", children: [
           /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_lucide_react44.Type, { className: "w-4 h-4" }),
@@ -23681,6 +24165,183 @@ var EditorToolbar = ({
         ]
       }
     ),
+    /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(
+      DropdownMenu,
+      {
+        trigger: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+          ToolbarButton,
+          {
+            onClick: () => {
+            },
+            title: t("toolbar.fontFamily"),
+            className: "relative",
+            children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_lucide_react44.Type, { className: "w-4 h-4" })
+          }
+        ),
+        contentClassName: "max-h-80 overflow-y-auto min-w-56 p-2",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+            DropdownMenuItem,
+            {
+              icon: import_lucide_react44.Type,
+              label: t("toolbar.fontDefault"),
+              onClick: () => editor.chain().focus().unsetFontFamily().run(),
+              active: !currentFontFamily
+            }
+          ),
+          availableFontFamilies.map((option) => /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+            DropdownMenuItem,
+            {
+              label: option.label,
+              onClick: () => editor.chain().focus().setFontFamily(option.value).run(),
+              active: normalizeStyleValue(option.value) === currentFontFamily,
+              className: "font-medium"
+            },
+            option.value
+          ))
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(
+      DropdownMenu,
+      {
+        closeOnSelect: false,
+        trigger: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+          ToolbarButton,
+          {
+            onClick: () => {
+            },
+            title: t("toolbar.fontSize"),
+            className: "px-2 w-auto min-w-9",
+            children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { className: "text-[10px] font-semibold leading-none", children: currentFontSize.replace(/px$/i, "") || "T" })
+          }
+        ),
+        contentClassName: "max-h-80 overflow-y-auto min-w-44 p-2",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "mb-2 rounded-lg border border-border/60 bg-muted/30 p-2", children: /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("label", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+              "input",
+              {
+                type: "number",
+                min: 8,
+                max: 96,
+                step: 1,
+                value: fontSizeDraft,
+                onChange: (e) => setFontSizeDraft(e.target.value),
+                onMouseDown: (e) => e.stopPropagation(),
+                onClick: (e) => e.stopPropagation(),
+                onKeyDown: (e) => {
+                  e.stopPropagation();
+                  if (e.key === "Enter") {
+                    e.preventDefault();
+                    applyFontSizeDraft();
+                  }
+                },
+                "aria-label": t("toolbar.fontSize"),
+                className: "h-8 w-full rounded-md border border-border bg-background px-2 text-sm outline-none focus:ring-2 focus:ring-primary/20"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { className: "text-xs text-muted-foreground", children: "px" })
+          ] }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+            DropdownMenuItem,
+            {
+              icon: import_lucide_react44.Type,
+              label: t("toolbar.sizeDefault"),
+              onClick: () => editor.chain().focus().unsetFontSize().run(),
+              active: !currentFontSize
+            }
+          ),
+          availableFontSizes.map((option) => /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+            DropdownMenuItem,
+            {
+              label: option.label,
+              onClick: () => editor.chain().focus().setFontSize(option.value).run(),
+              active: normalizeStyleValue(option.value) === currentFontSize
+            },
+            option.value
+          ))
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(
+      DropdownMenu,
+      {
+        trigger: /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(
+          ToolbarButton,
+          {
+            onClick: () => {
+            },
+            title: t("toolbar.lineHeight"),
+            className: "gap-0.5",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_lucide_react44.ArrowUp, { className: "w-3 h-3" }),
+              /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_lucide_react44.ArrowDown, { className: "w-3 h-3" })
+            ]
+          }
+        ),
+        contentClassName: "max-h-72 overflow-y-auto p-2",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+            DropdownMenuItem,
+            {
+              icon: import_lucide_react44.Type,
+              label: t("toolbar.lineHeightDefault"),
+              onClick: () => editor.chain().focus().unsetLineHeight().run(),
+              active: !currentLineHeight
+            }
+          ),
+          availableLineHeights.map((option) => /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+            DropdownMenuItem,
+            {
+              label: option.label,
+              onClick: () => editor.chain().focus().setLineHeight(option.value).run(),
+              active: normalizeStyleValue(option.value) === currentLineHeight
+            },
+            option.value
+          ))
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(
+      DropdownMenu,
+      {
+        trigger: /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(
+          ToolbarButton,
+          {
+            onClick: () => {
+            },
+            title: t("toolbar.letterSpacing"),
+            className: "gap-0.5",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_lucide_react44.ArrowLeft, { className: "w-3 h-3" }),
+              /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_lucide_react44.ArrowRight, { className: "w-3 h-3" })
+            ]
+          }
+        ),
+        contentClassName: "max-h-72 overflow-y-auto p-2",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+            DropdownMenuItem,
+            {
+              icon: import_lucide_react44.Type,
+              label: t("toolbar.letterSpacingDefault"),
+              onClick: () => editor.chain().focus().unsetLetterSpacing().run(),
+              active: !currentLetterSpacing
+            }
+          ),
+          availableLetterSpacings.map((option) => /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+            DropdownMenuItem,
+            {
+              label: option.label,
+              onClick: () => editor.chain().focus().setLetterSpacing(option.value).run(),
+              active: normalizeStyleValue(option.value) === currentLetterSpacing
+            },
+            option.value
+          ))
+        ]
+      }
+    ),
     /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(ToolbarDivider, {}),
     /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(ToolbarButton, { onClick: () => editor.chain().focus().toggleBold().run(), active: editor.isActive("bold"), title: t("toolbar.bold"), children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_lucide_react44.Bold, { className: "w-4 h-4" }) }),
     /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(ToolbarButton, { onClick: () => editor.chain().focus().toggleItalic().run(), active: editor.isActive("italic"), title: t("toolbar.italic"), children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_lucide_react44.Italic, { className: "w-4 h-4" }) }),
@@ -24015,18 +24676,58 @@ var EditorToolbar = ({
     /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(
       DropdownMenu,
       {
+        isOpen: isTableMenuOpen,
+        onOpenChange: (open) => {
+          setIsTableMenuOpen(open);
+          tableCommandAnchorPosRef.current = open && editor.isActive("table") ? editor.state.selection.$from.pos : null;
+        },
         trigger: /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(ToolbarButton, { onClick: () => {
         }, title: t("toolbar.table"), children: [
           /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_lucide_react44.Table, { className: "w-4 h-4" }),
           /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_lucide_react44.ChevronDown, { className: "w-3 h-3" })
         ] }),
+        contentClassName: "p-2 min-w-56",
         children: [
+          /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+            TableInsertGrid,
+            {
+              insertLabel: t("tableMenu.insertTable"),
+              previewTemplate: t("tableMenu.gridPreview"),
+              onInsert: (rows, cols) => {
+                editor.chain().focus().insertTable({ rows, cols, withHeaderRow: true }).run();
+                setIsTableMenuOpen(false);
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "my-1 border-t" }),
           /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
             DropdownMenuItem,
             {
-              icon: import_lucide_react44.Table,
-              label: t("tableMenu.insert3x3"),
-              onClick: () => editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()
+              icon: import_lucide_react44.AlignLeft,
+              label: t("tableMenu.alignLeft"),
+              onClick: () => applyTableAlignment(editor, "left", tableCommandAnchorPosRef.current ?? void 0),
+              active: hasTableContext && currentTableAlign === "left",
+              disabled: !hasTableContext
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+            DropdownMenuItem,
+            {
+              icon: import_lucide_react44.AlignCenter,
+              label: t("tableMenu.alignCenter"),
+              onClick: () => applyTableAlignment(editor, "center", tableCommandAnchorPosRef.current ?? void 0),
+              active: hasTableContext && currentTableAlign === "center",
+              disabled: !hasTableContext
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+            DropdownMenuItem,
+            {
+              icon: import_lucide_react44.AlignRight,
+              label: t("tableMenu.alignRight"),
+              onClick: () => applyTableAlignment(editor, "right", tableCommandAnchorPosRef.current ?? void 0),
+              active: hasTableContext && currentTableAlign === "right",
+              disabled: !hasTableContext
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "my-1 border-t" }),
@@ -24036,7 +24737,7 @@ var EditorToolbar = ({
               icon: import_lucide_react44.ArrowLeft,
               label: t("tableMenu.addColumnBefore"),
               onClick: () => editor.chain().focus().addColumnBefore().run(),
-              disabled: !editor.can().addColumnBefore()
+              disabled: !hasTableContext || !editor.can().addColumnBefore()
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
@@ -24045,7 +24746,7 @@ var EditorToolbar = ({
               icon: import_lucide_react44.ArrowDown,
               label: t("tableMenu.addColumnAfter"),
               onClick: () => editor.chain().focus().addColumnAfter().run(),
-              disabled: !editor.can().addColumnAfter()
+              disabled: !hasTableContext || !editor.can().addColumnAfter()
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
@@ -24054,7 +24755,7 @@ var EditorToolbar = ({
               icon: import_lucide_react44.ArrowUp,
               label: t("tableMenu.addRowBefore"),
               onClick: () => editor.chain().focus().addRowBefore().run(),
-              disabled: !editor.can().addRowBefore()
+              disabled: !hasTableContext || !editor.can().addRowBefore()
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
@@ -24063,7 +24764,7 @@ var EditorToolbar = ({
               icon: import_lucide_react44.ArrowRight,
               label: t("tableMenu.addRowAfter"),
               onClick: () => editor.chain().focus().addRowAfter().run(),
-              disabled: !editor.can().addRowAfter()
+              disabled: !hasTableContext || !editor.can().addRowAfter()
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "my-1 border-t" }),
@@ -24073,7 +24774,7 @@ var EditorToolbar = ({
               icon: import_lucide_react44.Table,
               label: t("tableMenu.toggleHeaderRow"),
               onClick: () => editor.chain().focus().toggleHeaderRow().run(),
-              disabled: !editor.can().toggleHeaderRow()
+              disabled: !hasTableContext || !editor.can().toggleHeaderRow()
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
@@ -24082,7 +24783,7 @@ var EditorToolbar = ({
               icon: import_lucide_react44.Table,
               label: t("tableMenu.toggleHeaderColumn"),
               onClick: () => editor.chain().focus().toggleHeaderColumn().run(),
-              disabled: !editor.can().toggleHeaderColumn()
+              disabled: !hasTableContext || !editor.can().toggleHeaderColumn()
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "my-1 border-t" }),
@@ -24092,7 +24793,7 @@ var EditorToolbar = ({
               icon: import_lucide_react44.Trash2,
               label: t("tableMenu.deleteColumn"),
               onClick: () => editor.chain().focus().deleteColumn().run(),
-              disabled: !editor.can().deleteColumn()
+              disabled: !hasTableContext || !editor.can().deleteColumn()
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
@@ -24101,7 +24802,7 @@ var EditorToolbar = ({
               icon: import_lucide_react44.Trash2,
               label: t("tableMenu.deleteRow"),
               onClick: () => editor.chain().focus().deleteRow().run(),
-              disabled: !editor.can().deleteRow()
+              disabled: !hasTableContext || !editor.can().deleteRow()
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
@@ -24110,7 +24811,7 @@ var EditorToolbar = ({
               icon: import_lucide_react44.Trash2,
               label: t("tableMenu.deleteTable"),
               onClick: () => editor.chain().focus().deleteTable().run(),
-              disabled: !editor.can().deleteTable()
+              disabled: !hasTableContext || !editor.can().deleteTable()
             }
           )
         ]
@@ -24200,7 +24901,9 @@ var FloatingMenuContent = ({ editor }) => {
 };
 var BubbleMenuContent = ({
   editor,
-  onKeepOpenChange
+  onKeepOpenChange,
+  fontSizes,
+  lineHeights
 }) => {
   const t = useSmartTranslations("UEditor");
   const { textColors, highlightColors } = useEditorColors();
@@ -24210,6 +24913,17 @@ var BubbleMenuContent = ({
   const imageAttrs = editor.getAttributes("image");
   const imageLayout = imageAttrs.imageLayout === "left" || imageAttrs.imageLayout === "right" ? imageAttrs.imageLayout : "block";
   const imageWidthPreset = imageAttrs.imageWidthPreset === "sm" || imageAttrs.imageWidthPreset === "md" || imageAttrs.imageWidthPreset === "lg" ? imageAttrs.imageWidthPreset : null;
+  const textStyleAttrs = editor.getAttributes("textStyle");
+  const currentFontSize = normalizeStyleValue(textStyleAttrs.fontSize);
+  const currentLineHeight = normalizeStyleValue(textStyleAttrs.lineHeight);
+  const quickFontSizes = (0, import_react50.useMemo)(
+    () => (fontSizes ?? getDefaultFontSizes()).filter((option) => ["14px", "16px", "24px"].includes(option.value)),
+    [fontSizes]
+  );
+  const quickLineHeights = (0, import_react50.useMemo)(
+    () => (lineHeights ?? getDefaultLineHeights()).filter((option) => ["1.2", "1.5", "1.75"].includes(option.value)),
+    [lineHeights]
+  );
   (0, import_react50.useEffect)(() => {
     onKeepOpenChange?.(showLinkInput);
   }, [onKeepOpenChange, showLinkInput]);
@@ -24329,6 +25043,50 @@ var BubbleMenuContent = ({
     ),
     /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(ToolbarButton, { onClick: () => setShowEditorColorPalette(true), title: t("colors.textColor"), children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_lucide_react45.Palette, { className: "w-4 h-4" }) }),
     /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: "w-px h-6 bg-border/50 mx-1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+      ToolbarButton,
+      {
+        onClick: () => editor.chain().focus().unsetFontSize().run(),
+        active: !currentFontSize,
+        title: t("toolbar.sizeDefault"),
+        className: "px-2 w-auto",
+        children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("span", { className: "text-[10px] font-semibold", children: "A" })
+      }
+    ),
+    quickFontSizes.map((option) => /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+      ToolbarButton,
+      {
+        onClick: () => editor.chain().focus().setFontSize(option.value).run(),
+        active: normalizeStyleValue(option.value) === currentFontSize,
+        title: `${t("toolbar.fontSize")} ${option.label}`,
+        className: "px-2 w-auto",
+        children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("span", { className: "text-[10px] font-semibold", children: option.label })
+      },
+      option.value
+    )),
+    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: "w-px h-6 bg-border/50 mx-1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+      ToolbarButton,
+      {
+        onClick: () => editor.chain().focus().unsetLineHeight().run(),
+        active: !currentLineHeight,
+        title: t("toolbar.lineHeightDefault"),
+        className: "px-2 w-auto",
+        children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("span", { className: "text-[10px] font-semibold leading-none", children: "LH" })
+      }
+    ),
+    quickLineHeights.map((option) => /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+      ToolbarButton,
+      {
+        onClick: () => editor.chain().focus().setLineHeight(option.value).run(),
+        active: normalizeStyleValue(option.value) === currentLineHeight,
+        title: `${t("toolbar.lineHeight")} ${option.label}`,
+        className: "px-2 w-auto",
+        children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("span", { className: "text-[10px] font-semibold", children: option.label })
+      },
+      option.value
+    )),
+    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: "w-px h-6 bg-border/50 mx-1" }),
     /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
       ToolbarButton,
       {
@@ -24349,8 +25107,13 @@ var BubbleMenuContent = ({
     )
   ] });
 };
-var CustomBubbleMenu = ({ editor }) => {
+var CustomBubbleMenu = ({
+  editor,
+  fontSizes,
+  lineHeights
+}) => {
   const SHOW_DELAY_MS = 180;
+  const BUBBLE_MENU_OFFSET = 16;
   const [isVisible, setIsVisible] = (0, import_react50.useState)(false);
   const [position, setPosition] = (0, import_react50.useState)({ top: 0, left: 0 });
   const menuRef = (0, import_react50.useRef)(null);
@@ -24378,7 +25141,7 @@ var CustomBubbleMenu = ({ editor }) => {
       const start = view.coordsAtPos(from);
       const end = view.coordsAtPos(to);
       const left = (start.left + end.left) / 2;
-      const top = start.top - 10;
+      const top = start.top - BUBBLE_MENU_OFFSET;
       setPosition({ top, left });
       if (keepOpenRef.current) {
         clearShowTimeout();
@@ -24424,7 +25187,9 @@ var CustomBubbleMenu = ({ editor }) => {
           BubbleMenuContent,
           {
             editor,
-            onKeepOpenChange: setKeepOpen
+            onKeepOpenChange: setKeepOpen,
+            fontSizes,
+            lineHeights
           }
         )
       }
@@ -24433,6 +25198,7 @@ var CustomBubbleMenu = ({ editor }) => {
   );
 };
 var CustomFloatingMenu = ({ editor }) => {
+  const FLOATING_MENU_OFFSET = 16;
   const [isVisible, setIsVisible] = (0, import_react50.useState)(false);
   const [position, setPosition] = (0, import_react50.useState)({ top: 0, left: 0 });
   (0, import_react50.useEffect)(() => {
@@ -24445,7 +25211,7 @@ var CustomFloatingMenu = ({ editor }) => {
         return;
       }
       const coords = view.coordsAtPos($from.pos);
-      setPosition({ top: coords.top - 10, left: coords.left });
+      setPosition({ top: coords.top - FLOATING_MENU_OFFSET, left: coords.left });
       setIsVisible(true);
     };
     const handleBlur = () => setIsVisible(false);
@@ -28921,9 +29687,16 @@ var FALLBACK_TABLE_COLUMN_WIDTH = 160;
 var MENU_HOVER_PADDING = 18;
 var ROW_HANDLE_HOVER_WIDTH = 28;
 var COLUMN_HANDLE_HOVER_HEIGHT = 28;
+var ROW_HANDLE_GUTTER = 20;
+var TABLE_MENU_TOP_OFFSET = 10;
+var COLUMN_HANDLE_TOP_OFFSET = 8;
+var ADD_COLUMN_RAIL_GAP = 4;
+var ADD_ROW_RAIL_GAP = 4;
 var ADD_COLUMN_HOVER_WIDTH = 24;
 var ADD_ROW_HOVER_HEIGHT = 24;
 var HANDLE_HOVER_RADIUS = 14;
+var IDLE_HANDLE_OPACITY = "0.4";
+var IDLE_HANDLE_SCALE = "0.78";
 var DEFAULT_HOVER_STATE = {
   menuVisible: false,
   addColumnVisible: false,
@@ -29165,8 +29938,8 @@ function TableControls({ editor, containerRef }) {
     const rowHandleIndex = Number.isFinite(directRowHandleIndex) ? directRowHandleIndex : activeLayout.rowHandles.find((rowHandle) => relativeX >= activeLayout.tableLeft - ROW_HANDLE_HOVER_WIDTH && relativeX <= activeLayout.tableLeft && Math.abs(relativeY - rowHandle.center) <= HANDLE_HOVER_RADIUS)?.index ?? null;
     const columnHandleIndex = Number.isFinite(directColumnHandleIndex) ? directColumnHandleIndex : activeLayout.columnHandles.find((columnHandle) => relativeY >= activeLayout.tableTop - COLUMN_HANDLE_HOVER_HEIGHT && relativeY <= activeLayout.tableTop && Math.abs(relativeX - columnHandle.center) <= HANDLE_HOVER_RADIUS)?.index ?? null;
     const menuVisible = Boolean(directTableMenu) || relativeX >= activeLayout.tableLeft - MENU_HOVER_PADDING && relativeX <= activeLayout.tableLeft + 42 && relativeY >= activeLayout.tableTop - COLUMN_HANDLE_HOVER_HEIGHT && relativeY <= activeLayout.tableTop + MENU_HOVER_PADDING;
-    const addColumnVisible = Boolean(directAddColumn) || relativeX >= activeLayout.wrapperLeft + visibleTableWidth2 && relativeX <= activeLayout.wrapperLeft + visibleTableWidth2 + ADD_COLUMN_HOVER_WIDTH && relativeY >= activeLayout.wrapperTop && relativeY <= activeLayout.wrapperTop + visibleTableHeight2;
-    const addRowVisible = Boolean(directAddRow) || relativeY >= activeLayout.wrapperTop + activeLayout.wrapperHeight && relativeY <= activeLayout.wrapperTop + activeLayout.wrapperHeight + ADD_ROW_HOVER_HEIGHT && relativeX >= activeLayout.wrapperLeft && relativeX <= activeLayout.wrapperLeft + visibleTableWidth2;
+    const addColumnVisible = Boolean(directAddColumn) || relativeX >= activeLayout.tableLeft + visibleTableWidth2 && relativeX <= activeLayout.tableLeft + visibleTableWidth2 + ADD_COLUMN_HOVER_WIDTH && relativeY >= activeLayout.tableTop && relativeY <= activeLayout.tableTop + visibleTableHeight2;
+    const addRowVisible = Boolean(directAddRow) || relativeY >= activeLayout.tableTop + visibleTableHeight2 && relativeY <= activeLayout.tableTop + visibleTableHeight2 + ADD_ROW_HOVER_HEIGHT && relativeX >= activeLayout.tableLeft && relativeX <= activeLayout.tableLeft + visibleTableWidth2;
     setHoverState((prev) => {
       if (prev.menuVisible === menuVisible && prev.addColumnVisible === addColumnVisible && prev.addRowVisible === addRowVisible && prev.rowHandleIndex === rowHandleIndex && prev.columnHandleIndex === columnHandleIndex) {
         return prev;
@@ -29406,6 +30179,21 @@ function TableControls({ editor, containerRef }) {
   const menuItems = import_react51.default.useMemo(() => {
     if (!layout) return [];
     return [
+      {
+        label: t("tableMenu.alignLeft"),
+        icon: import_lucide_react46.AlignLeft,
+        onClick: () => applyTableAlignment(editor, "left", layout.cellPos)
+      },
+      {
+        label: t("tableMenu.alignCenter"),
+        icon: import_lucide_react46.AlignCenter,
+        onClick: () => applyTableAlignment(editor, "center", layout.cellPos)
+      },
+      {
+        label: t("tableMenu.alignRight"),
+        icon: import_lucide_react46.AlignRight,
+        onClick: () => applyTableAlignment(editor, "right", layout.cellPos)
+      },
       {
         label: t("tableMenu.addColumnBefore"),
         icon: import_lucide_react46.ArrowLeft,
@@ -29515,16 +30303,16 @@ function TableControls({ editor, containerRef }) {
   if (!layout) {
     return null;
   }
-  const menuTop = Math.max(8, layout.tableTop - 16);
+  const menuTop = Math.max(8, layout.tableTop - TABLE_MENU_TOP_OFFSET);
   const menuLeft = Math.max(8, layout.tableLeft);
-  const rowHandleLeft = Math.max(8, layout.tableLeft - 66);
-  const columnHandleTop = Math.max(8, layout.tableTop - 14);
+  const rowHandleLeft = Math.max(8, layout.tableLeft - ROW_HANDLE_GUTTER);
+  const columnHandleTop = Math.max(8, layout.tableTop - COLUMN_HANDLE_TOP_OFFSET);
   const visibleTableWidth = Math.min(layout.tableWidth, layout.viewportWidth);
   const visibleTableHeight = Math.min(layout.tableHeight, layout.viewportHeight);
-  const columnRailTop = layout.wrapperTop;
-  const columnRailLeft = layout.wrapperLeft + visibleTableWidth + 8;
-  const rowRailTop = layout.wrapperTop + layout.wrapperHeight + 8;
-  const rowRailLeft = layout.wrapperLeft;
+  const columnRailTop = layout.tableTop;
+  const columnRailLeft = layout.tableLeft + visibleTableWidth + ADD_COLUMN_RAIL_GAP;
+  const rowRailTop = layout.tableTop + visibleTableHeight + ADD_ROW_RAIL_GAP;
+  const rowRailLeft = layout.tableLeft;
   const expandPreviewWidth = dragPreview?.kind === "add-column" ? layout.tableWidth + dragPreview.previewCols * layout.avgColumnWidth : layout.tableWidth;
   const expandPreviewHeight = dragPreview?.kind === "add-row" ? layout.tableHeight + dragPreview.previewRows * layout.avgRowHeight : layout.tableHeight;
   const dragStatusText = dragPreview?.kind === "row" ? `${t("tableMenu.dragRow")} ${dragPreview.originIndex + 1} -> ${dragPreview.targetIndex + 1}` : dragPreview?.kind === "column" ? `${t("tableMenu.dragColumn")} ${dragPreview.originIndex + 1} -> ${dragPreview.targetIndex + 1}` : dragPreview?.kind === "add-row" ? `+${dragPreview.previewRows}R` : dragPreview?.kind === "add-column" ? `+${dragPreview.previewCols}C` : null;
@@ -29532,7 +30320,6 @@ function TableControls({ editor, containerRef }) {
     layout.rowHandles.map((rowHandle) => {
       const menuKey = getRowMenuKey(rowHandle.index);
       const visible = controlsVisible || hoverState.rowHandleIndex === rowHandle.index || openMenuKey === menuKey;
-      if (!visible) return null;
       return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
         "div",
         {
@@ -29546,6 +30333,7 @@ function TableControls({ editor, containerRef }) {
             Tooltip,
             {
               placement: "right",
+              disabled: openMenuKey === menuKey,
               content: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("span", { className: "text-xs font-medium", children: `${t("tableMenu.dragRow")} ${rowHandle.index + 1}` }),
               children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("span", { className: "inline-flex", children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
                 DropdownMenu,
@@ -29555,6 +30343,7 @@ function TableControls({ editor, containerRef }) {
                   onOpenChange: (open) => {
                     setOpenMenuKey((prev) => open ? menuKey : prev === menuKey ? null : prev);
                   },
+                  contentClassName: "p-2",
                   items: getRowHandleMenuItems(rowHandle),
                   trigger: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
                     "button",
@@ -29583,8 +30372,13 @@ function TableControls({ editor, containerRef }) {
                       className: cn(
                         "inline-flex h-6 w-6 items-center justify-center rounded-full",
                         "border border-border/70 bg-background/95 text-muted-foreground shadow-sm backdrop-blur",
+                        "cursor-grab active:cursor-grabbing",
                         "transition-[opacity,transform,colors] duration-150 hover:bg-accent hover:text-foreground"
                       ),
+                      style: {
+                        opacity: visible ? 1 : Number(IDLE_HANDLE_OPACITY),
+                        transform: visible ? "scale(1)" : `scale(${IDLE_HANDLE_SCALE})`
+                      },
                       children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(import_lucide_react46.GripVertical, { className: "h-3.5 w-3.5" })
                     }
                   )
@@ -29599,7 +30393,6 @@ function TableControls({ editor, containerRef }) {
     layout.columnHandles.map((columnHandle) => {
       const menuKey = getColumnMenuKey(columnHandle.index);
       const visible = controlsVisible || hoverState.columnHandleIndex === columnHandle.index || openMenuKey === menuKey;
-      if (!visible) return null;
       return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
         "div",
         {
@@ -29613,6 +30406,7 @@ function TableControls({ editor, containerRef }) {
             Tooltip,
             {
               placement: "top",
+              disabled: openMenuKey === menuKey,
               content: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("span", { className: "text-xs font-medium", children: `${t("tableMenu.dragColumn")} ${columnHandle.index + 1}` }),
               children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("span", { className: "inline-flex", children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
                 DropdownMenu,
@@ -29622,6 +30416,7 @@ function TableControls({ editor, containerRef }) {
                   onOpenChange: (open) => {
                     setOpenMenuKey((prev) => open ? menuKey : prev === menuKey ? null : prev);
                   },
+                  contentClassName: "p-2",
                   items: getColumnHandleMenuItems(columnHandle),
                   trigger: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
                     "button",
@@ -29650,8 +30445,13 @@ function TableControls({ editor, containerRef }) {
                       className: cn(
                         "inline-flex h-6 w-6 items-center justify-center rounded-full",
                         "border border-border/70 bg-background/95 text-muted-foreground shadow-sm backdrop-blur",
+                        "cursor-grab active:cursor-grabbing",
                         "transition-[opacity,transform,colors] duration-150 hover:bg-accent hover:text-foreground"
                       ),
+                      style: {
+                        opacity: visible ? 1 : Number(IDLE_HANDLE_OPACITY),
+                        transform: visible ? "scale(1)" : `scale(${IDLE_HANDLE_SCALE})`
+                      },
                       children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(import_lucide_react46.GripHorizontal, { className: "h-3.5 w-3.5" })
                     }
                   )
@@ -29663,7 +30463,7 @@ function TableControls({ editor, containerRef }) {
         `column-handle-${columnHandle.index}`
       );
     }),
-    (controlsVisible || hoverState.menuVisible || tableMenuOpen) && /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
       "div",
       {
         className: "absolute z-30",
@@ -29676,6 +30476,7 @@ function TableControls({ editor, containerRef }) {
           Tooltip,
           {
             placement: "top",
+            disabled: tableMenuOpen,
             content: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("span", { className: "text-xs font-medium", children: t("tableMenu.openControls") }),
             children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("span", { className: "inline-flex", children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
               DropdownMenu,
@@ -29685,6 +30486,7 @@ function TableControls({ editor, containerRef }) {
                 onOpenChange: (open) => {
                   setOpenMenuKey((prev) => open ? "table" : prev === "table" ? null : prev);
                 },
+                contentClassName: "p-2",
                 items: menuItems,
                 trigger: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
                   "button",
@@ -29697,6 +30499,10 @@ function TableControls({ editor, containerRef }) {
                       "border border-border/70 bg-background/95 text-muted-foreground shadow-sm backdrop-blur",
                       "transition-[opacity,transform,colors] duration-150 hover:bg-accent hover:text-foreground"
                     ),
+                    style: {
+                      opacity: controlsVisible || hoverState.menuVisible || tableMenuOpen ? 1 : 0.5,
+                      transform: controlsVisible || hoverState.menuVisible || tableMenuOpen ? "scale(1)" : "scale(0.82)"
+                    },
                     children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(import_lucide_react46.MoreHorizontal, { className: "h-4 w-4" })
                   }
                 )
@@ -29706,7 +30512,7 @@ function TableControls({ editor, containerRef }) {
         )
       }
     ),
-    (controlsVisible || hoverState.addColumnVisible) && /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
       Tooltip,
       {
         placement: "right",
@@ -29733,17 +30539,19 @@ function TableControls({ editor, containerRef }) {
               "transition-[opacity,transform,colors] duration-150 hover:bg-accent hover:text-foreground disabled:opacity-50 disabled:cursor-not-allowed"
             ),
             style: {
-              top: columnRailTop,
+              top: controlsVisible || hoverState.addColumnVisible ? columnRailTop : columnRailTop + Math.max(0, visibleTableHeight / 2 - 24),
               left: columnRailLeft,
-              width: 18,
-              height: visibleTableHeight
+              width: controlsVisible || hoverState.addColumnVisible ? 18 : 12,
+              height: controlsVisible || hoverState.addColumnVisible ? visibleTableHeight : 48,
+              opacity: controlsVisible || hoverState.addColumnVisible ? 1 : 0.45,
+              transform: controlsVisible || hoverState.addColumnVisible ? "scale(1)" : "scale(0.92)"
             },
             children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("span", { className: "text-sm font-medium leading-none", children: "+" })
           }
         )
       }
     ),
-    (controlsVisible || hoverState.addRowVisible) && /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
       Tooltip,
       {
         placement: "bottom",
@@ -29771,9 +30579,11 @@ function TableControls({ editor, containerRef }) {
             ),
             style: {
               top: rowRailTop,
-              left: rowRailLeft,
-              width: visibleTableWidth,
-              height: 16
+              left: controlsVisible || hoverState.addRowVisible ? rowRailLeft : rowRailLeft + Math.max(0, visibleTableWidth / 2 - 24),
+              width: controlsVisible || hoverState.addRowVisible ? visibleTableWidth : 48,
+              height: controlsVisible || hoverState.addRowVisible ? 16 : 12,
+              opacity: controlsVisible || hoverState.addRowVisible ? 1 : 0.45,
+              transform: controlsVisible || hoverState.addRowVisible ? "scale(1)" : "scale(0.92)"
             },
             children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("span", { className: "text-sm font-medium leading-none", children: "+" })
           }
@@ -29960,6 +30770,32 @@ function getRelativeCellMetrics(surface, cell) {
     height: cellRect.height
   };
 }
+function getRelativeSelectedCellsMetrics(surface) {
+  const selectedCells = Array.from(
+    surface.querySelectorAll("td.selectedCell, th.selectedCell")
+  );
+  if (selectedCells.length === 0) {
+    return null;
+  }
+  const surfaceRect = surface.getBoundingClientRect();
+  let left = Number.POSITIVE_INFINITY;
+  let top = Number.POSITIVE_INFINITY;
+  let right = Number.NEGATIVE_INFINITY;
+  let bottom = Number.NEGATIVE_INFINITY;
+  selectedCells.forEach((cell) => {
+    const rect = cell.getBoundingClientRect();
+    left = Math.min(left, rect.left);
+    top = Math.min(top, rect.top);
+    right = Math.max(right, rect.right);
+    bottom = Math.max(bottom, rect.bottom);
+  });
+  return {
+    left: left - surfaceRect.left + surface.scrollLeft,
+    top: top - surfaceRect.top + surface.scrollTop,
+    width: right - left,
+    height: bottom - top
+  };
+}
 var UEditor = import_react52.default.forwardRef(({
   content = "",
   onChange,
@@ -29979,7 +30815,11 @@ var UEditor = import_react52.default.forwardRef(({
   maxCharacters,
   minHeight = "200px",
   maxHeight = "auto",
-  variant = "default"
+  variant = "default",
+  fontFamilies,
+  fontSizes,
+  lineHeights,
+  letterSpacings
 }, ref) => {
   const t = useSmartTranslations("UEditor");
   const effectivePlaceholder = placeholder ?? t("placeholder");
@@ -30024,7 +30864,7 @@ var UEditor = import_react52.default.forwardRef(({
       highlight.style.display = "none";
       return;
     }
-    const metrics = getRelativeCellMetrics(surface, cell);
+    const metrics = getRelativeSelectedCellsMetrics(surface) ?? getRelativeCellMetrics(surface, cell);
     highlight.style.display = "block";
     highlight.style.left = `${metrics.left}px`;
     highlight.style.top = `${metrics.top}px`;
@@ -30127,8 +30967,10 @@ var UEditor = import_react52.default.forwardRef(({
           "[&_ul[data-type='taskList']_li>label>input]:border-2",
           "[&_ul[data-type='taskList']_li>label>input]:border-primary/50",
           "[&_ul[data-type='taskList']_li>label>input]:accent-primary",
-          "[&_pre]:bg-[#1e1e1e]!",
-          "[&_pre]:text-[#d4d4d4]!",
+          "[&_pre]:bg-muted/40!",
+          "[&_pre]:text-foreground!",
+          "[&_pre]:border!",
+          "[&_pre]:border-border/60!",
           "[&_pre_code]:bg-transparent!",
           "[&_.tableWrapper]:overflow-x-auto",
           "[&_.tableWrapper]:pb-1.5",
@@ -30148,6 +30990,11 @@ var UEditor = import_react52.default.forwardRef(({
           "[&_table]:table-fixed",
           "[&_table]:overflow-hidden",
           "[&_table]:select-text",
+          "[&_table[data-table-align]]:w-max",
+          "[&_table[data-table-align]]:max-w-full",
+          "[&_table[data-table-align='center']]:mx-auto",
+          "[&_table[data-table-align='right']]:ml-auto",
+          "[&_table[data-table-align='right']]:mr-0",
           "[&_td]:relative",
           "[&_td]:align-top",
           "[&_td]:box-border",
@@ -30510,8 +31357,27 @@ var UEditor = import_react52.default.forwardRef(({
         className
       ),
       children: [
-        editable && showToolbar && /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(EditorToolbar, { editor, variant, uploadImage, imageInsertMode }),
-        editable && showBubbleMenu && /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(CustomBubbleMenu, { editor }),
+        editable && showToolbar && /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+          EditorToolbar,
+          {
+            editor,
+            variant,
+            uploadImage,
+            imageInsertMode,
+            fontFamilies,
+            fontSizes,
+            lineHeights,
+            letterSpacings
+          }
+        ),
+        editable && showBubbleMenu && /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+          CustomBubbleMenu,
+          {
+            editor,
+            fontSizes,
+            lineHeights
+          }
+        ),
         editable && showFloatingMenu && /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(CustomFloatingMenu, { editor }),
         /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(
           "div",
@@ -30544,7 +31410,7 @@ var UEditor = import_react52.default.forwardRef(({
                 {
                   ref: activeTableCellHighlightRef,
                   "aria-hidden": "true",
-                  className: "pointer-events-none hidden absolute z-20 rounded-[2px] border-2 border-[#2383e2] bg-[#2383e2]/[0.06] transition-[left,top,width,height] duration-100"
+                  className: "pointer-events-none hidden absolute z-20 rounded-[2px] border-2 border-primary bg-primary/10 transition-[left,top,width,height] duration-100"
                 }
               ),
               editable && /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(TableControls, { editor, containerRef: editorContentRef }),