@npm-questionpro/wick-ui-editor 2.7.0 → 2.8.0

package/dist/wick-ui-editor/es/index.js

@@ -1,18 +1,18 @@
-import { A as J, C as Q, D as ue, E as fe, M as he, O as ve, S as pe, T as X, _ as Y, a as Z, b as ge, c as me, d as be, f as Ce, g as G, h as V, i as ee, j as ke, k as _e, l as te, m as z, n as L, o as oe, r as ie, s as Ae, t as R, u as we, v as re, w as ne, x as Ie, y as ye } from "../../sanitize-BZ0U7q7z.js";
+import { A as j, C as K, D as ue, E as fe, M as ve, O as he, S as pe, T as J, _ as Q, a as X, b as ge, c as me, d as be, f as Ce, g as Y, h as Z, i as G, j as ke, k as _e, l as V, m as D, n as L, o as ee, r as te, s as Ae, t as R, u as we, v as oe, w as ie, x as ye, y as Ie } from "../../sanitize-BZ0U7q7z.js";
 import { EditorContent as Te, useEditor as Se, useEditorState as g } from "@tiptap/react";
-import d, { useCallback as D, useRef as xe, useState as O } from "react";
+import u, { useCallback as B, useRef as xe, useState as O } from "react";
 import Fe from "@tiptap/extension-image";
 import { TaskItem as He, TaskList as Le } from "@tiptap/extension-list";
 import Re from "@tiptap/extension-subscript";
 import Ee from "@tiptap/extension-superscript";
 import { TableKit as Ne } from "@tiptap/extension-table";
 import ze from "@tiptap/extension-text-align";
-import { BackgroundColor as De, Color as Be, FontFamily as Pe, FontSize as Oe, LineHeight as Me, TextStyle as $e } from "@tiptap/extension-text-style";
+import { BackgroundColor as De, Color as Be, FontFamily as Pe, FontSize as Me, LineHeight as Oe, TextStyle as $e } from "@tiptap/extension-text-style";
 import qe from "@tiptap/starter-kit";
 import { Fragment as N, jsx as e, jsxs as p } from "react/jsx-runtime";
