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

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

@@ -1,20 +1,20 @@
-import { jsx as e, jsxs as f, Fragment as y } from "react/jsx-runtime";
+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 m, { useState as D, useRef as Z, useCallback as O } from "react";
+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 dt, FontFamily as ut } from "@tiptap/extension-text-style";
+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 h, WuModal as H, WuModalHeader as R, WuModalContent as M, WuInput as x, WuModalFooter as z, WuModalClose as T, WuToggle as ht, WuButton as q } from "@npm-questionpro/wick-ui-lib";
-import { DropdownMenu as U, DropdownMenuTrigger as $, DropdownMenuContent as j, DropdownMenuItem as K } from "@radix-ui/react-dropdown-menu";
-import gt from "dompurify";
-const ft = "_wuContentEditor_1kxiu_8", pt = "_wuContentEditorTable_1kxiu_1", wt = "_wuContentEditorContainer_1kxiu_8", Ct = "_wuContentEditorToolbar_1kxiu_80", vt = "_wuContentEditorAction_1kxiu_107", bt = "_wuContentEditorDropdown_1kxiu_133", At = "_wuContentEditorDropdownItem_1kxiu_146", kt = "_wuContentEditorFontSize_1kxiu_157", Et = "_wuContentEditorModal_1kxiu_171", yt = "_wuCodeEditor_1kxiu_175", Tt = "_wuCodeEditorPreview_1kxiu_185", xt = "_wuCodeEditorInput_1kxiu_200", a = {
-  wuContentEditor: ft,
+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,
@@ -24,41 +24,42 @@ const ft = "_wuContentEditor_1kxiu_8", pt = "_wuContentEditorTable_1kxiu_1", wt
   wuContentEditorFontSize: kt,
   wuContentEditorModal: Et,
   wuCodeEditor: yt,
-  wuCodeEditorPreview: Tt,
+  wuFormatCode: Tt,
+  wuCodeEditorPreview: St,
   wuCodeEditorInput: xt
-}, St = [
+}, Ft = [
   mt.configure({
     link: {
       openOnClick: !1,
       autolink: !0,
       defaultProtocol: "https",
       protocols: ["http", "https"],
-      isAllowedUri: (t, n) => {
+      isAllowedUri: (t, o) => {
         try {
-          const o = t.includes(":") ? new URL(t) : new URL(`${n.defaultProtocol}://${t}`);
-          if (!n.defaultValidate(o.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"], r = o.protocol.replace(":", "");
-          if (i.includes(r) || !n.protocols.map(
-            (s) => typeof s == "string" ? s : s.scheme
-          ).includes(r))
+          const i = ["ftp", "file", "mailto"], s = n.protocol.replace(":", "");
+          if (i.includes(s) || !o.protocols.map(
+            (r) => typeof r == "string" ? r : r.scheme
+          ).includes(s))
             return !1;
-          const d = [
+          const u = [
             "example-phishing.com",
             "malicious-site.net"
-          ], c = o.hostname;
-          return !d.includes(c);
+          ], c = n.hostname;
+          return !u.includes(c);
         } catch {
           return !1;
         }
       },
       shouldAutoLink: (t) => {
         try {
-          const n = t.includes(":") ? new URL(t) : new URL(`https://${t}`), o = [
+          const o = t.includes(":") ? new URL(t) : new URL(`https://${t}`), n = [
             "example-no-autolink.com",
             "another-no-autolink.com"
-          ], i = n.hostname;
-          return !o.includes(i);
+          ], i = o.hostname;
+          return !n.includes(i);
         } catch {
           return !1;
         }
@@ -76,8 +77,8 @@ const ft = "_wuContentEditor_1kxiu_8", pt = "_wuContentEditorTable_1kxiu_1", wt
   tt,
   et,
   at,
-  dt,
   ut,
+  dt,
   Q.configure({
     resize: {
       enabled: !0,
@@ -88,44 +89,46 @@ const ft = "_wuContentEditor_1kxiu_8", pt = "_wuContentEditorTable_1kxiu_1", wt
   it.configure({
     table: { resizable: !0 }
   })
-], J = m.createContext(
+], J = h.createContext(
   null
-), Ft = ({
+), Lt = ({
   editor: t,
-  children: n,
-  customFonts: o
-}) => /* @__PURE__ */ e(J.Provider, { value: { editor: t, customFonts: o }, children: n }), g = () => {
-  const t = m.useContext(J);
+  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;
-}, P = ({ action: t, defaultValue: n }) => {
-  var r;
-  const [o, i] = m.useState(
-    n || t.items.find((l) => l.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 m.useEffect(() => {
+  return h.useEffect(() => {
     i(
-      n || t.items.find((l) => l.active) || t.items[0]
+      o || t.items.find((l) => l.active) || t.items[0]
     );
-  }, [t, n]), /* @__PURE__ */ f(U, { children: [
+  }, [t, o]), /* @__PURE__ */ v(j, { children: [
     /* @__PURE__ */ e(
       $,
       {
         className: a.wuContentEditorAction,
         "data-active": t.active,
-        children: /* @__PURE__ */ e(h, { icon: o.icon })
+        children: /* @__PURE__ */ e(f, { icon: n.icon })
       }
     ),
     /* @__PURE__ */ e(
-      j,
+      K,
       {
         align: "start",
         onCloseAutoFocus: (l) => l.preventDefault(),
         className: a.wuContentEditorDropdown,
         "data-inline": !0,
-        children: (r = t.items) == null ? void 0 : r.map((l) => /* @__PURE__ */ e(
-          K,
+        children: (s = t.items) == null ? void 0 : s.map((l) => /* @__PURE__ */ e(
+          U,
           {
             onClick: () => {
               l.event(), i(l);
@@ -136,7 +139,7 @@ const ft = "_wuContentEditor_1kxiu_8", pt = "_wuContentEditorTable_1kxiu_1", wt
               {
                 className: a.wuContentEditorAction,
                 "data-active": l.active,
-                children: /* @__PURE__ */ e(h, { icon: l.icon })
+                children: /* @__PURE__ */ e(f, { icon: l.icon })
               }
             )
           },
@@ -145,75 +148,75 @@ const ft = "_wuContentEditor_1kxiu_8", pt = "_wuContentEditorTable_1kxiu_1", wt
       }
     )
   ] });
-}, Lt = () => {
-  const { editor: t } = g(), n = p({
+}, _t = () => {
+  const { editor: t } = g(), o = p({
     editor: t,
     selector: (i) => {
-      var r, l, d, c, s, u, w;
+      var s, l, u, c, r, d, w;
       return {
-        isLeft: (r = i.editor) == null ? void 0 : r.isActive({ textAlign: "left" }),
+        isLeft: (s = i.editor) == null ? void 0 : s.isActive({ textAlign: "left" }),
         isCenter: (l = i.editor) == null ? void 0 : l.isActive({ textAlign: "center" }),
-        isRight: (d = i.editor) == null ? void 0 : d.isActive({ textAlign: "right" }),
+        isRight: (u = i.editor) == null ? void 0 : u.isActive({ textAlign: "right" }),
         isJustify: (c = i.editor) == null ? void 0 : c.isActive({ textAlign: "justify" }),
-        isAligned: ((s = i.editor) == null ? void 0 : s.isActive({ textAlign: "center" })) || ((u = i.editor) == null ? void 0 : u.isActive({ textAlign: "right" })) || ((w = i.editor) == null ? void 0 : w.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" }))
       };
     }
-  }), o = [
+  }), 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__ */ e(
-    P,
+    M,
     {
       action: {
         id: "style",
-        active: n.isAligned,
+        active: o.isAligned,
         icon: "wm-format-paragraph",
-        items: o
+        items: n
       }
     }
   );
 }, Nt = () => {
-  const { editor: t } = g(), n = p({
+  const { editor: t } = g(), o = p({
     editor: t,
-    selector: ({ editor: o }) => ({
-      bgColor: o.getAttributes("textStyle").backgroundColor
+    selector: ({ editor: n }) => ({
+      bgColor: n.getAttributes("textStyle").backgroundColor
     })
   });
-  return /* @__PURE__ */ f(
+  return /* @__PURE__ */ v(
     "label",
     {
       className: a.wuContentEditorAction,
       htmlFor: "bg-color",
       title: "Background Color",
       children: [
-        /* @__PURE__ */ e(h, { icon: "wm-border-color", style: { color: n.bgColor } }),
+        /* @__PURE__ */ e(f, { icon: "wm-border-color", style: { color: o.bgColor } }),
         /* @__PURE__ */ e(
           "input",
           {
@@ -221,77 +224,77 @@ const ft = "_wuContentEditor_1kxiu_8", pt = "_wuContentEditorTable_1kxiu_1", wt
             id: "bg-color",
             name: "bg-color",
             defaultValue: "#fff",
-            onChange: (o) => t.chain().focus().setBackgroundColor(o.target.value).run()
+            onChange: (n) => t.chain().focus().setBackgroundColor(n.target.value).run()
           }
         )
       ]
     }
   );
-}, _t = () => {
-  const { editor: t } = g(), n = p({
+}, It = () => {
+  const { editor: t } = g(), o = p({
     editor: t,
     selector: (i) => {
-      var r, l, d, c, s, u;
+      var s, l, u, c, r, d;
       return {
-        isParagraph: (r = i.editor) == null ? void 0 : r.isActive("paragraph"),
+        isParagraph: (s = i.editor) == null ? void 0 : s.isActive("paragraph"),
         isH1: (l = i.editor) == null ? void 0 : l.isActive("heading", { level: 1 }),
-        isH2: (d = i.editor) == null ? void 0 : d.isActive("heading", { level: 2 }),
+        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: (s = i.editor) == null ? void 0 : s.isActive("heading", { level: 4 }),
-        isStyle: (u = i.editor) == null ? void 0 : u.isActive("heading")
+        isH4: (r = i.editor) == null ? void 0 : r.isActive("heading", { level: 4 }),
+        isStyle: (d = i.editor) == null ? void 0 : d.isActive("heading")
       };
     }
-  }), o = [
+  }), 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__ */ e(
-    P,
+    M,
     {
       action: {
         id: "style",
-        active: n.isStyle,
+        active: o.isStyle,
         icon: "wm-format-paragraph",
-        items: o
+        items: n
       },
-      defaultValue: o.find((i) => i.active)
+      defaultValue: n.find((i) => i.active)
     }
   );
-}, It = () => {
-  const { editor: t } = g(), n = p({
+}, Dt = () => {
+  const { editor: t } = g(), o = p({
     editor: t,
-    selector: (o) => {
+    selector: (n) => {
       var i;
       return {
-        blockquote: (i = o.editor) == null ? void 0 : i.isActive("blockquote")
+        blockquote: (i = n.editor) == null ? void 0 : i.isActive("blockquote")
       };
     }
   });
@@ -300,20 +303,20 @@ const ft = "_wuContentEditor_1kxiu_8", pt = "_wuContentEditorTable_1kxiu_1", wt
     {
       title: "quote",
       className: a.wuContentEditorAction,
-      "data-active": n.blockquote,
-      onClick: (o) => {
-        o.preventDefault(), t.chain().focus().toggleBlockquote().run();
+      "data-active": o.blockquote,
+      onClick: (n) => {
+        n.preventDefault(), t.chain().focus().toggleBlockquote().run();
       },
-      children: /* @__PURE__ */ e(h, { icon: "wm-format-quote" })
+      children: /* @__PURE__ */ e(f, { icon: "wm-format-quote" })
     }
   );
-}, Dt = () => {
-  const { editor: t } = g(), n = p({
+}, Ht = () => {
+  const { editor: t } = g(), o = p({
     editor: t,
-    selector: (o) => {
+    selector: (n) => {
       var i;
       return {
-        bold: (i = o.editor) == null ? void 0 : i.isActive("bold")
+        bold: (i = n.editor) == null ? void 0 : i.isActive("bold")
       };
     }
   });
@@ -322,173 +325,173 @@ const ft = "_wuContentEditor_1kxiu_8", pt = "_wuContentEditorTable_1kxiu_1", wt
     {
       title: "Bold",
       className: a.wuContentEditorAction,
-      "data-active": n.bold,
-      onClick: (o) => {
-        o.preventDefault(), t.chain().focus().toggleBold().run();
+      "data-active": o.bold,
+      onClick: (n) => {
+        n.preventDefault(), t.chain().focus().toggleBold().run();
       },
-      children: /* @__PURE__ */ e(h, { icon: "wm-format-bold" })
+      children: /* @__PURE__ */ e(f, { icon: "wm-format-bold" })
     }
   );
-}, Ht = () => {
+}, zt = () => {
   const { editor: t } = g();
-  return /* @__PURE__ */ e(y, { children: [
+  return /* @__PURE__ */ e(F, { children: [
     {
       id: "clear",
       icon: "wm-format-clear",
       event: () => t.chain().focus().clearNodes().unsetAllMarks().run(),
       tooltip: "Clear Formatting"
     }
-  ].map((o) => /* @__PURE__ */ e(
+  ].map((n) => /* @__PURE__ */ e(
     "button",
     {
-      title: o.tooltip,
+      title: n.tooltip,
       className: a.wuContentEditorAction,
       onClick: (i) => {
-        i.preventDefault(), o.event();
+        i.preventDefault(), n.event();
       },
-      children: /* @__PURE__ */ e(h, { icon: o.icon })
+      children: /* @__PURE__ */ e(f, { icon: n.icon })
     },
-    o.id
+    n.id
   )) });
 }, Rt = () => {
-  const { editor: t } = g(), n = p({
+  const { editor: t } = g(), o = p({
     editor: t,
-    selector: (o) => ({
-      code: o.editor.isActive("code")
+    selector: (n) => ({
+      code: n.editor.isActive("code")
     })
   });
   return /* @__PURE__ */ e(
     "button",
     {
       className: a.wuContentEditorAction,
-      "data-active": n.code,
+      "data-active": o.code,
       title: "Code line",
-      onMouseDown: (o) => {
-        o.preventDefault(), t.chain().focus().toggleCode().run();
+      onMouseDown: (n) => {
+        n.preventDefault(), t.chain().focus().toggleCode().run();
       },
-      children: /* @__PURE__ */ e(h, { icon: "wm-code" })
+      children: /* @__PURE__ */ e(f, { icon: "wm-code" })
     }
   );
 }, Mt = () => {
-  const { editor: t } = g(), n = p({
+  const { editor: t } = g(), o = p({
     editor: t,
     selector: (c) => {
-      var s, u;
+      var r, d;
       return {
-        isImage: (s = c.editor) == null ? void 0 : s.isActive("image"),
-        imageAttrs: (u = c.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")
       };
     }
-  }), [o, i] = m.useState(n.imageAttrs.src || ""), [r, l] = m.useState(n.imageAttrs.alt || ""), d = () => {
-    t.chain().focus().setImage({ src: o, alt: r }).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__ */ f(
-    H,
+  return /* @__PURE__ */ v(
+    D,
     {
       Trigger: /* @__PURE__ */ e(
         "button",
         {
           className: a.wuContentEditorAction,
-          "data-active": n.isImage,
-          children: /* @__PURE__ */ e(h, { icon: "wm-image" })
+          "data-active": o.isImage,
+          children: /* @__PURE__ */ e(f, { icon: "wm-image" })
         }
       ),
       maxWidth: "400px",
       children: [
-        /* @__PURE__ */ e(R, { style: { display: "none" } }),
-        /* @__PURE__ */ f(M, { className: a.wuContentEditorModal, children: [
+        /* @__PURE__ */ e(H, { style: { display: "none" } }),
+        /* @__PURE__ */ v(z, { className: a.wuContentEditorModal, children: [
           /* @__PURE__ */ e(
-            x,
+            L,
             {
               Label: "Image URL",
               type: "url",
-              value: o,
+              value: n,
               onChange: (c) => i(c.target.value),
               required: !0
             }
           ),
           /* @__PURE__ */ e(
-            x,
+            L,
             {
               Label: "Alt Text",
               type: "text",
-              value: r,
+              value: s,
               onChange: (c) => l(c.target.value)
             }
           )
         ] }),
-        /* @__PURE__ */ f(z, { children: [
-          /* @__PURE__ */ e(T, { variant: "secondary", children: "Cancel" }),
-          /* @__PURE__ */ e(T, { onClick: d, disabled: !o, children: "Save" })
+        /* @__PURE__ */ v(R, { children: [
+          /* @__PURE__ */ e(x, { variant: "secondary", children: "Cancel" }),
+          /* @__PURE__ */ e(x, { onClick: u, disabled: !n, children: "Save" })
         ] })
       ]
     }
   );
-}, zt = () => {
-  const { editor: t } = g(), n = p({
+}, Ot = () => {
+  const { editor: t } = g(), o = p({
     editor: t,
-    selector: (s) => {
-      var u, w;
+    selector: (r) => {
+      var d, w;
       return {
-        isLink: (u = s.editor) == null ? void 0 : u.isActive("link"),
-        linkAttrs: (w = s.editor) == null ? void 0 : w.getAttributes("link")
+        isLink: (d = r.editor) == null ? void 0 : d.isActive("link"),
+        linkAttrs: (w = r.editor) == null ? void 0 : w.getAttributes("link")
       };
     }
-  }), [o, i] = m.useState(n.linkAttrs.href || ""), [r, l] = m.useState(n.linkAttrs.alt || ""), d = () => {
+  }), [n, i] = h.useState(o.linkAttrs.href || ""), [s, l] = h.useState(o.linkAttrs.alt || ""), u = () => {
     t.chain().focus().insertContent({
       type: "text",
-      text: r || o,
-      marks: [{ type: "link", attrs: { href: o } }]
+      text: s || n,
+      marks: [{ type: "link", attrs: { href: n } }]
     }).run();
   }, c = () => {
-    const { $from: s } = t.state.selection, u = s.parent.textContent, w = s.parentOffset;
-    let v = w, A = w;
-    for (; v > 0 && !/\s/.test(u[v - 1]); )
-      v--;
-    for (; A < u.length && !/\s/.test(u[A]); )
+    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 E = s.start(), S = E + v, F = E + A, L = u.slice(v, A);
-    t.commands.setTextSelection({ from: S, to: F }), i(n.linkAttrs.href || ""), l(L || n.linkAttrs.alt || "");
+    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__ */ f(
-    H,
+  return /* @__PURE__ */ v(
+    D,
     {
       Trigger: /* @__PURE__ */ e(
         "button",
         {
           className: a.wuContentEditorAction,
-          "data-active": n.isLink,
-          children: /* @__PURE__ */ e(h, { icon: "wm-link" })
+          "data-active": o.isLink,
+          children: /* @__PURE__ */ e(f, { icon: "wm-link" })
         }
       ),
       maxWidth: "400px",
-      onOpenChange: (s) => s && c(),
+      onOpenChange: (r) => r && c(),
       children: [
-        /* @__PURE__ */ e(R, { style: { display: "none" } }),
-        /* @__PURE__ */ f(M, { className: a.wuContentEditorModal, children: [
+        /* @__PURE__ */ e(H, { style: { display: "none" } }),
+        /* @__PURE__ */ v(z, { className: a.wuContentEditorModal, children: [
           /* @__PURE__ */ e(
-            x,
+            L,
             {
               Label: "Link",
               type: "url",
-              value: o,
-              onChange: (s) => i(s.target.value),
+              value: n,
+              onChange: (r) => i(r.target.value),
               required: !0
             }
           ),
           /* @__PURE__ */ e(
-            x,
+            L,
             {
               Label: "Text to display",
               type: "text",
-              value: r,
-              onChange: (s) => l(s.target.value)
+              value: s,
+              onChange: (r) => l(r.target.value)
             }
           )
         ] }),
-        /* @__PURE__ */ f(z, { children: [
-          n.isLink && /* @__PURE__ */ e(
-            T,
+        /* @__PURE__ */ v(R, { children: [
+          o.isLink && /* @__PURE__ */ e(
+            x,
             {
               color: "error",
               onClick: () => t.chain().focus().unsetLink().run(),
@@ -496,24 +499,24 @@ const ft = "_wuContentEditor_1kxiu_8", pt = "_wuContentEditorTable_1kxiu_1", wt
               children: "Remove"
             }
           ),
-          /* @__PURE__ */ e(T, { onClick: d, disabled: !o, children: "Save" })
+          /* @__PURE__ */ e(x, { onClick: u, disabled: !n, children: "Save" })
         ] })
       ]
     }
   );
-}, Pt = () => {
-  const { editor: t } = g(), n = p({
+}, Bt = () => {
+  const { editor: t } = g(), o = p({
     editor: t,
-    selector: (s) => ({
-      isTable: s.editor.isActive("table"),
-      tableAttrs: s.editor.getAttributes("table")
+    selector: (r) => ({
+      isTable: r.editor.isActive("table"),
+      tableAttrs: r.editor.getAttributes("table")
     })
-  }), [o, i] = D(!1), r = Z(null), l = O(() => {
-    r.current = setTimeout(() => {
-      t.chain().focus().insertTable({ rows: 2, cols: 4, withHeaderRow: o }).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, o]), d = O(() => {
-    i((s) => !s), r.current = setTimeout(() => {
+  }, [t, n]), u = B(() => {
+    i((r) => !r), s.current = setTimeout(() => {
       t.chain().focus().toggleHeaderRow().run();
     }, 100);
   }, [t]), c = [
@@ -548,43 +551,43 @@ const ft = "_wuContentEditor_1kxiu_8", pt = "_wuContentEditorTable_1kxiu_1", wt
       event: () => t.chain().focus().deleteRow().run()
     }
   ];
-  return n.isTable ? /* @__PURE__ */ f(
-    H,
+  return o.isTable ? /* @__PURE__ */ v(
+    D,
     {
       Trigger: /* @__PURE__ */ e(
         "button",
         {
           className: a.wuContentEditorAction,
-          "data-active": n.isTable,
-          children: /* @__PURE__ */ e(h, { icon: "wm-table" })
+          "data-active": o.isTable,
+          children: /* @__PURE__ */ e(f, { icon: "wm-table" })
         }
       ),
       maxWidth: "320px",
       children: [
-        /* @__PURE__ */ e(R, { style: { display: "none" } }),
-        /* @__PURE__ */ f(M, { className: a.wuContentEditorModal, children: [
+        /* @__PURE__ */ e(H, { style: { display: "none" } }),
+        /* @__PURE__ */ v(z, { className: a.wuContentEditorModal, children: [
           /* @__PURE__ */ e(
             ht,
             {
-              checked: o,
-              onClick: d,
+              checked: n,
+              onClick: u,
               Label: "Title Row",
               labelPosition: "left"
             }
           ),
-          /* @__PURE__ */ e("div", { className: a.wuContentEditorTable, children: c.map(({ text: s, icon: u, event: w }) => /* @__PURE__ */ e(
+          /* @__PURE__ */ e("div", { className: a.wuContentEditorTable, children: c.map(({ text: r, icon: d, event: w }) => /* @__PURE__ */ e(
             q,
             {
               onClick: w,
               variant: "secondary",
-              Icon: /* @__PURE__ */ e(h, { icon: u }),
-              children: s
+              Icon: /* @__PURE__ */ e(f, { icon: d }),
+              children: r
             },
-            s
+            r
           )) })
         ] }),
-        /* @__PURE__ */ e(z, { children: /* @__PURE__ */ e(
-          T,
+        /* @__PURE__ */ e(R, { children: /* @__PURE__ */ e(
+          x,
           {
             onClick: () => t.chain().focus().deleteTable().run(),
             variant: "outline",
@@ -601,14 +604,14 @@ const ft = "_wuContentEditor_1kxiu_8", pt = "_wuContentEditorTable_1kxiu_1", wt
     {
       onClick: l,
       className: a.wuContentEditorAction,
-      children: /* @__PURE__ */ e(h, { icon: "wm-table" })
+      children: /* @__PURE__ */ e(f, { icon: "wm-table" })
     }
   );
-}, Bt = () => {
-  const { editor: t, customFonts: n } = g(), o = p({
+}, Pt = () => {
+  const { editor: t, customFonts: o } = g(), n = p({
     editor: t,
-    selector: (d) => ({
-      currentFontFamily: d.editor.getAttributes("textStyle").fontFamily || ""
+    selector: (u) => ({
+      currentFontFamily: u.editor.getAttributes("textStyle").fontFamily || ""
     })
   }), i = [
     "Fira Sans",
@@ -616,55 +619,55 @@ const ft = "_wuContentEditor_1kxiu_8", pt = "_wuContentEditorTable_1kxiu_1", wt
     "Poppins",
     "JetBrains Mono",
     "Montserrat",
-    ...n || []
-  ], [r, l] = D(
-    o.currentFontFamily || i[0]
+    ...o || []
+  ], [s, l] = I(
+    n.currentFontFamily || i[0]
   );
-  return m.useEffect(() => {
-    var d;
+  return h.useEffect(() => {
+    var u;
     l(
-      ((d = o.currentFontFamily) == null ? void 0 : d.replace(/"/g, "")) || i[0]
+      ((u = n.currentFontFamily) == null ? void 0 : u.replace(/"/g, "")) || i[0]
     );
-  }, [o.currentFontFamily]), /* @__PURE__ */ f(U, { children: [
+  }, [n.currentFontFamily]), /* @__PURE__ */ v(j, { children: [
     /* @__PURE__ */ e(
       $,
       {
         className: a.wuContentEditorAction,
-        "data-active": r !== "Fira Sans",
-        style: { fontFamily: r },
-        title: r || "Font Family",
-        children: r == null ? void 0 : r[0]
+        "data-active": s !== "Fira Sans",
+        style: { fontFamily: s },
+        title: s || "Font Family",
+        children: s == null ? void 0 : s[0]
       }
     ),
     /* @__PURE__ */ e(
-      j,
+      K,
       {
         align: "start",
         className: a.wuContentEditorDropdown,
         "data-block": !0,
-        onCloseAutoFocus: (d) => d.preventDefault(),
-        children: i.map((d) => /* @__PURE__ */ e(
-          K,
+        onCloseAutoFocus: (u) => u.preventDefault(),
+        children: i.map((u) => /* @__PURE__ */ e(
+          U,
           {
-            title: d,
+            title: u,
             className: a.wuContentEditorDropdownItem,
             onSelect: () => {
-              t.chain().focus().setFontFamily(d).run(), l(d);
+              t.chain().focus().setFontFamily(u).run(), l(u);
             },
-            children: d
+            children: u
           },
-          d
+          u
         ))
       }
     )
   ] });
-}, Ot = () => {
-  const { editor: t } = g(), n = p({
+}, Wt = () => {
+  const { editor: t } = g(), o = p({
     editor: t,
-    selector: (o) => {
+    selector: (n) => {
       var i;
       return {
-        italic: (i = o.editor) == null ? void 0 : i.isActive("italic")
+        italic: (i = n.editor) == null ? void 0 : i.isActive("italic")
       };
     }
   });
@@ -673,83 +676,83 @@ const ft = "_wuContentEditor_1kxiu_8", pt = "_wuContentEditorTable_1kxiu_1", wt
     {
       title: "Italic",
       className: a.wuContentEditorAction,
-      "data-active": n.italic,
-      onClick: (o) => {
-        o.preventDefault(), t.chain().focus().toggleItalic().run();
+      "data-active": o.italic,
+      onClick: (n) => {
+        n.preventDefault(), t.chain().focus().toggleItalic().run();
       },
-      children: /* @__PURE__ */ e(h, { icon: "wm-format-italic" })
+      children: /* @__PURE__ */ e(f, { icon: "wm-format-italic" })
     }
   );
-}, Wt = () => {
-  const { editor: t } = g(), n = p({
+}, qt = () => {
+  const { editor: t } = g(), o = p({
     editor: t,
     selector: (i) => {
-      var r, l, d, c, s, u;
+      var s, l, u, c, r, d;
       return {
-        isUl: (r = i.editor) == null ? void 0 : r.isActive("bulletList"),
+        isUl: (s = i.editor) == null ? void 0 : s.isActive("bulletList"),
         isOl: (l = i.editor) == null ? void 0 : l.isActive("orderedList"),
-        isTodo: (d = i.editor) == null ? void 0 : d.isActive("taskList"),
-        isList: ((c = i.editor) == null ? void 0 : c.isActive("bulletList")) || ((s = i.editor) == null ? void 0 : s.isActive("orderedList")) || ((u = i.editor) == null ? void 0 : u.isActive("taskList"))
+        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"))
       };
     }
-  }), o = [
+  }), 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__ */ e(
-    P,
+    M,
     {
       action: {
         id: "style",
-        active: n.isList,
+        active: o.isList,
         icon: "wm-format-paragraph",
-        items: o
+        items: n
       }
     }
   );
-}, qt = ["e", "E", "+", "-"], W = 1, Ut = () => {
-  const { editor: t } = g(), [n, o] = D(16), i = p({
+}, jt = ["e", "E", "+", "-"], P = 1, $t = () => {
+  const { editor: t } = g(), [o, n] = I(16), i = p({
     editor: t,
     selector: (c) => ({
       fontSize: c.editor.getAttributes("textStyle").fontSize
     })
-  }), r = (c) => {
+  }), s = (c) => {
     t.chain().focus().setFontSize(c + "px").run();
   }, l = (c) => {
-    const s = Math.max(W, c);
-    o(s), r(s);
-  }, d = (c) => {
-    qt.includes(c.key) ? c.preventDefault() : c.key === "Enter" && r(n);
+    const r = Math.max(P, c);
+    n(r), s(r);
+  }, u = (c) => {
+    jt.includes(c.key) ? c.preventDefault() : c.key === "Enter" && s(o);
   };
-  return m.useEffect(() => {
+  return h.useEffect(() => {
     var c;
-    o(Number((c = i.fontSize) == null ? void 0 : c.replace("px", "")) || 16);
-  }, [i.fontSize]), /* @__PURE__ */ f("div", { className: a.wuContentEditorFontSize, children: [
+    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: a.wuContentEditorAction,
-        onClick: () => l(n - 1),
-        disabled: n <= W,
+        onClick: () => l(o - 1),
+        disabled: o <= P,
         children: "−"
       }
     ),
@@ -759,29 +762,29 @@ const ft = "_wuContentEditor_1kxiu_8", pt = "_wuContentEditorTable_1kxiu_1", wt
         type: "number",
         inputMode: "numeric",
         pattern: "[0-9]*",
-        value: n,
-        onKeyDown: d,
-        onChange: (c) => o(c.target.valueAsNumber),
-        onBlur: () => r(n)
+        value: o,
+        onKeyDown: u,
+        onChange: (c) => n(c.target.valueAsNumber),
+        onBlur: () => s(o)
       }
     ),
     /* @__PURE__ */ e(
       "button",
       {
         className: a.wuContentEditorAction,
-        onClick: () => l(n + 1),
-        disabled: n >= 128,
+        onClick: () => l(o + 1),
+        disabled: o >= 128,
         children: "+"
       }
     )
   ] });
-}, $t = () => {
-  const { editor: t } = g(), n = p({
+}, Kt = () => {
+  const { editor: t } = g(), o = p({
     editor: t,
-    selector: (o) => {
+    selector: (n) => {
       var i;
       return {
-        strikethrough: (i = o.editor) == null ? void 0 : i.isActive("strike")
+        strikethrough: (i = n.editor) == null ? void 0 : i.isActive("strike")
       };
     }
   });
@@ -790,20 +793,20 @@ const ft = "_wuContentEditor_1kxiu_8", pt = "_wuContentEditorTable_1kxiu_1", wt
     {
       title: "strikethrough",
       className: a.wuContentEditorAction,
-      "data-active": n.strikethrough,
-      onClick: (o) => {
-        o.preventDefault(), t.chain().focus().toggleStrike().run();
+      "data-active": o.strikethrough,
+      onClick: (n) => {
+        n.preventDefault(), t.chain().focus().toggleStrike().run();
       },
-      children: /* @__PURE__ */ e(h, { icon: "wm-format-strikethrough" })
+      children: /* @__PURE__ */ e(f, { icon: "wm-format-strikethrough" })
     }
   );
-}, jt = () => {
-  const { editor: t } = g(), n = p({
+}, Ut = () => {
+  const { editor: t } = g(), o = p({
     editor: t,
-    selector: (o) => {
+    selector: (n) => {
       var i;
       return {
-        subscript: (i = o.editor) == null ? void 0 : i.isActive("subscript")
+        subscript: (i = n.editor) == null ? void 0 : i.isActive("subscript")
       };
     }
   });
@@ -812,20 +815,20 @@ const ft = "_wuContentEditor_1kxiu_8", pt = "_wuContentEditorTable_1kxiu_1", wt
     {
       title: "Subscript",
       className: a.wuContentEditorAction,
-      "data-active": n.subscript,
-      onClick: (o) => {
-        o.preventDefault(), t.chain().focus().toggleSubscript().run();
+      "data-active": o.subscript,
+      onClick: (n) => {
+        n.preventDefault(), t.chain().focus().toggleSubscript().run();
       },
-      children: /* @__PURE__ */ e(h, { icon: "wm-subscript" })
+      children: /* @__PURE__ */ e(f, { icon: "wm-subscript" })
     }
   );
-}, Kt = () => {
-  const { editor: t } = g(), n = p({
+}, Jt = () => {
+  const { editor: t } = g(), o = p({
     editor: t,
-    selector: (o) => {
+    selector: (n) => {
       var i;
       return {
-        superscript: (i = o.editor) == null ? void 0 : i.isActive("superscript")
+        superscript: (i = n.editor) == null ? void 0 : i.isActive("superscript")
       };
     }
   });
@@ -834,21 +837,21 @@ const ft = "_wuContentEditor_1kxiu_8", pt = "_wuContentEditorTable_1kxiu_1", wt
     {
       title: "Superscript",
       className: a.wuContentEditorAction,
-      "data-active": n.superscript,
-      onClick: (o) => {
-        o.preventDefault(), t.chain().focus().toggleSuperscript().run();
+      "data-active": o.superscript,
+      onClick: (n) => {
+        n.preventDefault(), t.chain().focus().toggleSuperscript().run();
       },
-      children: /* @__PURE__ */ e(h, { icon: "wm-superscript" })
+      children: /* @__PURE__ */ e(f, { icon: "wm-superscript" })
     }
   );
-}, Jt = () => {
-  const { editor: t } = g(), n = p({
+}, Gt = () => {
+  const { editor: t } = g(), o = p({
     editor: t,
-    selector: ({ editor: o }) => ({
-      textColor: o.getAttributes("textStyle").color
+    selector: ({ editor: n }) => ({
+      textColor: n.getAttributes("textStyle").color
     })
   });
-  return /* @__PURE__ */ f(
+  return /* @__PURE__ */ v(
     "label",
     {
       className: a.wuContentEditorAction,
@@ -856,11 +859,11 @@ const ft = "_wuContentEditor_1kxiu_8", pt = "_wuContentEditorTable_1kxiu_1", wt
       title: "Text Color",
       children: [
         /* @__PURE__ */ e(
-          h,
+          f,
           {
             icon: "wm-format-color-text",
             className: a.bgColorCursorPointer,
-            style: { color: n.textColor }
+            style: { color: o.textColor }
           }
         ),
         /* @__PURE__ */ e(
@@ -870,19 +873,19 @@ const ft = "_wuContentEditor_1kxiu_8", pt = "_wuContentEditorTable_1kxiu_1", wt
             className: a.bgColorHiddenInput,
             id: "text-color",
             defaultValue: "#545E6B",
-            onChange: (o) => t.chain().focus().setColor(o.target.value).run()
+            onChange: (n) => t.chain().focus().setColor(n.target.value).run()
           }
         )
       ]
     }
   );
-}, Gt = () => {
-  const { editor: t } = g(), n = p({
+}, Vt = () => {
+  const { editor: t } = g(), o = p({
     editor: t,
-    selector: (o) => {
+    selector: (n) => {
       var i;
       return {
-        underline: (i = o.editor) == null ? void 0 : i.isActive("underline")
+        underline: (i = n.editor) == null ? void 0 : i.isActive("underline")
       };
     }
   });
@@ -891,33 +894,49 @@ const ft = "_wuContentEditor_1kxiu_8", pt = "_wuContentEditorTable_1kxiu_1", wt
     {
       title: "Underline",
       className: a.wuContentEditorAction,
-      "data-active": n.underline,
-      onClick: (o) => {
-        o.preventDefault(), t.chain().focus().toggleUnderline().run();
+      "data-active": o.underline,
+      onClick: (n) => {
+        n.preventDefault(), t.chain().focus().toggleUnderline().run();
+      },
+      children: /* @__PURE__ */ e(f, { icon: "wm-format-underlined" })
+    }
+  );
+};
+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(h, { icon: "wm-format-underlined" })
+      children: /* @__PURE__ */ e(f, { icon: "wm-html" })
     }
   );
-}, Vt = {
-  block: /* @__PURE__ */ e(_t, {}),
-  fontFamily: /* @__PURE__ */ e(Bt, {}),
-  fontSize: /* @__PURE__ */ e(Ut, {}),
-  bold: /* @__PURE__ */ e(Dt, {}),
-  italic: /* @__PURE__ */ e(Ot, {}),
-  underline: /* @__PURE__ */ e(Gt, {}),
-  strike: /* @__PURE__ */ e($t, {}),
-  color: /* @__PURE__ */ e(Jt, {}),
+}
+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(Wt, {}),
-  alignment: /* @__PURE__ */ e(Lt, {}),
+  list: /* @__PURE__ */ e(qt, {}),
+  alignment: /* @__PURE__ */ e(_t, {}),
   image: /* @__PURE__ */ e(Mt, {}),
-  link: /* @__PURE__ */ e(zt, {}),
-  table: /* @__PURE__ */ e(Pt, {}),
-  blockquote: /* @__PURE__ */ e(It, {}),
-  superscript: /* @__PURE__ */ e(Kt, {}),
-  subscript: /* @__PURE__ */ e(jt, {}),
+  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(Ht, {}),
+  clear: /* @__PURE__ */ e(zt, {}),
   // eslint-disable-next-line @typescript-eslint/naming-convention
   "|": /* @__PURE__ */ e(
     "div",
@@ -928,8 +947,9 @@ const ft = "_wuContentEditor_1kxiu_8", pt = "_wuContentEditorTable_1kxiu_1", wt
         background: "rgb(var(--wu-gray-40))"
       }
     }
-  )
-}, Xt = [
+  ),
+  html: /* @__PURE__ */ e(Xt, {})
+}, Yt = [
   "block",
   "fontFamily",
   "|",
@@ -955,15 +975,33 @@ const ft = "_wuContentEditor_1kxiu_8", pt = "_wuContentEditorTable_1kxiu_1", wt
   "subscript",
   "codeline",
   "|",
+  "html",
   "clear"
-], Yt = (t) => {
-  const { editor: n, customFonts: o, children: i, items: r = Xt, ...l } = t;
-  return /* @__PURE__ */ e("div", { ...l, children: /* @__PURE__ */ f(Ft, { editor: n, customFonts: o, children: [
-    r.map((d, c) => /* @__PURE__ */ e(y, { children: Vt[d] }, d + c)),
-    i
-  ] }) });
-}, B = gt();
-B.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",
@@ -1015,179 +1053,176 @@ B.setConfig({
   ],
   ALLOW_DATA_ATTR: !0
 });
-B.addHook("uponSanitizeAttribute", (t, n) => {
-  if (n.attrName === "style") {
-    const o = n.attrValue.toLowerCase();
-    (o.includes("expression") || o.includes("javascript:") || o.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 I(t) {
-  return t ? B.sanitize(t) : "";
+function S(t) {
+  return t ? O.sanitize(t) : "";
 }
-let _ = null;
-function Zt() {
-  return _ || (_ = import("shiki").then(
+let N = null;
+function Qt() {
+  return N || (N = import("shiki").then(
     ({ createHighlighter: t }) => t({
       themes: ["github-light"],
       langs: ["html"]
     })
-  )), _;
+  )), N;
 }
-function Qt({
+function te({
   defaultValue: t,
-  onUpdate: n,
-  readonly: o
+  onUpdate: o,
+  readonly: n
 }) {
-  const [i, r] = m.useState(t || ""), [l, d] = m.useState(""), [c, s] = m.useState(!1), [u, w] = m.useState(!1), v = m.useRef(!1), A = m.useCallback(
-    async (b) => {
+  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: C }, { default: k }] = await Promise.all([
-          import("../../standalone-BhI0QomE.js"),
-          import("../../html-Nh3KtWcE.js")
-        ]), N = await C(b, {
+        const [{ format: m }, { default: T }] = await Promise.all([
+          import("../../standalone-uA6N_bR1.js"),
+          import("../../html-asrO2y6j.js")
+        ]), _ = await m(C, {
           parser: "html",
-          plugins: [k],
+          plugins: [T],
           htmlWhitespaceSensitivity: "css",
           printWidth: 80
         });
-        return s(!1), N;
-      } catch (C) {
-        return console.error("Format error:", C), s(!0), b;
+        return r(!1), _;
+      } catch (m) {
+        return console.error("Format error:", m), r(!0), C;
       }
     },
     []
-  ), E = m.useCallback((b) => {
-    Zt().then((C) => {
-      const k = C.codeToHtml(b || " ", {
+  ), y = h.useCallback((C) => {
+    Qt().then((m) => {
+      const T = m.codeToHtml(C || " ", {
         lang: "html",
         theme: "github-light"
       });
-      d(k);
-    }).catch((C) => console.error("Highlight error:", C));
+      u(T);
+    }).catch((m) => console.error("Highlight error:", m));
   }, []);
-  m.useEffect(() => {
-    E(i), n && n(I(i));
-  }, [i, E, n]), m.useEffect(() => {
-    v.current || !t || (v.current = !0, A(t).then(r));
+  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 S = async (b) => {
-    b.preventDefault(), w(!0);
-    const C = await A(i);
-    r(C), w(!1);
-  }, F = async (b) => {
-    b.preventDefault(), w(!0);
-    const C = await A(i);
-    r(C), w(!1), n && n(C);
-  }, L = (b) => {
-    if (b.key === "Tab") {
-      b.preventDefault();
-      const C = b.currentTarget, k = C.selectionStart, N = C.selectionEnd, G = i.substring(0, k) + "  " + i.substring(N);
-      r(G), requestAnimationFrame(() => {
-        C.selectionStart = k + 2, C.selectionEnd = k + 2;
+  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__ */ f(y, { children: [
-    /* @__PURE__ */ f("div", { className: a.wuContentEditorToolbar, "data-position": "top", children: [
-      /* @__PURE__ */ e(
-        "button",
-        {
-          title: "Format Code",
-          className: a.wuContentEditorAction,
-          onClick: S,
-          disabled: u,
-          children: /* @__PURE__ */ e(h, { icon: "wm-ads-click" })
-        }
-      ),
-      c && /* @__PURE__ */ e("span", { style: { color: "red" }, children: "Invalid HTML code. Please check" }),
-      /* @__PURE__ */ e(q, { style: { marginLeft: "auto" }, onClick: F, children: "Save" })
-    ] }),
-    u ? /* @__PURE__ */ e(y, { children: "Formatting..." }) : /* @__PURE__ */ e("div", { className: a.wuContentEditor, children: /* @__PURE__ */ f("div", { className: a.wuCodeEditor, children: [
-      /* @__PURE__ */ e(
-        "div",
-        {
-          dangerouslySetInnerHTML: { __html: l },
-          className: a.wuCodeEditorPreview
-        }
-      ),
-      /* @__PURE__ */ e(
-        "textarea",
-        {
-          value: i,
-          onChange: (b) => r(b.target.value),
-          onKeyDown: L,
-          className: a.wuCodeEditorInput,
-          disabled: o
-        }
-      )
-    ] }) })
-  ] });
+  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 fe({
+function pe({
   defaultValue: t,
-  onUpdate: n,
-  className: o,
+  onUpdate: o,
+  className: n,
   toolbarPosition: i = "top",
-  customToolbarChildren: r,
+  customToolbarChildren: s,
   toolbarItems: l,
-  hideToolbar: d,
+  hideToolbar: u,
   readonly: c,
-  customFonts: s,
-  isHtml: u,
-  ...w
+  customFonts: r,
+  isHtml: d,
+  setIsHtml: w,
+  ...k
 }) {
-  const v = V({
+  const [A, y] = h.useState(d ?? !1), E = h.useRef(t || ""), b = V({
     editable: !c,
-    extensions: St,
-    content: I(t || ""),
-    onUpdate: ({ editor: A }) => {
-      n && n(I(A.getHTML()));
+    extensions: Ft,
+    content: S(t || ""),
+    onUpdate: ({ editor: m }) => {
+      o && o(S(m.getHTML()));
     }
-  });
-  return /* @__PURE__ */ e(
+  }), 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: Y(a.wuContentEditorContainer, o),
+      className: Y(a.wuContentEditorContainer, n),
       "data-position": i,
       "data-slot": "wu-content-editor-container",
       onClick: () => {
-        v == null || v.chain().focus().run();
+        A || b == null || b.chain().focus().run();
       },
-      ...w,
-      children: u ? /* @__PURE__ */ e(
-        Qt,
-        {
-          defaultValue: t,
-          onUpdate: n,
-          "data-position": i,
-          "data-slot": "wu-content-editor-toolbar",
-          readonly: c
-        }
-      ) : /* @__PURE__ */ f(y, { children: [
-        !d && /* @__PURE__ */ e(
-          Yt,
+      ...k,
+      children: [
+        !u && /* @__PURE__ */ e(
+          Zt,
           {
-            editor: v,
-            customFonts: s,
+            editor: b,
+            customFonts: r,
             className: a.wuContentEditorToolbar,
             items: l,
+            isHtml: A,
+            setIsHtml: C,
             "data-slot": "wu-content-editor-toolbar",
             "data-position": i,
-            children: r
+            children: s
           }
         ),
-        /* @__PURE__ */ e(
+        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: v,
+            editor: b,
             className: a.wuContentEditor,
             "data-slot": "wu-content-editor"
           }
         )
-      ] })
+      ]
     }
   );
 }
 export {
-  fe as WuContentEditor
+  pe as WuContentEditor
 };