@underverse-ui/underverse 1.0.75 → 1.0.76

package/dist/index.js

@@ -704,6 +704,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",
@@ -777,6 +788,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",
@@ -795,7 +808,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"
     }
   }
 };
@@ -953,6 +969,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",
@@ -1026,6 +1053,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",
@@ -1044,7 +1073,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"
     }
   }
 };
@@ -1202,6 +1234,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",
@@ -1274,6 +1317,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",
@@ -1292,7 +1337,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"
     }
   }
 };
@@ -1450,6 +1498,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",
@@ -1522,6 +1581,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",
@@ -1540,7 +1601,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"
     }
   }
 };
@@ -22021,7 +22085,6 @@ import { TextStyle } from "@tiptap/extension-text-style";
 import Color from "@tiptap/extension-color";
 import Highlight from "@tiptap/extension-highlight";
 import TextAlign from "@tiptap/extension-text-align";
-import { Table as Table3 } from "@tiptap/extension-table";
 import TableCell2 from "@tiptap/extension-table-cell";
 import TableHeader2 from "@tiptap/extension-table-header";
 import CharacterCount from "@tiptap/extension-character-count";
@@ -23001,6 +23064,283 @@ var UEditorTableRow = TableRow2.extend({
 });
 var table_row_default = UEditorTableRow;
 
