@npm-questionpro/wick-ui-editor 2.2.0 → 2.4.0

package/dist/WuContentEditor.d.ts

@@ -9,6 +9,17 @@ export interface IWuHtmlSourceProps {
     /** When `true`, the textarea is disabled. */
     readonly?: boolean;
 }
+/** Default formatting values applied when no explicit selection overrides them. */
+export interface IWuEditorDefaults {
+    /** Default text color (CSS color string, e.g. `'#545E6B'`). */
+    color?: string;
+    /** Default background/highlight color (CSS color string). */
+    bgColor?: string;
+    /** Default font size in px (e.g. `16`). */
+    fontSize?: number;
+    /** Default font family name (must be one of the available fonts). */
+    fontFamily?: string;
+}
 export interface IWuContentEditorProps extends React.HTMLAttributes<HTMLDivElement> {
     /** Initial HTML content (auto-sanitized on mount). */
     defaultValue?: string;
@@ -28,6 +39,8 @@ export interface IWuContentEditorProps extends React.HTMLAttributes<HTMLDivEleme
     readonly?: boolean;
     /** Moves focus into the editor on mount. */
     autoFocus?: boolean;
+    /** Default formatting values (color, bgColor, fontSize, fontFamily). */
+    defaultValues?: IWuEditorDefaults;
     /**
      * HTML Source view component, e.g. `WuHtmlSource` from
      * `@npm-questionpro/wick-ui-editor/html`. When omitted, HTML Source Mode
@@ -44,4 +57,4 @@ export interface IWuContentEditorProps extends React.HTMLAttributes<HTMLDivEleme
  *
  * @summary content creation — reach for this when users need to compose or edit formatted HTML content
  */
-export declare function WuContentEditor({ defaultValue, onUpdate, className, toolbarPosition, customToolbarChildren, toolbarItems, hideToolbar, readonly, autoFocus, customFonts, htmlSource: HtmlSourceView, isHtml: isHtmlProp, setIsHtml: setIsHtmlProp, ...props }: IWuContentEditorProps): React.JSX.Element;
+export declare function WuContentEditor({ defaultValue, onUpdate, className, toolbarPosition, customToolbarChildren, toolbarItems, hideToolbar, readonly, autoFocus, customFonts, htmlSource: HtmlSourceView, isHtml: isHtmlProp, setIsHtml: setIsHtmlProp, defaultValues, ...props }: IWuContentEditorProps): React.JSX.Element;

package/dist/internal/Toolbar.d.ts

@@ -1,4 +1,5 @@
 import { Editor } from '@tiptap/react';
+import type { IWuEditorDefaults } from '../WuContentEditor';
 declare const TOOLBAR_EXTENSIONS: {
     block: import("react/jsx-runtime").JSX.Element;
     fontFamily: import("react/jsx-runtime").JSX.Element;
@@ -26,6 +27,7 @@ export type IToolbarExtensionKey = keyof typeof TOOLBAR_EXTENSIONS;
 export interface IToolbarProps extends React.HTMLAttributes<HTMLDivElement> {
     editor: Editor;
     customFonts?: string[];
+    defaultValues?: IWuEditorDefaults;
     items?: IToolbarExtensionKey[];
     isHtml: boolean;
     setIsHtml: (isHtml: boolean) => void;

package/dist/utils/useToolbar.d.ts

@@ -1,8 +1,10 @@
 import type { Editor } from '@tiptap/react';
 import React from 'react';
+import type { IWuEditorDefaults } from '../WuContentEditor';
 export interface IToolbarContextProps {
     editor: Editor;
     customFonts?: string[];
+    defaultValues?: IWuEditorDefaults;
     isHtml: boolean;
     setIsHtml: (isHtml: boolean) => void;
     /** Whether an HTML source view is provided via the `htmlSource` prop. */
@@ -13,10 +15,11 @@ interface IToolbarProviderProps {
     editor: Editor;
     children: React.ReactNode;
     customFonts?: string[];
+    defaultValues?: IWuEditorDefaults;
     isHtml: boolean;
     setIsHtml: (isHtml: boolean) => void;
     htmlSourceEnabled: boolean;
 }
-export declare const ToolbarProvider: ({ editor, children, customFonts, isHtml, setIsHtml, htmlSourceEnabled, }: IToolbarProviderProps) => React.JSX.Element;
+export declare const ToolbarProvider: ({ editor, children, customFonts, defaultValues, isHtml, setIsHtml, htmlSourceEnabled, }: IToolbarProviderProps) => React.JSX.Element;
 export declare const useToolbar: () => IToolbarContextProps;
 export {};

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

@@ -1,19 +1,19 @@
-import { A as K, C as J, D as de, E as ue, M as he, O as fe, S as ve, T as Q, _ as V, a as X, b as pe, c as ge, d as me, f as be, g as Y, h as Z, i as G, j as ke, k as Ce, l as ee, m as D, n as R, o as te, r as oe, s as _e, t as F, u as Ae, v as ie, w as re, x as we, y as Ie } from "../../sanitize-BZ0U7q7z.js";
-import { EditorContent as Te, useEditor as ye, useEditorState as v } from "@tiptap/react";
-import u, { useCallback as B, useRef as Se, useState as O } from "react";
-import xe from "@tiptap/extension-image";
+import { A as K, C as J, D as ue, E as fe, M as he, O as ve, S as ge, T as Q, _ as X, a as Y, b as pe, c as me, d as be, f as Ce, g as Z, h as G, i as V, j as ke, k as _e, l as ee, m as z, n as L, o as te, r as oe, s as Ae, t as R, u as we, v as ie, w as re, x as Ie, y as ye } from "../../sanitize-BZ0U7q7z.js";
+import { EditorContent as Te, useEditor as Se, useEditorState as p } from "@tiptap/react";
+import d, { useCallback as D, useRef as xe, useState as O } from "react";
+import Fe from "@tiptap/extension-image";
 import { TaskItem as He, TaskList as Le } from "@tiptap/extension-list";
 import Re from "@tiptap/extension-subscript";
-import Fe from "@tiptap/extension-superscript";
-import { TableKit as Ee } from "@tiptap/extension-table";
-import Ne from "@tiptap/extension-text-align";
-import { BackgroundColor as De, Color as Be, FontFamily as ze, FontSize as Pe, LineHeight as Oe, TextStyle as Me } from "@tiptap/extension-text-style";
+import Ee from "@tiptap/extension-superscript";
+import { TableKit as Ne } from "@tiptap/extension-table";
+import ze from "@tiptap/extension-text-align";
+import { BackgroundColor as De, Color as Be, FontFamily as Pe, FontSize as Oe, LineHeight as Me, TextStyle as $e } from "@tiptap/extension-text-style";
 import qe from "@tiptap/starter-kit";
-import { Fragment as N, jsx as e, jsxs as f } from "react/jsx-runtime";
-import { Menu as g } from "@base-ui/react/menu";
-import { Dialog as w } from "@base-ui/react/dialog";
+import { Fragment as N, jsx as e, jsxs as g } from "react/jsx-runtime";
+import { Menu as C } from "@base-ui/react/menu";
+import { Dialog as I } from "@base-ui/react/dialog";
 import { Switch as ne } from "@base-ui/react/switch";
-var $e = [
+var Ue = [
   qe.configure({ link: {
     openOnClick: !1,
     autolink: !0,
@@ -28,9 +28,9 @@ var $e = [
           "file",
           "mailto"
         ], n = i.protocol.replace(":", "");
-        if (r.includes(n) || !t.protocols.map((s) => typeof s == "string" ? s : s.scheme).includes(n)) return !1;
-        const c = ["example-phishing.com", "malicious-site.net"], l = i.hostname;
-        return !c.includes(l);
+        if (r.includes(n) || !t.protocols.map((c) => typeof c == "string" ? c : c.scheme).includes(n)) return !1;
+        const s = ["example-phishing.com", "malicious-site.net"], l = i.hostname;
+        return !s.includes(l);
       } catch {
         return !1;
       }
@@ -44,89 +44,90 @@ var $e = [
       }
     }
   } }),
-  Ne.configure({ types: ["heading", "paragraph"] }),
-  Fe,
+  ze.configure({ types: ["heading", "paragraph"] }),
+  Ee,
   Re,
-  Me,
+  $e,
   Be,
   De,
   Le,
   He,
+  Me,
   Oe,
   Pe,
-  ze,
-  xe.configure({
+  Fe.configure({
     resize: {
       enabled: !0,
       alwaysPreserveAspectRatio: !0
     },
     inline: !0
   }),
-  Ee.configure({ table: { resizable: !0 } })
-], M = u.createContext(null), Ue = ({ editor: o, children: t, customFonts: i, isHtml: r, setIsHtml: n, htmlSourceEnabled: c }) => /* @__PURE__ */ e(M.Provider, {
+  Ne.configure({ table: { resizable: !0 } })
+], M = d.createContext(null), We = ({ editor: o, children: t, customFonts: i, defaultValues: r, isHtml: n, setIsHtml: s, htmlSourceEnabled: l }) => /* @__PURE__ */ e(M.Provider, {
   value: {
     editor: o,
     customFonts: i,
-    isHtml: r,
-    setIsHtml: n,
-    htmlSourceEnabled: c
+    defaultValues: r,
+    isHtml: n,
+    setIsHtml: s,
+    htmlSourceEnabled: l
   },
   children: t
-}), h = () => {
-  const o = u.useContext(M);
+}), f = () => {
+  const o = d.useContext(M);
   if (!o) throw new Error("useToolbar must be used within a ToolbarProvider");
   return o;
-}, We = "_dropdown_k3z4n_1", je = "_dropdownItem_k3z4n_17", se = {
-  dropdown: We,
-  dropdownItem: je
-}, Ke = "_item_wqnwe_1", Je = { item: Ke }, d = u.forwardRef(function({ Icon: t, children: i, ...r }, n) {
-  return /* @__PURE__ */ f("button", {
+}, je = "_dropdown_k3z4n_1", Ke = "_dropdownItem_k3z4n_17", se = {
+  dropdown: je,
+  dropdownItem: Ke
+}, Je = "_item_wqnwe_1", Qe = { item: Je }, u = d.forwardRef(function({ Icon: t, children: i, ...r }, n) {
+  return /* @__PURE__ */ g("button", {
     ref: n,
     ...r,
-    className: Je.item,
+    className: Qe.item,
     children: [
       t,
       " ",
       i
     ]
   });
-}), q = u.forwardRef(({ children: o, ...t }, i) => /* @__PURE__ */ e("div", {
+}), $ = d.forwardRef(({ children: o, ...t }, i) => /* @__PURE__ */ e("div", {
   ref: i,
   className: se.dropdown,
   ...t,
   children: o
 }));
-q.displayName = "DropdownPopup";
-var $ = u.forwardRef(({ children: o, ...t }, i) => /* @__PURE__ */ e("div", {
+$.displayName = "DropdownPopup";
+var q = d.forwardRef(({ children: o, ...t }, i) => /* @__PURE__ */ e("div", {
   ref: i,
   className: se.dropdownItem,
   ...t,
   children: o
 }));
-$.displayName = "DropdownItem";
-function U({ trigger: o, triggerTitle: t, active: i, items: r, align: n = "start", direction: c = "inline" }) {
-  return /* @__PURE__ */ f(g.Root, { children: [/* @__PURE__ */ e(g.Trigger, {
-    render: /* @__PURE__ */ e(d, {}),
+q.displayName = "DropdownItem";
+function U({ trigger: o, triggerTitle: t, active: i, items: r, align: n = "start", direction: s = "inline" }) {
+  return /* @__PURE__ */ g(C.Root, { children: [/* @__PURE__ */ e(C.Trigger, {
+    render: /* @__PURE__ */ e(u, {}),
     "data-active": i,
     title: t,
     children: o
-  }), /* @__PURE__ */ e(g.Portal, { children: /* @__PURE__ */ e(g.Positioner, {
+  }), /* @__PURE__ */ e(C.Portal, { children: /* @__PURE__ */ e(C.Positioner, {
     align: n,
     sideOffset: 4,
-    children: /* @__PURE__ */ e(g.Popup, {
-      render: /* @__PURE__ */ e(q, {}),
-      "data-inline": c === "inline" ? !0 : void 0,
-      "data-block": c === "block" ? !0 : void 0,
+    children: /* @__PURE__ */ e(C.Popup, {
+      render: /* @__PURE__ */ e($, {}),
+      "data-inline": s === "inline" ? !0 : void 0,
+      "data-block": s === "block" ? !0 : void 0,
       finalFocus: !1,
-      children: r.map((l) => c === "block" ? /* @__PURE__ */ e(g.Item, {
-        render: /* @__PURE__ */ e($, {}),
+      children: r.map((l) => s === "block" ? /* @__PURE__ */ e(C.Item, {
+        render: /* @__PURE__ */ e(q, {}),
         title: l.tooltip,
         "data-active": l.active,
         style: l.style,
         onClick: l.event,
         children: l.icon ?? l.label
-      }, l.id) : /* @__PURE__ */ e(g.Item, {
-        render: /* @__PURE__ */ e(d, {}),
+      }, l.id) : /* @__PURE__ */ e(C.Item, {
+        render: /* @__PURE__ */ e(u, {}),
         "data-active": l.active,
         title: l.tooltip,
         onClick: l.event,
@@ -135,8 +136,8 @@ function U({ trigger: o, triggerTitle: t, active: i, items: r, align: n = "start
     })
   }) })] });
 }
-var Qe = () => {
-  const { editor: o } = h(), t = v({
+var Xe = () => {
+  const { editor: o } = f(), t = p({
     editor: o,
     selector: (r) => ({
       isParagraph: r.editor?.isActive("paragraph"),
@@ -156,21 +157,21 @@ var Qe = () => {
     },
     {
       id: "h1",
-      icon: /* @__PURE__ */ e(Z, {}),
+      icon: /* @__PURE__ */ e(G, {}),
       event: () => o.chain().focus().setHeading({ level: 1 }).run(),
       tooltip: "Heading 1",
       active: t.isH1
     },
     {
       id: "h2",
-      icon: /* @__PURE__ */ e(Y, {}),
+      icon: /* @__PURE__ */ e(Z, {}),
       event: () => o.chain().focus().setHeading({ level: 2 }).run(),
       tooltip: "Heading 2",
       active: t.isH2
     },
     {
       id: "h3",
-      icon: /* @__PURE__ */ e(V, {}),
+      icon: /* @__PURE__ */ e(X, {}),
       event: () => o.chain().focus().setHeading({ level: 3 }).run(),
       tooltip: "Heading 3",
       active: t.isH3
@@ -184,42 +185,42 @@ var Qe = () => {
     }
   ];
   return /* @__PURE__ */ e(U, {
-    trigger: t.isH1 ? /* @__PURE__ */ e(Z, {}) : t.isH2 ? /* @__PURE__ */ e(Y, {}) : t.isH3 ? /* @__PURE__ */ e(V, {}) : t.isH4 ? /* @__PURE__ */ e(ie, {}) : /* @__PURE__ */ e(Q, {}),
+    trigger: t.isH1 ? /* @__PURE__ */ e(G, {}) : t.isH2 ? /* @__PURE__ */ e(Z, {}) : t.isH3 ? /* @__PURE__ */ e(X, {}) : t.isH4 ? /* @__PURE__ */ e(ie, {}) : /* @__PURE__ */ e(Q, {}),
     triggerTitle: "Block Style",
     active: t.isHeading,
     items: i
   });
-}, Ve = () => {
-  const { editor: o } = h();
-  return /* @__PURE__ */ e(d, {
+}, Ye = () => {
+  const { editor: o } = f();
+  return /* @__PURE__ */ e(u, {
     title: "Bold",
-    "data-active": v({
+    "data-active": p({
       editor: o,
       selector: (t) => ({ bold: t.editor?.isActive("bold") })
     }).bold,
     onClick: (t) => {
       t.preventDefault(), o.chain().focus().toggleBold().run();
     },
-    children: /* @__PURE__ */ e(ge, {})
+    children: /* @__PURE__ */ e(me, {})
   });
-}, Xe = () => {
-  const { editor: o } = h();
+}, Ze = () => {
+  const { editor: o } = f();
   return /* @__PURE__ */ e(N, { children: [{
     id: "clear",
-    icon: /* @__PURE__ */ e(Ae, {}),
+    icon: /* @__PURE__ */ e(we, {}),
     event: () => o.chain().focus().clearNodes().unsetAllMarks().run(),
     tooltip: "Clear Formatting"
-  }].map((t) => /* @__PURE__ */ e(d, {
+  }].map((t) => /* @__PURE__ */ e(u, {
     title: t.tooltip,
     onClick: (i) => {
       i.preventDefault(), t.event();
     },
     children: t.icon
   }, t.id)) });
-}, Ye = () => {
-  const { editor: o } = h();
-  return /* @__PURE__ */ e(d, {
-    "data-active": v({
+}, Ge = () => {
+  const { editor: o } = f();
+  return /* @__PURE__ */ e(u, {
+    "data-active": p({
       editor: o,
       selector: (t) => ({ code: t.editor.isActive("code") })
     }).code,
@@ -227,23 +228,23 @@ var Qe = () => {
     onMouseDown: (t) => {
       t.preventDefault(), o.chain().focus().toggleCode().run();
     },
-    children: /* @__PURE__ */ e(be, {})
+    children: /* @__PURE__ */ e(Ce, {})
   });
-}, Ze = () => {
-  const { editor: o } = h();
-  return /* @__PURE__ */ e(d, {
+}, Ve = () => {
+  const { editor: o } = f();
+  return /* @__PURE__ */ e(u, {
     title: "Italic",
-    "data-active": v({
+    "data-active": p({
       editor: o,
       selector: (t) => ({ italic: t.editor?.isActive("italic") })
     }).italic,
     onClick: (t) => {
       t.preventDefault(), o.chain().focus().toggleItalic().run();
     },
-    children: /* @__PURE__ */ e(we, {})
+    children: /* @__PURE__ */ e(Ie, {})
   });
-}, Ge = () => {
-  const { editor: o } = h(), t = v({
+}, et = () => {
+  const { editor: o } = f(), t = p({
     editor: o,
     selector: (r) => ({
       isUl: r.editor?.isActive("bulletList"),
@@ -280,65 +281,65 @@ var Qe = () => {
     active: t.isList,
     items: i
   });
-}, et = () => {
-  const { editor: o } = h();
-  return /* @__PURE__ */ e(d, {
+}, tt = () => {
+  const { editor: o } = f();
+  return /* @__PURE__ */ e(u, {
     title: "strikethrough",
-    "data-active": v({
+    "data-active": p({
       editor: o,
       selector: (t) => ({ strikethrough: t.editor?.isActive("strike") })
     }).strikethrough,
     onClick: (t) => {
       t.preventDefault(), o.chain().focus().toggleStrike().run();
     },
-    children: /* @__PURE__ */ e(de, {})
+    children: /* @__PURE__ */ e(ue, {})
   });
-}, tt = () => {
-  const { editor: o } = h();
-  return /* @__PURE__ */ e(d, {
+}, ot = () => {
+  const { editor: o } = f();
+  return /* @__PURE__ */ e(u, {
     title: "Subscript",
-    "data-active": v({
+    "data-active": p({
       editor: o,
       selector: (t) => ({ subscript: t.editor?.isActive("subscript") })
     }).subscript,
     onClick: (t) => {
       t.preventDefault(), o.chain().focus().toggleSubscript().run();
     },
-    children: /* @__PURE__ */ e(fe, {})
+    children: /* @__PURE__ */ e(ve, {})
   });
-}, ot = () => {
-  const { editor: o } = h();
-  return /* @__PURE__ */ e(d, {
+}, it = () => {
+  const { editor: o } = f();
+  return /* @__PURE__ */ e(u, {
     title: "Superscript",
-    "data-active": v({
+    "data-active": p({
       editor: o,
       selector: (t) => ({ superscript: t.editor?.isActive("superscript") })
     }).superscript,
     onClick: (t) => {
       t.preventDefault(), o.chain().focus().toggleSuperscript().run();
     },
-    children: /* @__PURE__ */ e(Ce, {})
+    children: /* @__PURE__ */ e(_e, {})
   });
-}, it = () => {
-  const { editor: o } = h(), t = v({
+}, rt = () => {
+  const { editor: o, defaultValues: t } = f(), i = p({
     editor: o,
-    selector: ({ editor: r }) => ({ textColor: r.getAttributes("textStyle").color })
-  }), i = u.useRef(null);
-  return /* @__PURE__ */ f(d, {
+    selector: ({ editor: n }) => ({ textColor: n.getAttributes("textStyle").color })
+  }), r = d.useRef(null);
+  return /* @__PURE__ */ g(u, {
     title: "Text Color",
-    onClick: () => i.current?.click(),
-    children: [/* @__PURE__ */ e(ke, { style: { color: t.textColor } }), /* @__PURE__ */ e("input", {
-      ref: i,
+    onClick: () => r.current?.click(),
+    children: [/* @__PURE__ */ e(ke, { style: { color: i.textColor } }), /* @__PURE__ */ e("input", {
+      ref: r,
       type: "color",
-      defaultValue: "#545E6B",
-      onChange: (r) => o.chain().focus().setColor(r.target.value).run()
+      defaultValue: t?.color ?? "#545E6B",
+      onChange: (n) => o.chain().focus().setColor(n.target.value).run()
     })]
   });
-}, rt = () => {
-  const { editor: o } = h();
-  return /* @__PURE__ */ e(d, {
+}, nt = () => {
+  const { editor: o } = f();
+  return /* @__PURE__ */ e(u, {
     title: "Underline",
-    "data-active": v({
+    "data-active": p({
       editor: o,
       selector: (t) => ({ underline: t.editor?.isActive("underline") })
     }).underline,
@@ -347,48 +348,48 @@ var Qe = () => {
     },
     children: /* @__PURE__ */ e(he, {})
   });
-}, nt = () => {
-  const { editor: o } = h(), t = v({
+}, lt = () => {
+  const { editor: o, defaultValues: t } = f(), i = p({
     editor: o,
-    selector: ({ editor: r }) => ({ bgColor: r.getAttributes("textStyle").backgroundColor })
-  }), i = u.useRef(null);
-  return /* @__PURE__ */ f(d, {
+    selector: ({ editor: n }) => ({ bgColor: n.getAttributes("textStyle").backgroundColor })
+  }), r = d.useRef(null);
+  return /* @__PURE__ */ g(u, {
     title: "Background Color",
-    onClick: () => i.current?.click(),
-    children: [/* @__PURE__ */ e(_e, { style: { color: t.bgColor } }), /* @__PURE__ */ e("input", {
-      ref: i,
+    onClick: () => r.current?.click(),
+    children: [/* @__PURE__ */ e(Ae, { style: { color: i.bgColor } }), /* @__PURE__ */ e("input", {
+      ref: r,
       type: "color",
-      defaultValue: "#fff",
-      onChange: (r) => o.chain().focus().setBackgroundColor(r.target.value).run()
+      defaultValue: t?.bgColor ?? "#fff",
+      onChange: (n) => o.chain().focus().setBackgroundColor(n.target.value).run()
     })]
   });
-}, lt = () => {
-  const { editor: o } = h();
-  return /* @__PURE__ */ e(d, {
+}, at = () => {
+  const { editor: o } = f();
+  return /* @__PURE__ */ e(u, {
     title: "quote",
-    "data-active": v({
+    "data-active": p({
       editor: o,
       selector: (t) => ({ blockquote: t.editor?.isActive("blockquote") })
     }).blockquote,
     onClick: (t) => {
       t.preventDefault(), o.chain().focus().toggleBlockquote().run();
     },
-    children: /* @__PURE__ */ e(ue, {})
+    children: /* @__PURE__ */ e(fe, {})
   });
 };
-function at() {
-  const { isHtml: o, setIsHtml: t, htmlSourceEnabled: i } = h();
-  return i ? /* @__PURE__ */ e(d, {
+function st() {
+  const { isHtml: o, setIsHtml: t, htmlSourceEnabled: i } = f();
+  return i ? /* @__PURE__ */ e(u, {
     title: "HTML source",
     "data-active": o,
     onClick: (r) => {
       r.preventDefault(), t(!o);
     },
-    children: /* @__PURE__ */ e(Ie, {})
+    children: /* @__PURE__ */ e(ye, {})
   }) : null;
 }
-var st = () => {
-  const { editor: o } = h(), t = v({
+var ct = () => {
+  const { editor: o } = f(), t = p({
     editor: o,
     selector: (r) => ({
       isLeft: r.editor?.isActive({ textAlign: "left" }),
@@ -400,7 +401,7 @@ var st = () => {
   }), i = [
     {
       id: "left",
-      icon: /* @__PURE__ */ e(X, {}),
+      icon: /* @__PURE__ */ e(Y, {}),
       event: () => o.chain().focus().setTextAlign("left").run(),
       tooltip: "Align Left",
       active: t.isLeft
@@ -421,160 +422,160 @@ var st = () => {
     },
     {
       id: "justify",
-      icon: /* @__PURE__ */ e(G, {}),
+      icon: /* @__PURE__ */ e(V, {}),
       event: () => o.chain().focus().setTextAlign("justify").run(),
       tooltip: "Justify",
       active: t.isJustify
     }
   ];
   return /* @__PURE__ */ e(U, {
-    trigger: t.isCenter ? /* @__PURE__ */ e(oe, {}) : t.isRight ? /* @__PURE__ */ e(te, {}) : t.isJustify ? /* @__PURE__ */ e(G, {}) : /* @__PURE__ */ e(X, {}),
+    trigger: t.isCenter ? /* @__PURE__ */ e(oe, {}) : t.isRight ? /* @__PURE__ */ e(te, {}) : t.isJustify ? /* @__PURE__ */ e(V, {}) : /* @__PURE__ */ e(Y, {}),
     triggerTitle: "Text Alignment",
     active: t.isAligned,
     items: i
   });
-}, ct = "_wuContentEditor_1w25e_3", dt = "_selectedCell_1w25e_1", ut = "_tableWrapper_1w25e_1", ht = "_wuContentEditorRoot_1w25e_3", ft = "_wuContentEditorToolbar_1w25e_17", vt = "_fontSize_1w25e_38", pt = "_wuContentEditorTable_1w25e_56", S = {
-  wuContentEditor: ct,
-  selectedCell: dt,
+}, dt = "_wuContentEditor_1w25e_3", ut = "_selectedCell_1w25e_1", ft = "_tableWrapper_1w25e_1", ht = "_wuContentEditorRoot_1w25e_3", vt = "_wuContentEditorToolbar_1w25e_17", gt = "_fontSize_1w25e_38", pt = "_wuContentEditorTable_1w25e_56", F = {
+  wuContentEditor: dt,
+  selectedCell: ut,
   "column-resize-handle": "_column-resize-handle_1w25e_1",
-  tableWrapper: ut,
+  tableWrapper: ft,
   "resize-cursor": "_resize-cursor_1w25e_1",
   wuContentEditorRoot: ht,
-  wuContentEditorToolbar: ft,
-  fontSize: vt,
+  wuContentEditorToolbar: vt,
+  fontSize: gt,
   wuContentEditorTable: pt
-}, gt = [
+}, mt = [
   "e",
   "E",
   "+",
   "-"
-], le = 1, mt = () => {
-  const { editor: o } = h(), [t, i] = O(16), r = v({
+], le = 1, bt = () => {
+  const { editor: o, defaultValues: t } = f(), [i, r] = O(t?.fontSize ?? 16), n = p({
     editor: o,
-    selector: (s) => ({ fontSize: s.editor.getAttributes("textStyle").fontSize })
-  }), n = (s) => {
-    o.chain().focus().setFontSize(s + "px").run();
-  }, c = (s) => {
-    const C = Math.max(le, s);
-    i(C), n(C);
-  }, l = (s) => {
-    gt.includes(s.key) ? s.preventDefault() : s.key === "Enter" && n(t);
+    selector: (h) => ({ fontSize: h.editor.getAttributes("textStyle").fontSize })
+  }), s = (h) => {
+    o.chain().focus().setFontSize(h + "px").run();
+  }, l = (h) => {
+    const a = Math.max(le, h);
+    r(a), s(a);
+  }, c = (h) => {
+    mt.includes(h.key) ? h.preventDefault() : h.key === "Enter" && s(i);
   };
-  return u.useEffect(() => {
-    i(Number(r.fontSize?.replace("px", "")) || 16);
-  }, [r.fontSize]), /* @__PURE__ */ f("div", {
-    className: S.fontSize,
+  return d.useEffect(() => {
+    r(Number(n.fontSize?.replace("px", "")) || (t?.fontSize ?? 16));
+  }, [n.fontSize, t?.fontSize]), /* @__PURE__ */ g("div", {
+    className: F.fontSize,
     children: [
-      /* @__PURE__ */ e(d, {
-        onClick: () => c(t - 1),
-        disabled: t <= le,
+      /* @__PURE__ */ e(u, {
+        onClick: () => l(i - 1),
+        disabled: i <= le,
         children: "−"
       }),
       /* @__PURE__ */ e("input", {
         type: "number",
         inputMode: "numeric",
         pattern: "[0-9]*",
-        value: t,
-        onKeyDown: l,
-        onChange: (s) => i(s.target.valueAsNumber),
-        onBlur: () => n(t)
+        value: i,
+        onKeyDown: c,
+        onChange: (h) => r(h.target.valueAsNumber),
+        onBlur: () => s(i)
       }),
-      /* @__PURE__ */ e(d, {
-        onClick: () => c(t + 1),
-        disabled: t >= 128,
+      /* @__PURE__ */ e(u, {
+        onClick: () => l(i + 1),
+        disabled: i >= 128,
         children: "+"
       })
     ]
   });
-}, bt = () => {
-  const { editor: o, customFonts: t } = h(), i = v({
+}, Ct = () => {
+  const { editor: o, customFonts: t, defaultValues: i } = f(), r = p({
     editor: o,
-    selector: (l) => ({ currentFontFamily: l.editor.getAttributes("textStyle").fontFamily || "" })
-  }), r = [
+    selector: (c) => ({ currentFontFamily: c.editor.getAttributes("textStyle").fontFamily || "" })
+  }), n = [
     "Fira Sans",
     "Inter",
     "Poppins",
     "JetBrains Mono",
     "Montserrat",
     ...t || []
-  ], [n, c] = O(i.currentFontFamily || r[0]);
-  return u.useEffect(() => {
-    c(i.currentFontFamily?.replace(/"/g, "") || r[0]);
-  }, [i.currentFontFamily]), /* @__PURE__ */ f(g.Root, { children: [/* @__PURE__ */ e(g.Trigger, {
-    "data-active": n !== "Fira Sans",
-    style: { fontFamily: n },
-    title: n || "Font Family",
-    render: /* @__PURE__ */ e(d, {}),
-    children: n?.[0]
-  }), /* @__PURE__ */ e(g.Portal, { children: /* @__PURE__ */ e(g.Positioner, {
+  ], [s, l] = O(r.currentFontFamily || i?.fontFamily || n[0]);
+  return d.useEffect(() => {
+    l(r.currentFontFamily?.replace(/"/g, "") || i?.fontFamily || n[0]);
+  }, [r.currentFontFamily]), /* @__PURE__ */ g(C.Root, { children: [/* @__PURE__ */ e(C.Trigger, {
+    "data-active": s !== (i?.fontFamily ?? n[0]),
+    style: { fontFamily: s },
+    title: s || "Font Family",
+    render: /* @__PURE__ */ e(u, {}),
+    children: s?.[0]
+  }), /* @__PURE__ */ e(C.Portal, { children: /* @__PURE__ */ e(C.Positioner, {
     align: "start",
     sideOffset: 4,
-    children: /* @__PURE__ */ e(g.Popup, {
-      render: /* @__PURE__ */ e(q, {}),
+    children: /* @__PURE__ */ e(C.Popup, {
+      render: /* @__PURE__ */ e($, {}),
       "data-block": !0,
       finalFocus: !1,
-      children: r.map((l) => /* @__PURE__ */ e(g.Item, {
-        title: l,
-        render: /* @__PURE__ */ e($, {}),
+      children: n.map((c) => /* @__PURE__ */ e(C.Item, {
+        title: c,
+        render: /* @__PURE__ */ e(q, {}),
         onClick: () => {
-          o.chain().focus().setFontFamily(l).run(), c(l);
+          o.chain().focus().setFontFamily(c).run(), l(c);
         },
-        children: l
-      }, l))
+        children: c
+      }, c))
     })
   }) })] });
-}, kt = "_button_583n5_1", Ct = { button: kt }, ce = u.forwardRef(function({ children: t, variant: i, color: r, icon: n, ...c }, l) {
-  return /* @__PURE__ */ f("button", {
+}, kt = "_button_583n5_1", _t = { button: kt }, ce = d.forwardRef(function({ children: t, variant: i, color: r, icon: n, ...s }, l) {
+  return /* @__PURE__ */ g("button", {
     ref: l,
-    className: Ct.button,
+    className: _t.button,
     "data-variant": i,
     "data-color": r,
-    ...c,
+    ...s,
     children: [n, t]
   });
-}), _t = "_dialog_1k05x_1", At = "_backdrop_1k05x_27", wt = "_content_1k05x_46", It = "_footer_1k05x_52", Tt = "_close_1k05x_59", y = {
-  dialog: _t,
-  backdrop: At,
-  content: wt,
-  footer: It,
+}), At = "_dialog_1k05x_1", wt = "_backdrop_1k05x_27", It = "_content_1k05x_46", yt = "_footer_1k05x_52", Tt = "_close_1k05x_59", x = {
+  dialog: At,
+  backdrop: wt,
+  content: It,
+  footer: yt,
   close: Tt
 };
 function W({ Trigger: o, children: t, maxWidth: i, onOpenChange: r, footer: n }) {
-  const c = u.useContext(M), l = u.useCallback((s) => {
-    c?.editor.setEditable(!s, !1), r?.(s);
-  }, [c, r]);
-  return /* @__PURE__ */ f(w.Root, {
+  const s = d.useContext(M), l = d.useCallback((c) => {
+    s?.editor.setEditable(!c, !1), r?.(c);
+  }, [s, r]);
+  return /* @__PURE__ */ g(I.Root, {
     modal: !0,
     onOpenChange: l,
     children: [/* @__PURE__ */ e("span", {
-      onClick: (s) => s.stopPropagation(),
-      children: /* @__PURE__ */ e(w.Trigger, { render: o })
-    }), /* @__PURE__ */ f(w.Portal, { children: [/* @__PURE__ */ e(w.Backdrop, { className: y.backdrop }), /* @__PURE__ */ f(w.Popup, {
-      className: y.dialog,
+      onClick: (c) => c.stopPropagation(),
+      children: /* @__PURE__ */ e(I.Trigger, { render: o })
+    }), /* @__PURE__ */ g(I.Portal, { children: [/* @__PURE__ */ e(I.Backdrop, { className: x.backdrop }), /* @__PURE__ */ g(I.Popup, {
+      className: x.dialog,
       style: i ? { maxWidth: i } : void 0,
       children: [
-        /* @__PURE__ */ e(w.Close, {
-          className: y.close,
+        /* @__PURE__ */ e(I.Close, {
+          className: x.close,
           "aria-label": "Close",
-          children: /* @__PURE__ */ e(me, {
+          children: /* @__PURE__ */ e(be, {
             width: 10,
             height: 10
           })
         }),
         /* @__PURE__ */ e("div", {
-          className: y.content,
+          className: x.content,
           children: t
         }),
         n && /* @__PURE__ */ e("footer", {
-          className: y.footer,
+          className: x.footer,
           children: n
         })
       ]
     })] })]
   });
 }
-function x({ children: o, variant: t, color: i, icon: r, ...n }) {
-  return /* @__PURE__ */ e(w.Close, {
+function H({ children: o, variant: t, color: i, icon: r, ...n }) {
+  return /* @__PURE__ */ e(I.Close, {
     render: /* @__PURE__ */ e(ce, {
       variant: t,
       color: i,
@@ -584,49 +585,49 @@ function x({ children: o, variant: t, color: i, icon: r, ...n }) {
     children: o
   });
 }
-var yt = "_group_56lao_1", St = "_label_56lao_8", xt = "_input_56lao_14", z = {
-  group: yt,
-  label: St,
-  input: xt
+var St = "_group_56lao_1", xt = "_label_56lao_8", Ft = "_input_56lao_14", B = {
+  group: St,
+  label: xt,
+  input: Ft
 };
 function E({ label: o, id: t, ...i }) {
-  return /* @__PURE__ */ f("div", {
-    className: z.group,
+  return /* @__PURE__ */ g("div", {
+    className: B.group,
     children: [o && /* @__PURE__ */ e("label", {
-      className: z.label,
+      className: B.label,
       htmlFor: t,
       children: o
     }), /* @__PURE__ */ e("input", {
       id: t,
-      className: z.input,
+      className: B.input,
       ...i
     })]
   });
 }
 var Ht = () => {
-  const { editor: o } = h(), t = v({
+  const { editor: o } = f(), t = p({
     editor: o,
-    selector: (s) => ({
-      isImage: s.editor?.isActive("image"),
-      imageAttrs: s.editor?.getAttributes("image")
+    selector: (c) => ({
+      isImage: c.editor?.isActive("image"),
+      imageAttrs: c.editor?.getAttributes("image")
     })
-  }), [i, r] = u.useState(t.imageAttrs.src || ""), [n, c] = u.useState(t.imageAttrs.alt || ""), l = () => {
+  }), [i, r] = d.useState(t.imageAttrs.src || ""), [n, s] = d.useState(t.imageAttrs.alt || ""), l = () => {
     o.chain().focus().setImage({
       src: i,
       alt: n
     }).run();
   };
-  return /* @__PURE__ */ f(W, {
-    Trigger: /* @__PURE__ */ e(d, {
+  return /* @__PURE__ */ g(W, {
+    Trigger: /* @__PURE__ */ e(u, {
       title: "Image",
       "data-active": t.isImage,
       children: /* @__PURE__ */ e(pe, {})
     }),
     maxWidth: "400px",
-    footer: /* @__PURE__ */ f(N, { children: [/* @__PURE__ */ e(x, {
+    footer: /* @__PURE__ */ g(N, { children: [/* @__PURE__ */ e(H, {
       variant: "secondary",
       children: "Cancel"
-    }), /* @__PURE__ */ e(x, {
+    }), /* @__PURE__ */ e(H, {
       onClick: l,
       disabled: !i,
       children: "Save"
@@ -635,23 +636,23 @@ var Ht = () => {
       label: "Image URL",
       type: "url",
       value: i,
-      onChange: (s) => r(s.target.value),
+      onChange: (c) => r(c.target.value),
       required: !0
     }), /* @__PURE__ */ e(E, {
       label: "Alt Text",
       type: "text",
       value: n,
-      onChange: (s) => c(s.target.value)
+      onChange: (c) => s(c.target.value)
     })]
   });
 }, Lt = () => {
-  const { editor: o } = h(), t = v({
+  const { editor: o } = f(), t = p({
     editor: o,
     selector: (a) => ({
       isLink: a.editor?.isActive("link"),
       linkAttrs: a.editor?.getAttributes("link")
     })
-  }), [i, r] = u.useState(t.linkAttrs.href || ""), [n, c] = u.useState(t.linkAttrs.alt || ""), l = (a) => !a || a.startsWith("http://") || a.startsWith("https://") ? a : `https://${a}`, s = () => {
+  }), [i, r] = d.useState(t.linkAttrs.href || ""), [n, s] = d.useState(t.linkAttrs.alt || ""), l = (a) => !a || a.startsWith("http://") || a.startsWith("https://") ? a : `https://${a}`, c = () => {
     const a = l(i);
     o.chain().focus().insertContent({
       type: "text",
@@ -661,40 +662,40 @@ var Ht = () => {
         attrs: { href: a }
       }]
     }).run();
-  }, C = () => {
-    const a = o.getAttributes("link"), { from: m, to: A, $from: T } = o.state.selection;
-    let I;
-    if (m !== A) I = o.state.doc.textBetween(m, A);
+  }, h = () => {
+    const a = o.getAttributes("link"), { from: m, to: A, $from: S } = o.state.selection;
+    let b;
+    if (m !== A) b = o.state.doc.textBetween(m, A);
     else {
-      const _ = T.parent.textContent, H = T.parentOffset;
-      let b = H, k = H;
-      for (; b > 0 && !/\s/.test(_[b - 1]); ) b--;
-      for (; k < _.length && !/\s/.test(_[k]); ) k++;
-      if (I = _.slice(b, k), I) {
-        const L = T.start();
+      const y = S.parent.textContent, T = S.parentOffset;
+      let w = T, k = T;
+      for (; w > 0 && !/\s/.test(y[w - 1]); ) w--;
+      for (; k < y.length && !/\s/.test(y[k]); ) k++;
+      if (b = y.slice(w, k), b) {
+        const _ = S.start();
         o.commands.setTextSelection({
-          from: L + b,
-          to: L + k
+          from: _ + w,
+          to: _ + k
         });
       }
     }
-    r(a.href || ""), c(I || a.alt || "");
+    r(a.href || ""), s(b || a.alt || "");
   };
-  return /* @__PURE__ */ f(W, {
-    Trigger: /* @__PURE__ */ e(d, {
+  return /* @__PURE__ */ g(W, {
+    Trigger: /* @__PURE__ */ e(u, {
       title: "Link",
       "data-active": t.isLink,
-      children: /* @__PURE__ */ e(ve, {})
+      children: /* @__PURE__ */ e(ge, {})
     }),
     maxWidth: "400px",
-    onOpenChange: (a) => a && C(),
-    footer: /* @__PURE__ */ f(N, { children: [t.isLink && /* @__PURE__ */ e(x, {
+    onOpenChange: (a) => a && h(),
+    footer: /* @__PURE__ */ g(N, { children: [t.isLink && /* @__PURE__ */ e(H, {
       color: "error",
       variant: "secondary",
       onClick: () => o.chain().focus().unsetLink().run(),
       children: "Remove"
-    }), /* @__PURE__ */ e(x, {
-      onClick: s,
+    }), /* @__PURE__ */ e(H, {
+      onClick: c,
       disabled: !i,
       children: "Save"
     })] }),
@@ -708,16 +709,16 @@ var Ht = () => {
       label: "Text to display",
       type: "text",
       value: n,
-      onChange: (a) => c(a.target.value)
+      onChange: (a) => s(a.target.value)
     })]
   });
-}, Rt = "_label_1kiov_1", Ft = "_root_1kiov_11", Et = "_thumb_1kiov_44", P = {
+}, Rt = "_label_1kiov_1", Et = "_root_1kiov_11", Nt = "_thumb_1kiov_44", P = {
   label: Rt,
-  root: Ft,
-  thumb: Et
+  root: Et,
+  thumb: Nt
 };
-function Nt({ checked: o, onCheckedChange: t, label: i }) {
-  return /* @__PURE__ */ f("label", {
+function zt({ checked: o, onCheckedChange: t, label: i }) {
+  return /* @__PURE__ */ g("label", {
     className: P.label,
     children: [/* @__PURE__ */ e("span", { children: i }), /* @__PURE__ */ e(ne.Root, {
       className: P.root,
@@ -728,20 +729,20 @@ function Nt({ checked: o, onCheckedChange: t, label: i }) {
   });
 }
 var Dt = () => {
-  const { editor: o } = h(), t = v({
+  const { editor: o } = f(), t = p({
     editor: o,
     selector: (a) => ({
       isTable: a.editor.isActive("table"),
       tableAttrs: a.editor.getAttributes("table")
     })
-  }), [i, r] = O(!1), n = Se(null), c = B((a) => {
+  }), [i, r] = O(!1), n = xe(null), s = D((a) => {
     n.current && clearTimeout(n.current), n.current = setTimeout(a, 100);
   }, []);
-  u.useEffect(() => () => {
+  d.useEffect(() => () => {
     n.current && clearTimeout(n.current);
   }, []);
-  const l = B(() => {
-    c(() => o.chain().focus().insertTable({
+  const l = D(() => {
+    s(() => o.chain().focus().insertTable({
       rows: 2,
       cols: 4,
       withHeaderRow: i
@@ -749,99 +750,99 @@ var Dt = () => {
   }, [
     o,
     i,
-    c
-  ]), s = B(() => {
-    r((a) => !a), c(() => o.chain().focus().toggleHeaderRow().run());
-  }, [o, c]), C = [
+    s
+  ]), c = D(() => {
+    r((a) => !a), s(() => o.chain().focus().toggleHeaderRow().run());
+  }, [o, s]), h = [
     {
       text: "Column left",
-      icon: /* @__PURE__ */ e(R, {}),
+      icon: /* @__PURE__ */ e(L, {}),
       event: () => o.chain().focus().addColumnBefore().run()
     },
     {
       text: "Row above",
-      icon: /* @__PURE__ */ e(R, {}),
+      icon: /* @__PURE__ */ e(L, {}),
       event: () => o.chain().focus().addRowBefore().run()
     },
     {
       text: "Column right",
-      icon: /* @__PURE__ */ e(R, {}),
+      icon: /* @__PURE__ */ e(L, {}),
       event: () => o.chain().focus().addColumnAfter().run()
     },
     {
       text: "Row below",
-      icon: /* @__PURE__ */ e(R, {}),
+      icon: /* @__PURE__ */ e(L, {}),
       event: () => o.chain().focus().addRowAfter().run()
     },
     {
       text: "Delete Column",
-      icon: /* @__PURE__ */ e(D, {}),
+      icon: /* @__PURE__ */ e(z, {}),
       event: () => o.chain().focus().deleteColumn().run()
     },
     {
       text: "Delete Row",
-      icon: /* @__PURE__ */ e(D, {}),
+      icon: /* @__PURE__ */ e(z, {}),
       event: () => o.chain().focus().deleteRow().run()
     }
   ];
-  return t.isTable ? /* @__PURE__ */ f(W, {
-    Trigger: /* @__PURE__ */ e(d, {
+  return t.isTable ? /* @__PURE__ */ g(W, {
+    Trigger: /* @__PURE__ */ e(u, {
       title: "Table",
       "data-active": t.isTable,
       children: /* @__PURE__ */ e(K, {})
     }),
     maxWidth: "320px",
-    footer: /* @__PURE__ */ e(x, {
+    footer: /* @__PURE__ */ e(H, {
       variant: "secondary",
       color: "error",
-      icon: /* @__PURE__ */ e(D, {}),
+      icon: /* @__PURE__ */ e(z, {}),
       onClick: () => o.chain().focus().deleteTable().run(),
       children: "Delete Table"
     }),
-    children: [/* @__PURE__ */ e(Nt, {
+    children: [/* @__PURE__ */ e(zt, {
       checked: i,
-      onCheckedChange: s,
+      onCheckedChange: c,
       label: "Title Row"
     }), /* @__PURE__ */ e("div", {
-      className: S.wuContentEditorTable,
-      children: C.map(({ text: a, icon: m, event: A }) => /* @__PURE__ */ e(ce, {
+      className: F.wuContentEditorTable,
+      children: h.map(({ text: a, icon: m, event: A }) => /* @__PURE__ */ e(ce, {
         onClick: A,
         variant: "secondary",
         icon: m,
         children: a
       }, a))
     })]
-  }) : /* @__PURE__ */ e(d, {
+  }) : /* @__PURE__ */ e(u, {
     title: "Table",
     onClick: l,
     children: /* @__PURE__ */ e(K, {})
   });
 }, ae = {
-  block: /* @__PURE__ */ e(Qe, {}),
-  fontFamily: /* @__PURE__ */ e(bt, {}),
-  fontSize: /* @__PURE__ */ e(mt, {}),
-  bold: /* @__PURE__ */ e(Ve, {}),
-  italic: /* @__PURE__ */ e(Ze, {}),
-  underline: /* @__PURE__ */ e(rt, {}),
-  strike: /* @__PURE__ */ e(et, {}),
-  color: /* @__PURE__ */ e(it, {}),
-  bgColor: /* @__PURE__ */ e(nt, {}),
-  list: /* @__PURE__ */ e(Ge, {}),
-  alignment: /* @__PURE__ */ e(st, {}),
+  block: /* @__PURE__ */ e(Xe, {}),
+  fontFamily: /* @__PURE__ */ e(Ct, {}),
+  fontSize: /* @__PURE__ */ e(bt, {}),
+  bold: /* @__PURE__ */ e(Ye, {}),
+  italic: /* @__PURE__ */ e(Ve, {}),
+  underline: /* @__PURE__ */ e(nt, {}),
+  strike: /* @__PURE__ */ e(tt, {}),
+  color: /* @__PURE__ */ e(rt, {}),
+  bgColor: /* @__PURE__ */ e(lt, {}),
+  list: /* @__PURE__ */ e(et, {}),
+  alignment: /* @__PURE__ */ e(ct, {}),
   image: /* @__PURE__ */ e(Ht, {}),
   link: /* @__PURE__ */ e(Lt, {}),
   table: /* @__PURE__ */ e(Dt, {}),
-  blockquote: /* @__PURE__ */ e(lt, {}),
-  superscript: /* @__PURE__ */ e(ot, {}),
-  subscript: /* @__PURE__ */ e(tt, {}),
-  codeline: /* @__PURE__ */ e(Ye, {}),
-  clear: /* @__PURE__ */ e(Xe, {}),
+  blockquote: /* @__PURE__ */ e(at, {}),
+  superscript: /* @__PURE__ */ e(it, {}),
+  subscript: /* @__PURE__ */ e(ot, {}),
+  codeline: /* @__PURE__ */ e(Ge, {}),
+  clear: /* @__PURE__ */ e(Ze, {}),
   "|": /* @__PURE__ */ e("div", { style: {
     height: 16,
     width: 1,
     background: "var(--we-border)"
   } }),
-  html: /* @__PURE__ */ e(at, {})
+  html: /* @__PURE__ */ e(st, {})
 }, Bt = [
   "block",
   "fontFamily",
@@ -870,83 +871,91 @@ var Dt = () => {
   "|",
   "html",
   "clear"
-], zt = (o) => {
-  const { editor: t, customFonts: i, children: r, items: n = Bt, isHtml: c, setIsHtml: l, htmlSourceEnabled: s, ...C } = o;
+], Pt = (o) => {
+  const { editor: t, customFonts: i, defaultValues: r, children: n, items: s = Bt, isHtml: l, setIsHtml: c, htmlSourceEnabled: h, ...a } = o;
   return /* @__PURE__ */ e("div", {
-    ...C,
-    children: /* @__PURE__ */ f(Ue, {
+    ...a,
+    children: /* @__PURE__ */ g(We, {
       editor: t,
       customFonts: i,
-      isHtml: c,
-      setIsHtml: l,
-      htmlSourceEnabled: s,
-      children: [n.map((a, m) => /* @__PURE__ */ e(N, { children: c && a !== "html" ? /* @__PURE__ */ e("span", {
+      defaultValues: r,
+      isHtml: l,
+      setIsHtml: c,
+      htmlSourceEnabled: h,
+      children: [s.map((m, A) => /* @__PURE__ */ e(N, { children: l && m !== "html" ? /* @__PURE__ */ e("span", {
         style: {
           pointerEvents: "none",
           opacity: 0.4
         },
-        children: ae[a]
-      }) : ae[a] }, a + m)), r]
+        children: ae[m]
+      }) : ae[m] }, m + A)), n]
     })
   });
 };
-function Pt(...o) {
+function Ot(...o) {
   return o.filter(Boolean).join(" ");
 }
-function eo({ defaultValue: o, onUpdate: t, className: i, toolbarPosition: r = "top", customToolbarChildren: n, toolbarItems: c, hideToolbar: l, readonly: s, autoFocus: C, customFonts: a, htmlSource: m, isHtml: A, setIsHtml: T, ...I }) {
-  const [_, H] = u.useState((A ?? !1) && !!m);
-  u.useEffect(() => {
+function to({ defaultValue: o, onUpdate: t, className: i, toolbarPosition: r = "top", customToolbarChildren: n, toolbarItems: s, hideToolbar: l, readonly: c, autoFocus: h, customFonts: a, htmlSource: m, isHtml: A, setIsHtml: S, defaultValues: b, ...y }) {
+  const [T, w] = d.useState((A ?? !1) && !!m);
+  d.useEffect(() => {
     process.env.NODE_ENV !== "production" && A && !m && console.warn('[WuContentEditor]: `isHtml` has no effect without an `htmlSource` component. Import {WuHtmlSource} from "@npm-questionpro/wick-ui-editor/html" and pass it as `htmlSource`.');
   }, []);
-  const b = u.useRef(o || ""), k = ye({
-    editable: !s,
-    autofocus: C ? "end" : !1,
-    extensions: $e,
-    content: F(o || ""),
-    onUpdate: ({ editor: p }) => {
-      t && t(F(p.getHTML()));
+  const k = d.useRef(o || ""), _ = Se({
+    editable: !c,
+    autofocus: h ? "end" : !1,
+    extensions: Ue,
+    content: R(o || ""),
+    onUpdate: ({ editor: v }) => {
+      t && t(R(v.getHTML()));
     }
-  }), L = (p) => {
-    p ? b.current = k?.getHTML() ?? "" : k?.commands.setContent(F(b.current)), t && t(F(b.current)), H(p), T?.(p);
+  });
+  d.useEffect(() => {
+    if (!_ || !b) return;
+    const v = _.chain();
+    b.fontFamily && v.setFontFamily(b.fontFamily), b.fontSize && v.setFontSize(`${b.fontSize}px`), b.color && v.setColor(b.color), b.bgColor && v.setBackgroundColor(b.bgColor), v.run();
+  }, [_]);
+  const de = (v) => {
+    v ? k.current = _?.getHTML() ?? "" : _?.commands.setContent(R(k.current)), t && t(R(k.current)), w(v), S?.(v);
   };
-  return /* @__PURE__ */ f("div", {
-    className: Pt(S.wuContentEditorRoot, i),
+  return /* @__PURE__ */ g("div", {
+    className: Ot(F.wuContentEditorRoot, i),
     "data-position": r,
     "data-slot": "wu-content-editor-root",
-    onClick: (p) => {
-      if ((p.ctrlKey || p.metaKey) && p.target instanceof HTMLElement) {
-        const j = p.target.closest("a");
+    onClick: (v) => {
+      if ((v.ctrlKey || v.metaKey) && v.target instanceof HTMLElement) {
+        const j = v.target.closest("a");
         if (j?.href) {
           window.open(j.href, "_blank", "noopener,noreferrer");
           return;
         }
       }
-      _ || k?.chain().focus().run();
+      T || _?.chain().focus().run();
     },
-    ...I,
-    children: [!l && /* @__PURE__ */ e(zt, {
-      editor: k,
+    ...y,
+    children: [!l && /* @__PURE__ */ e(Pt, {
+      editor: _,
       customFonts: a,
-      className: S.wuContentEditorToolbar,
-      items: c,
-      isHtml: _,
-      setIsHtml: L,
+      defaultValues: b,
+      className: F.wuContentEditorToolbar,
+      items: s,
+      isHtml: T,
+      setIsHtml: de,
       htmlSourceEnabled: !!m,
       "data-slot": "wu-content-editor-toolbar",
       children: n
-    }), _ && m ? /* @__PURE__ */ e(m, {
-      defaultValue: b.current,
-      onUpdate: (p) => {
-        b.current = p ?? "", t && t(p ?? "");
+    }), T && m ? /* @__PURE__ */ e(m, {
+      defaultValue: k.current,
+      onUpdate: (v) => {
+        k.current = v ?? "", t && t(v ?? "");
       },
-      readonly: s
+      readonly: c
     }) : /* @__PURE__ */ e(Te, {
-      editor: k,
-      className: S.wuContentEditor,
+      editor: _,
+      className: F.wuContentEditor,
       "data-slot": "wu-content-editor"
     })]
   });
 }
 export {
-  eo as WuContentEditor
+  to as WuContentEditor
 };

package/package.json

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