-import { Menu as C } from "@base-ui/react/menu";
-import { Dialog as I } from "@base-ui/react/dialog";
-import { Switch as le } from "@base-ui/react/switch";
+import { Menu as w } from "@base-ui/react/menu";
+import { Dialog as y } from "@base-ui/react/dialog";
+import { Switch as re } from "@base-ui/react/switch";
 var Ue = [
   qe.configure({ link: {
     openOnClick: !1,
@@ -28,7 +28,7 @@ var Ue = [
           "file",
           "mailto"
         ], n = i.protocol.replace(":", "");
-        if (r.includes(n) || !t.protocols.map((c) => typeof c == "string" ? c : c.scheme).includes(n)) return !1;
+        if (r.includes(n) || !t.protocols.map((d) => typeof d == "string" ? d : d.scheme).includes(n)) return !1;
         const s = ["example-phishing.com", "malicious-site.net"], l = i.hostname;
         return !s.includes(l);
       } catch {
@@ -52,8 +52,8 @@ var Ue = [
   De,
   Le,
   He,
-  Me,
   Oe,
+  Me,
   Pe,
   Fe.configure({
     resize: {
@@ -63,7 +63,7 @@ var Ue = [
     inline: !0
   }),
   Ne.configure({ table: { resizable: !0 } })
-], M = d.createContext(null), We = ({ editor: o, children: t, customFonts: i, defaultValues: r, isHtml: n, setIsHtml: s, htmlSourceEnabled: l }) => /* @__PURE__ */ e(M.Provider, {
+], $ = u.createContext(null), We = ({ editor: o, children: t, customFonts: i, defaultValues: r, isHtml: n, setIsHtml: s, htmlSourceEnabled: l }) => /* @__PURE__ */ e($.Provider, {
   value: {
     editor: o,
     customFonts: i,
@@ -73,15 +73,15 @@ var Ue = [
     htmlSourceEnabled: l
   },
   children: t
-}), f = () => {
-  const o = d.useContext(M);
+}), v = () => {
+  const o = u.useContext($);
   if (!o) throw new Error("useToolbar must be used within a ToolbarProvider");
   return o;
-}, je = "_dropdown_sx3z9_1", Ke = "_dropdownItem_sx3z9_17", Je = "_dropdownPositioner_sx3z9_29", $ = {
+}, je = "_dropdown_sx3z9_1", Ke = "_dropdownItem_sx3z9_17", Je = "_dropdownPositioner_sx3z9_29", q = {
   dropdown: je,
   dropdownItem: Ke,
   dropdownPositioner: Je
-}, Qe = "_item_wqnwe_1", Xe = { item: Qe }, u = d.forwardRef(function({ Icon: t, children: i, ...r }, n) {
+}, Qe = "_item_wqnwe_1", Xe = { item: Qe }, f = u.forwardRef(function({ Icon: t, children: i, ...r }, n) {
   return /* @__PURE__ */ p("button", {
     ref: n,
     ...r,
@@ -92,44 +92,44 @@ var Ue = [
       i
     ]
   });
-}), q = d.forwardRef(({ children: o, ...t }, i) => /* @__PURE__ */ e("div", {
+}), ae = u.forwardRef(({ children: o, ...t }, i) => /* @__PURE__ */ e("div", {
   ref: i,
-  className: $.dropdown,
+  className: q.dropdown,
   ...t,
   children: o
 }));
-q.displayName = "DropdownPopup";
-var U = d.forwardRef(({ children: o, ...t }, i) => /* @__PURE__ */ e("div", {
+ae.displayName = "DropdownPopup";
+var se = u.forwardRef(({ children: o, ...t }, i) => /* @__PURE__ */ e("div", {
   ref: i,
-  className: $.dropdownItem,
+  className: q.dropdownItem,
   ...t,
   children: o
 }));
-U.displayName = "DropdownItem";
-function W({ trigger: o, triggerTitle: t, active: i, items: r, align: n = "start", direction: s = "inline" }) {
-  return /* @__PURE__ */ p(C.Root, { children: [/* @__PURE__ */ e(C.Trigger, {
-    render: /* @__PURE__ */ e(u, {}),
+se.displayName = "DropdownItem";
+function z({ trigger: o, triggerTitle: t, active: i, items: r, align: n = "start", direction: s = "inline" }) {
+  return /* @__PURE__ */ p(w.Root, { children: [/* @__PURE__ */ e(w.Trigger, {
+    render: /* @__PURE__ */ e(f, {}),
     "data-active": i,
     title: t,
     children: o
-  }), /* @__PURE__ */ e(C.Portal, { children: /* @__PURE__ */ e(C.Positioner, {
+  }), /* @__PURE__ */ e(w.Portal, { children: /* @__PURE__ */ e(w.Positioner, {
     align: n,
     sideOffset: 4,
-    className: $.dropdownPositioner,
-    children: /* @__PURE__ */ e(C.Popup, {
-      render: /* @__PURE__ */ e(q, {}),
+    className: q.dropdownPositioner,
+    children: /* @__PURE__ */ e(w.Popup, {
+      render: /* @__PURE__ */ e(ae, {}),
       "data-inline": s === "inline" ? !0 : void 0,
       "data-block": s === "block" ? !0 : void 0,
       finalFocus: !1,
-      children: r.map((l) => s === "block" ? /* @__PURE__ */ e(C.Item, {
-        render: /* @__PURE__ */ e(U, {}),
+      children: r.map((l) => s === "block" ? /* @__PURE__ */ e(w.Item, {
+        render: /* @__PURE__ */ e(se, {}),
         title: l.tooltip,
         "data-active": l.active,
         style: l.style,
         onClick: l.event,
         children: l.icon ?? l.label
-      }, l.id) : /* @__PURE__ */ e(C.Item, {
-        render: /* @__PURE__ */ e(u, {}),
+      }, l.id) : /* @__PURE__ */ e(w.Item, {
+        render: /* @__PURE__ */ e(f, {}),
         "data-active": l.active,
         title: l.tooltip,
         onClick: l.event,
@@ -139,7 +139,7 @@ function W({ trigger: o, triggerTitle: t, active: i, items: r, align: n = "start
   }) })] });
 }
 var Ye = () => {
-  const { editor: o } = f(), t = g({
+  const { editor: o } = v(), t = g({
     editor: o,
     selector: (r) => ({
       isParagraph: r.editor?.isActive("paragraph"),
@@ -152,49 +152,49 @@ var Ye = () => {
   }), i = [
     {
       id: "paragraph",
-      icon: /* @__PURE__ */ e(X, {}),
+      icon: /* @__PURE__ */ e(J, {}),
       event: () => o.chain().focus().setParagraph().run(),
       tooltip: "Paragraph",
       active: t.isParagraph
     },
     {
       id: "h1",
-      icon: /* @__PURE__ */ e(V, {}),
+      icon: /* @__PURE__ */ e(Z, {}),
       event: () => o.chain().focus().setHeading({ level: 1 }).run(),
       tooltip: "Heading 1",
       active: t.isH1
     },
     {
       id: "h2",
-      icon: /* @__PURE__ */ e(G, {}),
+      icon: /* @__PURE__ */ e(Y, {}),
       event: () => o.chain().focus().setHeading({ level: 2 }).run(),
       tooltip: "Heading 2",
       active: t.isH2
     },
     {
       id: "h3",
-      icon: /* @__PURE__ */ e(Y, {}),
+      icon: /* @__PURE__ */ e(Q, {}),
       event: () => o.chain().focus().setHeading({ level: 3 }).run(),
       tooltip: "Heading 3",
       active: t.isH3
     },
     {
       id: "h4",
-      icon: /* @__PURE__ */ e(re, {}),
+      icon: /* @__PURE__ */ e(oe, {}),
       event: () => o.chain().focus().setHeading({ level: 4 }).run(),
       tooltip: "Heading 4",
       active: t.isH4
     }
   ];
-  return /* @__PURE__ */ e(W, {
-    trigger: t.isH1 ? /* @__PURE__ */ e(V, {}) : t.isH2 ? /* @__PURE__ */ e(G, {}) : t.isH3 ? /* @__PURE__ */ e(Y, {}) : t.isH4 ? /* @__PURE__ */ e(re, {}) : /* @__PURE__ */ e(X, {}),
+  return /* @__PURE__ */ e(z, {
+    trigger: t.isH1 ? /* @__PURE__ */ e(Z, {}) : t.isH2 ? /* @__PURE__ */ e(Y, {}) : t.isH3 ? /* @__PURE__ */ e(Q, {}) : t.isH4 ? /* @__PURE__ */ e(oe, {}) : /* @__PURE__ */ e(J, {}),
     triggerTitle: "Block Style",
     active: t.isHeading,
     items: i
   });
 }, Ze = () => {
-  const { editor: o } = f();
-  return /* @__PURE__ */ e(u, {
+  const { editor: o } = v();
+  return /* @__PURE__ */ e(f, {
     title: "Bold",
     "data-active": g({
       editor: o,
@@ -206,13 +206,13 @@ var Ye = () => {
     children: /* @__PURE__ */ e(me, {})
   });
 }, Ge = () => {
-  const { editor: o } = f();
+  const { editor: o } = v();
   return /* @__PURE__ */ e(N, { children: [{
     id: "clear",
     icon: /* @__PURE__ */ e(we, {}),
     event: () => o.chain().focus().clearNodes().unsetAllMarks().run(),
     tooltip: "Clear Formatting"
-  }].map((t) => /* @__PURE__ */ e(u, {
+  }].map((t) => /* @__PURE__ */ e(f, {
     title: t.tooltip,
     onClick: (i) => {
       i.preventDefault(), t.event();
@@ -220,8 +220,8 @@ var Ye = () => {
     children: t.icon
   }, t.id)) });
 }, Ve = () => {
-  const { editor: o } = f();
-  return /* @__PURE__ */ e(u, {
+  const { editor: o } = v();
+  return /* @__PURE__ */ e(f, {
     "data-active": g({
       editor: o,
       selector: (t) => ({ code: t.editor.isActive("code") })
@@ -233,8 +233,8 @@ var Ye = () => {
     children: /* @__PURE__ */ e(Ce, {})
   });
 }, et = () => {
-  const { editor: o } = f();
-  return /* @__PURE__ */ e(u, {
+  const { editor: o } = v();
+  return /* @__PURE__ */ e(f, {
     title: "Italic",
     "data-active": g({
       editor: o,
@@ -243,10 +243,10 @@ var Ye = () => {
     onClick: (t) => {
       t.preventDefault(), o.chain().focus().toggleItalic().run();
     },
-    children: /* @__PURE__ */ e(Ie, {})
+    children: /* @__PURE__ */ e(ye, {})
   });
 }, tt = () => {
-  const { editor: o } = f(), t = g({
+  const { editor: o } = v(), t = g({
     editor: o,
     selector: (r) => ({
       isUl: r.editor?.isActive("bulletList"),
@@ -257,35 +257,35 @@ var Ye = () => {
   }), i = [
     {
       id: "ul",
-      icon: /* @__PURE__ */ e(Q, {}),
+      icon: /* @__PURE__ */ e(K, {}),
       event: () => o.chain().focus().toggleBulletList().run(),
       tooltip: "Bulleted List",
       active: t.isUl
     },
     {
       id: "ol",
-      icon: /* @__PURE__ */ e(ne, {}),
+      icon: /* @__PURE__ */ e(ie, {}),
       event: () => o.chain().focus().toggleOrderedList().run(),
       tooltip: "Numbered List",
       active: t.isOl
     },
     {
       id: "todo",
-      icon: /* @__PURE__ */ e(te, {}),
+      icon: /* @__PURE__ */ e(V, {}),
       event: () => o.chain().focus().toggleTaskList().run(),
       tooltip: "To-Do List",
       active: t.isTodo
     }
   ];
-  return /* @__PURE__ */ e(W, {
-    trigger: t.isOl ? /* @__PURE__ */ e(ne, {}) : t.isTodo ? /* @__PURE__ */ e(te, {}) : /* @__PURE__ */ e(Q, {}),
+  return /* @__PURE__ */ e(z, {
+    trigger: t.isOl ? /* @__PURE__ */ e(ie, {}) : t.isTodo ? /* @__PURE__ */ e(V, {}) : /* @__PURE__ */ e(K, {}),
     triggerTitle: "List Style",
     active: t.isList,
     items: i
   });
 }, ot = () => {
-  const { editor: o } = f();
-  return /* @__PURE__ */ e(u, {
+  const { editor: o } = v();
+  return /* @__PURE__ */ e(f, {
     title: "strikethrough",
     "data-active": g({
       editor: o,
@@ -297,8 +297,8 @@ var Ye = () => {
     children: /* @__PURE__ */ e(ue, {})
   });
 }, it = () => {
-  const { editor: o } = f();
-  return /* @__PURE__ */ e(u, {
+  const { editor: o } = v();
+  return /* @__PURE__ */ e(f, {
     title: "Subscript",
     "data-active": g({
       editor: o,
@@ -307,11 +307,11 @@ var Ye = () => {
     onClick: (t) => {
       t.preventDefault(), o.chain().focus().toggleSubscript().run();
     },
-    children: /* @__PURE__ */ e(ve, {})
+    children: /* @__PURE__ */ e(he, {})
   });
 }, rt = () => {
-  const { editor: o } = f();
-  return /* @__PURE__ */ e(u, {
+  const { editor: o } = v();
+  return /* @__PURE__ */ e(f, {
     title: "Superscript",
     "data-active": g({
       editor: o,
@@ -323,11 +323,11 @@ var Ye = () => {
     children: /* @__PURE__ */ e(_e, {})
   });
 }, nt = () => {
-  const { editor: o, defaultValues: t } = f(), i = g({
+  const { editor: o, defaultValues: t } = v(), i = g({
     editor: o,
     selector: ({ editor: n }) => ({ textColor: n.getAttributes("textStyle").color })
-  }), r = d.useRef(null);
-  return /* @__PURE__ */ p(u, {
+  }), r = u.useRef(null);
+  return /* @__PURE__ */ p(f, {
     title: "Text Color",
     onClick: () => r.current?.click(),
     children: [/* @__PURE__ */ e(ke, { style: { color: i.textColor } }), /* @__PURE__ */ e("input", {
@@ -338,8 +338,8 @@ var Ye = () => {
     })]
   });
 }, lt = () => {
-  const { editor: o } = f();
-  return /* @__PURE__ */ e(u, {
+  const { editor: o } = v();
+  return /* @__PURE__ */ e(f, {
     title: "Underline",
     "data-active": g({
       editor: o,
@@ -348,14 +348,14 @@ var Ye = () => {
     onClick: (t) => {
       t.preventDefault(), o.chain().focus().toggleUnderline().run();
     },
-    children: /* @__PURE__ */ e(he, {})
+    children: /* @__PURE__ */ e(ve, {})
   });
 }, at = () => {
-  const { editor: o, defaultValues: t } = f(), i = g({
+  const { editor: o, defaultValues: t } = v(), i = g({
     editor: o,
     selector: ({ editor: n }) => ({ bgColor: n.getAttributes("textStyle").backgroundColor })
-  }), r = d.useRef(null);
-  return /* @__PURE__ */ p(u, {
+  }), r = u.useRef(null);
+  return /* @__PURE__ */ p(f, {
     title: "Background Color",
     onClick: () => r.current?.click(),
     children: [/* @__PURE__ */ e(Ae, { style: { color: i.bgColor } }), /* @__PURE__ */ e("input", {
@@ -366,8 +366,8 @@ var Ye = () => {
     })]
   });
 }, st = () => {
-  const { editor: o } = f();
-  return /* @__PURE__ */ e(u, {
+  const { editor: o } = v();
+  return /* @__PURE__ */ e(f, {
     title: "quote",
     "data-active": g({
       editor: o,
@@ -380,18 +380,18 @@ var Ye = () => {
   });
 };
 function ct() {
-  const { isHtml: o, setIsHtml: t, htmlSourceEnabled: i } = f();
-  return i ? /* @__PURE__ */ e(u, {
+  const { isHtml: o, setIsHtml: t, htmlSourceEnabled: i } = v();
+  return i ? /* @__PURE__ */ e(f, {
     title: "HTML source",
     "data-active": o,
     onClick: (r) => {
       r.preventDefault(), t(!o);
     },
-    children: /* @__PURE__ */ e(ye, {})
+    children: /* @__PURE__ */ e(Ie, {})
   }) : null;
 }
 var dt = () => {
-  const { editor: o } = f(), t = g({
+  const { editor: o } = v(), t = g({
     editor: o,
     selector: (r) => ({
       isLeft: r.editor?.isActive({ textAlign: "left" }),
@@ -403,46 +403,46 @@ var dt = () => {
   }), i = [
     {
       id: "left",
-      icon: /* @__PURE__ */ e(Z, {}),
+      icon: /* @__PURE__ */ e(X, {}),
       event: () => o.chain().focus().setTextAlign("left").run(),
       tooltip: "Align Left",
       active: t.isLeft
     },
     {
       id: "center",
-      icon: /* @__PURE__ */ e(ie, {}),
+      icon: /* @__PURE__ */ e(te, {}),
       event: () => o.chain().focus().setTextAlign("center").run(),
       tooltip: "Align Center",
       active: t.isCenter
     },
     {
       id: "right",
-      icon: /* @__PURE__ */ e(oe, {}),
+      icon: /* @__PURE__ */ e(ee, {}),
       event: () => o.chain().focus().setTextAlign("right").run(),
       tooltip: "Align Right",
       active: t.isRight
     },
     {
       id: "justify",
-      icon: /* @__PURE__ */ e(ee, {}),
+      icon: /* @__PURE__ */ e(G, {}),
       event: () => o.chain().focus().setTextAlign("justify").run(),
       tooltip: "Justify",
       active: t.isJustify
     }
   ];
-  return /* @__PURE__ */ e(W, {
-    trigger: t.isCenter ? /* @__PURE__ */ e(ie, {}) : t.isRight ? /* @__PURE__ */ e(oe, {}) : t.isJustify ? /* @__PURE__ */ e(ee, {}) : /* @__PURE__ */ e(Z, {}),
+  return /* @__PURE__ */ e(z, {
+    trigger: t.isCenter ? /* @__PURE__ */ e(te, {}) : t.isRight ? /* @__PURE__ */ e(ee, {}) : t.isJustify ? /* @__PURE__ */ e(G, {}) : /* @__PURE__ */ e(X, {}),
     triggerTitle: "Text Alignment",
     active: t.isAligned,
     items: i
   });
-}, ut = "_wuContentEditor_1v4bi_4", ft = "_selectedCell_1v4bi_1", ht = "_tableWrapper_1v4bi_1", vt = "_wuContentEditorRoot_1v4bi_4", pt = "_wuContentEditorToolbar_1v4bi_18", gt = "_fontSize_1v4bi_39", mt = "_wuContentEditorTable_1v4bi_57", F = {
+}, ut = "_wuContentEditor_1v4bi_4", ft = "_selectedCell_1v4bi_1", vt = "_tableWrapper_1v4bi_1", ht = "_wuContentEditorRoot_1v4bi_4", pt = "_wuContentEditorToolbar_1v4bi_18", gt = "_fontSize_1v4bi_39", mt = "_wuContentEditorTable_1v4bi_57", F = {
   wuContentEditor: ut,
   selectedCell: ft,
   "column-resize-handle": "_column-resize-handle_1v4bi_1",
-  tableWrapper: ht,
+  tableWrapper: vt,
   "resize-cursor": "_resize-cursor_1v4bi_1",
-  wuContentEditorRoot: vt,
+  wuContentEditorRoot: ht,
   wuContentEditorToolbar: pt,
   fontSize: gt,
   wuContentEditorTable: mt
@@ -451,26 +451,26 @@ var dt = () => {
   "E",
   "+",
   "-"
-], ae = 1, Ct = () => {
-  const { editor: o, defaultValues: t } = f(), [i, r] = O(t?.fontSize ?? 16), n = g({
+], ne = 1, Ct = () => {
+  const { editor: o, defaultValues: t } = v(), [i, r] = O(t?.fontSize ?? 16), n = g({
     editor: o,
-    selector: (h) => ({ fontSize: h.editor.getAttributes("textStyle").fontSize })
-  }), s = (h) => {
-    o.chain().focus().setFontSize(h + "px").run();
-  }, l = (h) => {
-    const a = Math.max(ae, h);
+    selector: (c) => ({ fontSize: c.editor.getAttributes("textStyle").fontSize })
+  }), s = (c) => {
+    o.chain().focus().setFontSize(c + "px").run();
+  }, l = (c) => {
+    const a = Math.max(ne, c);
     r(a), s(a);
-  }, c = (h) => {
-    bt.includes(h.key) ? h.preventDefault() : h.key === "Enter" && s(i);
+  }, d = (c) => {
+    bt.includes(c.key) ? c.preventDefault() : c.key === "Enter" && s(i);
   };
-  return d.useEffect(() => {
+  return u.useEffect(() => {
     r(Number(n.fontSize?.replace("px", "")) || (t?.fontSize ?? 16));
   }, [n.fontSize, t?.fontSize]), /* @__PURE__ */ p("div", {
     className: F.fontSize,
     children: [
-      /* @__PURE__ */ e(u, {
+      /* @__PURE__ */ e(f, {
         onClick: () => l(i - 1),
-        disabled: i <= ae,
+        disabled: i <= ne,
         children: "−"
       }),
       /* @__PURE__ */ e("input", {
@@ -478,11 +478,11 @@ var dt = () => {
         inputMode: "numeric",
         pattern: "[0-9]*",
         value: i,
-        onKeyDown: c,
-        onChange: (h) => r(h.target.valueAsNumber),
+        onKeyDown: d,
+        onChange: (c) => r(c.target.valueAsNumber),
         onBlur: () => s(i)
       }),
-      /* @__PURE__ */ e(u, {
+      /* @__PURE__ */ e(f, {
         onClick: () => l(i + 1),
         disabled: i >= 128,
         children: "+"
@@ -490,7 +490,7 @@ var dt = () => {
     ]
   });
 }, kt = () => {
-  const { editor: o, customFonts: t, defaultValues: i } = f(), r = g({
+  const { editor: o, customFonts: t, defaultValues: i } = v(), r = g({
     editor: o,
     selector: (c) => ({ currentFontFamily: c.editor.getAttributes("textStyle").fontFamily || "" })
   }), n = [
@@ -501,32 +501,30 @@ var dt = () => {
     "Montserrat",
     ...t || []
   ], [s, l] = O(r.currentFontFamily || i?.fontFamily || n[0]);
-  return d.useEffect(() => {
+  u.useEffect(() => {
     l(r.currentFontFamily?.replace(/"/g, "") || i?.fontFamily || n[0]);
-  }, [r.currentFontFamily]), /* @__PURE__ */ p(C.Root, { children: [/* @__PURE__ */ e(C.Trigger, {
-    "data-active": s !== (i?.fontFamily ?? n[0]),
-    style: { fontFamily: s },
-    title: s || "Font Family",
-    render: /* @__PURE__ */ e(u, {}),
-    children: s?.[0]
-  }), /* @__PURE__ */ e(C.Portal, { children: /* @__PURE__ */ e(C.Positioner, {
-    align: "start",
-    sideOffset: 4,
-    children: /* @__PURE__ */ e(C.Popup, {
-      render: /* @__PURE__ */ e(q, {}),
-      "data-block": !0,
-      finalFocus: !1,
-      children: n.map((c) => /* @__PURE__ */ e(C.Item, {
-        title: c,
-        render: /* @__PURE__ */ e(U, {}),
-        onClick: () => {
-          o.chain().focus().setFontFamily(c).run(), l(c);
-        },
-        children: c
-      }, c))
-    })
-  }) })] });
-}, _t = "_button_583n5_1", At = { button: _t }, ce = d.forwardRef(function({ children: t, variant: i, color: r, icon: n, ...s }, l) {
+  }, [r.currentFontFamily]);
+  const d = n.map((c) => ({
+    id: c,
+    label: c,
+    tooltip: c,
+    active: c === s,
+    style: { fontFamily: c },
+    event: () => {
+      o.chain().focus().setFontFamily(c).run(), l(c);
+    }
+  }));
+  return /* @__PURE__ */ e(z, {
+    trigger: /* @__PURE__ */ e("span", {
+      style: { fontFamily: s },
+      children: s?.[0]
+    }),
+    triggerTitle: s || "Font Family",
+    active: s !== (i?.fontFamily ?? n[0]),
+    items: d,
+    direction: "block"
+  });
+}, _t = "_button_583n5_1", At = { button: _t }, ce = u.forwardRef(function({ children: t, variant: i, color: r, icon: n, ...s }, l) {
   return /* @__PURE__ */ p("button", {
     ref: l,
     className: At.button,
@@ -535,28 +533,28 @@ var dt = () => {
     ...s,
     children: [n, t]
   });
-}), wt = "_dialog_vbrv2_1", It = "_backdrop_vbrv2_27", yt = "_content_vbrv2_46", Tt = "_footer_vbrv2_52", St = "_close_vbrv2_59", x = {
+}), wt = "_dialog_vbrv2_1", yt = "_backdrop_vbrv2_27", It = "_content_vbrv2_46", Tt = "_footer_vbrv2_52", St = "_close_vbrv2_59", x = {
   dialog: wt,
-  backdrop: It,
-  content: yt,
+  backdrop: yt,
+  content: It,
   footer: Tt,
   close: St
 };
-function j({ Trigger: o, children: t, maxWidth: i, onOpenChange: r, footer: n }) {
-  const s = d.useContext(M), l = d.useCallback((c) => {
-    s?.editor.setEditable(!c, !1), r?.(c);
+function U({ Trigger: o, children: t, maxWidth: i, onOpenChange: r, footer: n }) {
+  const s = u.useContext($), l = u.useCallback((d) => {
+    s?.editor.setEditable(!d, !1), r?.(d);
   }, [s, r]);
-  return /* @__PURE__ */ p(I.Root, {
+  return /* @__PURE__ */ p(y.Root, {
     modal: !0,
     onOpenChange: l,
     children: [/* @__PURE__ */ e("span", {
-      onClick: (c) => c.stopPropagation(),
-      children: /* @__PURE__ */ e(I.Trigger, { render: o })
-    }), /* @__PURE__ */ p(I.Portal, { children: [/* @__PURE__ */ e(I.Backdrop, { className: x.backdrop }), /* @__PURE__ */ p(I.Popup, {
+      onClick: (d) => d.stopPropagation(),
+      children: /* @__PURE__ */ e(y.Trigger, { render: o })
+    }), /* @__PURE__ */ p(y.Portal, { children: [/* @__PURE__ */ e(y.Backdrop, { className: x.backdrop }), /* @__PURE__ */ p(y.Popup, {
       className: x.dialog,
       style: i ? { maxWidth: i } : void 0,
       children: [
-        /* @__PURE__ */ e(I.Close, {
+        /* @__PURE__ */ e(y.Close, {
           className: x.close,
           "aria-label": "Close",
           children: /* @__PURE__ */ e(be, {
@@ -577,7 +575,7 @@ function j({ Trigger: o, children: t, maxWidth: i, onOpenChange: r, footer: n })
   });
 }
 function H({ children: o, variant: t, color: i, icon: r, ...n }) {
-  return /* @__PURE__ */ e(I.Close, {
+  return /* @__PURE__ */ e(y.Close, {
     render: /* @__PURE__ */ e(ce, {
       variant: t,
       color: i,
@@ -587,40 +585,40 @@ function H({ children: o, variant: t, color: i, icon: r, ...n }) {
     children: o
   });
 }
-var xt = "_group_56lao_1", Ft = "_label_56lao_8", Ht = "_input_56lao_14", B = {
+var xt = "_group_56lao_1", Ft = "_label_56lao_8", Ht = "_input_56lao_14", P = {
   group: xt,
   label: Ft,
   input: Ht
 };
 function E({ label: o, id: t, ...i }) {
   return /* @__PURE__ */ p("div", {
-    className: B.group,
+    className: P.group,
     children: [o && /* @__PURE__ */ e("label", {
-      className: B.label,
+      className: P.label,
       htmlFor: t,
       children: o
     }), /* @__PURE__ */ e("input", {
       id: t,
-      className: B.input,
+      className: P.input,
       ...i
     })]
   });
 }
 var Lt = () => {
-  const { editor: o } = f(), t = g({
+  const { editor: o } = v(), t = g({
     editor: o,
-    selector: (c) => ({
-      isImage: c.editor?.isActive("image"),
-      imageAttrs: c.editor?.getAttributes("image")
+    selector: (d) => ({
+      isImage: d.editor?.isActive("image"),
+      imageAttrs: d.editor?.getAttributes("image")
     })
-  }), [i, r] = d.useState(t.imageAttrs.src || ""), [n, s] = d.useState(t.imageAttrs.alt || ""), l = () => {
+  }), [i, r] = u.useState(t.imageAttrs.src || ""), [n, s] = u.useState(t.imageAttrs.alt || ""), l = () => {
     o.chain().focus().setImage({
       src: i,
       alt: n
     }).run();
   };
-  return /* @__PURE__ */ p(j, {
-    Trigger: /* @__PURE__ */ e(u, {
+  return /* @__PURE__ */ p(U, {
+    Trigger: /* @__PURE__ */ e(f, {
       title: "Image",
       "data-active": t.isImage,
       children: /* @__PURE__ */ e(ge, {})
@@ -638,23 +636,23 @@ var Lt = () => {
       label: "Image URL",
       type: "url",
       value: i,
-      onChange: (c) => r(c.target.value),
+      onChange: (d) => r(d.target.value),
       required: !0
     }), /* @__PURE__ */ e(E, {
       label: "Alt Text",
       type: "text",
       value: n,
-      onChange: (c) => s(c.target.value)
+      onChange: (d) => s(d.target.value)
     })]
   });
 }, Rt = () => {
-  const { editor: o } = f(), t = g({
+  const { editor: o } = v(), t = g({
     editor: o,
     selector: (a) => ({
       isLink: a.editor?.isActive("link"),
       linkAttrs: a.editor?.getAttributes("link")
     })
-  }), [i, r] = d.useState(t.linkAttrs.href || ""), [n, s] = d.useState(t.linkAttrs.alt || ""), l = (a) => !a || a.startsWith("http://") || a.startsWith("https://") ? a : `https://${a}`, c = () => {
+  }), [i, r] = u.useState(t.linkAttrs.href || ""), [n, s] = u.useState(t.linkAttrs.alt || ""), l = (a) => !a || a.startsWith("http://") || a.startsWith("https://") ? a : `https://${a}`, d = () => {
     const a = l(i);
     o.chain().focus().insertContent({
       type: "text",
@@ -664,40 +662,40 @@ var Lt = () => {
         attrs: { href: a }
       }]
     }).run();
-  }, h = () => {
-    const a = o.getAttributes("link"), { from: m, to: A, $from: S } = o.state.selection;
+  }, c = () => {
+    const a = o.getAttributes("link"), { from: m, to: _, $from: S } = o.state.selection;
     let b;
-    if (m !== A) b = o.state.doc.textBetween(m, A);
+    if (m !== _) b = o.state.doc.textBetween(m, _);
     else {
-      const y = S.parent.textContent, T = S.parentOffset;
-      let w = T, k = T;
-      for (; w > 0 && !/\s/.test(y[w - 1]); ) w--;
-      for (; k < y.length && !/\s/.test(y[k]); ) k++;
-      if (b = y.slice(w, k), b) {
-        const _ = S.start();
+      const I = S.parent.textContent, T = S.parentOffset;
+      let A = T, C = T;
+      for (; A > 0 && !/\s/.test(I[A - 1]); ) A--;
+      for (; C < I.length && !/\s/.test(I[C]); ) C++;
+      if (b = I.slice(A, C), b) {
+        const k = S.start();
         o.commands.setTextSelection({
-          from: _ + w,
-          to: _ + k
+          from: k + A,
+          to: k + C
         });
       }
     }
     r(a.href || ""), s(b || a.alt || "");
   };
-  return /* @__PURE__ */ p(j, {
-    Trigger: /* @__PURE__ */ e(u, {
+  return /* @__PURE__ */ p(U, {
+    Trigger: /* @__PURE__ */ e(f, {
       title: "Link",
       "data-active": t.isLink,
       children: /* @__PURE__ */ e(pe, {})
     }),
     maxWidth: "400px",
-    onOpenChange: (a) => a && h(),
+    onOpenChange: (a) => a && c(),
     footer: /* @__PURE__ */ p(N, { children: [t.isLink && /* @__PURE__ */ e(H, {
       color: "error",
       variant: "secondary",
       onClick: () => o.chain().focus().unsetLink().run(),
       children: "Remove"
     }), /* @__PURE__ */ e(H, {
-      onClick: c,
+      onClick: d,
       disabled: !i,
       children: "Save"
     })] }),
@@ -714,36 +712,36 @@ var Lt = () => {
       onChange: (a) => s(a.target.value)
     })]
   });
-}, Et = "_label_1kiov_1", Nt = "_root_1kiov_11", zt = "_thumb_1kiov_44", P = {
+}, Et = "_label_1kiov_1", Nt = "_root_1kiov_11", zt = "_thumb_1kiov_44", M = {
   label: Et,
   root: Nt,
   thumb: zt
 };
 function Dt({ checked: o, onCheckedChange: t, label: i }) {
   return /* @__PURE__ */ p("label", {
-    className: P.label,
-    children: [/* @__PURE__ */ e("span", { children: i }), /* @__PURE__ */ e(le.Root, {
-      className: P.root,
+    className: M.label,
+    children: [/* @__PURE__ */ e("span", { children: i }), /* @__PURE__ */ e(re.Root, {
+      className: M.root,
       checked: o,
       onCheckedChange: t,
-      children: /* @__PURE__ */ e(le.Thumb, { className: P.thumb })
+      children: /* @__PURE__ */ e(re.Thumb, { className: M.thumb })
     })]
   });
 }
 var Bt = () => {
-  const { editor: o } = f(), t = g({
+  const { editor: o } = v(), t = g({
     editor: o,
     selector: (a) => ({
       isTable: a.editor.isActive("table"),
       tableAttrs: a.editor.getAttributes("table")
     })
-  }), [i, r] = O(!1), n = xe(null), s = D((a) => {
+  }), [i, r] = O(!1), n = xe(null), s = B((a) => {
     n.current && clearTimeout(n.current), n.current = setTimeout(a, 100);
   }, []);
-  d.useEffect(() => () => {
+  u.useEffect(() => () => {
     n.current && clearTimeout(n.current);
   }, []);
-  const l = D(() => {
+  const l = B(() => {
     s(() => o.chain().focus().insertTable({
       rows: 2,
       cols: 4,
@@ -753,9 +751,9 @@ var Bt = () => {
     o,
     i,
     s
-  ]), c = D(() => {
+  ]), d = B(() => {
     r((a) => !a), s(() => o.chain().focus().toggleHeaderRow().run());
-  }, [o, s]), h = [
+  }, [o, s]), c = [
     {
       text: "Column left",
       icon: /* @__PURE__ */ e(L, {}),
@@ -778,48 +776,48 @@ var Bt = () => {
     },
     {
       text: "Delete Column",
-      icon: /* @__PURE__ */ e(z, {}),
+      icon: /* @__PURE__ */ e(D, {}),
       event: () => o.chain().focus().deleteColumn().run()
     },
     {
       text: "Delete Row",
-      icon: /* @__PURE__ */ e(z, {}),
+      icon: /* @__PURE__ */ e(D, {}),
       event: () => o.chain().focus().deleteRow().run()
     }
   ];
-  return t.isTable ? /* @__PURE__ */ p(j, {
-    Trigger: /* @__PURE__ */ e(u, {
+  return t.isTable ? /* @__PURE__ */ p(U, {
+    Trigger: /* @__PURE__ */ e(f, {
       title: "Table",
       "data-active": t.isTable,
-      children: /* @__PURE__ */ e(J, {})
+      children: /* @__PURE__ */ e(j, {})
     }),
     maxWidth: "320px",
     footer: /* @__PURE__ */ e(H, {
       variant: "secondary",
       color: "error",
-      icon: /* @__PURE__ */ e(z, {}),
+      icon: /* @__PURE__ */ e(D, {}),
       onClick: () => o.chain().focus().deleteTable().run(),
       children: "Delete Table"
     }),
     children: [/* @__PURE__ */ e(Dt, {
       checked: i,
-      onCheckedChange: c,
+      onCheckedChange: d,
       label: "Title Row"
     }), /* @__PURE__ */ e("div", {
       className: F.wuContentEditorTable,
-      children: h.map(({ text: a, icon: m, event: A }) => /* @__PURE__ */ e(ce, {
-        onClick: A,
+      children: c.map(({ text: a, icon: m, event: _ }) => /* @__PURE__ */ e(ce, {
+        onClick: _,
         variant: "secondary",
         icon: m,
         children: a
       }, a))
     })]
-  }) : /* @__PURE__ */ e(u, {
+  }) : /* @__PURE__ */ e(f, {
     title: "Table",
     onClick: l,
-    children: /* @__PURE__ */ e(J, {})
+    children: /* @__PURE__ */ e(j, {})
   });
-}, se = {
+}, le = {
   block: /* @__PURE__ */ e(Ye, {}),
   fontFamily: /* @__PURE__ */ e(kt, {}),
   fontSize: /* @__PURE__ */ e(Ct, {}),
@@ -873,8 +871,8 @@ var Bt = () => {
   "|",
   "html",
   "clear"
-], Ot = (o) => {
-  const { editor: t, customFonts: i, defaultValues: r, children: n, items: s = Pt, isHtml: l, setIsHtml: c, htmlSourceEnabled: h, ...a } = o;
+], Mt = (o) => {
+  const { editor: t, customFonts: i, defaultValues: r, children: n, items: s = Pt, isHtml: l, setIsHtml: d, htmlSourceEnabled: c, ...a } = o;
   return /* @__PURE__ */ e("div", {
     ...a,
     children: /* @__PURE__ */ p(We, {
@@ -882,60 +880,60 @@ var Bt = () => {
       customFonts: i,
       defaultValues: r,
       isHtml: l,
-      setIsHtml: c,
-      htmlSourceEnabled: h,
-      children: [s.map((m, A) => /* @__PURE__ */ e(N, { children: l && m !== "html" ? /* @__PURE__ */ e("span", {
+      setIsHtml: d,
+      htmlSourceEnabled: c,
+      children: [s.map((m, _) => /* @__PURE__ */ e(N, { children: l && m !== "html" ? /* @__PURE__ */ e("span", {
         style: {
           pointerEvents: "none",
           opacity: 0.4
         },
-        children: se[m]
-      }) : se[m] }, m + A)), n]
+        children: le[m]
+      }) : le[m] }, m + _)), n]
     })
   });
 };
-function Mt(...o) {
+function Ot(...o) {
   return o.filter(Boolean).join(" ");
 }
-function oo({ defaultValue: o, onUpdate: t, className: i, toolbarPosition: r = "top", customToolbarChildren: n, toolbarItems: s, hideToolbar: l, readonly: c, autoFocus: h, customFonts: a, htmlSource: m, isHtml: A, setIsHtml: S, defaultValues: b, ...y }) {
-  const [T, w] = d.useState((A ?? !1) && !!m);
-  d.useEffect(() => {
-    process.env.NODE_ENV !== "production" && A && !m && console.warn('[WuContentEditor]: `isHtml` has no effect without an `htmlSource` component. Import {WuHtmlSource} from "@npm-questionpro/wick-ui-editor/html" and pass it as `htmlSource`.');
+function oo({ defaultValue: o, onUpdate: t, className: i, toolbarPosition: r = "top", customToolbarChildren: n, toolbarItems: s, hideToolbar: l, readonly: d, autoFocus: c, customFonts: a, htmlSource: m, isHtml: _, setIsHtml: S, defaultValues: b, ...I }) {
+  const [T, A] = u.useState((_ ?? !1) && !!m);
+  u.useEffect(() => {
+    process.env.NODE_ENV !== "production" && _ && !m && console.warn('[WuContentEditor]: `isHtml` has no effect without an `htmlSource` component. Import {WuHtmlSource} from "@npm-questionpro/wick-ui-editor/html" and pass it as `htmlSource`.');
   }, []);
-  const k = d.useRef(o || ""), _ = Se({
-    editable: !c,
-    autofocus: h ? "end" : !1,
+  const C = u.useRef(o || ""), k = Se({
+    editable: !d,
+    autofocus: c ? "end" : !1,
     extensions: Ue,
     content: R(o || ""),
-    onUpdate: ({ editor: v }) => {
-      t && t(R(v.getHTML()));
+    onUpdate: ({ editor: h }) => {
+      t && t(R(h.getHTML()));
     }
   });
-  d.useEffect(() => {
-    if (!_ || !b) return;
-    const v = _.chain();
-    b.fontFamily && v.setFontFamily(b.fontFamily), b.fontSize && v.setFontSize(`${b.fontSize}px`), b.color && v.setColor(b.color), b.bgColor && v.setBackgroundColor(b.bgColor), v.run();
-  }, [_]);
-  const de = (v) => {
-    v ? k.current = _?.getHTML() ?? "" : _?.commands.setContent(R(k.current)), t && t(R(k.current)), w(v), S?.(v);
+  u.useEffect(() => {
+    if (!k || !b) return;
+    const h = k.chain();
+    b.fontFamily && h.setFontFamily(b.fontFamily), b.fontSize && h.setFontSize(`${b.fontSize}px`), b.color && h.setColor(b.color), b.bgColor && h.setBackgroundColor(b.bgColor), h.run();
+  }, [k]);
+  const de = (h) => {
+    h ? C.current = k?.getHTML() ?? "" : k?.commands.setContent(R(C.current)), t && t(R(C.current)), A(h), S?.(h);
   };
   return /* @__PURE__ */ p("div", {
-    className: Mt(F.wuContentEditorRoot, i),
+    className: Ot(F.wuContentEditorRoot, i),
     "data-position": r,
     "data-slot": "wu-content-editor-root",
-    onClick: (v) => {
-      if ((v.ctrlKey || v.metaKey) && v.target instanceof HTMLElement) {
-        const K = v.target.closest("a");
-        if (K?.href) {
-          window.open(K.href, "_blank", "noopener,noreferrer");
+    onClick: (h) => {
+      if ((h.ctrlKey || h.metaKey) && h.target instanceof HTMLElement) {
+        const W = h.target.closest("a");
+        if (W?.href) {
+          window.open(W.href, "_blank", "noopener,noreferrer");
           return;
         }
       }
-      T || _?.chain().focus().run();
+      T || k?.chain().focus().run();
     },
-    ...y,
-    children: [!l && /* @__PURE__ */ e(Ot, {
-      editor: _,
+    ...I,
+    children: [!l && /* @__PURE__ */ e(Mt, {
+      editor: k,
       customFonts: a,
       defaultValues: b,
       className: F.wuContentEditorToolbar,
@@ -946,13 +944,13 @@ function oo({ defaultValue: o, onUpdate: t, className: i, toolbarPosition: r = "
       "data-slot": "wu-content-editor-toolbar",
       children: n
     }), T && m ? /* @__PURE__ */ e(m, {
-      defaultValue: k.current,
-      onUpdate: (v) => {
-        k.current = v ?? "", t && t(v ?? "");
+      defaultValue: C.current,
+      onUpdate: (h) => {
+        C.current = h ?? "", t && t(h ?? "");
       },
-      readonly: c
+      readonly: d
     }) : /* @__PURE__ */ e(Te, {
-      editor: _,
+      editor: k,
       className: F.wuContentEditor,
       "data-slot": "wu-content-editor"
     })]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@npm-questionpro/wick-ui-editor",
-  "version": "2.7.0",
+  "version": "2.8.0",
   "description": "Wick Editor is a powerful and intuitive content editing component built with React. It provides a rich set of features for creating and managing content, making it ideal for applications that require dynamic and interactive content creation.",
   "keywords": [
     "react",
@@ -99,8 +99,8 @@
     "vite-plugin-dts": "^4.5.4",
     "vitest": "^4.1.8",
     "@npm-questionpro/wick-ui-eslint-config": "1.0.0",
-    "@wick-ui/tsconfig": "1.0.0",
-    "@npm-questionpro/wick-ui-lib": "2.7.0"
+    "@npm-questionpro/wick-ui-lib": "2.8.0",
+    "@wick-ui/tsconfig": "1.0.0"
   },
   "scripts": {
     "build": "tsc --noEmit && vite build && tsc -p tsconfig.types.json && tsc-alias -p tsconfig.types.json",