+// src/components/UEditor/font-family.ts
+import { Extension as Extension5 } from "@tiptap/core";
+var FontFamily = Extension5.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
+import { Extension as Extension6 } from "@tiptap/core";
+var FontSize = Extension6.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
+import { Extension as Extension7 } from "@tiptap/core";
+var LineHeight = Extension7.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
+import { Extension as Extension8 } from "@tiptap/core";
+var LetterSpacing = Extension8.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
+import { Table as Table3 } from "@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 = Table3.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 = createLowlight(common);
 function buildUEditorExtensions({
@@ -23056,7 +23396,7 @@ function buildUEditorExtensions({
     CodeBlockLowlight.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"
       }
     }),
     HorizontalRule,
@@ -23069,6 +23409,10 @@ function buildUEditorExtensions({
     resizable_image_default,
     ClipboardImages.configure({ upload: uploadImage, insertMode: imageInsertMode }),
     TextStyle,
+    font_family_default,
+    font_size_default,
+    line_height_default,
+    letter_spacing_default,
     Color,
     Highlight.configure({
       multicolor: true
@@ -23076,7 +23420,7 @@ function buildUEditorExtensions({
     TextAlign.configure({
       types: ["heading", "paragraph", "image"]
     }),
-    Table3.configure({
+    table_align_default.configure({
       resizable: true,
       handleWidth: 10,
       allowTableNodeSelection: true,
@@ -23421,6 +23765,48 @@ var EmojiPicker2 = ({ onSelect }) => {
   return /* @__PURE__ */ jsx79(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
 import { Fragment as Fragment25, jsx as jsx80, jsxs as jsxs67 } from "react/jsx-runtime";
 function fileToDataUrl2(file) {
@@ -23431,12 +23817,16 @@ function fileToDataUrl2(file) {
     reader.readAsDataURL(file);
   });
 }
+function formatTableInsertLabel(template, rows, cols) {
+  return template.replace("{rows}", String(rows)).replace("{cols}", String(cols));
+}
 var ToolbarButton = React71.forwardRef(({ onClick, onMouseDown, active, disabled, children, title, className }, ref) => {
   const button = /* @__PURE__ */ jsx80(
     "button",
     {
       ref,
       type: "button",
+      "aria-label": title,
       onMouseDown: (e) => {
         onMouseDown?.(e);
         e.preventDefault();
@@ -23461,22 +23851,115 @@ var ToolbarButton = React71.forwardRef(({ onClick, onMouseDown, active, disabled
 });
 ToolbarButton.displayName = "ToolbarButton";
 var ToolbarDivider = () => /* @__PURE__ */ jsx80("div", { className: "w-px h-6 bg-border/50 mx-1" });
+var TableInsertGrid = ({
+  insertLabel,
+  previewTemplate,
+  onInsert
+}) => {
+  const [selection, setSelection] = React71.useState({ rows: 3, cols: 3 });
+  const maxRows = 8;
+  const maxCols = 8;
+  return /* @__PURE__ */ jsxs67("div", { className: "mb-2 rounded-xl border border-border/60 bg-muted/20 p-2", children: [
+    /* @__PURE__ */ jsx80("div", { className: "mb-2 text-sm font-medium text-foreground", children: formatTableInsertLabel(previewTemplate, selection.rows, selection.cols) }),
+    /* @__PURE__ */ jsx80(
+      "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__ */ jsx80(
+              "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__ */ jsx80("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] = useState43(false);
+  const [isTableMenuOpen, setIsTableMenuOpen] = useState43(false);
+  const tableCommandAnchorPosRef = useRef29(null);
   const fileInputRef = useRef29(null);
   const [isUploadingImage, setIsUploadingImage] = useState43(false);
   const [imageUploadError, setImageUploadError] = useState43(null);
+  const [fontSizeDraft, setFontSizeDraft] = useState43("");
   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 = React71.useMemo(
+    () => fontFamilies ?? getDefaultFontFamilies(t),
+    [fontFamilies, t]
+  );
+  const availableFontSizes = React71.useMemo(
+    () => fontSizes ?? getDefaultFontSizes(),
+    [fontSizes]
+  );
+  const availableLineHeights = React71.useMemo(
+    () => lineHeights ?? getDefaultLineHeights(),
+    [lineHeights]
+  );
+  const availableLetterSpacings = React71.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");
+  React71.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);
@@ -23513,6 +23996,7 @@ var EditorToolbar = ({
     /* @__PURE__ */ jsxs67(
       DropdownMenu,
       {
+        contentClassName: "p-2",
         trigger: /* @__PURE__ */ jsxs67(ToolbarButton, { onClick: () => {
         }, title: t("toolbar.textStyle"), className: "px-2 w-auto gap-1", children: [
           /* @__PURE__ */ jsx80(Type2, { className: "w-4 h-4" }),
@@ -23561,6 +24045,183 @@ var EditorToolbar = ({
         ]
       }
     ),
+    /* @__PURE__ */ jsxs67(
+      DropdownMenu,
+      {
+        trigger: /* @__PURE__ */ jsx80(
+          ToolbarButton,
+          {
+            onClick: () => {
+            },
+            title: t("toolbar.fontFamily"),
+            className: "relative",
+            children: /* @__PURE__ */ jsx80(Type2, { className: "w-4 h-4" })
+          }
+        ),
+        contentClassName: "max-h-80 overflow-y-auto min-w-56 p-2",
+        children: [
+          /* @__PURE__ */ jsx80(
+            DropdownMenuItem,
+            {
+              icon: Type2,
+              label: t("toolbar.fontDefault"),
+              onClick: () => editor.chain().focus().unsetFontFamily().run(),
+              active: !currentFontFamily
+            }
+          ),
+          availableFontFamilies.map((option) => /* @__PURE__ */ jsx80(
+            DropdownMenuItem,
+            {
+              label: option.label,
+              onClick: () => editor.chain().focus().setFontFamily(option.value).run(),
+              active: normalizeStyleValue(option.value) === currentFontFamily,
+              className: "font-medium"
+            },
+            option.value
+          ))
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs67(
+      DropdownMenu,
+      {
+        closeOnSelect: false,
+        trigger: /* @__PURE__ */ jsx80(
+          ToolbarButton,
+          {
+            onClick: () => {
+            },
+            title: t("toolbar.fontSize"),
+            className: "px-2 w-auto min-w-9",
+            children: /* @__PURE__ */ jsx80("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__ */ jsx80("div", { className: "mb-2 rounded-lg border border-border/60 bg-muted/30 p-2", children: /* @__PURE__ */ jsxs67("label", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx80(
+              "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__ */ jsx80("span", { className: "text-xs text-muted-foreground", children: "px" })
+          ] }) }),
+          /* @__PURE__ */ jsx80(
+            DropdownMenuItem,
+            {
+              icon: Type2,
+              label: t("toolbar.sizeDefault"),
+              onClick: () => editor.chain().focus().unsetFontSize().run(),
+              active: !currentFontSize
+            }
+          ),
+          availableFontSizes.map((option) => /* @__PURE__ */ jsx80(
+            DropdownMenuItem,
+            {
+              label: option.label,
+              onClick: () => editor.chain().focus().setFontSize(option.value).run(),
+              active: normalizeStyleValue(option.value) === currentFontSize
+            },
+            option.value
+          ))
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs67(
+      DropdownMenu,
+      {
+        trigger: /* @__PURE__ */ jsxs67(
+          ToolbarButton,
+          {
+            onClick: () => {
+            },
+            title: t("toolbar.lineHeight"),
+            className: "gap-0.5",
+            children: [
+              /* @__PURE__ */ jsx80(ArrowUp, { className: "w-3 h-3" }),
+              /* @__PURE__ */ jsx80(ArrowDown, { className: "w-3 h-3" })
+            ]
+          }
+        ),
+        contentClassName: "max-h-72 overflow-y-auto p-2",
+        children: [
+          /* @__PURE__ */ jsx80(
+            DropdownMenuItem,
+            {
+              icon: Type2,
+              label: t("toolbar.lineHeightDefault"),
+              onClick: () => editor.chain().focus().unsetLineHeight().run(),
+              active: !currentLineHeight
+            }
+          ),
+          availableLineHeights.map((option) => /* @__PURE__ */ jsx80(
+            DropdownMenuItem,
+            {
+              label: option.label,
+              onClick: () => editor.chain().focus().setLineHeight(option.value).run(),
+              active: normalizeStyleValue(option.value) === currentLineHeight
+            },
+            option.value
+          ))
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs67(
+      DropdownMenu,
+      {
+        trigger: /* @__PURE__ */ jsxs67(
+          ToolbarButton,
+          {
+            onClick: () => {
+            },
+            title: t("toolbar.letterSpacing"),
+            className: "gap-0.5",
+            children: [
+              /* @__PURE__ */ jsx80(ArrowLeft, { className: "w-3 h-3" }),
+              /* @__PURE__ */ jsx80(ArrowRight, { className: "w-3 h-3" })
+            ]
+          }
+        ),
+        contentClassName: "max-h-72 overflow-y-auto p-2",
+        children: [
+          /* @__PURE__ */ jsx80(
+            DropdownMenuItem,
+            {
+              icon: Type2,
+              label: t("toolbar.letterSpacingDefault"),
+              onClick: () => editor.chain().focus().unsetLetterSpacing().run(),
+              active: !currentLetterSpacing
+            }
+          ),
+          availableLetterSpacings.map((option) => /* @__PURE__ */ jsx80(
+            DropdownMenuItem,
+            {
+              label: option.label,
+              onClick: () => editor.chain().focus().setLetterSpacing(option.value).run(),
+              active: normalizeStyleValue(option.value) === currentLetterSpacing
+            },
+            option.value
+          ))
+        ]
+      }
+    ),
     /* @__PURE__ */ jsx80(ToolbarDivider, {}),
     /* @__PURE__ */ jsx80(ToolbarButton, { onClick: () => editor.chain().focus().toggleBold().run(), active: editor.isActive("bold"), title: t("toolbar.bold"), children: /* @__PURE__ */ jsx80(BoldIcon, { className: "w-4 h-4" }) }),
     /* @__PURE__ */ jsx80(ToolbarButton, { onClick: () => editor.chain().focus().toggleItalic().run(), active: editor.isActive("italic"), title: t("toolbar.italic"), children: /* @__PURE__ */ jsx80(ItalicIcon, { className: "w-4 h-4" }) }),
@@ -23895,18 +24556,58 @@ var EditorToolbar = ({
     /* @__PURE__ */ jsxs67(
       DropdownMenu,
       {
+        isOpen: isTableMenuOpen,
+        onOpenChange: (open) => {
+          setIsTableMenuOpen(open);
+          tableCommandAnchorPosRef.current = open && editor.isActive("table") ? editor.state.selection.$from.pos : null;
+        },
         trigger: /* @__PURE__ */ jsxs67(ToolbarButton, { onClick: () => {
         }, title: t("toolbar.table"), children: [
           /* @__PURE__ */ jsx80(TableIcon, { className: "w-4 h-4" }),
           /* @__PURE__ */ jsx80(ChevronDown7, { className: "w-3 h-3" })
         ] }),
+        contentClassName: "p-2 min-w-56",
         children: [
+          /* @__PURE__ */ jsx80(
+            TableInsertGrid,
+            {
+              insertLabel: t("tableMenu.insertTable"),
+              previewTemplate: t("tableMenu.gridPreview"),
+              onInsert: (rows, cols) => {
+                editor.chain().focus().insertTable({ rows, cols, withHeaderRow: true }).run();
+                setIsTableMenuOpen(false);
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx80("div", { className: "my-1 border-t" }),
           /* @__PURE__ */ jsx80(
             DropdownMenuItem,
             {
-              icon: TableIcon,
-              label: t("tableMenu.insert3x3"),
-              onClick: () => editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()
+              icon: AlignLeft,
+              label: t("tableMenu.alignLeft"),
+              onClick: () => applyTableAlignment(editor, "left", tableCommandAnchorPosRef.current ?? void 0),
+              active: hasTableContext && currentTableAlign === "left",
+              disabled: !hasTableContext
+            }
+          ),
+          /* @__PURE__ */ jsx80(
+            DropdownMenuItem,
+            {
+              icon: AlignCenter,
+              label: t("tableMenu.alignCenter"),
+              onClick: () => applyTableAlignment(editor, "center", tableCommandAnchorPosRef.current ?? void 0),
+              active: hasTableContext && currentTableAlign === "center",
+              disabled: !hasTableContext
+            }
+          ),
+          /* @__PURE__ */ jsx80(
+            DropdownMenuItem,
+            {
+              icon: AlignRight,
+              label: t("tableMenu.alignRight"),
+              onClick: () => applyTableAlignment(editor, "right", tableCommandAnchorPosRef.current ?? void 0),
+              active: hasTableContext && currentTableAlign === "right",
+              disabled: !hasTableContext
             }
           ),
           /* @__PURE__ */ jsx80("div", { className: "my-1 border-t" }),
@@ -23916,7 +24617,7 @@ var EditorToolbar = ({
               icon: ArrowLeft,
               label: t("tableMenu.addColumnBefore"),
               onClick: () => editor.chain().focus().addColumnBefore().run(),
-              disabled: !editor.can().addColumnBefore()
+              disabled: !hasTableContext || !editor.can().addColumnBefore()
             }
           ),
           /* @__PURE__ */ jsx80(
@@ -23925,7 +24626,7 @@ var EditorToolbar = ({
               icon: ArrowDown,
               label: t("tableMenu.addColumnAfter"),
               onClick: () => editor.chain().focus().addColumnAfter().run(),
-              disabled: !editor.can().addColumnAfter()
+              disabled: !hasTableContext || !editor.can().addColumnAfter()
             }
           ),
           /* @__PURE__ */ jsx80(
@@ -23934,7 +24635,7 @@ var EditorToolbar = ({
               icon: ArrowUp,
               label: t("tableMenu.addRowBefore"),
               onClick: () => editor.chain().focus().addRowBefore().run(),
-              disabled: !editor.can().addRowBefore()
+              disabled: !hasTableContext || !editor.can().addRowBefore()
             }
           ),
           /* @__PURE__ */ jsx80(
@@ -23943,7 +24644,7 @@ var EditorToolbar = ({
               icon: ArrowRight,
               label: t("tableMenu.addRowAfter"),
               onClick: () => editor.chain().focus().addRowAfter().run(),
-              disabled: !editor.can().addRowAfter()
+              disabled: !hasTableContext || !editor.can().addRowAfter()
             }
           ),
           /* @__PURE__ */ jsx80("div", { className: "my-1 border-t" }),
@@ -23953,7 +24654,7 @@ var EditorToolbar = ({
               icon: TableIcon,
               label: t("tableMenu.toggleHeaderRow"),
               onClick: () => editor.chain().focus().toggleHeaderRow().run(),
-              disabled: !editor.can().toggleHeaderRow()
+              disabled: !hasTableContext || !editor.can().toggleHeaderRow()
             }
           ),
           /* @__PURE__ */ jsx80(
@@ -23962,7 +24663,7 @@ var EditorToolbar = ({
               icon: TableIcon,
               label: t("tableMenu.toggleHeaderColumn"),
               onClick: () => editor.chain().focus().toggleHeaderColumn().run(),
-              disabled: !editor.can().toggleHeaderColumn()
+              disabled: !hasTableContext || !editor.can().toggleHeaderColumn()
             }
           ),
           /* @__PURE__ */ jsx80("div", { className: "my-1 border-t" }),
@@ -23972,7 +24673,7 @@ var EditorToolbar = ({
               icon: Trash22,
               label: t("tableMenu.deleteColumn"),
               onClick: () => editor.chain().focus().deleteColumn().run(),
-              disabled: !editor.can().deleteColumn()
+              disabled: !hasTableContext || !editor.can().deleteColumn()
             }
           ),
           /* @__PURE__ */ jsx80(
@@ -23981,7 +24682,7 @@ var EditorToolbar = ({
               icon: Trash22,
               label: t("tableMenu.deleteRow"),
               onClick: () => editor.chain().focus().deleteRow().run(),
-              disabled: !editor.can().deleteRow()
+              disabled: !hasTableContext || !editor.can().deleteRow()
             }
           ),
           /* @__PURE__ */ jsx80(
@@ -23990,7 +24691,7 @@ var EditorToolbar = ({
               icon: Trash22,
               label: t("tableMenu.deleteTable"),
               onClick: () => editor.chain().focus().deleteTable().run(),
-              disabled: !editor.can().deleteTable()
+              disabled: !hasTableContext || !editor.can().deleteTable()
             }
           )
         ]
@@ -24096,7 +24797,9 @@ var FloatingMenuContent = ({ editor }) => {
 };
 var BubbleMenuContent = ({
   editor,
-  onKeepOpenChange
+  onKeepOpenChange,
+  fontSizes,
+  lineHeights
 }) => {
   const t = useSmartTranslations("UEditor");
   const { textColors, highlightColors } = useEditorColors();
@@ -24106,6 +24809,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 = useMemo23(
+    () => (fontSizes ?? getDefaultFontSizes()).filter((option) => ["14px", "16px", "24px"].includes(option.value)),
+    [fontSizes]
+  );
+  const quickLineHeights = useMemo23(
+    () => (lineHeights ?? getDefaultLineHeights()).filter((option) => ["1.2", "1.5", "1.75"].includes(option.value)),
+    [lineHeights]
+  );
   useEffect33(() => {
     onKeepOpenChange?.(showLinkInput);
   }, [onKeepOpenChange, showLinkInput]);
@@ -24225,6 +24939,50 @@ var BubbleMenuContent = ({
     ),
     /* @__PURE__ */ jsx81(ToolbarButton, { onClick: () => setShowEditorColorPalette(true), title: t("colors.textColor"), children: /* @__PURE__ */ jsx81(Palette3, { className: "w-4 h-4" }) }),
     /* @__PURE__ */ jsx81("div", { className: "w-px h-6 bg-border/50 mx-1" }),
+    /* @__PURE__ */ jsx81(
+      ToolbarButton,
+      {
+        onClick: () => editor.chain().focus().unsetFontSize().run(),
+        active: !currentFontSize,
+        title: t("toolbar.sizeDefault"),
+        className: "px-2 w-auto",
+        children: /* @__PURE__ */ jsx81("span", { className: "text-[10px] font-semibold", children: "A" })
+      }
+    ),
+    quickFontSizes.map((option) => /* @__PURE__ */ jsx81(
+      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__ */ jsx81("span", { className: "text-[10px] font-semibold", children: option.label })
+      },
+      option.value
+    )),
+    /* @__PURE__ */ jsx81("div", { className: "w-px h-6 bg-border/50 mx-1" }),
+    /* @__PURE__ */ jsx81(
+      ToolbarButton,
+      {
+        onClick: () => editor.chain().focus().unsetLineHeight().run(),
+        active: !currentLineHeight,
+        title: t("toolbar.lineHeightDefault"),
+        className: "px-2 w-auto",
+        children: /* @__PURE__ */ jsx81("span", { className: "text-[10px] font-semibold leading-none", children: "LH" })
+      }
+    ),
+    quickLineHeights.map((option) => /* @__PURE__ */ jsx81(
+      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__ */ jsx81("span", { className: "text-[10px] font-semibold", children: option.label })
+      },
+      option.value
+    )),
+    /* @__PURE__ */ jsx81("div", { className: "w-px h-6 bg-border/50 mx-1" }),
     /* @__PURE__ */ jsx81(
       ToolbarButton,
       {
@@ -24245,8 +25003,13 @@ var BubbleMenuContent = ({
     )
   ] });
 };
-var CustomBubbleMenu = ({ editor }) => {
+var CustomBubbleMenu = ({
+  editor,
+  fontSizes,
+  lineHeights
+}) => {
   const SHOW_DELAY_MS = 180;
+  const BUBBLE_MENU_OFFSET = 16;
   const [isVisible, setIsVisible] = useState44(false);
   const [position, setPosition] = useState44({ top: 0, left: 0 });
   const menuRef = useRef30(null);
@@ -24274,7 +25037,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();
@@ -24320,7 +25083,9 @@ var CustomBubbleMenu = ({ editor }) => {
           BubbleMenuContent,
           {
             editor,
-            onKeepOpenChange: setKeepOpen
+            onKeepOpenChange: setKeepOpen,
+            fontSizes,
+            lineHeights
           }
         )
       }
@@ -24329,6 +25094,7 @@ var CustomBubbleMenu = ({ editor }) => {
   );
 };
 var CustomFloatingMenu = ({ editor }) => {
+  const FLOATING_MENU_OFFSET = 16;
   const [isVisible, setIsVisible] = useState44(false);
   const [position, setPosition] = useState44({ top: 0, left: 0 });
   useEffect33(() => {
@@ -24341,7 +25107,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);
@@ -28811,6 +29577,9 @@ var columnResizingPluginKey = new PluginKey3("tableColumnResizing");
 
 // src/components/UEditor/table-controls.tsx
 import {
+  AlignCenter as AlignCenter3,
+  AlignLeft as AlignLeft3,
+  AlignRight as AlignRight3,
   ArrowDown as ArrowDown2,
   ArrowLeft as ArrowLeft2,
   ArrowRight as ArrowRight2,
@@ -28828,9 +29597,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,
@@ -29072,8 +29848,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;
@@ -29313,6 +30089,21 @@ function TableControls({ editor, containerRef }) {
   const menuItems = React73.useMemo(() => {
     if (!layout) return [];
     return [
+      {
+        label: t("tableMenu.alignLeft"),
+        icon: AlignLeft3,
+        onClick: () => applyTableAlignment(editor, "left", layout.cellPos)
+      },
+      {
+        label: t("tableMenu.alignCenter"),
+        icon: AlignCenter3,
+        onClick: () => applyTableAlignment(editor, "center", layout.cellPos)
+      },
+      {
+        label: t("tableMenu.alignRight"),
+        icon: AlignRight3,
+        onClick: () => applyTableAlignment(editor, "right", layout.cellPos)
+      },
       {
         label: t("tableMenu.addColumnBefore"),
         icon: ArrowLeft2,
@@ -29422,16 +30213,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;
@@ -29439,7 +30230,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__ */ jsx82(
         "div",
         {
@@ -29453,6 +30243,7 @@ function TableControls({ editor, containerRef }) {
             Tooltip,
             {
               placement: "right",
+              disabled: openMenuKey === menuKey,
               content: /* @__PURE__ */ jsx82("span", { className: "text-xs font-medium", children: `${t("tableMenu.dragRow")} ${rowHandle.index + 1}` }),
               children: /* @__PURE__ */ jsx82("span", { className: "inline-flex", children: /* @__PURE__ */ jsx82(
                 DropdownMenu,
@@ -29462,6 +30253,7 @@ function TableControls({ editor, containerRef }) {
                   onOpenChange: (open) => {
                     setOpenMenuKey((prev) => open ? menuKey : prev === menuKey ? null : prev);
                   },
+                  contentClassName: "p-2",
                   items: getRowHandleMenuItems(rowHandle),
                   trigger: /* @__PURE__ */ jsx82(
                     "button",
@@ -29490,8 +30282,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__ */ jsx82(GripVertical3, { className: "h-3.5 w-3.5" })
                     }
                   )
@@ -29506,7 +30303,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__ */ jsx82(
         "div",
         {
@@ -29520,6 +30316,7 @@ function TableControls({ editor, containerRef }) {
             Tooltip,
             {
               placement: "top",
+              disabled: openMenuKey === menuKey,
               content: /* @__PURE__ */ jsx82("span", { className: "text-xs font-medium", children: `${t("tableMenu.dragColumn")} ${columnHandle.index + 1}` }),
               children: /* @__PURE__ */ jsx82("span", { className: "inline-flex", children: /* @__PURE__ */ jsx82(
                 DropdownMenu,
@@ -29529,6 +30326,7 @@ function TableControls({ editor, containerRef }) {
                   onOpenChange: (open) => {
                     setOpenMenuKey((prev) => open ? menuKey : prev === menuKey ? null : prev);
                   },
+                  contentClassName: "p-2",
                   items: getColumnHandleMenuItems(columnHandle),
                   trigger: /* @__PURE__ */ jsx82(
                     "button",
@@ -29557,8 +30355,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__ */ jsx82(GripHorizontal, { className: "h-3.5 w-3.5" })
                     }
                   )
@@ -29570,7 +30373,7 @@ function TableControls({ editor, containerRef }) {
         `column-handle-${columnHandle.index}`
       );
     }),
-    (controlsVisible || hoverState.menuVisible || tableMenuOpen) && /* @__PURE__ */ jsx82(
+    /* @__PURE__ */ jsx82(
       "div",
       {
         className: "absolute z-30",
@@ -29583,6 +30386,7 @@ function TableControls({ editor, containerRef }) {
           Tooltip,
           {
             placement: "top",
+            disabled: tableMenuOpen,
             content: /* @__PURE__ */ jsx82("span", { className: "text-xs font-medium", children: t("tableMenu.openControls") }),
             children: /* @__PURE__ */ jsx82("span", { className: "inline-flex", children: /* @__PURE__ */ jsx82(
               DropdownMenu,
@@ -29592,6 +30396,7 @@ function TableControls({ editor, containerRef }) {
                 onOpenChange: (open) => {
                   setOpenMenuKey((prev) => open ? "table" : prev === "table" ? null : prev);
                 },
+                contentClassName: "p-2",
                 items: menuItems,
                 trigger: /* @__PURE__ */ jsx82(
                   "button",
@@ -29604,6 +30409,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__ */ jsx82(MoreHorizontal2, { className: "h-4 w-4" })
                   }
                 )
@@ -29613,7 +30422,7 @@ function TableControls({ editor, containerRef }) {
         )
       }
     ),
-    (controlsVisible || hoverState.addColumnVisible) && /* @__PURE__ */ jsx82(
+    /* @__PURE__ */ jsx82(
       Tooltip,
       {
         placement: "right",
@@ -29640,17 +30449,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__ */ jsx82("span", { className: "text-sm font-medium leading-none", children: "+" })
           }
         )
       }
     ),
-    (controlsVisible || hoverState.addRowVisible) && /* @__PURE__ */ jsx82(
+    /* @__PURE__ */ jsx82(
       Tooltip,
       {
         placement: "bottom",
@@ -29678,9 +30489,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__ */ jsx82("span", { className: "text-sm font-medium leading-none", children: "+" })
           }
@@ -29867,6 +30680,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 = React74.forwardRef(({
   content = "",
   onChange,
@@ -29886,7 +30725,11 @@ var UEditor = React74.forwardRef(({
   maxCharacters,
   minHeight = "200px",
   maxHeight = "auto",
-  variant = "default"
+  variant = "default",
+  fontFamilies,
+  fontSizes,
+  lineHeights,
+  letterSpacings
 }, ref) => {
   const t = useSmartTranslations("UEditor");
   const effectivePlaceholder = placeholder ?? t("placeholder");
@@ -29931,7 +30774,7 @@ var UEditor = React74.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`;
@@ -30034,8 +30877,10 @@ var UEditor = React74.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",
@@ -30055,6 +30900,11 @@ var UEditor = React74.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",
@@ -30417,8 +31267,27 @@ var UEditor = React74.forwardRef(({
         className
       ),
       children: [
-        editable && showToolbar && /* @__PURE__ */ jsx83(EditorToolbar, { editor, variant, uploadImage, imageInsertMode }),
-        editable && showBubbleMenu && /* @__PURE__ */ jsx83(CustomBubbleMenu, { editor }),
+        editable && showToolbar && /* @__PURE__ */ jsx83(
+          EditorToolbar,
+          {
+            editor,
+            variant,
+            uploadImage,
+            imageInsertMode,
+            fontFamilies,
+            fontSizes,
+            lineHeights,
+            letterSpacings
+          }
+        ),
+        editable && showBubbleMenu && /* @__PURE__ */ jsx83(
+          CustomBubbleMenu,
+          {
+            editor,
+            fontSizes,
+            lineHeights
+          }
+        ),
         editable && showFloatingMenu && /* @__PURE__ */ jsx83(CustomFloatingMenu, { editor }),
         /* @__PURE__ */ jsxs71(
           "div",
@@ -30451,7 +31320,7 @@ var UEditor = React74.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__ */ jsx83(TableControls, { editor, containerRef: editorContentRef }),