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

package/README.md

@@ -1,6 +1,7 @@
 # @npm-questionpro/wick-ui-editor
 
-A rich text editor component built with React and TipTap. Part of the Wick UI design system.
+A rich text editor component built with React and TipTap. Part of the Wick UI
+design system.
 
 [![npm version](https://img.shields.io/npm/v/@npm-questionpro/wick-ui-editor.svg)](https://www.npmjs.com/package/@npm-questionpro/wick-ui-editor)
 [![License: ISC](https://img.shields.io/badge/License-ISC-blue.svg)](https://opensource.org/licenses/ISC)
@@ -37,22 +38,23 @@ function App() {
 
 ## Props
 
-| Prop | Type | Default | Description |
-| ---- | ---- | ------- | ----------- |
-| `defaultValue` | `string` | `undefined` | Initial HTML content (auto-sanitized) |
-| `onUpdate` | `(html: string) => void` | `undefined` | Fires when content changes |
-| `readonly` | `boolean` | `false` | Disable editing |
-| `renderHtml` | `boolean` | `false` | Render raw HTML in read-only mode |
-| `toolbarPosition` | `'top' \| 'bottom'` | `'top'` | Toolbar placement |
-| `toolbarItems` | `IToolbarExtensionKey[]` | all | Toolbar buttons to show |
-| `hideToolbar` | `boolean` | `false` | Hide the toolbar |
-| `customFonts` | `string[]` | `undefined` | Extra font families in font picker |
-| `customToolbarChildren` | `ReactNode` | `undefined` | Custom elements appended to toolbar |
-| `className` | `string` | `undefined` | Class on the root container |
+| Prop                    | Type                     | Default     | Description                           |
+| ----------------------- | ------------------------ | ----------- | ------------------------------------- |
+| `defaultValue`          | `string`                 | `undefined` | Initial HTML content (auto-sanitized) |
+| `onUpdate`              | `(html: string) => void` | `undefined` | Fires when content changes            |
+| `readonly`              | `boolean`                | `false`     | Disable editing                       |
+| `renderHtml`            | `boolean`                | `false`     | Render raw HTML in read-only mode     |
+| `toolbarPosition`       | `'top' \| 'bottom'`      | `'top'`     | Toolbar placement                     |
+| `toolbarItems`          | `IToolbarExtensionKey[]` | all         | Toolbar buttons to show               |
+| `hideToolbar`           | `boolean`                | `false`     | Hide the toolbar                      |
+| `customFonts`           | `string[]`               | `undefined` | Extra font families in font picker    |
+| `customToolbarChildren` | `ReactNode`              | `undefined` | Custom elements appended to toolbar   |
+| `className`             | `string`                 | `undefined` | Class on the root container           |
 
 ## Documentation
 
-Full documentation and interactive examples: [wick-ui-lib.pages.dev](https://wick-ui-lib.pages.dev)
+Full documentation and interactive examples:
+[wick-ui-lib.pages.dev](https://wick-ui-lib.pages.dev)
 
 ## License
 

package/dist/index.d.ts

@@ -7,12 +7,12 @@ export declare interface IWuContentEditorProps extends default_2.HTMLAttributes<
     defaultValue?: string;
     onUpdate?: (content: string) => void;
     customFonts?: string[];
-    readonly?: boolean;
     toolbarPosition?: 'top' | 'bottom';
     customToolbarChildren?: default_2.ReactNode;
     toolbarItems?: IToolbarExtensionKey[];
     hideToolbar?: boolean;
-    renderHtml?: boolean;
+    readonly?: boolean;
+    renderDefaultOnly?: boolean;
 }
 
 declare const TOOLBAR_EXTENSIONS: {
@@ -38,6 +38,6 @@ declare const TOOLBAR_EXTENSIONS: {
     '|': JSX.Element;
 };
 
-export declare function WuContentEditor({ defaultValue, onUpdate, className, readonly, toolbarPosition, customToolbarChildren, toolbarItems, hideToolbar, renderHtml, customFonts, ...props }: IWuContentEditorProps): default_2.JSX.Element;
+export declare function WuContentEditor({ defaultValue, onUpdate, className, toolbarPosition, customToolbarChildren, toolbarItems, hideToolbar, readonly, customFonts, renderDefaultOnly, ...props }: IWuContentEditorProps): default_2.JSX.Element;
 
 export { }

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

@@ -1,30 +1,30 @@
-import { jsx as o, jsxs as p, Fragment as _ } from "react/jsx-runtime";
-import { useEditorState as g, useEditor as U, EditorContent as q } from "@tiptap/react";
-import F from "clsx";
-import C, { useState as E, useRef as $, useCallback as N } from "react";
-import j from "@tiptap/extension-image";
-import { TaskList as K, TaskItem as J } from "@tiptap/extension-list";
+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 V from "@tiptap/extension-superscript";
-import { TableKit as X } from "@tiptap/extension-table";
-import Y from "@tiptap/extension-text-align";
-import { TextStyle as Z, Color as Q, BackgroundColor as tt, LineHeight as et, FontSize as ot, FontFamily as nt } from "@tiptap/extension-text-style";
-import it 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 A, WuToggle as rt, WuButton as st } from "@npm-questionpro/wick-ui-lib";
-import { DropdownMenu as R, DropdownMenuTrigger as M, DropdownMenuContent as z, DropdownMenuItem as H } from "@radix-ui/react-dropdown-menu";
-import ct from "dompurify";
-const lt = "_wuContentEditor_399u0_8", at = "_wuContentEditorTable_399u0_1", dt = "_wuContentEditorContainer_399u0_8", ut = "_wuContentEditorToolbar_399u0_80", mt = "_wuContentEditorAction_399u0_106", ht = "_wuContentEditorDropdown_399u0_132", gt = "_wuContentEditorDropdownItem_399u0_145", pt = "_wuContentEditorFontSize_399u0_156", ft = "_wuContentEditorModal_399u0_170", d = {
-  wuContentEditor: lt,
-  wuContentEditorTable: at,
-  wuContentEditorContainer: dt,
-  wuContentEditorToolbar: ut,
-  wuContentEditorAction: mt,
-  wuContentEditorDropdown: ht,
+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: ft
-}, wt = [
-  it.configure({
+  wuContentEditorModal: wt
+}, Ct = [
+  rt.configure({
     link: {
       openOnClick: !1,
       autolink: !0,
@@ -35,16 +35,16 @@ const lt = "_wuContentEditor_399u0_8", at = "_wuContentEditorTable_399u0_1", dt
           const e = t.includes(":") ? new URL(t) : new URL(`${n.defaultProtocol}://${t}`);
           if (!n.defaultValidate(e.href))
             return !1;
-          const i = ["ftp", "file", "mailto"], s = e.protocol.replace(":", "");
-          if (i.includes(s) || !n.protocols.map(
+          const i = ["ftp", "file", "mailto"], l = e.protocol.replace(":", "");
+          if (i.includes(l) || !n.protocols.map(
             (r) => typeof r == "string" ? r : r.scheme
-          ).includes(s))
+          ).includes(l))
             return !1;
           const a = [
             "example-phishing.com",
             "malicious-site.net"
-          ], c = e.hostname;
-          return !a.includes(c);
+          ], s = e.hostname;
+          return !a.includes(s);
         } catch {
           return !1;
         }
@@ -62,52 +62,52 @@ const lt = "_wuContentEditor_399u0_8", at = "_wuContentEditorTable_399u0_1", dt
       }
     }
   }),
-  Y.configure({
+  Z.configure({
     types: ["heading", "paragraph"]
   }),
-  V,
+  X,
   G,
-  Z,
   Q,
   tt,
-  K,
-  J,
   et,
+  J,
+  V,
   ot,
   nt,
-  j.configure({
+  it,
+  K.configure({
     resize: {
       enabled: !0,
       alwaysPreserveAspectRatio: !0
     },
     inline: !0
   }),
-  X.configure({
+  Y.configure({
     table: { resizable: !0 }
   })
-], B = C.createContext(
+], O = C.createContext(
   null
-), Ct = ({
+), vt = ({
   editor: t,
   children: n,
   customFonts: e
-}) => /* @__PURE__ */ o(B.Provider, { value: { editor: t, customFonts: e }, children: n }), m = () => {
-  const t = C.useContext(B);
+}) => /* @__PURE__ */ o(O.Provider, { value: { editor: t, customFonts: e }, children: n }), m = () => {
+  const t = C.useContext(O);
   if (!t)
     throw new Error("useToolbar must be used within a ToolbarProvider");
   return t;
 }, L = ({ action: t, defaultValue: n }) => {
-  var s;
+  var l;
   const [e, i] = C.useState(
-    n || t.items.find((l) => l.active) || t.items[0]
+    n || t.items.find((c) => c.active) || t.items[0]
   );
   return C.useEffect(() => {
     i(
-      n || t.items.find((l) => l.active) || t.items[0]
+      n || t.items.find((c) => c.active) || t.items[0]
     );
-  }, [t, n]), /* @__PURE__ */ p(R, { children: [
+  }, [t, n]), /* @__PURE__ */ g(M, { children: [
     /* @__PURE__ */ o(
-      M,
+      H,
       {
         className: d.wuContentEditorAction,
         "data-active": t.active,
@@ -118,41 +118,41 @@ const lt = "_wuContentEditor_399u0_8", at = "_wuContentEditorTable_399u0_1", dt
       z,
       {
         align: "start",
-        onCloseAutoFocus: (l) => l.preventDefault(),
+        onCloseAutoFocus: (c) => c.preventDefault(),
         className: d.wuContentEditorDropdown,
         "data-inline": !0,
-        children: (s = t.items) == null ? void 0 : s.map((l) => /* @__PURE__ */ o(
-          H,
+        children: (l = t.items) == null ? void 0 : l.map((c) => /* @__PURE__ */ o(
+          B,
           {
             onClick: () => {
-              l.event(), i(l);
+              c.event(), i(c);
             },
-            title: l.tooltip,
+            title: c.tooltip,
             children: /* @__PURE__ */ o(
               "button",
               {
                 className: d.wuContentEditorAction,
-                "data-active": l.active,
-                children: /* @__PURE__ */ o(h, { icon: l.icon })
+                "data-active": c.active,
+                children: /* @__PURE__ */ o(h, { icon: c.icon })
               }
             )
           },
-          l.id
+          c.id
         ))
       }
     )
   ] });
-}, vt = () => {
-  const { editor: t } = m(), n = g({
+}, bt = () => {
+  const { editor: t } = m(), n = f({
     editor: t,
     selector: (i) => {
-      var s, l, a, c, r, u, w;
+      var l, c, a, s, r, u, p;
       return {
-        isLeft: (s = i.editor) == null ? void 0 : s.isActive({ textAlign: "left" }),
-        isCenter: (l = i.editor) == null ? void 0 : l.isActive({ textAlign: "center" }),
+        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: (c = i.editor) == null ? void 0 : c.isActive({ textAlign: "justify" }),
-        isAligned: ((r = i.editor) == null ? void 0 : r.isActive({ textAlign: "center" })) || ((u = i.editor) == null ? void 0 : u.isActive({ textAlign: "right" })) || ((w = i.editor) == null ? void 0 : w.isActive({ textAlign: "justify" }))
+        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" }))
       };
     }
   }), e = [
@@ -196,14 +196,14 @@ const lt = "_wuContentEditor_399u0_8", at = "_wuContentEditorTable_399u0_1", dt
       }
     }
   );
-}, bt = () => {
-  const { editor: t } = m(), n = g({
+}, At = () => {
+  const { editor: t } = m(), n = f({
     editor: t,
     selector: ({ editor: e }) => ({
       bgColor: e.getAttributes("textStyle").backgroundColor
     })
   });
-  return /* @__PURE__ */ p(
+  return /* @__PURE__ */ g(
     "label",
     {
       className: d.wuContentEditorAction,
@@ -224,16 +224,16 @@ const lt = "_wuContentEditor_399u0_8", at = "_wuContentEditorTable_399u0_1", dt
       ]
     }
   );
-}, At = () => {
-  const { editor: t } = m(), n = g({
+}, kt = () => {
+  const { editor: t } = m(), n = f({
     editor: t,
     selector: (i) => {
-      var s, l, a, c, r, u;
+      var l, c, a, s, r, u;
       return {
-        isParagraph: (s = i.editor) == null ? void 0 : s.isActive("paragraph"),
-        isH1: (l = i.editor) == null ? void 0 : l.isActive("heading", { level: 1 }),
+        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: (c = i.editor) == null ? void 0 : c.isActive("heading", { level: 3 }),
+        isH3: (s = i.editor) == null ? void 0 : s.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")
       };
@@ -282,8 +282,8 @@ const lt = "_wuContentEditor_399u0_8", at = "_wuContentEditorTable_399u0_1", dt
       defaultValue: e.find((i) => i.active)
     }
   );
-}, kt = () => {
-  const { editor: t } = m(), n = g({
+}, Et = () => {
+  const { editor: t } = m(), n = f({
     editor: t,
     selector: (e) => {
       var i;
@@ -304,8 +304,8 @@ const lt = "_wuContentEditor_399u0_8", at = "_wuContentEditorTable_399u0_1", dt
       children: /* @__PURE__ */ o(h, { icon: "wm-format-quote" })
     }
   );
-}, Et = () => {
-  const { editor: t } = m(), n = g({
+}, yt = () => {
+  const { editor: t } = m(), n = f({
     editor: t,
     selector: (e) => {
       var i;
@@ -326,9 +326,9 @@ const lt = "_wuContentEditor_399u0_8", at = "_wuContentEditorTable_399u0_1", dt
       children: /* @__PURE__ */ o(h, { icon: "wm-format-bold" })
     }
   );
-}, yt = () => {
+}, Tt = () => {
   const { editor: t } = m();
-  return /* @__PURE__ */ o(_, { children: [
+  return /* @__PURE__ */ o(R, { children: [
     {
       id: "clear",
       icon: "wm-format-clear",
@@ -347,8 +347,8 @@ const lt = "_wuContentEditor_399u0_8", at = "_wuContentEditorTable_399u0_1", dt
     },
     e.id
   )) });
-}, Tt = () => {
-  const { editor: t } = m(), n = g({
+}, St = () => {
+  const { editor: t } = m(), n = f({
     editor: t,
     selector: (e) => ({
       code: e.editor.isActive("code")
@@ -366,20 +366,20 @@ const lt = "_wuContentEditor_399u0_8", at = "_wuContentEditorTable_399u0_1", dt
       children: /* @__PURE__ */ o(h, { icon: "wm-code" })
     }
   );
-}, St = () => {
-  const { editor: t } = m(), n = g({
+}, xt = () => {
+  const { editor: t } = m(), n = f({
     editor: t,
-    selector: (c) => {
+    selector: (s) => {
       var r, u;
       return {
-        isImage: (r = c.editor) == null ? void 0 : r.isActive("image"),
-        imageAttrs: (u = c.editor) == null ? void 0 : u.getAttributes("image")
+        isImage: (r = s.editor) == null ? void 0 : r.isActive("image"),
+        imageAttrs: (u = s.editor) == null ? void 0 : u.getAttributes("image")
       };
     }
-  }), [e, i] = C.useState(n.imageAttrs.src || ""), [s, l] = C.useState(n.imageAttrs.alt || ""), a = () => {
-    t.chain().focus().setImage({ src: e, alt: s }).run();
+  }), [e, i] = C.useState(n.imageAttrs.src || ""), [l, c] = C.useState(n.imageAttrs.alt || ""), a = () => {
+    t.chain().focus().setImage({ src: e, alt: l }).run();
   };
-  return /* @__PURE__ */ p(
+  return /* @__PURE__ */ g(
     y,
     {
       Trigger: /* @__PURE__ */ o(
@@ -393,14 +393,14 @@ const lt = "_wuContentEditor_399u0_8", at = "_wuContentEditorTable_399u0_1", dt
       maxWidth: "400px",
       children: [
         /* @__PURE__ */ o(T, { style: { display: "none" } }),
-        /* @__PURE__ */ p(S, { className: d.wuContentEditorModal, children: [
+        /* @__PURE__ */ g(S, { className: d.wuContentEditorModal, children: [
           /* @__PURE__ */ o(
             k,
             {
               Label: "Image URL",
               type: "url",
               value: e,
-              onChange: (c) => i(c.target.value),
+              onChange: (s) => i(s.target.value),
               required: !0
             }
           ),
@@ -409,45 +409,45 @@ const lt = "_wuContentEditor_399u0_8", at = "_wuContentEditorTable_399u0_1", dt
             {
               Label: "Alt Text",
               type: "text",
-              value: s,
-              onChange: (c) => l(c.target.value)
+              value: l,
+              onChange: (s) => c(s.target.value)
             }
           )
         ] }),
-        /* @__PURE__ */ p(x, { children: [
-          /* @__PURE__ */ o(A, { variant: "secondary", children: "Cancel" }),
-          /* @__PURE__ */ o(A, { onClick: a, disabled: !e, children: "Save" })
+        /* @__PURE__ */ g(x, { children: [
+          /* @__PURE__ */ o(b, { variant: "secondary", children: "Cancel" }),
+          /* @__PURE__ */ o(b, { onClick: a, disabled: !e, children: "Save" })
         ] })
       ]
     }
   );
-}, xt = () => {
-  const { editor: t } = m(), n = g({
+}, Lt = () => {
+  const { editor: t } = m(), n = f({
     editor: t,
     selector: (r) => {
-      var u, w;
+      var u, p;
       return {
         isLink: (u = r.editor) == null ? void 0 : u.isActive("link"),
-        linkAttrs: (w = r.editor) == null ? void 0 : w.getAttributes("link")
+        linkAttrs: (p = r.editor) == null ? void 0 : p.getAttributes("link")
       };
     }
-  }), [e, i] = C.useState(n.linkAttrs.href || ""), [s, l] = C.useState(n.linkAttrs.alt || ""), a = () => {
+  }), [e, i] = C.useState(n.linkAttrs.href || ""), [l, c] = C.useState(n.linkAttrs.alt || ""), a = () => {
     t.chain().focus().insertContent({
       type: "text",
-      text: s || e,
+      text: l || e,
       marks: [{ type: "link", attrs: { href: e } }]
     }).run();
-  }, c = () => {
-    const { $from: r } = t.state.selection, u = r.parent.textContent, w = r.parentOffset;
-    let v = w, f = w;
-    for (; v > 0 && !/\s/.test(u[v - 1]); )
-      v--;
-    for (; f < u.length && !/\s/.test(u[f]); )
-      f++;
-    const b = r.start(), O = b + v, P = b + f, W = u.slice(v, f);
-    t.commands.setTextSelection({ from: O, to: P }), i(n.linkAttrs.href || ""), l(W || n.linkAttrs.alt || "");
+  }, 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 || "");
   };
-  return /* @__PURE__ */ p(
+  return /* @__PURE__ */ g(
     y,
     {
       Trigger: /* @__PURE__ */ o(
@@ -459,10 +459,10 @@ const lt = "_wuContentEditor_399u0_8", at = "_wuContentEditorTable_399u0_1", dt
         }
       ),
       maxWidth: "400px",
-      onOpenChange: (r) => r && c(),
+      onOpenChange: (r) => r && s(),
       children: [
         /* @__PURE__ */ o(T, { style: { display: "none" } }),
-        /* @__PURE__ */ p(S, { className: d.wuContentEditorModal, children: [
+        /* @__PURE__ */ g(S, { className: d.wuContentEditorModal, children: [
           /* @__PURE__ */ o(
             k,
             {
@@ -478,14 +478,14 @@ const lt = "_wuContentEditor_399u0_8", at = "_wuContentEditorTable_399u0_1", dt
             {
               Label: "Text to display",
               type: "text",
-              value: s,
-              onChange: (r) => l(r.target.value)
+              value: l,
+              onChange: (r) => c(r.target.value)
             }
           )
         ] }),
-        /* @__PURE__ */ p(x, { children: [
+        /* @__PURE__ */ g(x, { children: [
           n.isLink && /* @__PURE__ */ o(
-            A,
+            b,
             {
               color: "error",
               onClick: () => t.chain().focus().unsetLink().run(),
@@ -493,27 +493,27 @@ const lt = "_wuContentEditor_399u0_8", at = "_wuContentEditorTable_399u0_1", dt
               children: "Remove"
             }
           ),
-          /* @__PURE__ */ o(A, { onClick: a, disabled: !e, children: "Save" })
+          /* @__PURE__ */ o(b, { onClick: a, disabled: !e, children: "Save" })
         ] })
       ]
     }
   );
-}, Lt = () => {
-  const { editor: t } = m(), n = g({
+}, Ft = () => {
+  const { editor: t } = m(), n = f({
     editor: t,
     selector: (r) => ({
       isTable: r.editor.isActive("table"),
       tableAttrs: r.editor.getAttributes("table")
     })
-  }), [e, i] = E(!1), s = $(null), l = N(() => {
-    s.current = setTimeout(() => {
+  }), [e, i] = E(!1), l = j(null), c = _(() => {
+    l.current = setTimeout(() => {
       t.chain().focus().insertTable({ rows: 2, cols: 4, withHeaderRow: e }).run();
     }, 100);
-  }, [t, e]), a = N(() => {
-    i((r) => !r), s.current = setTimeout(() => {
+  }, [t, e]), a = _(() => {
+    i((r) => !r), l.current = setTimeout(() => {
       t.chain().focus().toggleHeaderRow().run();
     }, 100);
-  }, [t]), c = [
+  }, [t]), s = [
     {
       text: "Column left",
       icon: "wm-add",
@@ -545,7 +545,7 @@ const lt = "_wuContentEditor_399u0_8", at = "_wuContentEditorTable_399u0_1", dt
       event: () => t.chain().focus().deleteRow().run()
     }
   ];
-  return n.isTable ? /* @__PURE__ */ p(
+  return n.isTable ? /* @__PURE__ */ g(
     y,
     {
       Trigger: /* @__PURE__ */ o(
@@ -559,9 +559,9 @@ const lt = "_wuContentEditor_399u0_8", at = "_wuContentEditorTable_399u0_1", dt
       maxWidth: "320px",
       children: [
         /* @__PURE__ */ o(T, { style: { display: "none" } }),
-        /* @__PURE__ */ p(S, { className: d.wuContentEditorModal, children: [
+        /* @__PURE__ */ g(S, { className: d.wuContentEditorModal, children: [
           /* @__PURE__ */ o(
-            rt,
+            st,
             {
               checked: e,
               onClick: a,
@@ -569,10 +569,10 @@ const lt = "_wuContentEditor_399u0_8", at = "_wuContentEditorTable_399u0_1", dt
               labelPosition: "left"
             }
           ),
-          /* @__PURE__ */ o("div", { className: d.wuContentEditorTable, children: c.map(({ text: r, icon: u, event: w }) => /* @__PURE__ */ o(
-            st,
+          /* @__PURE__ */ o("div", { className: d.wuContentEditorTable, children: s.map(({ text: r, icon: u, event: p }) => /* @__PURE__ */ o(
+            ct,
             {
-              onClick: w,
+              onClick: p,
               variant: "secondary",
               Icon: /* @__PURE__ */ o(h, { icon: u }),
               children: r
@@ -581,7 +581,7 @@ const lt = "_wuContentEditor_399u0_8", at = "_wuContentEditorTable_399u0_1", dt
           )) })
         ] }),
         /* @__PURE__ */ o(x, { children: /* @__PURE__ */ o(
-          A,
+          b,
           {
             onClick: () => t.chain().focus().deleteTable().run(),
             variant: "outline",
@@ -596,13 +596,13 @@ const lt = "_wuContentEditor_399u0_8", at = "_wuContentEditorTable_399u0_1", dt
   ) : /* @__PURE__ */ o(
     "button",
     {
-      onClick: l,
+      onClick: c,
       className: d.wuContentEditorAction,
       children: /* @__PURE__ */ o(h, { icon: "wm-table" })
     }
   );
-}, Ft = () => {
-  const { editor: t, customFonts: n } = m(), e = g({
+}, Nt = () => {
+  const { editor: t, customFonts: n } = m(), e = f({
     editor: t,
     selector: (a) => ({
       currentFontFamily: a.editor.getAttributes("textStyle").fontFamily || ""
@@ -614,23 +614,23 @@ const lt = "_wuContentEditor_399u0_8", at = "_wuContentEditorTable_399u0_1", dt
     "JetBrains Mono",
     "Montserrat",
     ...n || []
-  ], [s, l] = E(
+  ], [l, c] = E(
     e.currentFontFamily || i[0]
   );
   return C.useEffect(() => {
     var a;
-    l(
+    c(
       ((a = e.currentFontFamily) == null ? void 0 : a.replace(/"/g, "")) || i[0]
     );
-  }, [e.currentFontFamily]), /* @__PURE__ */ p(R, { children: [
+  }, [e.currentFontFamily]), /* @__PURE__ */ g(M, { children: [
     /* @__PURE__ */ o(
-      M,
+      H,
       {
         className: d.wuContentEditorAction,
-        "data-active": s !== "Fira Sans",
-        style: { fontFamily: s },
-        title: s || "Font Family",
-        children: s == null ? void 0 : s[0]
+        "data-active": l !== "Fira Sans",
+        style: { fontFamily: l },
+        title: l || "Font Family",
+        children: l == null ? void 0 : l[0]
       }
     ),
     /* @__PURE__ */ o(
@@ -641,12 +641,12 @@ const lt = "_wuContentEditor_399u0_8", at = "_wuContentEditorTable_399u0_1", dt
         "data-block": !0,
         onCloseAutoFocus: (a) => a.preventDefault(),
         children: i.map((a) => /* @__PURE__ */ o(
-          H,
+          B,
           {
             title: a,
             className: d.wuContentEditorDropdownItem,
             onSelect: () => {
-              t.chain().focus().setFontFamily(a).run(), l(a);
+              t.chain().focus().setFontFamily(a).run(), c(a);
             },
             children: a
           },
@@ -655,8 +655,8 @@ const lt = "_wuContentEditor_399u0_8", at = "_wuContentEditorTable_399u0_1", dt
       }
     )
   ] });
-}, Nt = () => {
-  const { editor: t } = m(), n = g({
+}, Dt = () => {
+  const { editor: t } = m(), n = f({
     editor: t,
     selector: (e) => {
       var i;
@@ -677,16 +677,16 @@ const lt = "_wuContentEditor_399u0_8", at = "_wuContentEditorTable_399u0_1", dt
       children: /* @__PURE__ */ o(h, { icon: "wm-format-italic" })
     }
   );
-}, Dt = () => {
-  const { editor: t } = m(), n = g({
+}, _t = () => {
+  const { editor: t } = m(), n = f({
     editor: t,
     selector: (i) => {
-      var s, l, a, c, r, u;
+      var l, c, a, s, r, u;
       return {
-        isUl: (s = i.editor) == null ? void 0 : s.isActive("bulletList"),
-        isOl: (l = i.editor) == null ? void 0 : l.isActive("orderedList"),
+        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: ((c = i.editor) == null ? void 0 : c.isActive("bulletList")) || ((r = i.editor) == null ? void 0 : r.isActive("orderedList")) || ((u = i.editor) == null ? void 0 : u.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"))
       };
     }
   }), e = [
@@ -723,30 +723,30 @@ const lt = "_wuContentEditor_399u0_8", at = "_wuContentEditorTable_399u0_1", dt
       }
     }
   );
-}, It = ["e", "E", "+", "-"], D = 1, _t = () => {
-  const { editor: t } = m(), [n, e] = E(16), i = g({
+}, It = ["e", "E", "+", "-"], I = 1, Rt = () => {
+  const { editor: t } = m(), [n, e] = E(16), i = f({
     editor: t,
-    selector: (c) => ({
-      fontSize: c.editor.getAttributes("textStyle").fontSize
+    selector: (s) => ({
+      fontSize: s.editor.getAttributes("textStyle").fontSize
     })
-  }), s = (c) => {
-    t.chain().focus().setFontSize(c + "px").run();
-  }, l = (c) => {
-    const r = Math.max(D, c);
-    e(r), s(r);
-  }, a = (c) => {
-    It.includes(c.key) ? c.preventDefault() : c.key === "Enter" && s(n);
+  }), 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);
   };
   return C.useEffect(() => {
-    var c;
-    e(Number((c = i.fontSize) == null ? void 0 : c.replace("px", "")) || 16);
-  }, [i.fontSize]), /* @__PURE__ */ p("div", { className: d.wuContentEditorFontSize, children: [
+    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(
       "button",
       {
         className: d.wuContentEditorAction,
-        onClick: () => l(n - 1),
-        disabled: n <= D,
+        onClick: () => c(n - 1),
+        disabled: n <= I,
         children: "−"
       }
     ),
@@ -758,22 +758,22 @@ const lt = "_wuContentEditor_399u0_8", at = "_wuContentEditorTable_399u0_1", dt
         pattern: "[0-9]*",
         value: n,
         onKeyDown: a,
-        onChange: (c) => e(c.target.valueAsNumber),
-        onBlur: () => s(n)
+        onChange: (s) => e(s.target.valueAsNumber),
+        onBlur: () => l(n)
       }
     ),
     /* @__PURE__ */ o(
       "button",
       {
         className: d.wuContentEditorAction,
-        onClick: () => l(n + 1),
+        onClick: () => c(n + 1),
         disabled: n >= 128,
         children: "+"
       }
     )
   ] });
-}, Rt = () => {
-  const { editor: t } = m(), n = g({
+}, Mt = () => {
+  const { editor: t } = m(), n = f({
     editor: t,
     selector: (e) => {
       var i;
@@ -794,8 +794,8 @@ const lt = "_wuContentEditor_399u0_8", at = "_wuContentEditorTable_399u0_1", dt
       children: /* @__PURE__ */ o(h, { icon: "wm-format-strikethrough" })
     }
   );
-}, Mt = () => {
-  const { editor: t } = m(), n = g({
+}, Ht = () => {
+  const { editor: t } = m(), n = f({
     editor: t,
     selector: (e) => {
       var i;
@@ -817,7 +817,7 @@ const lt = "_wuContentEditor_399u0_8", at = "_wuContentEditorTable_399u0_1", dt
     }
   );
 }, zt = () => {
-  const { editor: t } = m(), n = g({
+  const { editor: t } = m(), n = f({
     editor: t,
     selector: (e) => {
       var i;
@@ -838,14 +838,14 @@ const lt = "_wuContentEditor_399u0_8", at = "_wuContentEditorTable_399u0_1", dt
       children: /* @__PURE__ */ o(h, { icon: "wm-superscript" })
     }
   );
-}, Ht = () => {
-  const { editor: t } = m(), n = g({
+}, Bt = () => {
+  const { editor: t } = m(), n = f({
     editor: t,
     selector: ({ editor: e }) => ({
       textColor: e.getAttributes("textStyle").color
     })
   });
-  return /* @__PURE__ */ p(
+  return /* @__PURE__ */ g(
     "label",
     {
       className: d.wuContentEditorAction,
@@ -873,8 +873,8 @@ const lt = "_wuContentEditor_399u0_8", at = "_wuContentEditorTable_399u0_1", dt
       ]
     }
   );
-}, Bt = () => {
-  const { editor: t } = m(), n = g({
+}, Ot = () => {
+  const { editor: t } = m(), n = f({
     editor: t,
     selector: (e) => {
       var i;
@@ -895,26 +895,26 @@ const lt = "_wuContentEditor_399u0_8", at = "_wuContentEditorTable_399u0_1", dt
       children: /* @__PURE__ */ o(h, { icon: "wm-format-underlined" })
     }
   );
-}, Ot = {
-  block: /* @__PURE__ */ o(At, {}),
-  fontFamily: /* @__PURE__ */ o(Ft, {}),
-  fontSize: /* @__PURE__ */ o(_t, {}),
-  bold: /* @__PURE__ */ o(Et, {}),
-  italic: /* @__PURE__ */ o(Nt, {}),
-  underline: /* @__PURE__ */ o(Bt, {}),
-  strike: /* @__PURE__ */ o(Rt, {}),
-  color: /* @__PURE__ */ o(Ht, {}),
-  bgColor: /* @__PURE__ */ o(bt, {}),
-  list: /* @__PURE__ */ o(Dt, {}),
-  alignment: /* @__PURE__ */ o(vt, {}),
-  image: /* @__PURE__ */ o(St, {}),
-  link: /* @__PURE__ */ o(xt, {}),
-  table: /* @__PURE__ */ o(Lt, {}),
-  blockquote: /* @__PURE__ */ o(kt, {}),
+}, 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(Mt, {}),
-  codeline: /* @__PURE__ */ o(Tt, {}),
-  clear: /* @__PURE__ */ o(yt, {}),
+  subscript: /* @__PURE__ */ o(Ht, {}),
+  codeline: /* @__PURE__ */ o(St, {}),
+  clear: /* @__PURE__ */ o(Tt, {}),
   // eslint-disable-next-line @typescript-eslint/naming-convention
   "|": /* @__PURE__ */ o(
     "div",
@@ -926,7 +926,7 @@ const lt = "_wuContentEditor_399u0_8", at = "_wuContentEditorTable_399u0_1", dt
       }
     }
   )
-}, Pt = [
+}, Wt = [
   "block",
   "fontFamily",
   "|",
@@ -953,22 +953,28 @@ const lt = "_wuContentEditor_399u0_8", at = "_wuContentEditorTable_399u0_1", dt
   "codeline",
   "|",
   "clear"
-], Wt = (t) => {
-  const { editor: n, customFonts: e, children: i, items: s = Pt, ...l } = t;
-  return /* @__PURE__ */ o("div", { ...l, children: /* @__PURE__ */ p(Ct, { editor: n, customFonts: e, children: [
-    s.map((a, c) => /* @__PURE__ */ o(_, { children: Ot[a] }, a + c)),
+], 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
   ] }) });
-}, Ut = {
-  allowedTags: [
+}, F = lt();
+F.setConfig({
+  USE_PROFILES: { html: !0 },
+  ALLOWED_TAGS: [
+    "div",
     "p",
     "br",
     "strong",
+    "b",
     "em",
+    "i",
     "u",
     "s",
     "code",
     "pre",
+    "blockquote",
     "h1",
     "h2",
     "h3",
@@ -978,7 +984,6 @@ const lt = "_wuContentEditor_399u0_8", at = "_wuContentEditorTable_399u0_1", dt
     "ul",
     "ol",
     "li",
-    "blockquote",
     "a",
     "img",
     "table",
@@ -988,97 +993,90 @@ const lt = "_wuContentEditor_399u0_8", at = "_wuContentEditorTable_399u0_1", dt
     "th",
     "td",
     "sup",
-    "sub",
-    "span",
-    "div"
+    "sub"
   ],
-  allowedAttributes: {
-    a: ["href", "title", "target"],
-    img: ["src", "alt", "title", "width", "height"],
-    span: ["style"],
-    td: ["colspan", "rowspan"],
-    th: ["colspan", "rowspan"]
-  },
-  allowedSchemes: ["http", "https", "mailto"]
-}, I = (t, n) => {
-  var s;
-  if (!t) return "";
-  const e = { ...Ut, ...n }, i = Object.keys(e.allowedAttributes || {}).reduce(
-    (l, a) => {
-      var r;
-      const c = ((r = e.allowedAttributes) == null ? void 0 : r[a]) || [];
-      return [...l, ...c];
-    },
-    []
-  );
-  return ct.sanitize(t, {
-    ALLOWED_TAGS: e.allowedTags,
-    ALLOWED_ATTR: [...new Set(i)],
-    ALLOWED_URI_REGEXP: new RegExp(
-      `^(${(s = e.allowedSchemes) == null ? void 0 : s.join("|")}):`,
-      "i"
-    )
-  });
-};
+  ALLOWED_ATTR: [
+    "href",
+    "target",
+    "rel",
+    "src",
+    "alt",
+    "title",
+    "width",
+    "height",
+    "colspan",
+    "rowspan",
+    "data-*",
+    "style",
+    "class"
+  ],
+  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);
+  }
+});
+function A(t) {
+  return t ? F.sanitize(t) : "";
+}
 function ie({
   defaultValue: t,
   onUpdate: n,
   className: e,
-  readonly: i,
-  toolbarPosition: s = "top",
+  toolbarPosition: i = "top",
   customToolbarChildren: l,
-  toolbarItems: a,
-  hideToolbar: c,
-  renderHtml: r,
-  customFonts: u,
-  ...w
+  toolbarItems: c,
+  hideToolbar: a,
+  readonly: s,
+  customFonts: r,
+  renderDefaultOnly: u,
+  ...p
 }) {
-  const v = C.useMemo(() => t ? I(t) : "", [t]), f = U({
-    editable: !i,
-    extensions: wt,
-    content: v,
-    onUpdate: ({ editor: b }) => {
-      n && n(b.getHTML());
+  const w = q({
+    extensions: Ct,
+    content: A(t || ""),
+    onUpdate: ({ editor: v }) => {
+      n && n(A(v.getHTML()));
     }
   });
-  if (i && r) {
-    const b = f ? I(f.getHTML()) : v;
-    return /* @__PURE__ */ o(
-      "div",
-      {
-        "data-slot": "wu-content-editor-render-html",
-        className: F(d.wuContentEditorContainer, e),
-        dangerouslySetInnerHTML: { __html: b }
-      }
-    );
-  }
-  return /* @__PURE__ */ p(
+  return s ? (console.log(w.getHTML()), /* @__PURE__ */ o(
+    "div",
+    {
+      className: D(d.wuContentEditor, e),
+      dangerouslySetInnerHTML: {
+        __html: A(u ? t || "" : w.getHTML())
+      },
+      ...p
+    }
+  )) : /* @__PURE__ */ g(
     "div",
     {
-      className: F(d.wuContentEditorContainer, e),
-      "data-position": s,
+      className: D(d.wuContentEditorContainer, e),
+      "data-position": i,
       "data-slot": "wu-content-editor-container",
       onClick: () => {
-        f == null || f.chain().focus().run();
+        w == null || w.chain().focus().run();
       },
-      ...w,
+      ...p,
       children: [
-        !c && /* @__PURE__ */ o(
-          Wt,
+        !a && /* @__PURE__ */ o(
+          Ut,
           {
-            editor: f,
-            customFonts: u,
+            editor: w,
+            customFonts: r,
             className: d.wuContentEditorToolbar,
-            items: a,
+            items: c,
             "data-slot": "wu-content-editor-toolbar",
-            "data-position": s,
+            "data-position": i,
             children: l
           }
         ),
         /* @__PURE__ */ o(
-          q,
+          $,
           {
-            editor: f,
+            editor: w,
             className: d.wuContentEditor,
             "data-slot": "wu-content-editor"
           }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@npm-questionpro/wick-ui-editor",
-  "version": "0.11.0",
+  "version": "0.12.1",
   "description": "Wick Editor is a powerful and intuitive content editing component built with React. It provides a rich set of features for creating and managing content, making it ideal for applications that require dynamic and interactive content creation.",
   "keywords": [
     "react",
@@ -59,8 +59,8 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.39.1",
-    "@npm-questionpro/wick-ui-icon": "^8.0.2",
-    "@npm-questionpro/wick-ui-lib": "^1.29.3",
+    "@npm-questionpro/wick-ui-icon": "latest",
+    "@npm-questionpro/wick-ui-lib": "latest",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "clsx": "^2.1.1",
     "@storybook/addon-a11y": "10.1.5",