@npm-questionpro/wick-ui-editor 2.0.0-next.9 → 2.0.0

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

@@ -1,768 +1,848 @@
-import { EditorContent as G, useEditor as V, useEditorState as f } from "@tiptap/react";
-import X from "clsx";
-import m, { useCallback as O, useRef as Y, useState as N } from "react";
-import Z from "@tiptap/extension-image";
-import { TaskItem as Q, TaskList as tt } from "@tiptap/extension-list";
-import et from "@tiptap/extension-subscript";
-import ot from "@tiptap/extension-superscript";
-import { TableKit as nt } from "@tiptap/extension-table";
-import it from "@tiptap/extension-text-align";
-import { BackgroundColor as rt, Color as lt, FontFamily as at, FontSize as st, LineHeight as ct, TextStyle as ut } from "@tiptap/extension-text-style";
-import dt from "@tiptap/starter-kit";
-import { Fragment as x, jsx as e, jsxs as v } from "react/jsx-runtime";
-import { WuButton as q, WuIcon as h, WuInput as F, WuModal as H, WuModalClose as _, WuModalContent as D, WuModalFooter as R, WuModalHeader as z, WuToggle as mt } from "@npm-questionpro/wick-ui-lib";
-import { DropdownMenu as U, DropdownMenuContent as j, DropdownMenuItem as $, DropdownMenuTrigger as K } from "@radix-ui/react-dropdown-menu";
-import ht from "dompurify";
-var pt = "_wuContentEditor_cl3h6_7", ft = "_wuContentEditorTable_cl3h6_1", gt = "_selectedCell_cl3h6_1", vt = "_tableWrapper_cl3h6_1", wt = "_wuContentEditorContainer_cl3h6_7", Ct = "_wuContentEditorToolbar_cl3h6_82", bt = "_wuContentEditorAction_cl3h6_110", At = "_wuContentEditorDropdown_cl3h6_136", yt = "_wuContentEditorDropdownItem_cl3h6_150", kt = "_wuContentEditorFontSize_cl3h6_162", Et = "_wuContentEditorModal_cl3h6_176", Tt = "_wuCodeEditor_cl3h6_180", St = "_wuFormatCode_cl3h6_190", _t = "_wuCodeEditorPreview_cl3h6_205", xt = "_wuCodeEditorInput_cl3h6_222", a = {
-  wuContentEditor: pt,
-  wuContentEditorTable: ft,
-  selectedCell: gt,
-  "column-resize-handle": "_column-resize-handle_cl3h6_1",
-  tableWrapper: vt,
-  "resize-cursor": "_resize-cursor_cl3h6_1",
-  wuContentEditorContainer: wt,
-  wuContentEditorToolbar: Ct,
-  wuContentEditorAction: bt,
-  wuContentEditorDropdown: At,
-  wuContentEditorDropdownItem: yt,
-  wuContentEditorFontSize: kt,
-  wuContentEditorModal: Et,
-  wuCodeEditor: Tt,
-  wuFormatCode: St,
-  wuCodeEditorPreview: _t,
-  wuCodeEditorInput: xt
-}, Ft = [
-  dt.configure({ link: {
+import { A as K, C as J, D as de, E as ue, M as he, O as fe, S as ve, T as Q, _ as V, a as X, b as pe, c as ge, d as me, f as be, g as Y, h as Z, i as G, j as ke, k as Ce, l as ee, m as D, n as R, o as te, r as oe, s as _e, t as F, u as Ae, v as ie, w as re, x as we, y as Ie } from "../../sanitize-BZ0U7q7z.js";
+import { EditorContent as Te, useEditor as ye, useEditorState as v } from "@tiptap/react";
+import u, { useCallback as B, useRef as Se, useState as O } from "react";
+import xe from "@tiptap/extension-image";
+import { TaskItem as He, TaskList as Le } from "@tiptap/extension-list";
+import Re from "@tiptap/extension-subscript";
+import Fe from "@tiptap/extension-superscript";
+import { TableKit as Ee } from "@tiptap/extension-table";
+import Ne from "@tiptap/extension-text-align";
+import { BackgroundColor as De, Color as Be, FontFamily as ze, FontSize as Pe, LineHeight as Oe, TextStyle as Me } from "@tiptap/extension-text-style";
+import qe from "@tiptap/starter-kit";
+import { Fragment as N, jsx as e, jsxs as f } from "react/jsx-runtime";
+import { Menu as g } from "@base-ui/react/menu";
+import { Dialog as w } from "@base-ui/react/dialog";
+import { Switch as ne } from "@base-ui/react/switch";
+var $e = [
+  qe.configure({ link: {
     openOnClick: !1,
     autolink: !0,
     defaultProtocol: "https",
     protocols: ["http", "https"],
-    isAllowedUri: (t, o) => {
+    isAllowedUri: (o, t) => {
       try {
-        const n = t.includes(":") ? new URL(t) : new URL(`${o.defaultProtocol}://${t}`);
-        if (!o.defaultValidate(n.href)) return !1;
-        const i = [
+        const i = o.includes(":") ? new URL(o) : new URL(`${t.defaultProtocol}://${o}`);
+        if (!t.defaultValidate(i.href)) return !1;
+        const r = [
           "ftp",
           "file",
           "mailto"
-        ], r = n.protocol.replace(":", "");
-        if (i.includes(r) || !o.protocols.map((l) => typeof l == "string" ? l : l.scheme).includes(r)) return !1;
-        const u = ["example-phishing.com", "malicious-site.net"], c = n.hostname;
-        return !u.includes(c);
+        ], n = i.protocol.replace(":", "");
+        if (r.includes(n) || !t.protocols.map((s) => typeof s == "string" ? s : s.scheme).includes(n)) return !1;
+        const c = ["example-phishing.com", "malicious-site.net"], l = i.hostname;
+        return !c.includes(l);
       } catch {
         return !1;
       }
     },
-    shouldAutoLink: (t) => {
+    shouldAutoLink: (o) => {
       try {
-        const o = t.includes(":") ? new URL(t) : new URL(`https://${t}`), n = ["example-no-autolink.com", "another-no-autolink.com"], i = o.hostname;
-        return !n.includes(i);
+        const t = o.includes(":") ? new URL(o) : new URL(`https://${o}`), i = ["example-no-autolink.com", "another-no-autolink.com"], r = t.hostname;
+        return !i.includes(r);
       } catch {
         return !1;
       }
     }
   } }),
-  it.configure({ types: ["heading", "paragraph"] }),
-  ot,
-  et,
-  ut,
-  lt,
-  rt,
-  tt,
-  Q,
-  ct,
-  st,
-  at,
-  Z.configure({
+  Ne.configure({ types: ["heading", "paragraph"] }),
+  Fe,
+  Re,
+  Me,
+  Be,
+  De,
+  Le,
+  He,
+  Oe,
+  Pe,
+  ze,
+  xe.configure({
     resize: {
       enabled: !0,
       alwaysPreserveAspectRatio: !0
     },
     inline: !0
   }),
-  nt.configure({ table: { resizable: !0 } })
-], J = m.createContext(null), Lt = ({ editor: t, children: o, customFonts: n, isHtml: i, setIsHtml: r }) => /* @__PURE__ */ e(J.Provider, {
+  Ee.configure({ table: { resizable: !0 } })
+], M = u.createContext(null), Ue = ({ editor: o, children: t, customFonts: i, isHtml: r, setIsHtml: n, htmlSourceEnabled: c }) => /* @__PURE__ */ e(M.Provider, {
   value: {
-    editor: t,
-    customFonts: n,
-    isHtml: i,
-    setIsHtml: r
+    editor: o,
+    customFonts: i,
+    isHtml: r,
+    setIsHtml: n,
+    htmlSourceEnabled: c
   },
+  children: t
+}), h = () => {
+  const o = u.useContext(M);
+  if (!o) throw new Error("useToolbar must be used within a ToolbarProvider");
+  return o;
+}, We = "_dropdown_k3z4n_1", je = "_dropdownItem_k3z4n_17", se = {
+  dropdown: We,
+  dropdownItem: je
+}, Ke = "_item_wqnwe_1", Je = { item: Ke }, d = u.forwardRef(function({ Icon: t, children: i, ...r }, n) {
+  return /* @__PURE__ */ f("button", {
+    ref: n,
+    ...r,
+    className: Je.item,
+    children: [
+      t,
+      " ",
+      i
+    ]
+  });
+}), q = u.forwardRef(({ children: o, ...t }, i) => /* @__PURE__ */ e("div", {
+  ref: i,
+  className: se.dropdown,
+  ...t,
   children: o
-}), p = () => {
-  const t = m.useContext(J);
-  if (!t) throw new Error("useToolbar must be used within a ToolbarProvider");
-  return t;
-}, M = ({ action: t, defaultValue: o }) => {
-  const [n, i] = m.useState(o || t.items.find((r) => r.active) || t.items[0]);
-  return m.useEffect(() => {
-    i(o || t.items.find((r) => r.active) || t.items[0]);
-  }, [t, o]), /* @__PURE__ */ v(U, { children: [/* @__PURE__ */ e(K, {
-    className: a.wuContentEditorAction,
-    "data-active": t.active,
-    children: /* @__PURE__ */ e(h, { icon: n.icon })
-  }), /* @__PURE__ */ e(j, {
-    align: "start",
-    onCloseAutoFocus: (r) => r.preventDefault(),
-    className: a.wuContentEditorDropdown,
-    "data-inline": !0,
-    children: t.items?.map((r) => /* @__PURE__ */ e($, {
-      onClick: () => {
-        r.event(), i(r);
-      },
-      title: r.tooltip,
-      children: /* @__PURE__ */ e("button", {
-        type: "button",
-        className: a.wuContentEditorAction,
-        "data-active": r.active,
-        children: /* @__PURE__ */ e(h, { icon: r.icon })
-      })
-    }, r.id))
-  })] });
-}, It = () => {
-  const { editor: t } = p(), o = f({
-    editor: t,
-    selector: (i) => ({
-      isLeft: i.editor?.isActive({ textAlign: "left" }),
-      isCenter: i.editor?.isActive({ textAlign: "center" }),
-      isRight: i.editor?.isActive({ textAlign: "right" }),
-      isJustify: i.editor?.isActive({ textAlign: "justify" }),
-      isAligned: i.editor?.isActive({ textAlign: "center" }) || i.editor?.isActive({ textAlign: "right" }) || i.editor?.isActive({ textAlign: "justify" })
+}));
+q.displayName = "DropdownPopup";
+var $ = u.forwardRef(({ children: o, ...t }, i) => /* @__PURE__ */ e("div", {
+  ref: i,
+  className: se.dropdownItem,
+  ...t,
+  children: o
+}));
+$.displayName = "DropdownItem";
+function U({ trigger: o, triggerTitle: t, active: i, items: r, align: n = "start", direction: c = "inline" }) {
+  return /* @__PURE__ */ f(g.Root, { children: [/* @__PURE__ */ e(g.Trigger, {
+    render: /* @__PURE__ */ e(d, {}),
+    "data-active": i,
+    title: t,
+    children: o
+  }), /* @__PURE__ */ e(g.Portal, { children: /* @__PURE__ */ e(g.Positioner, {
+    align: n,
+    sideOffset: 4,
+    children: /* @__PURE__ */ e(g.Popup, {
+      render: /* @__PURE__ */ e(q, {}),
+      "data-inline": c === "inline" ? !0 : void 0,
+      "data-block": c === "block" ? !0 : void 0,
+      finalFocus: !1,
+      children: r.map((l) => c === "block" ? /* @__PURE__ */ e(g.Item, {
+        render: /* @__PURE__ */ e($, {}),
+        title: l.tooltip,
+        "data-active": l.active,
+        style: l.style,
+        onClick: l.event,
+        children: l.icon ?? l.label
+      }, l.id) : /* @__PURE__ */ e(g.Item, {
+        render: /* @__PURE__ */ e(d, {}),
+        "data-active": l.active,
+        title: l.tooltip,
+        onClick: l.event,
+        children: l.icon ?? l.label
+      }, l.id))
     })
-  }), n = [
-    {
-      id: "left",
-      icon: "wm-format-align-left",
-      event: () => t.chain().focus().setTextAlign("left").run(),
-      tooltip: "Align Left",
-      active: o.isLeft
-    },
-    {
-      id: "center",
-      icon: "wm-format-align-center",
-      event: () => t.chain().focus().setTextAlign("center").run(),
-      tooltip: "Align Center",
-      active: o.isCenter
-    },
-    {
-      id: "right",
-      icon: "wm-format-align-right",
-      event: () => t.chain().focus().setTextAlign("right").run(),
-      tooltip: "Align Right",
-      active: o.isRight
-    },
-    {
-      id: "justify",
-      icon: "wm-format-align-justify",
-      event: () => t.chain().focus().setTextAlign("justify").run(),
-      tooltip: "Justify",
-      active: o.isJustify
-    }
-  ];
-  return /* @__PURE__ */ e(M, { action: {
-    id: "style",
-    active: o.isAligned,
-    icon: "wm-format-paragraph",
-    items: n
-  } });
-}, Nt = () => {
-  const { editor: t } = p(), o = f({
-    editor: t,
-    selector: ({ editor: n }) => ({ bgColor: n.getAttributes("textStyle").backgroundColor })
-  });
-  return /* @__PURE__ */ v("label", {
-    className: a.wuContentEditorAction,
-    htmlFor: "bg-color",
-    title: "Background Color",
-    children: [/* @__PURE__ */ e(h, {
-      icon: "wm-border-color",
-      style: { color: o.bgColor }
-    }), /* @__PURE__ */ e("input", {
-      type: "color",
-      id: "bg-color",
-      name: "bg-color",
-      defaultValue: "#fff",
-      onChange: (n) => t.chain().focus().setBackgroundColor(n.target.value).run()
-    })]
-  });
-}, Ht = () => {
-  const { editor: t } = p(), o = f({
-    editor: t,
-    selector: (i) => ({
-      isParagraph: i.editor?.isActive("paragraph"),
-      isH1: i.editor?.isActive("heading", { level: 1 }),
-      isH2: i.editor?.isActive("heading", { level: 2 }),
-      isH3: i.editor?.isActive("heading", { level: 3 }),
-      isH4: i.editor?.isActive("heading", { level: 4 }),
-      isStyle: i.editor?.isActive("heading")
+  }) })] });
+}
+var Qe = () => {
+  const { editor: o } = h(), t = v({
+    editor: o,
+    selector: (r) => ({
+      isParagraph: r.editor?.isActive("paragraph"),
+      isH1: r.editor?.isActive("heading", { level: 1 }),
+      isH2: r.editor?.isActive("heading", { level: 2 }),
+      isH3: r.editor?.isActive("heading", { level: 3 }),
+      isH4: r.editor?.isActive("heading", { level: 4 }),
+      isHeading: r.editor?.isActive("heading")
     })
-  }), n = [
+  }), i = [
     {
       id: "paragraph",
-      icon: "wm-format-paragraph",
-      event: () => t.chain().focus().setParagraph().run(),
-      active: o.isParagraph
+      icon: /* @__PURE__ */ e(Q, {}),
+      event: () => o.chain().focus().setParagraph().run(),
+      tooltip: "Paragraph",
+      active: t.isParagraph
     },
     {
       id: "h1",
-      icon: "wm-format-h1",
-      event: () => t.chain().focus().setHeading({ level: 1 }).run(),
-      active: o.isH1
+      icon: /* @__PURE__ */ e(Z, {}),
+      event: () => o.chain().focus().setHeading({ level: 1 }).run(),
+      tooltip: "Heading 1",
+      active: t.isH1
     },
     {
       id: "h2",
-      icon: "wm-format-h2",
-      event: () => t.chain().focus().setHeading({ level: 2 }).run(),
-      active: o.isH2
+      icon: /* @__PURE__ */ e(Y, {}),
+      event: () => o.chain().focus().setHeading({ level: 2 }).run(),
+      tooltip: "Heading 2",
+      active: t.isH2
     },
     {
       id: "h3",
-      icon: "wm-format-h3",
-      event: () => t.chain().focus().setHeading({ level: 3 }).run(),
-      active: o.isH3
+      icon: /* @__PURE__ */ e(V, {}),
+      event: () => o.chain().focus().setHeading({ level: 3 }).run(),
+      tooltip: "Heading 3",
+      active: t.isH3
     },
     {
       id: "h4",
-      icon: "wm-format-h4",
-      event: () => t.chain().focus().setHeading({ level: 4 }).run(),
-      active: o.isH4
+      icon: /* @__PURE__ */ e(ie, {}),
+      event: () => o.chain().focus().setHeading({ level: 4 }).run(),
+      tooltip: "Heading 4",
+      active: t.isH4
     }
   ];
-  return /* @__PURE__ */ e(M, {
-    action: {
-      id: "style",
-      active: o.isStyle,
-      icon: "wm-format-paragraph",
-      items: n
-    },
-    defaultValue: n.find((i) => i.active)
-  });
-}, Dt = () => {
-  const { editor: t } = p(), o = f({
-    editor: t,
-    selector: (n) => ({ blockquote: n.editor?.isActive("blockquote") })
-  });
-  return /* @__PURE__ */ e("button", {
-    type: "button",
-    title: "quote",
-    className: a.wuContentEditorAction,
-    "data-active": o.blockquote,
-    onClick: (n) => {
-      n.preventDefault(), t.chain().focus().toggleBlockquote().run();
-    },
-    children: /* @__PURE__ */ e(h, { icon: "wm-format-quote" })
-  });
-}, Rt = () => {
-  const { editor: t } = p(), o = f({
-    editor: t,
-    selector: (n) => ({ bold: n.editor?.isActive("bold") })
+  return /* @__PURE__ */ e(U, {
+    trigger: t.isH1 ? /* @__PURE__ */ e(Z, {}) : t.isH2 ? /* @__PURE__ */ e(Y, {}) : t.isH3 ? /* @__PURE__ */ e(V, {}) : t.isH4 ? /* @__PURE__ */ e(ie, {}) : /* @__PURE__ */ e(Q, {}),
+    triggerTitle: "Block Style",
+    active: t.isHeading,
+    items: i
   });
-  return /* @__PURE__ */ e("button", {
-    type: "button",
+}, Ve = () => {
+  const { editor: o } = h();
+  return /* @__PURE__ */ e(d, {
     title: "Bold",
-    className: a.wuContentEditorAction,
-    "data-active": o.bold,
-    onClick: (n) => {
-      n.preventDefault(), t.chain().focus().toggleBold().run();
+    "data-active": v({
+      editor: o,
+      selector: (t) => ({ bold: t.editor?.isActive("bold") })
+    }).bold,
+    onClick: (t) => {
+      t.preventDefault(), o.chain().focus().toggleBold().run();
     },
-    children: /* @__PURE__ */ e(h, { icon: "wm-format-bold" })
+    children: /* @__PURE__ */ e(ge, {})
   });
-}, zt = () => {
-  const { editor: t } = p();
-  return /* @__PURE__ */ e(x, { children: [{
+}, Xe = () => {
+  const { editor: o } = h();
+  return /* @__PURE__ */ e(N, { children: [{
     id: "clear",
-    icon: "wm-format-clear",
-    event: () => t.chain().focus().clearNodes().unsetAllMarks().run(),
+    icon: /* @__PURE__ */ e(Ae, {}),
+    event: () => o.chain().focus().clearNodes().unsetAllMarks().run(),
     tooltip: "Clear Formatting"
-  }].map((o) => /* @__PURE__ */ e("button", {
-    type: "button",
-    title: o.tooltip,
-    className: a.wuContentEditorAction,
-    onClick: (n) => {
-      n.preventDefault(), o.event();
+  }].map((t) => /* @__PURE__ */ e(d, {
+    title: t.tooltip,
+    onClick: (i) => {
+      i.preventDefault(), t.event();
     },
-    children: /* @__PURE__ */ e(h, { icon: o.icon })
-  }, o.id)) });
-}, Mt = () => {
-  const { editor: t } = p(), o = f({
-    editor: t,
-    selector: (n) => ({ code: n.editor.isActive("code") })
-  });
-  return /* @__PURE__ */ e("button", {
-    type: "button",
-    className: a.wuContentEditorAction,
-    "data-active": o.code,
+    children: t.icon
+  }, t.id)) });
+}, Ye = () => {
+  const { editor: o } = h();
+  return /* @__PURE__ */ e(d, {
+    "data-active": v({
+      editor: o,
+      selector: (t) => ({ code: t.editor.isActive("code") })
+    }).code,
     title: "Code line",
-    onMouseDown: (n) => {
-      n.preventDefault(), t.chain().focus().toggleCode().run();
+    onMouseDown: (t) => {
+      t.preventDefault(), o.chain().focus().toggleCode().run();
     },
-    children: /* @__PURE__ */ e(h, { icon: "wm-code" })
+    children: /* @__PURE__ */ e(be, {})
   });
-}, Wt = () => {
-  const { editor: t } = p(), o = f({
-    editor: t,
-    selector: (l) => ({
-      isImage: l.editor?.isActive("image"),
-      imageAttrs: l.editor?.getAttributes("image")
-    })
-  }), [n, i] = m.useState(o.imageAttrs.src || ""), [r, u] = m.useState(o.imageAttrs.alt || ""), c = () => {
-    t.chain().focus().setImage({
-      src: n,
-      alt: r
-    }).run();
-  };
-  return /* @__PURE__ */ v(H, {
-    Trigger: /* @__PURE__ */ e("button", {
-      type: "button",
-      className: a.wuContentEditorAction,
-      "data-active": o.isImage,
-      children: /* @__PURE__ */ e(h, { icon: "wm-image" })
-    }),
-    maxWidth: "400px",
-    children: [
-      /* @__PURE__ */ e(z, { style: { display: "none" } }),
-      /* @__PURE__ */ v(D, {
-        className: a.wuContentEditorModal,
-        children: [/* @__PURE__ */ e(F, {
-          Label: "Image URL",
-          type: "url",
-          value: n,
-          onChange: (l) => i(l.target.value),
-          required: !0
-        }), /* @__PURE__ */ e(F, {
-          Label: "Alt Text",
-          type: "text",
-          value: r,
-          onChange: (l) => u(l.target.value)
-        })]
-      }),
-      /* @__PURE__ */ v(R, { children: [/* @__PURE__ */ e(_, {
-        variant: "secondary",
-        children: "Cancel"
-      }), /* @__PURE__ */ e(_, {
-        onClick: c,
-        disabled: !n,
-        children: "Save"
-      })] })
-    ]
+}, Ze = () => {
+  const { editor: o } = h();
+  return /* @__PURE__ */ e(d, {
+    title: "Italic",
+    "data-active": v({
+      editor: o,
+      selector: (t) => ({ italic: t.editor?.isActive("italic") })
+    }).italic,
+    onClick: (t) => {
+      t.preventDefault(), o.chain().focus().toggleItalic().run();
+    },
+    children: /* @__PURE__ */ e(we, {})
   });
-}, Ot = () => {
-  const { editor: t } = p(), o = f({
-    editor: t,
-    selector: (s) => ({
-      isLink: s.editor?.isActive("link"),
-      linkAttrs: s.editor?.getAttributes("link")
+}, Ge = () => {
+  const { editor: o } = h(), t = v({
+    editor: o,
+    selector: (r) => ({
+      isUl: r.editor?.isActive("bulletList"),
+      isOl: r.editor?.isActive("orderedList"),
+      isTodo: r.editor?.isActive("taskList"),
+      isList: r.editor?.isActive("bulletList") || r.editor?.isActive("orderedList") || r.editor?.isActive("taskList")
     })
-  }), [n, i] = m.useState(o.linkAttrs.href || ""), [r, u] = m.useState(o.linkAttrs.alt || ""), c = () => {
-    t.chain().focus().insertContent({
-      type: "text",
-      text: r || n,
-      marks: [{
-        type: "link",
-        attrs: { href: n }
-      }]
-    }).run();
-  }, l = () => {
-    const { $from: s } = t.state.selection, C = s.parent.textContent, k = s.parentOffset;
-    let b = k, w = k;
-    for (; b > 0 && !/\s/.test(C[b - 1]); ) b--;
-    for (; w < C.length && !/\s/.test(C[w]); ) w++;
-    const E = s.start(), A = E + b, y = E + w, g = C.slice(b, w);
-    t.commands.setTextSelection({
-      from: A,
-      to: y
-    }), i(o.linkAttrs.href || ""), u(g || o.linkAttrs.alt || "");
-  };
-  return /* @__PURE__ */ v(H, {
-    Trigger: /* @__PURE__ */ e("button", {
-      type: "button",
-      title: "Link",
-      className: a.wuContentEditorAction,
-      "data-active": o.isLink,
-      children: /* @__PURE__ */ e(h, { icon: "wm-link" })
-    }),
-    maxWidth: "400px",
-    onOpenChange: (s) => s && l(),
-    children: [
-      /* @__PURE__ */ e(z, { style: { display: "none" } }),
-      /* @__PURE__ */ v(D, {
-        className: a.wuContentEditorModal,
-        children: [/* @__PURE__ */ e(F, {
-          Label: "Link",
-          type: "url",
-          value: n,
-          onChange: (s) => i(s.target.value),
-          required: !0
-        }), /* @__PURE__ */ e(F, {
-          Label: "Text to display",
-          type: "text",
-          value: r,
-          onChange: (s) => u(s.target.value)
-        })]
-      }),
-      /* @__PURE__ */ v(R, { children: [o.isLink && /* @__PURE__ */ e(_, {
-        color: "error",
-        onClick: () => t.chain().focus().unsetLink().run(),
-        variant: "secondary",
-        children: "Remove"
-      }), /* @__PURE__ */ e(_, {
-        onClick: c,
-        disabled: !n,
-        children: "Save"
-      })] })
-    ]
+  }), i = [
+    {
+      id: "ul",
+      icon: /* @__PURE__ */ e(J, {}),
+      event: () => o.chain().focus().toggleBulletList().run(),
+      tooltip: "Bulleted List",
+      active: t.isUl
+    },
+    {
+      id: "ol",
+      icon: /* @__PURE__ */ e(re, {}),
+      event: () => o.chain().focus().toggleOrderedList().run(),
+      tooltip: "Numbered List",
+      active: t.isOl
+    },
+    {
+      id: "todo",
+      icon: /* @__PURE__ */ e(ee, {}),
+      event: () => o.chain().focus().toggleTaskList().run(),
+      tooltip: "To-Do List",
+      active: t.isTodo
+    }
+  ];
+  return /* @__PURE__ */ e(U, {
+    trigger: t.isOl ? /* @__PURE__ */ e(re, {}) : t.isTodo ? /* @__PURE__ */ e(ee, {}) : /* @__PURE__ */ e(J, {}),
+    triggerTitle: "List Style",
+    active: t.isList,
+    items: i
   });
-}, Pt = () => {
-  const { editor: t } = p(), o = f({
-    editor: t,
-    selector: (l) => ({
-      isTable: l.editor.isActive("table"),
-      tableAttrs: l.editor.getAttributes("table")
-    })
-  }), [n, i] = N(!1), r = Y(null), u = O(() => {
-    r.current = setTimeout(() => {
-      t.chain().focus().insertTable({
-        rows: 2,
-        cols: 4,
-        withHeaderRow: n
-      }).run();
-    }, 100);
-  }, [t, n]), c = O(() => {
-    i((l) => !l), r.current = setTimeout(() => {
-      t.chain().focus().toggleHeaderRow().run();
-    }, 100);
-  }, [t]);
-  return o.isTable ? /* @__PURE__ */ v(H, {
-    Trigger: /* @__PURE__ */ e("button", {
-      type: "button",
-      title: "Table",
-      className: a.wuContentEditorAction,
-      "data-active": o.isTable,
-      children: /* @__PURE__ */ e(h, { icon: "wm-table" })
-    }),
-    maxWidth: "320px",
-    children: [
-      /* @__PURE__ */ e(z, { style: { display: "none" } }),
-      /* @__PURE__ */ v(D, {
-        className: a.wuContentEditorModal,
-        children: [/* @__PURE__ */ e(mt, {
-          checked: n,
-          onClick: c,
-          Label: "Title Row",
-          labelPosition: "left"
-        }), /* @__PURE__ */ e("div", {
-          className: a.wuContentEditorTable,
-          children: [
-            {
-              text: "Column left",
-              icon: "wm-add",
-              event: () => t.chain().focus().addColumnBefore().run()
-            },
-            {
-              text: "Row above",
-              icon: "wm-add",
-              event: () => t.chain().focus().addRowBefore().run()
-            },
-            {
-              text: "Column right",
-              icon: "wm-add",
-              event: () => t.chain().focus().addColumnAfter().run()
-            },
-            {
-              text: "Row below",
-              icon: "wm-add",
-              event: () => t.chain().focus().addRowAfter().run()
-            },
-            {
-              text: "Delete Column",
-              icon: "wm-delete",
-              event: () => t.chain().focus().deleteColumn().run()
-            },
-            {
-              text: "Delete Row",
-              icon: "wm-delete",
-              event: () => t.chain().focus().deleteRow().run()
-            }
-          ].map(({ text: l, icon: s, event: C }) => /* @__PURE__ */ e(q, {
-            onClick: C,
-            variant: "secondary",
-            Icon: /* @__PURE__ */ e(h, { icon: s }),
-            children: l
-          }, l))
-        })]
-      }),
-      /* @__PURE__ */ e(R, { children: /* @__PURE__ */ e(_, {
-        onClick: () => t.chain().focus().deleteTable().run(),
-        variant: "outline",
-        color: "error",
-        Icon: /* @__PURE__ */ e("span", { className: "wm-delete" }),
-        iconPosition: "left",
-        children: "Delete Table"
-      }) })
-    ]
-  }) : /* @__PURE__ */ e("button", {
-    type: "button",
-    title: "Table",
-    onClick: u,
-    className: a.wuContentEditorAction,
-    children: /* @__PURE__ */ e(h, { icon: "wm-table" })
+}, et = () => {
+  const { editor: o } = h();
+  return /* @__PURE__ */ e(d, {
+    title: "strikethrough",
+    "data-active": v({
+      editor: o,
+      selector: (t) => ({ strikethrough: t.editor?.isActive("strike") })
+    }).strikethrough,
+    onClick: (t) => {
+      t.preventDefault(), o.chain().focus().toggleStrike().run();
+    },
+    children: /* @__PURE__ */ e(de, {})
   });
-}, Bt = () => {
-  const { editor: t, customFonts: o } = p(), n = f({
-    editor: t,
-    selector: (c) => ({ currentFontFamily: c.editor.getAttributes("textStyle").fontFamily || "" })
-  }), i = [
-    "Fira Sans",
-    "Inter",
-    "Poppins",
-    "JetBrains Mono",
-    "Montserrat",
-    ...o || []
-  ], [r, u] = N(n.currentFontFamily || i[0]);
-  return m.useEffect(() => {
-    u(n.currentFontFamily?.replace(/"/g, "") || i[0]);
-  }, [n.currentFontFamily]), /* @__PURE__ */ v(U, { children: [/* @__PURE__ */ e(K, {
-    className: a.wuContentEditorAction,
-    "data-active": r !== "Fira Sans",
-    style: { fontFamily: r },
-    title: r || "Font Family",
-    children: r?.[0]
-  }), /* @__PURE__ */ e(j, {
-    align: "start",
-    className: a.wuContentEditorDropdown,
-    "data-block": !0,
-    onCloseAutoFocus: (c) => c.preventDefault(),
-    children: i.map((c) => /* @__PURE__ */ e($, {
-      title: c,
-      className: a.wuContentEditorDropdownItem,
-      onSelect: () => {
-        t.chain().focus().setFontFamily(c).run(), u(c);
-      },
-      children: c
-    }, c))
-  })] });
-}, qt = () => {
-  const { editor: t } = p(), o = f({
-    editor: t,
-    selector: (n) => ({ italic: n.editor?.isActive("italic") })
+}, tt = () => {
+  const { editor: o } = h();
+  return /* @__PURE__ */ e(d, {
+    title: "Subscript",
+    "data-active": v({
+      editor: o,
+      selector: (t) => ({ subscript: t.editor?.isActive("subscript") })
+    }).subscript,
+    onClick: (t) => {
+      t.preventDefault(), o.chain().focus().toggleSubscript().run();
+    },
+    children: /* @__PURE__ */ e(fe, {})
   });
-  return /* @__PURE__ */ e("button", {
-    type: "button",
-    title: "Italic",
-    className: a.wuContentEditorAction,
-    "data-active": o.italic,
-    onClick: (n) => {
-      n.preventDefault(), t.chain().focus().toggleItalic().run();
+}, ot = () => {
+  const { editor: o } = h();
+  return /* @__PURE__ */ e(d, {
+    title: "Superscript",
+    "data-active": v({
+      editor: o,
+      selector: (t) => ({ superscript: t.editor?.isActive("superscript") })
+    }).superscript,
+    onClick: (t) => {
+      t.preventDefault(), o.chain().focus().toggleSuperscript().run();
+    },
+    children: /* @__PURE__ */ e(Ce, {})
+  });
+}, it = () => {
+  const { editor: o } = h(), t = v({
+    editor: o,
+    selector: ({ editor: r }) => ({ textColor: r.getAttributes("textStyle").color })
+  }), i = u.useRef(null);
+  return /* @__PURE__ */ f(d, {
+    title: "Text Color",
+    onClick: () => i.current?.click(),
+    children: [/* @__PURE__ */ e(ke, { style: { color: t.textColor } }), /* @__PURE__ */ e("input", {
+      ref: i,
+      type: "color",
+      defaultValue: "#545E6B",
+      onChange: (r) => o.chain().focus().setColor(r.target.value).run()
+    })]
+  });
+}, rt = () => {
+  const { editor: o } = h();
+  return /* @__PURE__ */ e(d, {
+    title: "Underline",
+    "data-active": v({
+      editor: o,
+      selector: (t) => ({ underline: t.editor?.isActive("underline") })
+    }).underline,
+    onClick: (t) => {
+      t.preventDefault(), o.chain().focus().toggleUnderline().run();
+    },
+    children: /* @__PURE__ */ e(he, {})
+  });
+}, nt = () => {
+  const { editor: o } = h(), t = v({
+    editor: o,
+    selector: ({ editor: r }) => ({ bgColor: r.getAttributes("textStyle").backgroundColor })
+  }), i = u.useRef(null);
+  return /* @__PURE__ */ f(d, {
+    title: "Background Color",
+    onClick: () => i.current?.click(),
+    children: [/* @__PURE__ */ e(_e, { style: { color: t.bgColor } }), /* @__PURE__ */ e("input", {
+      ref: i,
+      type: "color",
+      defaultValue: "#fff",
+      onChange: (r) => o.chain().focus().setBackgroundColor(r.target.value).run()
+    })]
+  });
+}, lt = () => {
+  const { editor: o } = h();
+  return /* @__PURE__ */ e(d, {
+    title: "quote",
+    "data-active": v({
+      editor: o,
+      selector: (t) => ({ blockquote: t.editor?.isActive("blockquote") })
+    }).blockquote,
+    onClick: (t) => {
+      t.preventDefault(), o.chain().focus().toggleBlockquote().run();
     },
-    children: /* @__PURE__ */ e(h, { icon: "wm-format-italic" })
+    children: /* @__PURE__ */ e(ue, {})
   });
-}, Ut = () => {
-  const { editor: t } = p(), o = f({
-    editor: t,
-    selector: (i) => ({
-      isUl: i.editor?.isActive("bulletList"),
-      isOl: i.editor?.isActive("orderedList"),
-      isTodo: i.editor?.isActive("taskList"),
-      isList: i.editor?.isActive("bulletList") || i.editor?.isActive("orderedList") || i.editor?.isActive("taskList")
+};
+function at() {
+  const { isHtml: o, setIsHtml: t, htmlSourceEnabled: i } = h();
+  return i ? /* @__PURE__ */ e(d, {
+    title: "HTML source",
+    "data-active": o,
+    onClick: (r) => {
+      r.preventDefault(), t(!o);
+    },
+    children: /* @__PURE__ */ e(Ie, {})
+  }) : null;
+}
+var st = () => {
+  const { editor: o } = h(), t = v({
+    editor: o,
+    selector: (r) => ({
+      isLeft: r.editor?.isActive({ textAlign: "left" }),
+      isCenter: r.editor?.isActive({ textAlign: "center" }),
+      isRight: r.editor?.isActive({ textAlign: "right" }),
+      isJustify: r.editor?.isActive({ textAlign: "justify" }),
+      isAligned: r.editor?.isActive({ textAlign: "center" }) || r.editor?.isActive({ textAlign: "right" }) || r.editor?.isActive({ textAlign: "justify" })
     })
-  }), n = [
+  }), i = [
     {
-      id: "ul",
-      icon: "wm-format-list-bulleted",
-      event: () => t.chain().focus().toggleBulletList().run(),
-      active: o.isUl,
-      tooltip: "Bulleted List"
+      id: "left",
+      icon: /* @__PURE__ */ e(X, {}),
+      event: () => o.chain().focus().setTextAlign("left").run(),
+      tooltip: "Align Left",
+      active: t.isLeft
     },
     {
-      id: "ol",
-      icon: "wm-format-list-numbered",
-      event: () => t.chain().focus().toggleOrderedList().run(),
-      active: o.isOl,
-      tooltip: "Numbered List"
+      id: "center",
+      icon: /* @__PURE__ */ e(oe, {}),
+      event: () => o.chain().focus().setTextAlign("center").run(),
+      tooltip: "Align Center",
+      active: t.isCenter
     },
     {
-      id: "todo",
-      icon: "wm-checklist",
-      event: () => t.chain().focus().toggleTaskList().run(),
-      active: o.isTodo,
-      tooltip: "To-Do List"
+      id: "right",
+      icon: /* @__PURE__ */ e(te, {}),
+      event: () => o.chain().focus().setTextAlign("right").run(),
+      tooltip: "Align Right",
+      active: t.isRight
+    },
+    {
+      id: "justify",
+      icon: /* @__PURE__ */ e(G, {}),
+      event: () => o.chain().focus().setTextAlign("justify").run(),
+      tooltip: "Justify",
+      active: t.isJustify
     }
   ];
-  return /* @__PURE__ */ e(M, { action: {
-    id: "style",
-    active: o.isList,
-    icon: "wm-format-paragraph",
-    items: n
-  } });
-}, jt = [
+  return /* @__PURE__ */ e(U, {
+    trigger: t.isCenter ? /* @__PURE__ */ e(oe, {}) : t.isRight ? /* @__PURE__ */ e(te, {}) : t.isJustify ? /* @__PURE__ */ e(G, {}) : /* @__PURE__ */ e(X, {}),
+    triggerTitle: "Text Alignment",
+    active: t.isAligned,
+    items: i
+  });
+}, ct = "_wuContentEditor_1w25e_3", dt = "_selectedCell_1w25e_1", ut = "_tableWrapper_1w25e_1", ht = "_wuContentEditorRoot_1w25e_3", ft = "_wuContentEditorToolbar_1w25e_17", vt = "_fontSize_1w25e_38", pt = "_wuContentEditorTable_1w25e_56", S = {
+  wuContentEditor: ct,
+  selectedCell: dt,
+  "column-resize-handle": "_column-resize-handle_1w25e_1",
+  tableWrapper: ut,
+  "resize-cursor": "_resize-cursor_1w25e_1",
+  wuContentEditorRoot: ht,
+  wuContentEditorToolbar: ft,
+  fontSize: vt,
+  wuContentEditorTable: pt
+}, gt = [
   "e",
   "E",
   "+",
   "-"
-], P = 1, $t = () => {
-  const { editor: t } = p(), [o, n] = N(16), i = f({
-    editor: t,
-    selector: (l) => ({ fontSize: l.editor.getAttributes("textStyle").fontSize })
-  }), r = (l) => {
-    t.chain().focus().setFontSize(l + "px").run();
-  }, u = (l) => {
-    const s = Math.max(P, l);
-    n(s), r(s);
-  }, c = (l) => {
-    jt.includes(l.key) ? l.preventDefault() : l.key === "Enter" && r(o);
+], le = 1, mt = () => {
+  const { editor: o } = h(), [t, i] = O(16), r = v({
+    editor: o,
+    selector: (s) => ({ fontSize: s.editor.getAttributes("textStyle").fontSize })
+  }), n = (s) => {
+    o.chain().focus().setFontSize(s + "px").run();
+  }, c = (s) => {
+    const C = Math.max(le, s);
+    i(C), n(C);
+  }, l = (s) => {
+    gt.includes(s.key) ? s.preventDefault() : s.key === "Enter" && n(t);
   };
-  return m.useEffect(() => {
-    n(Number(i.fontSize?.replace("px", "")) || 16);
-  }, [i.fontSize]), /* @__PURE__ */ v("div", {
-    className: a.wuContentEditorFontSize,
+  return u.useEffect(() => {
+    i(Number(r.fontSize?.replace("px", "")) || 16);
+  }, [r.fontSize]), /* @__PURE__ */ f("div", {
+    className: S.fontSize,
     children: [
-      /* @__PURE__ */ e("button", {
-        type: "button",
-        className: a.wuContentEditorAction,
-        onClick: () => u(o - 1),
-        disabled: o <= P,
+      /* @__PURE__ */ e(d, {
+        onClick: () => c(t - 1),
+        disabled: t <= le,
         children: "−"
       }),
       /* @__PURE__ */ e("input", {
         type: "number",
         inputMode: "numeric",
         pattern: "[0-9]*",
-        value: o,
-        onKeyDown: c,
-        onChange: (l) => n(l.target.valueAsNumber),
-        onBlur: () => r(o)
+        value: t,
+        onKeyDown: l,
+        onChange: (s) => i(s.target.valueAsNumber),
+        onBlur: () => n(t)
       }),
-      /* @__PURE__ */ e("button", {
-        type: "button",
-        className: a.wuContentEditorAction,
-        onClick: () => u(o + 1),
-        disabled: o >= 128,
+      /* @__PURE__ */ e(d, {
+        onClick: () => c(t + 1),
+        disabled: t >= 128,
         children: "+"
       })
     ]
   });
-}, Kt = () => {
-  const { editor: t } = p(), o = f({
-    editor: t,
-    selector: (n) => ({ strikethrough: n.editor?.isActive("strike") })
-  });
-  return /* @__PURE__ */ e("button", {
-    type: "button",
-    title: "strikethrough",
-    className: a.wuContentEditorAction,
-    "data-active": o.strikethrough,
-    onClick: (n) => {
-      n.preventDefault(), t.chain().focus().toggleStrike().run();
-    },
-    children: /* @__PURE__ */ e(h, { icon: "wm-format-strikethrough" })
-  });
-}, Jt = () => {
-  const { editor: t } = p(), o = f({
-    editor: t,
-    selector: (n) => ({ subscript: n.editor?.isActive("subscript") })
-  });
-  return /* @__PURE__ */ e("button", {
-    type: "button",
-    title: "Subscript",
-    className: a.wuContentEditorAction,
-    "data-active": o.subscript,
-    onClick: (n) => {
-      n.preventDefault(), t.chain().focus().toggleSubscript().run();
-    },
-    children: /* @__PURE__ */ e(h, { icon: "wm-subscript" })
-  });
-}, Gt = () => {
-  const { editor: t } = p(), o = f({
-    editor: t,
-    selector: (n) => ({ superscript: n.editor?.isActive("superscript") })
+}, bt = () => {
+  const { editor: o, customFonts: t } = h(), i = v({
+    editor: o,
+    selector: (l) => ({ currentFontFamily: l.editor.getAttributes("textStyle").fontFamily || "" })
+  }), r = [
+    "Fira Sans",
+    "Inter",
+    "Poppins",
+    "JetBrains Mono",
+    "Montserrat",
+    ...t || []
+  ], [n, c] = O(i.currentFontFamily || r[0]);
+  return u.useEffect(() => {
+    c(i.currentFontFamily?.replace(/"/g, "") || r[0]);
+  }, [i.currentFontFamily]), /* @__PURE__ */ f(g.Root, { children: [/* @__PURE__ */ e(g.Trigger, {
+    "data-active": n !== "Fira Sans",
+    style: { fontFamily: n },
+    title: n || "Font Family",
+    render: /* @__PURE__ */ e(d, {}),
+    children: n?.[0]
+  }), /* @__PURE__ */ e(g.Portal, { children: /* @__PURE__ */ e(g.Positioner, {
+    align: "start",
+    sideOffset: 4,
+    children: /* @__PURE__ */ e(g.Popup, {
+      render: /* @__PURE__ */ e(q, {}),
+      "data-block": !0,
+      finalFocus: !1,
+      children: r.map((l) => /* @__PURE__ */ e(g.Item, {
+        title: l,
+        render: /* @__PURE__ */ e($, {}),
+        onClick: () => {
+          o.chain().focus().setFontFamily(l).run(), c(l);
+        },
+        children: l
+      }, l))
+    })
+  }) })] });
+}, kt = "_button_583n5_1", Ct = { button: kt }, ce = u.forwardRef(function({ children: t, variant: i, color: r, icon: n, ...c }, l) {
+  return /* @__PURE__ */ f("button", {
+    ref: l,
+    className: Ct.button,
+    "data-variant": i,
+    "data-color": r,
+    ...c,
+    children: [n, t]
   });
-  return /* @__PURE__ */ e("button", {
-    type: "button",
-    title: "Superscript",
-    className: a.wuContentEditorAction,
-    "data-active": o.superscript,
-    onClick: (n) => {
-      n.preventDefault(), t.chain().focus().toggleSuperscript().run();
-    },
-    children: /* @__PURE__ */ e(h, { icon: "wm-superscript" })
+}), _t = "_dialog_1k05x_1", At = "_backdrop_1k05x_27", wt = "_content_1k05x_46", It = "_footer_1k05x_52", Tt = "_close_1k05x_59", y = {
+  dialog: _t,
+  backdrop: At,
+  content: wt,
+  footer: It,
+  close: Tt
+};
+function W({ Trigger: o, children: t, maxWidth: i, onOpenChange: r, footer: n }) {
+  const c = u.useContext(M), l = u.useCallback((s) => {
+    c?.editor.setEditable(!s, !1), r?.(s);
+  }, [c, r]);
+  return /* @__PURE__ */ f(w.Root, {
+    modal: !0,
+    onOpenChange: l,
+    children: [/* @__PURE__ */ e("span", {
+      onClick: (s) => s.stopPropagation(),
+      children: /* @__PURE__ */ e(w.Trigger, { render: o })
+    }), /* @__PURE__ */ f(w.Portal, { children: [/* @__PURE__ */ e(w.Backdrop, { className: y.backdrop }), /* @__PURE__ */ f(w.Popup, {
+      className: y.dialog,
+      style: i ? { maxWidth: i } : void 0,
+      children: [
+        /* @__PURE__ */ e(w.Close, {
+          className: y.close,
+          "aria-label": "Close",
+          children: /* @__PURE__ */ e(me, {
+            width: 10,
+            height: 10
+          })
+        }),
+        /* @__PURE__ */ e("div", {
+          className: y.content,
+          children: t
+        }),
+        n && /* @__PURE__ */ e("footer", {
+          className: y.footer,
+          children: n
+        })
+      ]
+    })] })]
   });
-}, Vt = () => {
-  const { editor: t } = p(), o = f({
-    editor: t,
-    selector: ({ editor: n }) => ({ textColor: n.getAttributes("textStyle").color })
+}
+function x({ children: o, variant: t, color: i, icon: r, ...n }) {
+  return /* @__PURE__ */ e(w.Close, {
+    render: /* @__PURE__ */ e(ce, {
+      variant: t,
+      color: i,
+      icon: r
+    }),
+    ...n,
+    children: o
   });
-  return /* @__PURE__ */ v("label", {
-    className: a.wuContentEditorAction,
-    htmlFor: "text-color",
-    title: "Text Color",
-    children: [/* @__PURE__ */ e(h, {
-      icon: "wm-format-color-text",
-      className: a.bgColorCursorPointer,
-      style: { color: o.textColor }
+}
+var yt = "_group_56lao_1", St = "_label_56lao_8", xt = "_input_56lao_14", z = {
+  group: yt,
+  label: St,
+  input: xt
+};
+function E({ label: o, id: t, ...i }) {
+  return /* @__PURE__ */ f("div", {
+    className: z.group,
+    children: [o && /* @__PURE__ */ e("label", {
+      className: z.label,
+      htmlFor: t,
+      children: o
     }), /* @__PURE__ */ e("input", {
-      type: "color",
-      className: a.bgColorHiddenInput,
-      id: "text-color",
-      defaultValue: "#545E6B",
-      onChange: (n) => t.chain().focus().setColor(n.target.value).run()
+      id: t,
+      className: z.input,
+      ...i
     })]
   });
-}, Xt = () => {
-  const { editor: t } = p(), o = f({
-    editor: t,
-    selector: (n) => ({ underline: n.editor?.isActive("underline") })
+}
+var Ht = () => {
+  const { editor: o } = h(), t = v({
+    editor: o,
+    selector: (s) => ({
+      isImage: s.editor?.isActive("image"),
+      imageAttrs: s.editor?.getAttributes("image")
+    })
+  }), [i, r] = u.useState(t.imageAttrs.src || ""), [n, c] = u.useState(t.imageAttrs.alt || ""), l = () => {
+    o.chain().focus().setImage({
+      src: i,
+      alt: n
+    }).run();
+  };
+  return /* @__PURE__ */ f(W, {
+    Trigger: /* @__PURE__ */ e(d, {
+      title: "Image",
+      "data-active": t.isImage,
+      children: /* @__PURE__ */ e(pe, {})
+    }),
+    maxWidth: "400px",
+    footer: /* @__PURE__ */ f(N, { children: [/* @__PURE__ */ e(x, {
+      variant: "secondary",
+      children: "Cancel"
+    }), /* @__PURE__ */ e(x, {
+      onClick: l,
+      disabled: !i,
+      children: "Save"
+    })] }),
+    children: [/* @__PURE__ */ e(E, {
+      label: "Image URL",
+      type: "url",
+      value: i,
+      onChange: (s) => r(s.target.value),
+      required: !0
+    }), /* @__PURE__ */ e(E, {
+      label: "Alt Text",
+      type: "text",
+      value: n,
+      onChange: (s) => c(s.target.value)
+    })]
   });
-  return /* @__PURE__ */ e("button", {
-    type: "button",
-    title: "Underline",
-    className: a.wuContentEditorAction,
-    "data-active": o.underline,
-    onClick: (n) => {
-      n.preventDefault(), t.chain().focus().toggleUnderline().run();
-    },
-    children: /* @__PURE__ */ e(h, { icon: "wm-format-underlined" })
+}, Lt = () => {
+  const { editor: o } = h(), t = v({
+    editor: o,
+    selector: (a) => ({
+      isLink: a.editor?.isActive("link"),
+      linkAttrs: a.editor?.getAttributes("link")
+    })
+  }), [i, r] = u.useState(t.linkAttrs.href || ""), [n, c] = u.useState(t.linkAttrs.alt || ""), l = (a) => !a || a.startsWith("http://") || a.startsWith("https://") ? a : `https://${a}`, s = () => {
+    const a = l(i);
+    o.chain().focus().insertContent({
+      type: "text",
+      text: n || a,
+      marks: [{
+        type: "link",
+        attrs: { href: a }
+      }]
+    }).run();
+  }, C = () => {
+    const a = o.getAttributes("link"), { from: m, to: A, $from: T } = o.state.selection;
+    let I;
+    if (m !== A) I = o.state.doc.textBetween(m, A);
+    else {
+      const _ = T.parent.textContent, H = T.parentOffset;
+      let b = H, k = H;
+      for (; b > 0 && !/\s/.test(_[b - 1]); ) b--;
+      for (; k < _.length && !/\s/.test(_[k]); ) k++;
+      if (I = _.slice(b, k), I) {
+        const L = T.start();
+        o.commands.setTextSelection({
+          from: L + b,
+          to: L + k
+        });
+      }
+    }
+    r(a.href || ""), c(I || a.alt || "");
+  };
+  return /* @__PURE__ */ f(W, {
+    Trigger: /* @__PURE__ */ e(d, {
+      title: "Link",
+      "data-active": t.isLink,
+      children: /* @__PURE__ */ e(ve, {})
+    }),
+    maxWidth: "400px",
+    onOpenChange: (a) => a && C(),
+    footer: /* @__PURE__ */ f(N, { children: [t.isLink && /* @__PURE__ */ e(x, {
+      color: "error",
+      variant: "secondary",
+      onClick: () => o.chain().focus().unsetLink().run(),
+      children: "Remove"
+    }), /* @__PURE__ */ e(x, {
+      onClick: s,
+      disabled: !i,
+      children: "Save"
+    })] }),
+    children: [/* @__PURE__ */ e(E, {
+      label: "Link",
+      type: "url",
+      value: i,
+      onChange: (a) => r(a.target.value),
+      required: !0
+    }), /* @__PURE__ */ e(E, {
+      label: "Text to display",
+      type: "text",
+      value: n,
+      onChange: (a) => c(a.target.value)
+    })]
   });
+}, Rt = "_label_1kiov_1", Ft = "_root_1kiov_11", Et = "_thumb_1kiov_44", P = {
+  label: Rt,
+  root: Ft,
+  thumb: Et
 };
-function Yt() {
-  const { isHtml: t, setIsHtml: o } = p();
-  return /* @__PURE__ */ e("button", {
-    type: "button",
-    title: "HTML source",
-    className: a.wuContentEditorAction,
-    "data-active": t,
-    onClick: (n) => {
-      n.preventDefault(), o(!t);
-    },
-    children: /* @__PURE__ */ e(h, { icon: "wm-html" })
+function Nt({ checked: o, onCheckedChange: t, label: i }) {
+  return /* @__PURE__ */ f("label", {
+    className: P.label,
+    children: [/* @__PURE__ */ e("span", { children: i }), /* @__PURE__ */ e(ne.Root, {
+      className: P.root,
+      checked: o,
+      onCheckedChange: t,
+      children: /* @__PURE__ */ e(ne.Thumb, { className: P.thumb })
+    })]
   });
 }
-var B = {
-  block: /* @__PURE__ */ e(Ht, {}),
-  fontFamily: /* @__PURE__ */ e(Bt, {}),
-  fontSize: /* @__PURE__ */ e($t, {}),
-  bold: /* @__PURE__ */ e(Rt, {}),
-  italic: /* @__PURE__ */ e(qt, {}),
-  underline: /* @__PURE__ */ e(Xt, {}),
-  strike: /* @__PURE__ */ e(Kt, {}),
-  color: /* @__PURE__ */ e(Vt, {}),
-  bgColor: /* @__PURE__ */ e(Nt, {}),
-  list: /* @__PURE__ */ e(Ut, {}),
-  alignment: /* @__PURE__ */ e(It, {}),
-  image: /* @__PURE__ */ e(Wt, {}),
-  link: /* @__PURE__ */ e(Ot, {}),
-  table: /* @__PURE__ */ e(Pt, {}),
-  blockquote: /* @__PURE__ */ e(Dt, {}),
-  superscript: /* @__PURE__ */ e(Gt, {}),
-  subscript: /* @__PURE__ */ e(Jt, {}),
-  codeline: /* @__PURE__ */ e(Mt, {}),
-  clear: /* @__PURE__ */ e(zt, {}),
+var Dt = () => {
+  const { editor: o } = h(), t = v({
+    editor: o,
+    selector: (a) => ({
+      isTable: a.editor.isActive("table"),
+      tableAttrs: a.editor.getAttributes("table")
+    })
+  }), [i, r] = O(!1), n = Se(null), c = B((a) => {
+    n.current && clearTimeout(n.current), n.current = setTimeout(a, 100);
+  }, []);
+  u.useEffect(() => () => {
+    n.current && clearTimeout(n.current);
+  }, []);
+  const l = B(() => {
+    c(() => o.chain().focus().insertTable({
+      rows: 2,
+      cols: 4,
+      withHeaderRow: i
+    }).run());
+  }, [
+    o,
+    i,
+    c
+  ]), s = B(() => {
+    r((a) => !a), c(() => o.chain().focus().toggleHeaderRow().run());
+  }, [o, c]), C = [
+    {
+      text: "Column left",
+      icon: /* @__PURE__ */ e(R, {}),
+      event: () => o.chain().focus().addColumnBefore().run()
+    },
+    {
+      text: "Row above",
+      icon: /* @__PURE__ */ e(R, {}),
+      event: () => o.chain().focus().addRowBefore().run()
+    },
+    {
+      text: "Column right",
+      icon: /* @__PURE__ */ e(R, {}),
+      event: () => o.chain().focus().addColumnAfter().run()
+    },
+    {
+      text: "Row below",
+      icon: /* @__PURE__ */ e(R, {}),
+      event: () => o.chain().focus().addRowAfter().run()
+    },
+    {
+      text: "Delete Column",
+      icon: /* @__PURE__ */ e(D, {}),
+      event: () => o.chain().focus().deleteColumn().run()
+    },
+    {
+      text: "Delete Row",
+      icon: /* @__PURE__ */ e(D, {}),
+      event: () => o.chain().focus().deleteRow().run()
+    }
+  ];
+  return t.isTable ? /* @__PURE__ */ f(W, {
+    Trigger: /* @__PURE__ */ e(d, {
+      title: "Table",
+      "data-active": t.isTable,
+      children: /* @__PURE__ */ e(K, {})
+    }),
+    maxWidth: "320px",
+    footer: /* @__PURE__ */ e(x, {
+      variant: "secondary",
+      color: "error",
+      icon: /* @__PURE__ */ e(D, {}),
+      onClick: () => o.chain().focus().deleteTable().run(),
+      children: "Delete Table"
+    }),
+    children: [/* @__PURE__ */ e(Nt, {
+      checked: i,
+      onCheckedChange: s,
+      label: "Title Row"
+    }), /* @__PURE__ */ e("div", {
+      className: S.wuContentEditorTable,
+      children: C.map(({ text: a, icon: m, event: A }) => /* @__PURE__ */ e(ce, {
+        onClick: A,
+        variant: "secondary",
+        icon: m,
+        children: a
+      }, a))
+    })]
+  }) : /* @__PURE__ */ e(d, {
+    title: "Table",
+    onClick: l,
+    children: /* @__PURE__ */ e(K, {})
+  });
+}, ae = {
+  block: /* @__PURE__ */ e(Qe, {}),
+  fontFamily: /* @__PURE__ */ e(bt, {}),
+  fontSize: /* @__PURE__ */ e(mt, {}),
+  bold: /* @__PURE__ */ e(Ve, {}),
+  italic: /* @__PURE__ */ e(Ze, {}),
+  underline: /* @__PURE__ */ e(rt, {}),
+  strike: /* @__PURE__ */ e(et, {}),
+  color: /* @__PURE__ */ e(it, {}),
+  bgColor: /* @__PURE__ */ e(nt, {}),
+  list: /* @__PURE__ */ e(Ge, {}),
+  alignment: /* @__PURE__ */ e(st, {}),
+  image: /* @__PURE__ */ e(Ht, {}),
+  link: /* @__PURE__ */ e(Lt, {}),
+  table: /* @__PURE__ */ e(Dt, {}),
+  blockquote: /* @__PURE__ */ e(lt, {}),
+  superscript: /* @__PURE__ */ e(ot, {}),
+  subscript: /* @__PURE__ */ e(tt, {}),
+  codeline: /* @__PURE__ */ e(Ye, {}),
+  clear: /* @__PURE__ */ e(Xe, {}),
   "|": /* @__PURE__ */ e("div", { style: {
     height: 16,
     width: 1,
-    background: "rgb(var(--wu-gray-40))"
+    background: "var(--we-border)"
   } }),
-  html: /* @__PURE__ */ e(Yt, {})
-}, Zt = [
+  html: /* @__PURE__ */ e(at, {})
+}, Bt = [
   "block",
   "fontFamily",
   "|",
@@ -790,205 +870,83 @@ var B = {
   "|",
   "html",
   "clear"
-], Qt = (t) => {
-  const { editor: o, customFonts: n, children: i, items: r = Zt, isHtml: u, setIsHtml: c, ...l } = t;
+], zt = (o) => {
+  const { editor: t, customFonts: i, children: r, items: n = Bt, isHtml: c, setIsHtml: l, htmlSourceEnabled: s, ...C } = o;
   return /* @__PURE__ */ e("div", {
-    ...l,
-    children: /* @__PURE__ */ v(Lt, {
-      editor: o,
-      customFonts: n,
-      isHtml: u,
-      setIsHtml: c,
-      children: [r.map((s, C) => /* @__PURE__ */ e(x, { children: u && s !== "html" ? /* @__PURE__ */ e("span", {
+    ...C,
+    children: /* @__PURE__ */ f(Ue, {
+      editor: t,
+      customFonts: i,
+      isHtml: c,
+      setIsHtml: l,
+      htmlSourceEnabled: s,
+      children: [n.map((a, m) => /* @__PURE__ */ e(N, { children: c && a !== "html" ? /* @__PURE__ */ e("span", {
         style: {
           pointerEvents: "none",
           opacity: 0.4
         },
-        children: B[s]
-      }) : B[s] }, s + C)), i]
+        children: ae[a]
+      }) : ae[a] }, a + m)), r]
     })
   });
-}, W = ht();
-W.setConfig({
-  USE_PROFILES: { html: !0 },
-  ALLOWED_TAGS: [
-    "div",
-    "p",
-    "br",
-    "strong",
-    "b",
-    "em",
-    "i",
-    "u",
-    "s",
-    "code",
-    "pre",
-    "blockquote",
-    "h1",
-    "h2",
-    "h3",
-    "h4",
-    "h5",
-    "h6",
-    "ul",
-    "ol",
-    "li",
-    "a",
-    "img",
-    "table",
-    "thead",
-    "tbody",
-    "tr",
-    "th",
-    "td",
-    "sup",
-    "sub"
-  ],
-  ALLOWED_ATTR: [
-    "href",
-    "target",
-    "rel",
-    "src",
-    "alt",
-    "title",
-    "width",
-    "height",
-    "colspan",
-    "rowspan",
-    "data-*",
-    "style",
-    "class"
-  ],
-  ALLOW_DATA_ATTR: !0
-});
-W.addHook("uponSanitizeAttribute", (t, o) => {
-  if (o.attrName === "style") {
-    const n = o.attrValue.toLowerCase();
-    (n.includes("expression") || n.includes("javascript:") || n.includes("url(")) && (o.keepAttr = !1);
-  }
-});
-function S(t) {
-  return t ? W.sanitize(t) : "";
-}
-var I = null;
-function te() {
-  return I || (I = import("shiki").then(({ createHighlighter: t }) => t({
-    themes: ["github-light"],
-    langs: ["html"]
-  }))), I;
+};
+function Pt(...o) {
+  return o.filter(Boolean).join(" ");
 }
-function ee({ defaultValue: t, onUpdate: o, readonly: n }) {
-  const [i, r] = m.useState(t || ""), [u, c] = m.useState(""), [l, s] = m.useState(!1), [C, k] = m.useState(!1), b = m.useRef(!1), w = m.useCallback(async (g) => {
-    try {
-      const [{ format: d }, { default: T }] = await Promise.all([import("../../standalone-DSxjHhed.js"), import("../../html-Ccb8eKR4.js")]), L = await d(g, {
-        parser: "html",
-        plugins: [T],
-        htmlWhitespaceSensitivity: "css",
-        printWidth: 80
-      });
-      return s(!1), L;
-    } catch (d) {
-      return console.error("Format error:", d), s(!0), g;
-    }
-  }, []), E = m.useCallback((g) => {
-    te().then((d) => {
-      c(d.codeToHtml(g || " ", {
-        lang: "html",
-        theme: "github-light"
-      }));
-    }).catch((d) => console.error("Highlight error:", d));
+function eo({ defaultValue: o, onUpdate: t, className: i, toolbarPosition: r = "top", customToolbarChildren: n, toolbarItems: c, hideToolbar: l, readonly: s, autoFocus: C, customFonts: a, htmlSource: m, isHtml: A, setIsHtml: T, ...I }) {
+  const [_, H] = u.useState((A ?? !1) && !!m);
+  u.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`.');
   }, []);
-  m.useEffect(() => {
-    E(i), o?.(S(i));
-  }, [
-    i,
-    E,
-    o
-  ]), m.useEffect(() => {
-    b.current || !t || (b.current = !0, w(t).then(r));
-  }, [t, w]);
-  const A = async (g) => {
-    g.preventDefault(), k(!0), r(await w(i)), k(!1);
-  }, y = (g) => {
-    if (g.key === "Tab") {
-      g.preventDefault();
-      const d = g.currentTarget, T = d.selectionStart, L = d.selectionEnd;
-      r(i.substring(0, T) + "  " + i.substring(L)), requestAnimationFrame(() => {
-        d.selectionStart = T + 2, d.selectionEnd = T + 2;
-      });
+  const b = u.useRef(o || ""), k = ye({
+    editable: !s,
+    autofocus: C ? "end" : !1,
+    extensions: $e,
+    content: F(o || ""),
+    onUpdate: ({ editor: p }) => {
+      t && t(F(p.getHTML()));
     }
+  }), L = (p) => {
+    p ? b.current = k?.getHTML() ?? "" : k?.commands.setContent(F(b.current)), t && t(F(b.current)), H(p), T?.(p);
   };
-  return /* @__PURE__ */ e(x, { children: C ? /* @__PURE__ */ e(x, { children: "Formatting..." }) : /* @__PURE__ */ e("div", {
-    className: a.wuContentEditor,
-    children: /* @__PURE__ */ v("div", {
-      className: a.wuCodeEditor,
-      children: [
-        /* @__PURE__ */ e(q, {
-          variant: "iconOnly",
-          Icon: /* @__PURE__ */ e(h, { icon: "wm-data-object" }),
-          onClick: A,
-          className: a.wuFormatCode,
-          style: { color: l ? "red" : "" }
-        }),
-        /* @__PURE__ */ e("div", {
-          dangerouslySetInnerHTML: { __html: u },
-          className: a.wuCodeEditorPreview
-        }),
-        /* @__PURE__ */ e("textarea", {
-          value: i,
-          onChange: (g) => r(g.target.value),
-          onKeyDown: y,
-          className: a.wuCodeEditorInput,
-          disabled: n
-        })
-      ]
-    })
-  }) });
-}
-function ve({ defaultValue: t, onUpdate: o, className: n, toolbarPosition: i = "top", customToolbarChildren: r, toolbarItems: u, hideToolbar: c, readonly: l, customFonts: s, isHtml: C, setIsHtml: k, ...b }) {
-  const [w, E] = m.useState(C ?? !1), A = m.useRef(t || ""), y = V({
-    editable: !l,
-    extensions: Ft,
-    content: S(t || ""),
-    onUpdate: ({ editor: d }) => {
-      o && o(S(d.getHTML()));
-    }
-  }), g = (d) => {
-    d ? A.current = y?.getHTML() ?? "" : y?.commands.setContent(S(A.current)), o && o(S(A.current)), E(d), k?.(d);
-  };
-  return /* @__PURE__ */ v("div", {
-    className: X(a.wuContentEditorContainer, n),
-    "data-position": i,
-    "data-slot": "wu-content-editor-container",
-    onClick: () => {
-      w || y?.chain().focus().run();
+  return /* @__PURE__ */ f("div", {
+    className: Pt(S.wuContentEditorRoot, i),
+    "data-position": r,
+    "data-slot": "wu-content-editor-root",
+    onClick: (p) => {
+      if ((p.ctrlKey || p.metaKey) && p.target instanceof HTMLElement) {
+        const j = p.target.closest("a");
+        if (j?.href) {
+          window.open(j.href, "_blank", "noopener,noreferrer");
+          return;
+        }
+      }
+      _ || k?.chain().focus().run();
     },
-    ...b,
-    children: [!c && /* @__PURE__ */ e(Qt, {
-      editor: y,
-      customFonts: s,
-      className: a.wuContentEditorToolbar,
-      items: u,
-      isHtml: w,
-      setIsHtml: g,
+    ...I,
+    children: [!l && /* @__PURE__ */ e(zt, {
+      editor: k,
+      customFonts: a,
+      className: S.wuContentEditorToolbar,
+      items: c,
+      isHtml: _,
+      setIsHtml: L,
+      htmlSourceEnabled: !!m,
       "data-slot": "wu-content-editor-toolbar",
-      "data-position": i,
-      children: r
-    }), w ? /* @__PURE__ */ e(ee, {
-      defaultValue: A.current,
-      onUpdate: (d) => {
-        A.current = d ?? "", o && o(d ?? "");
+      children: n
+    }), _ && m ? /* @__PURE__ */ e(m, {
+      defaultValue: b.current,
+      onUpdate: (p) => {
+        b.current = p ?? "", t && t(p ?? "");
       },
-      "data-position": i,
-      "data-slot": "wu-content-editor",
-      readonly: l
-    }) : /* @__PURE__ */ e(G, {
-      editor: y,
-      className: a.wuContentEditor,
+      readonly: s
+    }) : /* @__PURE__ */ e(Te, {
+      editor: k,
+      className: S.wuContentEditor,
       "data-slot": "wu-content-editor"
     })]
   });
 }
 export {
-  ve as WuContentEditor
+  eo as WuContentEditor
 };