@npm-questionpro/wick-ui-editor 0.12.1 → 0.14.1

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

@@ -1,491 +1,497 @@
-import { jsx as o, jsxs as g, Fragment as R } from "react/jsx-runtime";
-import { useEditorState as f, useEditor as q, EditorContent as $ } from "@tiptap/react";
-import D from "clsx";
-import C, { useState as E, useRef as j, useCallback as _ } from "react";
-import K from "@tiptap/extension-image";
-import { TaskList as J, TaskItem as V } from "@tiptap/extension-list";
-import G from "@tiptap/extension-subscript";
-import X from "@tiptap/extension-superscript";
-import { TableKit as Y } from "@tiptap/extension-table";
-import Z from "@tiptap/extension-text-align";
-import { TextStyle as Q, Color as tt, BackgroundColor as et, LineHeight as ot, FontSize as nt, FontFamily as it } from "@tiptap/extension-text-style";
-import rt from "@tiptap/starter-kit";
-import { WuIcon as h, WuModal as y, WuModalHeader as T, WuModalContent as S, WuInput as k, WuModalFooter as x, WuModalClose as b, WuToggle as st, WuButton as ct } from "@npm-questionpro/wick-ui-lib";
-import { DropdownMenu as M, DropdownMenuTrigger as H, DropdownMenuContent as z, DropdownMenuItem as B } from "@radix-ui/react-dropdown-menu";
-import lt from "dompurify";
-const at = "_wuContentEditor_399u0_8", dt = "_wuContentEditorTable_399u0_1", ut = "_wuContentEditorContainer_399u0_8", mt = "_wuContentEditorToolbar_399u0_80", ht = "_wuContentEditorAction_399u0_106", ft = "_wuContentEditorDropdown_399u0_132", gt = "_wuContentEditorDropdownItem_399u0_145", pt = "_wuContentEditorFontSize_399u0_156", wt = "_wuContentEditorModal_399u0_170", d = {
-  wuContentEditor: at,
-  wuContentEditorTable: dt,
-  wuContentEditorContainer: ut,
-  wuContentEditorToolbar: mt,
-  wuContentEditorAction: ht,
-  wuContentEditorDropdown: ft,
-  wuContentEditorDropdownItem: gt,
-  wuContentEditorFontSize: pt,
-  wuContentEditorModal: wt
-}, Ct = [
-  rt.configure({
+import { jsx as e, jsxs as v, Fragment as F } from "react/jsx-runtime";
+import { useEditorState as p, useEditor as V, EditorContent as X } from "@tiptap/react";
+import Y from "clsx";
+import h, { useState as I, useRef as Z, useCallback as B } from "react";
+import Q from "@tiptap/extension-image";
+import { TaskList as tt, TaskItem as et } from "@tiptap/extension-list";
+import ot from "@tiptap/extension-subscript";
+import nt from "@tiptap/extension-superscript";
+import { TableKit as it } from "@tiptap/extension-table";
+import rt from "@tiptap/extension-text-align";
+import { TextStyle as st, Color as ct, BackgroundColor as lt, LineHeight as at, FontSize as ut, FontFamily as dt } from "@tiptap/extension-text-style";
+import mt from "@tiptap/starter-kit";
+import { WuIcon as f, WuModal as D, WuModalHeader as H, WuModalContent as z, WuInput as L, WuModalFooter as R, WuModalClose as x, WuToggle as ht, WuButton as q } from "@npm-questionpro/wick-ui-lib";
+import { DropdownMenu as j, DropdownMenuTrigger as $, DropdownMenuContent as K, DropdownMenuItem as U } from "@radix-ui/react-dropdown-menu";
+import ft from "dompurify";
+const gt = "_wuContentEditor_1kzbo_8", pt = "_wuContentEditorTable_1kzbo_1", wt = "_wuContentEditorContainer_1kzbo_8", Ct = "_wuContentEditorToolbar_1kzbo_80", vt = "_wuContentEditorAction_1kzbo_107", bt = "_wuContentEditorDropdown_1kzbo_133", At = "_wuContentEditorDropdownItem_1kzbo_146", kt = "_wuContentEditorFontSize_1kzbo_157", Et = "_wuContentEditorModal_1kzbo_171", yt = "_wuCodeEditor_1kzbo_175", Tt = "_wuFormatCode_1kzbo_185", St = "_wuCodeEditorPreview_1kzbo_198", xt = "_wuCodeEditorInput_1kzbo_213", a = {
+  wuContentEditor: gt,
+  wuContentEditorTable: pt,
+  wuContentEditorContainer: wt,
+  wuContentEditorToolbar: Ct,
+  wuContentEditorAction: vt,
+  wuContentEditorDropdown: bt,
+  wuContentEditorDropdownItem: At,
+  wuContentEditorFontSize: kt,
+  wuContentEditorModal: Et,
+  wuCodeEditor: yt,
+  wuFormatCode: Tt,
+  wuCodeEditorPreview: St,
+  wuCodeEditorInput: xt
+}, Ft = [
+  mt.configure({
     link: {
       openOnClick: !1,
       autolink: !0,
       defaultProtocol: "https",
       protocols: ["http", "https"],
-      isAllowedUri: (t, n) => {
+      isAllowedUri: (t, o) => {
         try {
-          const e = t.includes(":") ? new URL(t) : new URL(`${n.defaultProtocol}://${t}`);
-          if (!n.defaultValidate(e.href))
+          const n = t.includes(":") ? new URL(t) : new URL(`${o.defaultProtocol}://${t}`);
+          if (!o.defaultValidate(n.href))
             return !1;
-          const i = ["ftp", "file", "mailto"], l = e.protocol.replace(":", "");
-          if (i.includes(l) || !n.protocols.map(
+          const i = ["ftp", "file", "mailto"], s = n.protocol.replace(":", "");
+          if (i.includes(s) || !o.protocols.map(
             (r) => typeof r == "string" ? r : r.scheme
-          ).includes(l))
+          ).includes(s))
             return !1;
-          const a = [
+          const u = [
             "example-phishing.com",
             "malicious-site.net"
-          ], s = e.hostname;
-          return !a.includes(s);
+          ], c = n.hostname;
+          return !u.includes(c);
         } catch {
           return !1;
         }
       },
       shouldAutoLink: (t) => {
         try {
-          const n = t.includes(":") ? new URL(t) : new URL(`https://${t}`), e = [
+          const o = t.includes(":") ? new URL(t) : new URL(`https://${t}`), n = [
             "example-no-autolink.com",
             "another-no-autolink.com"
-          ], i = n.hostname;
-          return !e.includes(i);
+          ], i = o.hostname;
+          return !n.includes(i);
         } catch {
           return !1;
         }
       }
     }
   }),
-  Z.configure({
+  rt.configure({
     types: ["heading", "paragraph"]
   }),
-  X,
-  G,
-  Q,
+  nt,
+  ot,
+  st,
+  ct,
+  lt,
   tt,
   et,
-  J,
-  V,
-  ot,
-  nt,
-  it,
-  K.configure({
+  at,
+  ut,
+  dt,
+  Q.configure({
     resize: {
       enabled: !0,
       alwaysPreserveAspectRatio: !0
     },
     inline: !0
   }),
-  Y.configure({
+  it.configure({
     table: { resizable: !0 }
   })
-], O = C.createContext(
+], J = h.createContext(
   null
-), vt = ({
+), Lt = ({
   editor: t,
-  children: n,
-  customFonts: e
-}) => /* @__PURE__ */ o(O.Provider, { value: { editor: t, customFonts: e }, children: n }), m = () => {
-  const t = C.useContext(O);
+  children: o,
+  customFonts: n,
+  isHtml: i,
+  setIsHtml: s
+}) => /* @__PURE__ */ e(J.Provider, { value: { editor: t, customFonts: n, isHtml: i, setIsHtml: s }, children: o }), g = () => {
+  const t = h.useContext(J);
   if (!t)
     throw new Error("useToolbar must be used within a ToolbarProvider");
   return t;
-}, L = ({ action: t, defaultValue: n }) => {
-  var l;
-  const [e, i] = C.useState(
-    n || t.items.find((c) => c.active) || t.items[0]
+}, M = ({ action: t, defaultValue: o }) => {
+  var s;
+  const [n, i] = h.useState(
+    o || t.items.find((l) => l.active) || t.items[0]
   );
-  return C.useEffect(() => {
+  return h.useEffect(() => {
     i(
-      n || t.items.find((c) => c.active) || t.items[0]
+      o || t.items.find((l) => l.active) || t.items[0]
     );
-  }, [t, n]), /* @__PURE__ */ g(M, { children: [
-    /* @__PURE__ */ o(
-      H,
+  }, [t, o]), /* @__PURE__ */ v(j, { children: [
+    /* @__PURE__ */ e(
+      $,
       {
-        className: d.wuContentEditorAction,
+        className: a.wuContentEditorAction,
         "data-active": t.active,
-        children: /* @__PURE__ */ o(h, { icon: e.icon })
+        children: /* @__PURE__ */ e(f, { icon: n.icon })
       }
     ),
-    /* @__PURE__ */ o(
-      z,
+    /* @__PURE__ */ e(
+      K,
       {
         align: "start",
-        onCloseAutoFocus: (c) => c.preventDefault(),
-        className: d.wuContentEditorDropdown,
+        onCloseAutoFocus: (l) => l.preventDefault(),
+        className: a.wuContentEditorDropdown,
         "data-inline": !0,
-        children: (l = t.items) == null ? void 0 : l.map((c) => /* @__PURE__ */ o(
-          B,
+        children: (s = t.items) == null ? void 0 : s.map((l) => /* @__PURE__ */ e(
+          U,
           {
             onClick: () => {
-              c.event(), i(c);
+              l.event(), i(l);
             },
-            title: c.tooltip,
-            children: /* @__PURE__ */ o(
+            title: l.tooltip,
+            children: /* @__PURE__ */ e(
               "button",
               {
-                className: d.wuContentEditorAction,
-                "data-active": c.active,
-                children: /* @__PURE__ */ o(h, { icon: c.icon })
+                className: a.wuContentEditorAction,
+                "data-active": l.active,
+                children: /* @__PURE__ */ e(f, { icon: l.icon })
               }
             )
           },
-          c.id
+          l.id
         ))
       }
     )
   ] });
-}, bt = () => {
-  const { editor: t } = m(), n = f({
+}, _t = () => {
+  const { editor: t } = g(), o = p({
     editor: t,
     selector: (i) => {
-      var l, c, a, s, r, u, p;
+      var s, l, u, c, r, d, w;
       return {
-        isLeft: (l = i.editor) == null ? void 0 : l.isActive({ textAlign: "left" }),
-        isCenter: (c = i.editor) == null ? void 0 : c.isActive({ textAlign: "center" }),
-        isRight: (a = i.editor) == null ? void 0 : a.isActive({ textAlign: "right" }),
-        isJustify: (s = i.editor) == null ? void 0 : s.isActive({ textAlign: "justify" }),
-        isAligned: ((r = i.editor) == null ? void 0 : r.isActive({ textAlign: "center" })) || ((u = i.editor) == null ? void 0 : u.isActive({ textAlign: "right" })) || ((p = i.editor) == null ? void 0 : p.isActive({ textAlign: "justify" }))
+        isLeft: (s = i.editor) == null ? void 0 : s.isActive({ textAlign: "left" }),
+        isCenter: (l = i.editor) == null ? void 0 : l.isActive({ textAlign: "center" }),
+        isRight: (u = i.editor) == null ? void 0 : u.isActive({ textAlign: "right" }),
+        isJustify: (c = i.editor) == null ? void 0 : c.isActive({ textAlign: "justify" }),
+        isAligned: ((r = i.editor) == null ? void 0 : r.isActive({ textAlign: "center" })) || ((d = i.editor) == null ? void 0 : d.isActive({ textAlign: "right" })) || ((w = i.editor) == null ? void 0 : w.isActive({ textAlign: "justify" }))
       };
     }
-  }), e = [
+  }), n = [
     {
       id: "left",
       icon: "wm-format-align-left",
       event: () => t.chain().focus().setTextAlign("left").run(),
       tooltip: "Align Left",
-      active: n.isLeft
+      active: o.isLeft
     },
     {
       id: "center",
       icon: "wm-format-align-center",
       event: () => t.chain().focus().setTextAlign("center").run(),
       tooltip: "Align Center",
-      active: n.isCenter
+      active: o.isCenter
     },
     {
       id: "right",
       icon: "wm-format-align-right",
       event: () => t.chain().focus().setTextAlign("right").run(),
       tooltip: "Align Right",
-      active: n.isRight
+      active: o.isRight
     },
     {
       id: "justify",
       icon: "wm-format-align-justify",
       event: () => t.chain().focus().setTextAlign("justify").run(),
       tooltip: "Justify",
-      active: n.isJustify
+      active: o.isJustify
     }
   ];
-  return /* @__PURE__ */ o(
-    L,
+  return /* @__PURE__ */ e(
+    M,
     {
       action: {
         id: "style",
-        active: n.isAligned,
+        active: o.isAligned,
         icon: "wm-format-paragraph",
-        items: e
+        items: n
       }
     }
   );
-}, At = () => {
-  const { editor: t } = m(), n = f({
+}, Nt = () => {
+  const { editor: t } = g(), o = p({
     editor: t,
-    selector: ({ editor: e }) => ({
-      bgColor: e.getAttributes("textStyle").backgroundColor
+    selector: ({ editor: n }) => ({
+      bgColor: n.getAttributes("textStyle").backgroundColor
     })
   });
-  return /* @__PURE__ */ g(
+  return /* @__PURE__ */ v(
     "label",
     {
-      className: d.wuContentEditorAction,
+      className: a.wuContentEditorAction,
       htmlFor: "bg-color",
       title: "Background Color",
       children: [
-        /* @__PURE__ */ o(h, { icon: "wm-border-color", style: { color: n.bgColor } }),
-        /* @__PURE__ */ o(
+        /* @__PURE__ */ e(f, { icon: "wm-border-color", style: { color: o.bgColor } }),
+        /* @__PURE__ */ e(
           "input",
           {
             type: "color",
             id: "bg-color",
             name: "bg-color",
             defaultValue: "#fff",
-            onChange: (e) => t.chain().focus().setBackgroundColor(e.target.value).run()
+            onChange: (n) => t.chain().focus().setBackgroundColor(n.target.value).run()
           }
         )
       ]
     }
   );
-}, kt = () => {
-  const { editor: t } = m(), n = f({
+}, It = () => {
+  const { editor: t } = g(), o = p({
     editor: t,
     selector: (i) => {
-      var l, c, a, s, r, u;
+      var s, l, u, c, r, d;
       return {
-        isParagraph: (l = i.editor) == null ? void 0 : l.isActive("paragraph"),
-        isH1: (c = i.editor) == null ? void 0 : c.isActive("heading", { level: 1 }),
-        isH2: (a = i.editor) == null ? void 0 : a.isActive("heading", { level: 2 }),
-        isH3: (s = i.editor) == null ? void 0 : s.isActive("heading", { level: 3 }),
+        isParagraph: (s = i.editor) == null ? void 0 : s.isActive("paragraph"),
+        isH1: (l = i.editor) == null ? void 0 : l.isActive("heading", { level: 1 }),
+        isH2: (u = i.editor) == null ? void 0 : u.isActive("heading", { level: 2 }),
+        isH3: (c = i.editor) == null ? void 0 : c.isActive("heading", { level: 3 }),
         isH4: (r = i.editor) == null ? void 0 : r.isActive("heading", { level: 4 }),
-        isStyle: (u = i.editor) == null ? void 0 : u.isActive("heading")
+        isStyle: (d = i.editor) == null ? void 0 : d.isActive("heading")
       };
     }
-  }), e = [
+  }), n = [
     {
       id: "paragraph",
       icon: "wm-format-paragraph",
       event: () => t.chain().focus().setParagraph().run(),
-      active: n.isParagraph
+      active: o.isParagraph
     },
     {
       id: "h1",
       icon: "wm-format-h1",
       event: () => t.chain().focus().setHeading({ level: 1 }).run(),
-      active: n.isH1
+      active: o.isH1
     },
     {
       id: "h2",
       icon: "wm-format-h2",
       event: () => t.chain().focus().setHeading({ level: 2 }).run(),
-      active: n.isH2
+      active: o.isH2
     },
     {
       id: "h3",
       icon: "wm-format-h3",
       event: () => t.chain().focus().setHeading({ level: 3 }).run(),
-      active: n.isH3
+      active: o.isH3
     },
     {
       id: "h4",
       icon: "wm-format-h4",
       event: () => t.chain().focus().setHeading({ level: 4 }).run(),
-      active: n.isH4
+      active: o.isH4
     }
   ];
-  return /* @__PURE__ */ o(
-    L,
+  return /* @__PURE__ */ e(
+    M,
     {
       action: {
         id: "style",
-        active: n.isStyle,
+        active: o.isStyle,
         icon: "wm-format-paragraph",
-        items: e
+        items: n
       },
-      defaultValue: e.find((i) => i.active)
+      defaultValue: n.find((i) => i.active)
     }
   );
-}, Et = () => {
-  const { editor: t } = m(), n = f({
+}, Dt = () => {
+  const { editor: t } = g(), o = p({
     editor: t,
-    selector: (e) => {
+    selector: (n) => {
       var i;
       return {
-        blockquote: (i = e.editor) == null ? void 0 : i.isActive("blockquote")
+        blockquote: (i = n.editor) == null ? void 0 : i.isActive("blockquote")
       };
     }
   });
-  return /* @__PURE__ */ o(
+  return /* @__PURE__ */ e(
     "button",
     {
       title: "quote",
-      className: d.wuContentEditorAction,
-      "data-active": n.blockquote,
-      onClick: (e) => {
-        e.preventDefault(), t.chain().focus().toggleBlockquote().run();
+      className: a.wuContentEditorAction,
+      "data-active": o.blockquote,
+      onClick: (n) => {
+        n.preventDefault(), t.chain().focus().toggleBlockquote().run();
       },
-      children: /* @__PURE__ */ o(h, { icon: "wm-format-quote" })
+      children: /* @__PURE__ */ e(f, { icon: "wm-format-quote" })
     }
   );
-}, yt = () => {
-  const { editor: t } = m(), n = f({
+}, Ht = () => {
+  const { editor: t } = g(), o = p({
     editor: t,
-    selector: (e) => {
+    selector: (n) => {
       var i;
       return {
-        bold: (i = e.editor) == null ? void 0 : i.isActive("bold")
+        bold: (i = n.editor) == null ? void 0 : i.isActive("bold")
       };
     }
   });
-  return /* @__PURE__ */ o(
+  return /* @__PURE__ */ e(
     "button",
     {
       title: "Bold",
-      className: d.wuContentEditorAction,
-      "data-active": n.bold,
-      onClick: (e) => {
-        e.preventDefault(), t.chain().focus().toggleBold().run();
+      className: a.wuContentEditorAction,
+      "data-active": o.bold,
+      onClick: (n) => {
+        n.preventDefault(), t.chain().focus().toggleBold().run();
       },
-      children: /* @__PURE__ */ o(h, { icon: "wm-format-bold" })
+      children: /* @__PURE__ */ e(f, { icon: "wm-format-bold" })
     }
   );
-}, Tt = () => {
-  const { editor: t } = m();
-  return /* @__PURE__ */ o(R, { children: [
+}, zt = () => {
+  const { editor: t } = g();
+  return /* @__PURE__ */ e(F, { children: [
     {
       id: "clear",
       icon: "wm-format-clear",
       event: () => t.chain().focus().clearNodes().unsetAllMarks().run(),
       tooltip: "Clear Formatting"
     }
-  ].map((e) => /* @__PURE__ */ o(
+  ].map((n) => /* @__PURE__ */ e(
     "button",
     {
-      title: e.tooltip,
-      className: d.wuContentEditorAction,
+      title: n.tooltip,
+      className: a.wuContentEditorAction,
       onClick: (i) => {
-        i.preventDefault(), e.event();
+        i.preventDefault(), n.event();
       },
-      children: /* @__PURE__ */ o(h, { icon: e.icon })
+      children: /* @__PURE__ */ e(f, { icon: n.icon })
     },
-    e.id
+    n.id
   )) });
-}, St = () => {
-  const { editor: t } = m(), n = f({
+}, Rt = () => {
+  const { editor: t } = g(), o = p({
     editor: t,
-    selector: (e) => ({
-      code: e.editor.isActive("code")
+    selector: (n) => ({
+      code: n.editor.isActive("code")
     })
   });
-  return /* @__PURE__ */ o(
+  return /* @__PURE__ */ e(
     "button",
     {
-      className: d.wuContentEditorAction,
-      "data-active": n.code,
+      className: a.wuContentEditorAction,
+      "data-active": o.code,
       title: "Code line",
-      onMouseDown: (e) => {
-        e.preventDefault(), t.chain().focus().toggleCode().run();
+      onMouseDown: (n) => {
+        n.preventDefault(), t.chain().focus().toggleCode().run();
       },
-      children: /* @__PURE__ */ o(h, { icon: "wm-code" })
+      children: /* @__PURE__ */ e(f, { icon: "wm-code" })
     }
   );
-}, xt = () => {
-  const { editor: t } = m(), n = f({
+}, Mt = () => {
+  const { editor: t } = g(), o = p({
     editor: t,
-    selector: (s) => {
-      var r, u;
+    selector: (c) => {
+      var r, d;
       return {
-        isImage: (r = s.editor) == null ? void 0 : r.isActive("image"),
-        imageAttrs: (u = s.editor) == null ? void 0 : u.getAttributes("image")
+        isImage: (r = c.editor) == null ? void 0 : r.isActive("image"),
+        imageAttrs: (d = c.editor) == null ? void 0 : d.getAttributes("image")
       };
     }
-  }), [e, i] = C.useState(n.imageAttrs.src || ""), [l, c] = C.useState(n.imageAttrs.alt || ""), a = () => {
-    t.chain().focus().setImage({ src: e, alt: l }).run();
+  }), [n, i] = h.useState(o.imageAttrs.src || ""), [s, l] = h.useState(o.imageAttrs.alt || ""), u = () => {
+    t.chain().focus().setImage({ src: n, alt: s }).run();
   };
-  return /* @__PURE__ */ g(
-    y,
+  return /* @__PURE__ */ v(
+    D,
     {
-      Trigger: /* @__PURE__ */ o(
+      Trigger: /* @__PURE__ */ e(
         "button",
         {
-          className: d.wuContentEditorAction,
-          "data-active": n.isImage,
-          children: /* @__PURE__ */ o(h, { icon: "wm-image" })
+          className: a.wuContentEditorAction,
+          "data-active": o.isImage,
+          children: /* @__PURE__ */ e(f, { icon: "wm-image" })
         }
       ),
       maxWidth: "400px",
       children: [
-        /* @__PURE__ */ o(T, { style: { display: "none" } }),
-        /* @__PURE__ */ g(S, { className: d.wuContentEditorModal, children: [
-          /* @__PURE__ */ o(
-            k,
+        /* @__PURE__ */ e(H, { style: { display: "none" } }),
+        /* @__PURE__ */ v(z, { className: a.wuContentEditorModal, children: [
+          /* @__PURE__ */ e(
+            L,
             {
               Label: "Image URL",
               type: "url",
-              value: e,
-              onChange: (s) => i(s.target.value),
+              value: n,
+              onChange: (c) => i(c.target.value),
               required: !0
             }
           ),
-          /* @__PURE__ */ o(
-            k,
+          /* @__PURE__ */ e(
+            L,
             {
               Label: "Alt Text",
               type: "text",
-              value: l,
-              onChange: (s) => c(s.target.value)
+              value: s,
+              onChange: (c) => l(c.target.value)
             }
           )
         ] }),
-        /* @__PURE__ */ g(x, { children: [
-          /* @__PURE__ */ o(b, { variant: "secondary", children: "Cancel" }),
-          /* @__PURE__ */ o(b, { onClick: a, disabled: !e, children: "Save" })
+        /* @__PURE__ */ v(R, { children: [
+          /* @__PURE__ */ e(x, { variant: "secondary", children: "Cancel" }),
+          /* @__PURE__ */ e(x, { onClick: u, disabled: !n, children: "Save" })
         ] })
       ]
     }
   );
-}, Lt = () => {
-  const { editor: t } = m(), n = f({
+}, Ot = () => {
+  const { editor: t } = g(), o = p({
     editor: t,
     selector: (r) => {
-      var u, p;
+      var d, w;
       return {
-        isLink: (u = r.editor) == null ? void 0 : u.isActive("link"),
-        linkAttrs: (p = r.editor) == null ? void 0 : p.getAttributes("link")
+        isLink: (d = r.editor) == null ? void 0 : d.isActive("link"),
+        linkAttrs: (w = r.editor) == null ? void 0 : w.getAttributes("link")
       };
     }
-  }), [e, i] = C.useState(n.linkAttrs.href || ""), [l, c] = C.useState(n.linkAttrs.alt || ""), a = () => {
+  }), [n, i] = h.useState(o.linkAttrs.href || ""), [s, l] = h.useState(o.linkAttrs.alt || ""), u = () => {
     t.chain().focus().insertContent({
       type: "text",
-      text: l || e,
-      marks: [{ type: "link", attrs: { href: e } }]
+      text: s || n,
+      marks: [{ type: "link", attrs: { href: n } }]
     }).run();
-  }, s = () => {
-    const { $from: r } = t.state.selection, u = r.parent.textContent, p = r.parentOffset;
-    let w = p, v = p;
-    for (; w > 0 && !/\s/.test(u[w - 1]); )
-      w--;
-    for (; v < u.length && !/\s/.test(u[v]); )
-      v++;
-    const N = r.start(), P = N + w, W = N + v, U = u.slice(w, v);
-    t.commands.setTextSelection({ from: P, to: W }), i(n.linkAttrs.href || ""), c(U || n.linkAttrs.alt || "");
+  }, c = () => {
+    const { $from: r } = t.state.selection, d = r.parent.textContent, w = r.parentOffset;
+    let k = w, A = w;
+    for (; k > 0 && !/\s/.test(d[k - 1]); )
+      k--;
+    for (; A < d.length && !/\s/.test(d[A]); )
+      A++;
+    const y = r.start(), E = y + k, b = y + A, C = d.slice(k, A);
+    t.commands.setTextSelection({ from: E, to: b }), i(o.linkAttrs.href || ""), l(C || o.linkAttrs.alt || "");
   };
-  return /* @__PURE__ */ g(
-    y,
+  return /* @__PURE__ */ v(
+    D,
     {
-      Trigger: /* @__PURE__ */ o(
+      Trigger: /* @__PURE__ */ e(
         "button",
         {
-          className: d.wuContentEditorAction,
-          "data-active": n.isLink,
-          children: /* @__PURE__ */ o(h, { icon: "wm-link" })
+          className: a.wuContentEditorAction,
+          "data-active": o.isLink,
+          children: /* @__PURE__ */ e(f, { icon: "wm-link" })
         }
       ),
       maxWidth: "400px",
-      onOpenChange: (r) => r && s(),
+      onOpenChange: (r) => r && c(),
       children: [
-        /* @__PURE__ */ o(T, { style: { display: "none" } }),
-        /* @__PURE__ */ g(S, { className: d.wuContentEditorModal, children: [
-          /* @__PURE__ */ o(
-            k,
+        /* @__PURE__ */ e(H, { style: { display: "none" } }),
+        /* @__PURE__ */ v(z, { className: a.wuContentEditorModal, children: [
+          /* @__PURE__ */ e(
+            L,
             {
               Label: "Link",
               type: "url",
-              value: e,
+              value: n,
               onChange: (r) => i(r.target.value),
               required: !0
             }
           ),
-          /* @__PURE__ */ o(
-            k,
+          /* @__PURE__ */ e(
+            L,
             {
               Label: "Text to display",
               type: "text",
-              value: l,
-              onChange: (r) => c(r.target.value)
+              value: s,
+              onChange: (r) => l(r.target.value)
             }
           )
         ] }),
-        /* @__PURE__ */ g(x, { children: [
-          n.isLink && /* @__PURE__ */ o(
-            b,
+        /* @__PURE__ */ v(R, { children: [
+          o.isLink && /* @__PURE__ */ e(
+            x,
             {
               color: "error",
               onClick: () => t.chain().focus().unsetLink().run(),
@@ -493,27 +499,27 @@ const at = "_wuContentEditor_399u0_8", dt = "_wuContentEditorTable_399u0_1", ut
               children: "Remove"
             }
           ),
-          /* @__PURE__ */ o(b, { onClick: a, disabled: !e, children: "Save" })
+          /* @__PURE__ */ e(x, { onClick: u, disabled: !n, children: "Save" })
         ] })
       ]
     }
   );
-}, Ft = () => {
-  const { editor: t } = m(), n = f({
+}, Bt = () => {
+  const { editor: t } = g(), o = p({
     editor: t,
     selector: (r) => ({
       isTable: r.editor.isActive("table"),
       tableAttrs: r.editor.getAttributes("table")
     })
-  }), [e, i] = E(!1), l = j(null), c = _(() => {
-    l.current = setTimeout(() => {
-      t.chain().focus().insertTable({ rows: 2, cols: 4, withHeaderRow: e }).run();
+  }), [n, i] = I(!1), s = Z(null), l = B(() => {
+    s.current = setTimeout(() => {
+      t.chain().focus().insertTable({ rows: 2, cols: 4, withHeaderRow: n }).run();
     }, 100);
-  }, [t, e]), a = _(() => {
-    i((r) => !r), l.current = setTimeout(() => {
+  }, [t, n]), u = B(() => {
+    i((r) => !r), s.current = setTimeout(() => {
       t.chain().focus().toggleHeaderRow().run();
     }, 100);
-  }, [t]), s = [
+  }, [t]), c = [
     {
       text: "Column left",
       icon: "wm-add",
@@ -545,67 +551,67 @@ const at = "_wuContentEditor_399u0_8", dt = "_wuContentEditorTable_399u0_1", ut
       event: () => t.chain().focus().deleteRow().run()
     }
   ];
-  return n.isTable ? /* @__PURE__ */ g(
-    y,
+  return o.isTable ? /* @__PURE__ */ v(
+    D,
     {
-      Trigger: /* @__PURE__ */ o(
+      Trigger: /* @__PURE__ */ e(
         "button",
         {
-          className: d.wuContentEditorAction,
-          "data-active": n.isTable,
-          children: /* @__PURE__ */ o(h, { icon: "wm-table" })
+          className: a.wuContentEditorAction,
+          "data-active": o.isTable,
+          children: /* @__PURE__ */ e(f, { icon: "wm-table" })
         }
       ),
       maxWidth: "320px",
       children: [
-        /* @__PURE__ */ o(T, { style: { display: "none" } }),
-        /* @__PURE__ */ g(S, { className: d.wuContentEditorModal, children: [
-          /* @__PURE__ */ o(
-            st,
+        /* @__PURE__ */ e(H, { style: { display: "none" } }),
+        /* @__PURE__ */ v(z, { className: a.wuContentEditorModal, children: [
+          /* @__PURE__ */ e(
+            ht,
             {
-              checked: e,
-              onClick: a,
+              checked: n,
+              onClick: u,
               Label: "Title Row",
               labelPosition: "left"
             }
           ),
-          /* @__PURE__ */ o("div", { className: d.wuContentEditorTable, children: s.map(({ text: r, icon: u, event: p }) => /* @__PURE__ */ o(
-            ct,
+          /* @__PURE__ */ e("div", { className: a.wuContentEditorTable, children: c.map(({ text: r, icon: d, event: w }) => /* @__PURE__ */ e(
+            q,
             {
-              onClick: p,
+              onClick: w,
               variant: "secondary",
-              Icon: /* @__PURE__ */ o(h, { icon: u }),
+              Icon: /* @__PURE__ */ e(f, { icon: d }),
               children: r
             },
             r
           )) })
         ] }),
-        /* @__PURE__ */ o(x, { children: /* @__PURE__ */ o(
-          b,
+        /* @__PURE__ */ e(R, { children: /* @__PURE__ */ e(
+          x,
           {
             onClick: () => t.chain().focus().deleteTable().run(),
             variant: "outline",
             color: "error",
-            Icon: /* @__PURE__ */ o("span", { className: "wm-delete" }),
+            Icon: /* @__PURE__ */ e("span", { className: "wm-delete" }),
             iconPosition: "left",
             children: "Delete Table"
           }
         ) })
       ]
     }
-  ) : /* @__PURE__ */ o(
+  ) : /* @__PURE__ */ e(
     "button",
     {
-      onClick: c,
-      className: d.wuContentEditorAction,
-      children: /* @__PURE__ */ o(h, { icon: "wm-table" })
+      onClick: l,
+      className: a.wuContentEditorAction,
+      children: /* @__PURE__ */ e(f, { icon: "wm-table" })
     }
   );
-}, Nt = () => {
-  const { editor: t, customFonts: n } = m(), e = f({
+}, Pt = () => {
+  const { editor: t, customFonts: o } = g(), n = p({
     editor: t,
-    selector: (a) => ({
-      currentFontFamily: a.editor.getAttributes("textStyle").fontFamily || ""
+    selector: (u) => ({
+      currentFontFamily: u.editor.getAttributes("textStyle").fontFamily || ""
     })
   }), i = [
     "Fira Sans",
@@ -613,310 +619,326 @@ const at = "_wuContentEditor_399u0_8", dt = "_wuContentEditorTable_399u0_1", ut
     "Poppins",
     "JetBrains Mono",
     "Montserrat",
-    ...n || []
-  ], [l, c] = E(
-    e.currentFontFamily || i[0]
+    ...o || []
+  ], [s, l] = I(
+    n.currentFontFamily || i[0]
   );
-  return C.useEffect(() => {
-    var a;
-    c(
-      ((a = e.currentFontFamily) == null ? void 0 : a.replace(/"/g, "")) || i[0]
+  return h.useEffect(() => {
+    var u;
+    l(
+      ((u = n.currentFontFamily) == null ? void 0 : u.replace(/"/g, "")) || i[0]
     );
-  }, [e.currentFontFamily]), /* @__PURE__ */ g(M, { children: [
-    /* @__PURE__ */ o(
-      H,
+  }, [n.currentFontFamily]), /* @__PURE__ */ v(j, { children: [
+    /* @__PURE__ */ e(
+      $,
       {
-        className: d.wuContentEditorAction,
-        "data-active": l !== "Fira Sans",
-        style: { fontFamily: l },
-        title: l || "Font Family",
-        children: l == null ? void 0 : l[0]
+        className: a.wuContentEditorAction,
+        "data-active": s !== "Fira Sans",
+        style: { fontFamily: s },
+        title: s || "Font Family",
+        children: s == null ? void 0 : s[0]
       }
     ),
-    /* @__PURE__ */ o(
-      z,
+    /* @__PURE__ */ e(
+      K,
       {
         align: "start",
-        className: d.wuContentEditorDropdown,
+        className: a.wuContentEditorDropdown,
         "data-block": !0,
-        onCloseAutoFocus: (a) => a.preventDefault(),
-        children: i.map((a) => /* @__PURE__ */ o(
-          B,
+        onCloseAutoFocus: (u) => u.preventDefault(),
+        children: i.map((u) => /* @__PURE__ */ e(
+          U,
           {
-            title: a,
-            className: d.wuContentEditorDropdownItem,
+            title: u,
+            className: a.wuContentEditorDropdownItem,
             onSelect: () => {
-              t.chain().focus().setFontFamily(a).run(), c(a);
+              t.chain().focus().setFontFamily(u).run(), l(u);
             },
-            children: a
+            children: u
           },
-          a
+          u
         ))
       }
     )
   ] });
-}, Dt = () => {
-  const { editor: t } = m(), n = f({
+}, Wt = () => {
+  const { editor: t } = g(), o = p({
     editor: t,
-    selector: (e) => {
+    selector: (n) => {
       var i;
       return {
-        italic: (i = e.editor) == null ? void 0 : i.isActive("italic")
+        italic: (i = n.editor) == null ? void 0 : i.isActive("italic")
       };
     }
   });
-  return /* @__PURE__ */ o(
+  return /* @__PURE__ */ e(
     "button",
     {
       title: "Italic",
-      className: d.wuContentEditorAction,
-      "data-active": n.italic,
-      onClick: (e) => {
-        e.preventDefault(), t.chain().focus().toggleItalic().run();
+      className: a.wuContentEditorAction,
+      "data-active": o.italic,
+      onClick: (n) => {
+        n.preventDefault(), t.chain().focus().toggleItalic().run();
       },
-      children: /* @__PURE__ */ o(h, { icon: "wm-format-italic" })
+      children: /* @__PURE__ */ e(f, { icon: "wm-format-italic" })
     }
   );
-}, _t = () => {
-  const { editor: t } = m(), n = f({
+}, qt = () => {
+  const { editor: t } = g(), o = p({
     editor: t,
     selector: (i) => {
-      var l, c, a, s, r, u;
+      var s, l, u, c, r, d;
       return {
-        isUl: (l = i.editor) == null ? void 0 : l.isActive("bulletList"),
-        isOl: (c = i.editor) == null ? void 0 : c.isActive("orderedList"),
-        isTodo: (a = i.editor) == null ? void 0 : a.isActive("taskList"),
-        isList: ((s = i.editor) == null ? void 0 : s.isActive("bulletList")) || ((r = i.editor) == null ? void 0 : r.isActive("orderedList")) || ((u = i.editor) == null ? void 0 : u.isActive("taskList"))
+        isUl: (s = i.editor) == null ? void 0 : s.isActive("bulletList"),
+        isOl: (l = i.editor) == null ? void 0 : l.isActive("orderedList"),
+        isTodo: (u = i.editor) == null ? void 0 : u.isActive("taskList"),
+        isList: ((c = i.editor) == null ? void 0 : c.isActive("bulletList")) || ((r = i.editor) == null ? void 0 : r.isActive("orderedList")) || ((d = i.editor) == null ? void 0 : d.isActive("taskList"))
       };
     }
-  }), e = [
+  }), n = [
     {
       id: "ul",
       icon: "wm-format-list-bulleted",
       event: () => t.chain().focus().toggleBulletList().run(),
-      active: n.isUl,
+      active: o.isUl,
       tooltip: "Bulleted List"
     },
     {
       id: "ol",
       icon: "wm-format-list-numbered",
       event: () => t.chain().focus().toggleOrderedList().run(),
-      active: n.isOl,
+      active: o.isOl,
       tooltip: "Numbered List"
     },
     {
       id: "todo",
       icon: "wm-checklist",
       event: () => t.chain().focus().toggleTaskList().run(),
-      active: n.isTodo,
+      active: o.isTodo,
       tooltip: "To-Do List"
     }
   ];
-  return /* @__PURE__ */ o(
-    L,
+  return /* @__PURE__ */ e(
+    M,
     {
       action: {
         id: "style",
-        active: n.isList,
+        active: o.isList,
         icon: "wm-format-paragraph",
-        items: e
+        items: n
       }
     }
   );
-}, It = ["e", "E", "+", "-"], I = 1, Rt = () => {
-  const { editor: t } = m(), [n, e] = E(16), i = f({
+}, jt = ["e", "E", "+", "-"], P = 1, $t = () => {
+  const { editor: t } = g(), [o, n] = I(16), i = p({
     editor: t,
-    selector: (s) => ({
-      fontSize: s.editor.getAttributes("textStyle").fontSize
+    selector: (c) => ({
+      fontSize: c.editor.getAttributes("textStyle").fontSize
     })
-  }), l = (s) => {
-    t.chain().focus().setFontSize(s + "px").run();
-  }, c = (s) => {
-    const r = Math.max(I, s);
-    e(r), l(r);
-  }, a = (s) => {
-    It.includes(s.key) ? s.preventDefault() : s.key === "Enter" && l(n);
+  }), s = (c) => {
+    t.chain().focus().setFontSize(c + "px").run();
+  }, l = (c) => {
+    const r = Math.max(P, c);
+    n(r), s(r);
+  }, u = (c) => {
+    jt.includes(c.key) ? c.preventDefault() : c.key === "Enter" && s(o);
   };
-  return C.useEffect(() => {
-    var s;
-    e(Number((s = i.fontSize) == null ? void 0 : s.replace("px", "")) || 16);
-  }, [i.fontSize]), /* @__PURE__ */ g("div", { className: d.wuContentEditorFontSize, children: [
-    /* @__PURE__ */ o(
+  return h.useEffect(() => {
+    var c;
+    n(Number((c = i.fontSize) == null ? void 0 : c.replace("px", "")) || 16);
+  }, [i.fontSize]), /* @__PURE__ */ v("div", { className: a.wuContentEditorFontSize, children: [
+    /* @__PURE__ */ e(
       "button",
       {
-        className: d.wuContentEditorAction,
-        onClick: () => c(n - 1),
-        disabled: n <= I,
+        className: a.wuContentEditorAction,
+        onClick: () => l(o - 1),
+        disabled: o <= P,
         children: "−"
       }
     ),
-    /* @__PURE__ */ o(
+    /* @__PURE__ */ e(
       "input",
       {
         type: "number",
         inputMode: "numeric",
         pattern: "[0-9]*",
-        value: n,
-        onKeyDown: a,
-        onChange: (s) => e(s.target.valueAsNumber),
-        onBlur: () => l(n)
+        value: o,
+        onKeyDown: u,
+        onChange: (c) => n(c.target.valueAsNumber),
+        onBlur: () => s(o)
       }
     ),
-    /* @__PURE__ */ o(
+    /* @__PURE__ */ e(
       "button",
       {
-        className: d.wuContentEditorAction,
-        onClick: () => c(n + 1),
-        disabled: n >= 128,
+        className: a.wuContentEditorAction,
+        onClick: () => l(o + 1),
+        disabled: o >= 128,
         children: "+"
       }
     )
   ] });
-}, Mt = () => {
-  const { editor: t } = m(), n = f({
+}, Kt = () => {
+  const { editor: t } = g(), o = p({
     editor: t,
-    selector: (e) => {
+    selector: (n) => {
       var i;
       return {
-        strikethrough: (i = e.editor) == null ? void 0 : i.isActive("strike")
+        strikethrough: (i = n.editor) == null ? void 0 : i.isActive("strike")
       };
     }
   });
-  return /* @__PURE__ */ o(
+  return /* @__PURE__ */ e(
     "button",
     {
       title: "strikethrough",
-      className: d.wuContentEditorAction,
-      "data-active": n.strikethrough,
-      onClick: (e) => {
-        e.preventDefault(), t.chain().focus().toggleStrike().run();
+      className: a.wuContentEditorAction,
+      "data-active": o.strikethrough,
+      onClick: (n) => {
+        n.preventDefault(), t.chain().focus().toggleStrike().run();
       },
-      children: /* @__PURE__ */ o(h, { icon: "wm-format-strikethrough" })
+      children: /* @__PURE__ */ e(f, { icon: "wm-format-strikethrough" })
     }
   );
-}, Ht = () => {
-  const { editor: t } = m(), n = f({
+}, Ut = () => {
+  const { editor: t } = g(), o = p({
     editor: t,
-    selector: (e) => {
+    selector: (n) => {
       var i;
       return {
-        subscript: (i = e.editor) == null ? void 0 : i.isActive("subscript")
+        subscript: (i = n.editor) == null ? void 0 : i.isActive("subscript")
       };
     }
   });
-  return /* @__PURE__ */ o(
+  return /* @__PURE__ */ e(
     "button",
     {
       title: "Subscript",
-      className: d.wuContentEditorAction,
-      "data-active": n.subscript,
-      onClick: (e) => {
-        e.preventDefault(), t.chain().focus().toggleSubscript().run();
+      className: a.wuContentEditorAction,
+      "data-active": o.subscript,
+      onClick: (n) => {
+        n.preventDefault(), t.chain().focus().toggleSubscript().run();
       },
-      children: /* @__PURE__ */ o(h, { icon: "wm-subscript" })
+      children: /* @__PURE__ */ e(f, { icon: "wm-subscript" })
     }
   );
-}, zt = () => {
-  const { editor: t } = m(), n = f({
+}, Jt = () => {
+  const { editor: t } = g(), o = p({
     editor: t,
-    selector: (e) => {
+    selector: (n) => {
       var i;
       return {
-        superscript: (i = e.editor) == null ? void 0 : i.isActive("superscript")
+        superscript: (i = n.editor) == null ? void 0 : i.isActive("superscript")
       };
     }
   });
-  return /* @__PURE__ */ o(
+  return /* @__PURE__ */ e(
     "button",
     {
       title: "Superscript",
-      className: d.wuContentEditorAction,
-      "data-active": n.superscript,
-      onClick: (e) => {
-        e.preventDefault(), t.chain().focus().toggleSuperscript().run();
+      className: a.wuContentEditorAction,
+      "data-active": o.superscript,
+      onClick: (n) => {
+        n.preventDefault(), t.chain().focus().toggleSuperscript().run();
       },
-      children: /* @__PURE__ */ o(h, { icon: "wm-superscript" })
+      children: /* @__PURE__ */ e(f, { icon: "wm-superscript" })
     }
   );
-}, Bt = () => {
-  const { editor: t } = m(), n = f({
+}, Gt = () => {
+  const { editor: t } = g(), o = p({
     editor: t,
-    selector: ({ editor: e }) => ({
-      textColor: e.getAttributes("textStyle").color
+    selector: ({ editor: n }) => ({
+      textColor: n.getAttributes("textStyle").color
     })
   });
-  return /* @__PURE__ */ g(
+  return /* @__PURE__ */ v(
     "label",
     {
-      className: d.wuContentEditorAction,
+      className: a.wuContentEditorAction,
       htmlFor: "text-color",
       title: "Text Color",
       children: [
-        /* @__PURE__ */ o(
-          h,
+        /* @__PURE__ */ e(
+          f,
           {
             icon: "wm-format-color-text",
-            className: d.bgColorCursorPointer,
-            style: { color: n.textColor }
+            className: a.bgColorCursorPointer,
+            style: { color: o.textColor }
           }
         ),
-        /* @__PURE__ */ o(
+        /* @__PURE__ */ e(
           "input",
           {
             type: "color",
-            className: d.bgColorHiddenInput,
+            className: a.bgColorHiddenInput,
             id: "text-color",
             defaultValue: "#545E6B",
-            onChange: (e) => t.chain().focus().setColor(e.target.value).run()
+            onChange: (n) => t.chain().focus().setColor(n.target.value).run()
           }
         )
       ]
     }
   );
-}, Ot = () => {
-  const { editor: t } = m(), n = f({
+}, Vt = () => {
+  const { editor: t } = g(), o = p({
     editor: t,
-    selector: (e) => {
+    selector: (n) => {
       var i;
       return {
-        underline: (i = e.editor) == null ? void 0 : i.isActive("underline")
+        underline: (i = n.editor) == null ? void 0 : i.isActive("underline")
       };
     }
   });
-  return /* @__PURE__ */ o(
+  return /* @__PURE__ */ e(
     "button",
     {
       title: "Underline",
-      className: d.wuContentEditorAction,
-      "data-active": n.underline,
-      onClick: (e) => {
-        e.preventDefault(), t.chain().focus().toggleUnderline().run();
+      className: a.wuContentEditorAction,
+      "data-active": o.underline,
+      onClick: (n) => {
+        n.preventDefault(), t.chain().focus().toggleUnderline().run();
       },
-      children: /* @__PURE__ */ o(h, { icon: "wm-format-underlined" })
+      children: /* @__PURE__ */ e(f, { icon: "wm-format-underlined" })
     }
   );
-}, Pt = {
-  block: /* @__PURE__ */ o(kt, {}),
-  fontFamily: /* @__PURE__ */ o(Nt, {}),
-  fontSize: /* @__PURE__ */ o(Rt, {}),
-  bold: /* @__PURE__ */ o(yt, {}),
-  italic: /* @__PURE__ */ o(Dt, {}),
-  underline: /* @__PURE__ */ o(Ot, {}),
-  strike: /* @__PURE__ */ o(Mt, {}),
-  color: /* @__PURE__ */ o(Bt, {}),
-  bgColor: /* @__PURE__ */ o(At, {}),
-  list: /* @__PURE__ */ o(_t, {}),
-  alignment: /* @__PURE__ */ o(bt, {}),
-  image: /* @__PURE__ */ o(xt, {}),
-  link: /* @__PURE__ */ o(Lt, {}),
-  table: /* @__PURE__ */ o(Ft, {}),
-  blockquote: /* @__PURE__ */ o(Et, {}),
-  superscript: /* @__PURE__ */ o(zt, {}),
-  subscript: /* @__PURE__ */ o(Ht, {}),
-  codeline: /* @__PURE__ */ o(St, {}),
-  clear: /* @__PURE__ */ o(Tt, {}),
+};
+function Xt() {
+  const { isHtml: t, setIsHtml: o } = g();
+  return /* @__PURE__ */ e(
+    "button",
+    {
+      title: "HTML source",
+      className: a.wuContentEditorAction,
+      "data-active": t,
+      onClick: (n) => {
+        n.preventDefault(), o(!t);
+      },
+      children: /* @__PURE__ */ e(f, { icon: "wm-html" })
+    }
+  );
+}
+const W = {
+  block: /* @__PURE__ */ e(It, {}),
+  fontFamily: /* @__PURE__ */ e(Pt, {}),
+  fontSize: /* @__PURE__ */ e($t, {}),
+  bold: /* @__PURE__ */ e(Ht, {}),
+  italic: /* @__PURE__ */ e(Wt, {}),
+  underline: /* @__PURE__ */ e(Vt, {}),
+  strike: /* @__PURE__ */ e(Kt, {}),
+  color: /* @__PURE__ */ e(Gt, {}),
+  bgColor: /* @__PURE__ */ e(Nt, {}),
+  list: /* @__PURE__ */ e(qt, {}),
+  alignment: /* @__PURE__ */ e(_t, {}),
+  image: /* @__PURE__ */ e(Mt, {}),
+  link: /* @__PURE__ */ e(Ot, {}),
+  table: /* @__PURE__ */ e(Bt, {}),
+  blockquote: /* @__PURE__ */ e(Dt, {}),
+  superscript: /* @__PURE__ */ e(Jt, {}),
+  subscript: /* @__PURE__ */ e(Ut, {}),
+  codeline: /* @__PURE__ */ e(Rt, {}),
+  clear: /* @__PURE__ */ e(zt, {}),
   // eslint-disable-next-line @typescript-eslint/naming-convention
-  "|": /* @__PURE__ */ o(
+  "|": /* @__PURE__ */ e(
     "div",
     {
       style: {
@@ -925,8 +947,9 @@ const at = "_wuContentEditor_399u0_8", dt = "_wuContentEditorTable_399u0_1", ut
         background: "rgb(var(--wu-gray-40))"
       }
     }
-  )
-}, Wt = [
+  ),
+  html: /* @__PURE__ */ e(Xt, {})
+}, Yt = [
   "block",
   "fontFamily",
   "|",
@@ -952,15 +975,33 @@ const at = "_wuContentEditor_399u0_8", dt = "_wuContentEditorTable_399u0_1", ut
   "subscript",
   "codeline",
   "|",
+  "html",
   "clear"
-], Ut = (t) => {
-  const { editor: n, customFonts: e, children: i, items: l = Wt, ...c } = t;
-  return /* @__PURE__ */ o("div", { ...c, children: /* @__PURE__ */ g(vt, { editor: n, customFonts: e, children: [
-    l.map((a, s) => /* @__PURE__ */ o(R, { children: Pt[a] }, a + s)),
-    i
-  ] }) });
-}, F = lt();
-F.setConfig({
+], Zt = (t) => {
+  const {
+    editor: o,
+    customFonts: n,
+    children: i,
+    items: s = Yt,
+    isHtml: l,
+    setIsHtml: u,
+    ...c
+  } = t;
+  return /* @__PURE__ */ e("div", { ...c, children: /* @__PURE__ */ v(
+    Lt,
+    {
+      editor: o,
+      customFonts: n,
+      isHtml: l,
+      setIsHtml: u,
+      children: [
+        s.map((r, d) => /* @__PURE__ */ e(F, { children: l && r !== "html" ? /* @__PURE__ */ e("span", { style: { pointerEvents: "none", opacity: 0.4 }, children: W[r] }) : W[r] }, r + d)),
+        i
+      ]
+    }
+  ) });
+}, O = ft();
+O.setConfig({
   USE_PROFILES: { html: !0 },
   ALLOWED_TAGS: [
     "div",
@@ -1012,72 +1053,169 @@ F.setConfig({
   ],
   ALLOW_DATA_ATTR: !0
 });
-F.addHook("uponSanitizeAttribute", (t, n) => {
-  if (n.attrName === "style") {
-    const e = n.attrValue.toLowerCase();
-    (e.includes("expression") || e.includes("javascript:") || e.includes("url(")) && (n.keepAttr = !1);
+O.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 A(t) {
-  return t ? F.sanitize(t) : "";
+function S(t) {
+  return t ? O.sanitize(t) : "";
+}
+let N = null;
+function Qt() {
+  return N || (N = import("shiki").then(
+    ({ createHighlighter: t }) => t({
+      themes: ["github-light"],
+      langs: ["html"]
+    })
+  )), N;
+}
+function te({
+  defaultValue: t,
+  onUpdate: o,
+  readonly: n
+}) {
+  const [i, s] = h.useState(t || ""), [l, u] = h.useState(""), [c, r] = h.useState(!1), [d, w] = h.useState(!1), k = h.useRef(!1), A = h.useCallback(
+    async (C) => {
+      try {
+        const [{ format: m }, { default: T }] = await Promise.all([
+          import("../../standalone-uA6N_bR1.js"),
+          import("../../html-asrO2y6j.js")
+        ]), _ = await m(C, {
+          parser: "html",
+          plugins: [T],
+          htmlWhitespaceSensitivity: "css",
+          printWidth: 80
+        });
+        return r(!1), _;
+      } catch (m) {
+        return console.error("Format error:", m), r(!0), C;
+      }
+    },
+    []
+  ), y = h.useCallback((C) => {
+    Qt().then((m) => {
+      const T = m.codeToHtml(C || " ", {
+        lang: "html",
+        theme: "github-light"
+      });
+      u(T);
+    }).catch((m) => console.error("Highlight error:", m));
+  }, []);
+  h.useEffect(() => {
+    y(i), o == null || o(S(i));
+  }, [i, y, o]), h.useEffect(() => {
+    k.current || !t || (k.current = !0, A(t).then(s));
+  }, [t, A]);
+  const E = async (C) => {
+    C.preventDefault(), w(!0);
+    const m = await A(i);
+    s(m), w(!1);
+  }, b = (C) => {
+    if (C.key === "Tab") {
+      C.preventDefault();
+      const m = C.currentTarget, T = m.selectionStart, _ = m.selectionEnd, G = i.substring(0, T) + "  " + i.substring(_);
+      s(G), requestAnimationFrame(() => {
+        m.selectionStart = T + 2, m.selectionEnd = T + 2;
+      });
+    }
+  };
+  return /* @__PURE__ */ e(F, { children: d ? /* @__PURE__ */ e(F, { children: "Formatting..." }) : /* @__PURE__ */ e("div", { className: a.wuContentEditor, children: /* @__PURE__ */ v("div", { className: a.wuCodeEditor, children: [
+    /* @__PURE__ */ e(
+      q,
+      {
+        variant: "iconOnly",
+        Icon: /* @__PURE__ */ e(f, { icon: "wm-data-object" }),
+        onClick: E,
+        className: a.wuFormatCode,
+        style: { color: c ? "red" : "" }
+      }
+    ),
+    /* @__PURE__ */ e(
+      "div",
+      {
+        dangerouslySetInnerHTML: { __html: l },
+        className: a.wuCodeEditorPreview
+      }
+    ),
+    /* @__PURE__ */ e(
+      "textarea",
+      {
+        value: i,
+        onChange: (C) => s(C.target.value),
+        onKeyDown: b,
+        className: a.wuCodeEditorInput,
+        disabled: n
+      }
+    )
+  ] }) }) });
 }
-function ie({
+function pe({
   defaultValue: t,
-  onUpdate: n,
-  className: e,
+  onUpdate: o,
+  className: n,
   toolbarPosition: i = "top",
-  customToolbarChildren: l,
-  toolbarItems: c,
-  hideToolbar: a,
-  readonly: s,
+  customToolbarChildren: s,
+  toolbarItems: l,
+  hideToolbar: u,
+  readonly: c,
   customFonts: r,
-  renderDefaultOnly: u,
-  ...p
+  isHtml: d,
+  setIsHtml: w,
+  ...k
 }) {
-  const w = q({
-    extensions: Ct,
-    content: A(t || ""),
-    onUpdate: ({ editor: v }) => {
-      n && n(A(v.getHTML()));
+  const [A, y] = h.useState(d ?? !1), E = h.useRef(t || ""), b = V({
+    editable: !c,
+    extensions: Ft,
+    content: S(t || ""),
+    onUpdate: ({ editor: m }) => {
+      o && o(S(m.getHTML()));
     }
-  });
-  return s ? (console.log(w.getHTML()), /* @__PURE__ */ o(
-    "div",
-    {
-      className: D(d.wuContentEditor, e),
-      dangerouslySetInnerHTML: {
-        __html: A(u ? t || "" : w.getHTML())
-      },
-      ...p
-    }
-  )) : /* @__PURE__ */ g(
+  }), C = (m) => {
+    m ? E.current = (b == null ? void 0 : b.getHTML()) ?? "" : b == null || b.commands.setContent(S(E.current)), o && o(S(E.current)), y(m), w == null || w(m);
+  };
+  return /* @__PURE__ */ v(
     "div",
     {
-      className: D(d.wuContentEditorContainer, e),
+      className: Y(a.wuContentEditorContainer, n),
       "data-position": i,
       "data-slot": "wu-content-editor-container",
       onClick: () => {
-        w == null || w.chain().focus().run();
+        A || b == null || b.chain().focus().run();
       },
-      ...p,
+      ...k,
       children: [
-        !a && /* @__PURE__ */ o(
-          Ut,
+        !u && /* @__PURE__ */ e(
+          Zt,
           {
-            editor: w,
+            editor: b,
             customFonts: r,
-            className: d.wuContentEditorToolbar,
-            items: c,
+            className: a.wuContentEditorToolbar,
+            items: l,
+            isHtml: A,
+            setIsHtml: C,
             "data-slot": "wu-content-editor-toolbar",
             "data-position": i,
-            children: l
+            children: s
           }
         ),
-        /* @__PURE__ */ o(
-          $,
+        A ? /* @__PURE__ */ e(
+          te,
+          {
+            defaultValue: E.current,
+            onUpdate: (m) => {
+              E.current = m ?? "", o && o(m ?? "");
+            },
+            "data-position": i,
+            "data-slot": "wu-content-editor",
+            readonly: c
+          }
+        ) : /* @__PURE__ */ e(
+          X,
           {
-            editor: w,
-            className: d.wuContentEditor,
+            editor: b,
+            className: a.wuContentEditor,
             "data-slot": "wu-content-editor"
           }
         )
@@ -1086,5 +1224,5 @@ function ie({
   );
 }
 export {
-  ie as WuContentEditor
+  pe as WuContentEditor
 };