@abduljebar/text-editor 2.6.2 → 2.8.0

package/dist/index.js

@@ -1,5 +1,5 @@
 import Lt, { useState as ee, useRef as re, useCallback as W, useEffect as me, forwardRef as zt, useImperativeHandle as Ot } from "react";
-import { Save as gt, FileDown as Pt, Trash2 as Mt, Image as Ce, Undo as qt, Redo as Dt, Bold as Ft, Italic as Ut, Underline as $t, Strikethrough as Bt, Heading1 as Gt, Heading2 as Wt, Type as Ht, Code as Vt, Quote as Yt, List as Jt, ListOrdered as Kt, Indent as Xt, Outdent as Qt, AlignLeft as Zt, AlignCenter as er, AlignRight as tr, Superscript as rr, Subscript as nr, Link as or, Loader2 as sr, CheckCircle as ar, AlertCircle as ir, Upload as lr } from "lucide-react";
+import { Save as pt, FileDown as Pt, Trash2 as Mt, Image as Ce, Undo as qt, Redo as Dt, Bold as Ft, Italic as Ut, Underline as $t, Strikethrough as Bt, Heading1 as Gt, Heading2 as Wt, Type as Ht, Code as Vt, Quote as Yt, List as Jt, ListOrdered as Kt, Indent as Xt, Outdent as Qt, AlignLeft as Zt, AlignCenter as er, AlignRight as tr, Superscript as rr, Subscript as nr, Link as or, Loader2 as sr, CheckCircle as ar, AlertCircle as ir, Upload as lr } from "lucide-react";
 var we = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {};
 function cr(e) {
   return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
@@ -232,7 +232,7 @@ React keys must be passed directly to JSX without using spread:
         return o();
       }
     };
-    var D, U = {}, p = q.react_stack_bottom_frame.bind(
+    var D, U = {}, g = q.react_stack_bottom_frame.bind(
       q,
       c
     )(), X = A(n(c)), B = {};
@@ -243,7 +243,7 @@ React keys must be passed directly to JSX without using spread:
         y,
         w,
         !1,
-        C ? Error("react-stack-top-frame") : p,
+        C ? Error("react-stack-top-frame") : g,
         C ? A(n(o)) : X
       );
     }, ve.jsxs = function(o, y, w) {
@@ -253,7 +253,7 @@ React keys must be passed directly to JSX without using spread:
         y,
         w,
         !0,
-        C ? Error("react-stack-top-frame") : p,
+        C ? Error("react-stack-top-frame") : g,
         C ? A(n(o)) : X
       );
     };
@@ -293,8 +293,8 @@ const fr = ({
       se = se.parentNode;
     }
     L(ie);
-    const g = [];
-    M && g.push("bold"), S && g.push("italic"), z && g.push("underline"), $ && g.push("strikeThrough"), N && g.push("insertUnorderedList"), G && g.push("insertOrderedList"), x === "left" && g.push("justifyLeft"), x === "center" && g.push("justifyCenter"), x === "right" && g.push("justifyRight"), (ie === "h1" || ie === "h2") && g.push(`formatBlock:${ie}`), f(g);
+    const p = [];
+    M && p.push("bold"), S && p.push("italic"), z && p.push("underline"), $ && p.push("strikeThrough"), N && p.push("insertUnorderedList"), G && p.push("insertOrderedList"), x === "left" && p.push("justifyLeft"), x === "center" && p.push("justifyCenter"), x === "right" && p.push("justifyRight"), (ie === "h1" || ie === "h2") && p.push(`formatBlock:${ie}`), f(p);
   }, [M, S, z, $, N, G, x]);
   me(() => {
     const O = () => {
@@ -321,7 +321,7 @@ const fr = ({
     e("outdent");
   }, U = () => {
     e("undo");
-  }, p = () => {
+  }, g = () => {
     e("redo");
   }, X = () => {
     e("formatBlock", "pre");
@@ -344,7 +344,7 @@ const fr = ({
       command: "redo",
       icon: /* @__PURE__ */ i.jsx(Dt, { size: 18 }),
       title: "Redo",
-      onClick: p
+      onClick: g
     },
     { id: "separator-1", separator: !0 },
     {
@@ -499,7 +499,7 @@ const fr = ({
       title: "Insert Image",
       onClick: u
     }
-  ], C = (O) => /* @__PURE__ */ i.jsx("div", { className: "flex items-center border-r border-gray-200 pr-2 mr-2 last:border-r-0 last:pr-0 last:mr-0", children: O.map((I) => {
+  ], C = (O) => /* @__PURE__ */ i.jsx("div", { className: "toolbar-section flex items-center border-r border-gray-200 pr-2 mr-2 last:border-r-0 last:pr-0 last:mr-0", children: O.map((I) => {
     if (I.separator)
       return /* @__PURE__ */ i.jsx("div", { className: "w-px h-6 bg-gray-300 mx-2" }, I.id);
     const de = I.isActive !== void 0 ? I.isActive : I.command ? m.includes(I.command) || I.command === "formatBlock" && I.value === R : !1;
@@ -514,7 +514,7 @@ const fr = ({
         },
         title: I.title,
         type: "button",
-        className: `min-w-[36px] h-9 flex items-center justify-center rounded-md border transition-all duration-150 ${de ? "bg-blue-100 text-blue-600 border-blue-300 hover:bg-blue-200 shadow-sm" : "bg-white border-gray-300 text-gray-700 hover:bg-gray-100 hover:border-gray-400"} active:scale-95 mx-0.5`,
+        className: `toolbar-button min-w-[36px] h-9 flex items-center justify-center rounded-md border transition-all duration-150 ${de ? "active bg-blue-100 text-blue-600 border-blue-300 hover:bg-blue-200 shadow-sm" : "bg-white border-gray-300 text-gray-700 hover:bg-gray-100 hover:border-gray-400"} active:scale-95 mx-0.5`,
         disabled: I.disabled,
         children: I.icon
       },
@@ -525,7 +525,7 @@ const fr = ({
     "div",
     {
       ref: d,
-      className: "flex flex-col sm:flex-row flex-wrap items-start sm:items-center justify-between p-3 bg-gray-50 border-b border-gray-200 gap-2",
+      className: "toolbar flex flex-col sm:flex-row flex-wrap items-start sm:items-center justify-between p-3 bg-gray-50 border-b border-gray-200 gap-2",
       children: [
         /* @__PURE__ */ i.jsxs("div", { className: "flex flex-wrap items-center gap-1 order-1 w-full sm:w-auto", children: [
           C(Z),
@@ -536,7 +536,7 @@ const fr = ({
           C(oe),
           C(le)
         ] }),
-        c && /* @__PURE__ */ i.jsxs("div", { className: "flex items-center gap-2 order-2 sm:order-3 mt-2 sm:mt-0 flex-shrink-0", children: [
+        c && /* @__PURE__ */ i.jsxs("div", { className: "action-buttons flex items-center gap-2 order-2 sm:order-3 mt-2 sm:mt-0 flex-shrink-0", children: [
           /* @__PURE__ */ i.jsxs(
             "button",
             {
@@ -548,9 +548,9 @@ const fr = ({
               },
               disabled: !l,
               title: "Save Document (Ctrl+S)",
-              className: "flex items-center gap-2 px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-md hover:bg-blue-700 disabled:bg-blue-300 disabled:cursor-not-allowed transition-colors duration-200 active:scale-95",
+              className: "action-button save-button flex items-center gap-2 px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-md hover:bg-blue-700 disabled:bg-blue-300 disabled:cursor-not-allowed transition-colors duration-200 active:scale-95",
               children: [
-                /* @__PURE__ */ i.jsx(gt, { size: 16 }),
+                /* @__PURE__ */ i.jsx(pt, { size: 16 }),
                 /* @__PURE__ */ i.jsx("span", { className: "hidden sm:inline", children: "Save" })
               ]
             }
@@ -565,7 +565,7 @@ const fr = ({
                 }, 10);
               },
               title: "Export as HTML",
-              className: "flex items-center gap-2 px-4 py-2 bg-green-600 text-white text-sm font-medium rounded-md hover:bg-green-700 transition-colors duration-200 active:scale-95",
+              className: "action-button export-button flex items-center gap-2 px-4 py-2 bg-green-600 text-white text-sm font-medium rounded-md hover:bg-green-700 transition-colors duration-200 active:scale-95",
               children: [
                 /* @__PURE__ */ i.jsx(Pt, { size: 16 }),
                 /* @__PURE__ */ i.jsx("span", { className: "hidden sm:inline", children: "Export" })
@@ -582,7 +582,7 @@ const fr = ({
                 }, 10);
               },
               title: "Clear Editor",
-              className: "flex items-center gap-2 px-4 py-2 bg-red-600 text-white text-sm font-medium rounded-md hover:bg-red-700 transition-colors duration-200 active:scale-95",
+              className: "action-button clear-button flex items-center gap-2 px-4 py-2 bg-red-600 text-white text-sm font-medium rounded-md hover:bg-red-700 transition-colors duration-200 active:scale-95",
               children: [
                 /* @__PURE__ */ i.jsx(Mt, { size: 16 }),
                 /* @__PURE__ */ i.jsx("span", { className: "hidden sm:inline", children: "Clear" })
@@ -606,35 +606,35 @@ const fr = ({
       ]
     }
   );
-}, gr = ({
+}, pr = ({
   wordCount: e,
   characterCount: t,
   hasUnsavedChanges: r,
   pendingImagesCount: n = 0
-}) => /* @__PURE__ */ i.jsxs("div", { className: "flex justify-between items-center px-5 py-3 bg-gray-50 border-t border-gray-200 text-sm text-gray-600", children: [
-  /* @__PURE__ */ i.jsxs("div", { className: "flex items-center gap-6", children: [
-    /* @__PURE__ */ i.jsxs("div", { children: [
+}) => /* @__PURE__ */ i.jsxs("div", { className: "status-bar flex justify-between items-center px-5 py-3 bg-gray-50 border-t border-gray-200 text-sm text-gray-600", children: [
+  /* @__PURE__ */ i.jsxs("div", { className: "status-bar-content flex items-center gap-6", children: [
+    /* @__PURE__ */ i.jsxs("div", { className: "status-item", children: [
       "Words: ",
-      /* @__PURE__ */ i.jsx("strong", { className: "text-gray-800", children: e })
+      /* @__PURE__ */ i.jsx("strong", { className: "status-value text-gray-800", children: e })
     ] }),
-    /* @__PURE__ */ i.jsxs("div", { children: [
+    /* @__PURE__ */ i.jsxs("div", { className: "status-item", children: [
       "Characters: ",
-      /* @__PURE__ */ i.jsx("strong", { className: "text-gray-800", children: t })
+      /* @__PURE__ */ i.jsx("strong", { className: "status-value text-gray-800", children: t })
     ] }),
-    n > 0 && /* @__PURE__ */ i.jsxs("div", { className: "flex items-center gap-1", children: [
-      /* @__PURE__ */ i.jsx(Ce, { size: 14, className: "text-blue-600" }),
-      /* @__PURE__ */ i.jsxs("span", { className: "text-blue-600", children: [
+    n > 0 && /* @__PURE__ */ i.jsxs("div", { className: "status-item flex items-center gap-1", children: [
+      /* @__PURE__ */ i.jsx(Ce, { size: 14, className: "status-value text-blue-600" }),
+      /* @__PURE__ */ i.jsxs("span", { className: "status-value text-blue-600", children: [
         n,
         " image",
         n !== 1 ? "s" : ""
       ] })
     ] })
   ] }),
-  /* @__PURE__ */ i.jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ i.jsxs("div", { className: `flex items-center gap-1 ${r ? "text-orange-600" : "text-green-600"}`, children: [
-    r && /* @__PURE__ */ i.jsx(gt, { size: 14, className: "animate-pulse" }),
+  /* @__PURE__ */ i.jsx("div", { className: "status-bar-content flex items-center gap-2", children: /* @__PURE__ */ i.jsxs("div", { className: `flex items-center gap-1 ${r ? "status-unsaved" : "status-saved"}`, children: [
+    r && /* @__PURE__ */ i.jsx(pt, { size: 14, className: "animate-pulse" }),
     /* @__PURE__ */ i.jsx("strong", { children: r ? "Unsaved Changes" : "Saved" })
   ] }) })
-] }), pr = ({
+] }), gr = ({
   initialContent: e = "",
   onImageUpload: t,
   imageUploadEndpoint: r,
@@ -713,7 +713,7 @@ const fr = ({
     try {
       let u = !1;
       if (d === "formatBlock" && v)
-        u = document.execCommand("formatBlock", !1, `<${v}>`);
+        u = document.execCommand("formatBlock", !1, v);
       else if (d === "createLink" && v) {
         const j = window.getSelection();
         j && !j.isCollapsed ? u = document.execCommand("createLink", !1, v) : (document.execCommand("insertHTML", !1, `<a href="${v}" target="_blank">${v}</a>`), u = !0);
@@ -750,9 +750,9 @@ const fr = ({
       });
       const U = document.createElement("img");
       U.src = D, U.alt = d.name, U.className = "max-w-full h-auto border rounded", U.setAttribute("data-image-id", u), U.setAttribute("data-file-name", d.name), U.style.maxWidth = "100%", U.style.height = "auto";
-      const p = M();
-      if (v && p) {
-        p.deleteContents(), p.insertNode(U);
+      const g = M();
+      if (v && g) {
+        g.deleteContents(), g.insertNode(U);
         const X = document.createRange();
         X.setStartAfter(U), X.collapse(!0);
         const B = window.getSelection();
@@ -973,7 +973,7 @@ const fr = ({
 }, hr = (e, t) => ({
   classGroupId: e,
   validator: t
-}), pt = (e = /* @__PURE__ */ new Map(), t = null, r) => ({
+}), gt = (e = /* @__PURE__ */ new Map(), t = null, r) => ({
   nextPart: e,
   validators: t,
   classGroupId: r
@@ -1024,7 +1024,7 @@ const fr = ({
   } = e;
   return kr(r, t);
 }, kr = (e, t) => {
-  const r = pt();
+  const r = gt();
   for (const n in e) {
     const a = e[n];
     We(a, r, n, t);
@@ -1067,7 +1067,7 @@ const fr = ({
   for (let c = 0; c < a; c++) {
     const l = n[c];
     let s = r.nextPart.get(l);
-    s || (s = pt(), r.nextPart.set(l, s)), r = s;
+    s || (s = gt(), r.nextPart.set(l, s)), r = s;
   }
   return r;
 }, Rr = (e) => "isThemeGetter" in e && e.isThemeGetter === !0, Ar = (e) => {
@@ -1237,12 +1237,12 @@ const fr = ({
 }, Mr = [], Y = (e) => {
   const t = (r) => r[e] || Mr;
   return t.isThemeGetter = !0, t;
-}, vt = /^\[(?:(\w[\w-]*):)?(.+)\]$/i, yt = /^\((?:(\w[\w-]*):)?(.+)\)$/i, qr = /^\d+\/\d+$/, Dr = /^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/, Fr = /\d+(%|px|r?em|[sdl]?v([hwib]|min|max)|pt|pc|in|cm|mm|cap|ch|ex|r?lh|cq(w|h|i|b|min|max))|\b(calc|min|max|clamp)\(.+\)|^0$/, Ur = /^(rgba?|hsla?|hwb|(ok)?(lab|lch)|color-mix)\(.+\)$/, $r = /^(inset_)?-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/, Br = /^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/, pe = (e) => qr.test(e), _ = (e) => !!e && !Number.isNaN(Number(e)), ue = (e) => !!e && Number.isInteger(Number(e)), Re = (e) => e.endsWith("%") && _(e.slice(0, -1)), ce = (e) => Dr.test(e), Gr = () => !0, Wr = (e) => (
+}, vt = /^\[(?:(\w[\w-]*):)?(.+)\]$/i, yt = /^\((?:(\w[\w-]*):)?(.+)\)$/i, qr = /^\d+\/\d+$/, Dr = /^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/, Fr = /\d+(%|px|r?em|[sdl]?v([hwib]|min|max)|pt|pc|in|cm|mm|cap|ch|ex|r?lh|cq(w|h|i|b|min|max))|\b(calc|min|max|clamp)\(.+\)|^0$/, Ur = /^(rgba?|hsla?|hwb|(ok)?(lab|lch)|color-mix)\(.+\)$/, $r = /^(inset_)?-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/, Br = /^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/, ge = (e) => qr.test(e), _ = (e) => !!e && !Number.isNaN(Number(e)), ue = (e) => !!e && Number.isInteger(Number(e)), Re = (e) => e.endsWith("%") && _(e.slice(0, -1)), ce = (e) => Dr.test(e), Gr = () => !0, Wr = (e) => (
   // `colorFunctionRegex` check is necessary because color functions can have percentages in them which which would be incorrectly classified as lengths.
   // For example, `hsl(0 0% 0%)` would be classified as a length without this check.
   // I could also use lookbehind assertion in `lengthUnitRegex` but that isn't supported widely enough.
   Fr.test(e) && !Ur.test(e)
-), wt = () => !1, Hr = (e) => $r.test(e), Vr = (e) => Br.test(e), Yr = (e) => !b(e) && !h(e), Jr = (e) => be(e, jt, wt), b = (e) => vt.test(e), ge = (e) => be(e, Ct, Wr), Ae = (e) => be(e, en, _), Qe = (e) => be(e, kt, wt), Kr = (e) => be(e, Tt, Vr), Te = (e) => be(e, St, Hr), h = (e) => yt.test(e), ye = (e) => he(e, Ct), Xr = (e) => he(e, tn), Ze = (e) => he(e, kt), Qr = (e) => he(e, jt), Zr = (e) => he(e, Tt), je = (e) => he(e, St, !0), be = (e, t, r) => {
+), wt = () => !1, Hr = (e) => $r.test(e), Vr = (e) => Br.test(e), Yr = (e) => !b(e) && !h(e), Jr = (e) => be(e, jt, wt), b = (e) => vt.test(e), pe = (e) => be(e, Ct, Wr), Ae = (e) => be(e, en, _), Qe = (e) => be(e, kt, wt), Kr = (e) => be(e, Tt, Vr), Te = (e) => be(e, St, Hr), h = (e) => yt.test(e), ye = (e) => he(e, Ct), Xr = (e) => he(e, tn), Ze = (e) => he(e, kt), Qr = (e) => he(e, jt), Zr = (e) => he(e, Tt), je = (e) => he(e, St, !0), be = (e, t, r) => {
   const n = vt.exec(e);
   return n ? n[1] ? t(n[1]) : r(n[2]) : !1;
 }, he = (e, t, r = !1) => {
@@ -1267,15 +1267,15 @@ const fr = ({
     "bottom-left",
     // Deprecated since Tailwind CSS v4.1.0, see https://github.com/tailwindlabs/tailwindcss/pull/17378
     "left-bottom"
-  ], V = () => [...N(), h, b], G = () => ["auto", "hidden", "clip", "visible", "scroll"], J = () => ["auto", "contain", "none"], x = () => [h, b, m], P = () => [pe, "full", "auto", ...x()], d = () => [ue, "none", "subgrid", h, b], v = () => ["auto", {
+  ], V = () => [...N(), h, b], G = () => ["auto", "hidden", "clip", "visible", "scroll"], J = () => ["auto", "contain", "none"], x = () => [h, b, m], P = () => [ge, "full", "auto", ...x()], d = () => [ue, "none", "subgrid", h, b], v = () => ["auto", {
     span: ["full", ue, h, b]
-  }, ue, h, b], T = () => [ue, "auto", h, b], u = () => ["auto", "min", "max", "fr", h, b], j = () => ["start", "end", "center", "between", "around", "evenly", "stretch", "baseline", "center-safe", "end-safe"], A = () => ["start", "end", "center", "stretch", "center-safe", "end-safe"], D = () => ["auto", ...x()], U = () => [pe, "auto", "full", "dvw", "dvh", "lvw", "lvh", "svw", "svh", "min", "max", "fit", ...x()], p = () => [e, h, b], X = () => [...N(), Ze, Qe, {
+  }, ue, h, b], T = () => [ue, "auto", h, b], u = () => ["auto", "min", "max", "fr", h, b], j = () => ["start", "end", "center", "between", "around", "evenly", "stretch", "baseline", "center-safe", "end-safe"], A = () => ["start", "end", "center", "stretch", "center-safe", "end-safe"], D = () => ["auto", ...x()], U = () => [ge, "auto", "full", "dvw", "dvh", "lvw", "lvh", "svw", "svh", "min", "max", "fit", ...x()], g = () => [e, h, b], X = () => [...N(), Ze, Qe, {
     position: [h, b]
   }], B = () => ["no-repeat", {
     repeat: ["", "x", "y", "space", "round"]
   }], o = () => ["auto", "cover", "contain", Qr, Jr, {
     size: [h, b]
-  }], y = () => [Re, ye, ge], w = () => [
+  }], y = () => [Re, ye, pe], w = () => [
     // Deprecated since Tailwind CSS v4.0.0
     "",
     "none",
@@ -1283,14 +1283,14 @@ const fr = ({
     f,
     h,
     b
-  ], C = () => ["", _, ye, ge], Z = () => ["solid", "dashed", "dotted", "double"], ne = () => ["normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"], E = () => [_, Re, Ze, Qe], Q = () => [
+  ], C = () => ["", _, ye, pe], Z = () => ["solid", "dashed", "dotted", "double"], ne = () => ["normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"], E = () => [_, Re, Ze, Qe], Q = () => [
     // Deprecated since Tailwind CSS v4.0.0
     "",
     "none",
     S,
     h,
     b
-  ], te = () => ["none", _, h, b], oe = () => ["none", _, h, b], le = () => [_, h, b], O = () => [pe, "full", ...x()];
+  ], te = () => ["none", _, h, b], oe = () => ["none", _, h, b], le = () => [_, h, b], O = () => [ge, "full", ...x()];
   return {
     cacheSize: 500,
     theme: {
@@ -1323,7 +1323,7 @@ const fr = ({
        * @see https://tailwindcss.com/docs/aspect-ratio
        */
       aspect: [{
-        aspect: ["auto", "square", pe, b, h, z]
+        aspect: ["auto", "square", ge, b, h, z]
       }],
       /**
        * Container
@@ -1546,7 +1546,7 @@ const fr = ({
        * @see https://tailwindcss.com/docs/flex-basis
        */
       basis: [{
-        basis: [pe, "full", "auto", s, ...x()]
+        basis: [ge, "full", "auto", s, ...x()]
       }],
       /**
        * Flex Direction
@@ -1567,7 +1567,7 @@ const fr = ({
        * @see https://tailwindcss.com/docs/flex
        */
       flex: [{
-        flex: [_, pe, "auto", "initial", "none", b]
+        flex: [_, ge, "auto", "initial", "none", b]
       }],
       /**
        * Flex Grow
@@ -1983,7 +1983,7 @@ const fr = ({
        * @see https://tailwindcss.com/docs/font-size
        */
       "font-size": [{
-        text: ["base", r, ye, ge]
+        text: ["base", r, ye, pe]
       }],
       /**
        * Font Smoothing
@@ -2105,14 +2105,14 @@ const fr = ({
        * @see https://v3.tailwindcss.com/docs/placeholder-color
        */
       "placeholder-color": [{
-        placeholder: p()
+        placeholder: g()
       }],
       /**
        * Text Color
        * @see https://tailwindcss.com/docs/text-color
        */
       "text-color": [{
-        text: p()
+        text: g()
       }],
       /**
        * Text Decoration
@@ -2131,14 +2131,14 @@ const fr = ({
        * @see https://tailwindcss.com/docs/text-decoration-thickness
        */
       "text-decoration-thickness": [{
-        decoration: [_, "from-font", "auto", h, ge]
+        decoration: [_, "from-font", "auto", h, pe]
       }],
       /**
        * Text Decoration Color
        * @see https://tailwindcss.com/docs/text-decoration-color
        */
       "text-decoration-color": [{
-        decoration: p()
+        decoration: g()
       }],
       /**
        * Text Underline Offset
@@ -2276,7 +2276,7 @@ const fr = ({
        * @see https://tailwindcss.com/docs/background-color
        */
       "bg-color": [{
-        bg: p()
+        bg: g()
       }],
       /**
        * Gradient Color Stops From Position
@@ -2304,21 +2304,21 @@ const fr = ({
        * @see https://tailwindcss.com/docs/gradient-color-stops
        */
       "gradient-from": [{
-        from: p()
+        from: g()
       }],
       /**
        * Gradient Color Stops Via
        * @see https://tailwindcss.com/docs/gradient-color-stops
        */
       "gradient-via": [{
-        via: p()
+        via: g()
       }],
       /**
        * Gradient Color Stops To
        * @see https://tailwindcss.com/docs/gradient-color-stops
        */
       "gradient-to": [{
-        to: p()
+        to: g()
       }],
       // ---------------
       // --- Borders ---
@@ -2534,70 +2534,70 @@ const fr = ({
        * @see https://tailwindcss.com/docs/border-color
        */
       "border-color": [{
-        border: p()
+        border: g()
       }],
       /**
        * Border Color X
        * @see https://tailwindcss.com/docs/border-color
        */
       "border-color-x": [{
-        "border-x": p()
+        "border-x": g()
       }],
       /**
        * Border Color Y
        * @see https://tailwindcss.com/docs/border-color
        */
       "border-color-y": [{
-        "border-y": p()
+        "border-y": g()
       }],
       /**
        * Border Color S
        * @see https://tailwindcss.com/docs/border-color
        */
       "border-color-s": [{
-        "border-s": p()
+        "border-s": g()
       }],
       /**
        * Border Color E
        * @see https://tailwindcss.com/docs/border-color
        */
       "border-color-e": [{
-        "border-e": p()
+        "border-e": g()
       }],
       /**
        * Border Color Top
        * @see https://tailwindcss.com/docs/border-color
        */
       "border-color-t": [{
-        "border-t": p()
+        "border-t": g()
       }],
       /**
        * Border Color Right
        * @see https://tailwindcss.com/docs/border-color
        */
       "border-color-r": [{
-        "border-r": p()
+        "border-r": g()
       }],
       /**
        * Border Color Bottom
        * @see https://tailwindcss.com/docs/border-color
        */
       "border-color-b": [{
-        "border-b": p()
+        "border-b": g()
       }],
       /**
        * Border Color Left
        * @see https://tailwindcss.com/docs/border-color
        */
       "border-color-l": [{
-        "border-l": p()
+        "border-l": g()
       }],
       /**
        * Divide Color
        * @see https://tailwindcss.com/docs/divide-color
        */
       "divide-color": [{
-        divide: p()
+        divide: g()
       }],
       /**
        * Outline Style
@@ -2618,14 +2618,14 @@ const fr = ({
        * @see https://tailwindcss.com/docs/outline-width
        */
       "outline-w": [{
-        outline: ["", _, ye, ge]
+        outline: ["", _, ye, pe]
       }],
       /**
        * Outline Color
        * @see https://tailwindcss.com/docs/outline-color
        */
       "outline-color": [{
-        outline: p()
+        outline: g()
       }],
       // ---------------
       // --- Effects ---
@@ -2649,7 +2649,7 @@ const fr = ({
        * @see https://tailwindcss.com/docs/box-shadow#setting-the-shadow-color
        */
       "shadow-color": [{
-        shadow: p()
+        shadow: g()
       }],
       /**
        * Inset Box Shadow
@@ -2663,7 +2663,7 @@ const fr = ({
        * @see https://tailwindcss.com/docs/box-shadow#setting-the-inset-shadow-color
        */
       "inset-shadow-color": [{
-        "inset-shadow": p()
+        "inset-shadow": g()
       }],
       /**
        * Ring Width
@@ -2684,7 +2684,7 @@ const fr = ({
        * @see https://tailwindcss.com/docs/box-shadow#setting-the-ring-color
        */
       "ring-color": [{
-        ring: p()
+        ring: g()
       }],
       /**
        * Ring Offset Width
@@ -2693,7 +2693,7 @@ const fr = ({
        * @see https://github.com/tailwindlabs/tailwindcss/blob/v4.0.0/packages/tailwindcss/src/utilities.ts#L4158
        */
       "ring-offset-w": [{
-        "ring-offset": [_, ge]
+        "ring-offset": [_, pe]
       }],
       /**
        * Ring Offset Color
@@ -2702,7 +2702,7 @@ const fr = ({
        * @see https://github.com/tailwindlabs/tailwindcss/blob/v4.0.0/packages/tailwindcss/src/utilities.ts#L4158
        */
       "ring-offset-color": [{
-        "ring-offset": p()
+        "ring-offset": g()
       }],
       /**
        * Inset Ring Width
@@ -2716,7 +2716,7 @@ const fr = ({
        * @see https://tailwindcss.com/docs/box-shadow#setting-the-inset-ring-color
        */
       "inset-ring-color": [{
-        "inset-ring": p()
+        "inset-ring": g()
       }],
       /**
        * Text Shadow
@@ -2730,7 +2730,7 @@ const fr = ({
        * @see https://tailwindcss.com/docs/text-shadow#setting-the-shadow-color
        */
       "text-shadow-color": [{
-        "text-shadow": p()
+        "text-shadow": g()
       }],
       /**
        * Opacity
@@ -2781,10 +2781,10 @@ const fr = ({
         "mask-linear-to": E()
       }],
       "mask-image-linear-from-color": [{
-        "mask-linear-from": p()
+        "mask-linear-from": g()
       }],
       "mask-image-linear-to-color": [{
-        "mask-linear-to": p()
+        "mask-linear-to": g()
       }],
       "mask-image-t-from-pos": [{
         "mask-t-from": E()
@@ -2793,10 +2793,10 @@ const fr = ({
         "mask-t-to": E()
       }],
       "mask-image-t-from-color": [{
-        "mask-t-from": p()
+        "mask-t-from": g()
       }],
       "mask-image-t-to-color": [{
-        "mask-t-to": p()
+        "mask-t-to": g()
       }],
       "mask-image-r-from-pos": [{
         "mask-r-from": E()
@@ -2805,10 +2805,10 @@ const fr = ({
         "mask-r-to": E()
       }],
       "mask-image-r-from-color": [{
-        "mask-r-from": p()
+        "mask-r-from": g()
       }],
       "mask-image-r-to-color": [{
-        "mask-r-to": p()
+        "mask-r-to": g()
       }],
       "mask-image-b-from-pos": [{
         "mask-b-from": E()
@@ -2817,10 +2817,10 @@ const fr = ({
         "mask-b-to": E()
       }],
       "mask-image-b-from-color": [{
-        "mask-b-from": p()
+        "mask-b-from": g()
       }],
       "mask-image-b-to-color": [{
-        "mask-b-to": p()
+        "mask-b-to": g()
       }],
       "mask-image-l-from-pos": [{
         "mask-l-from": E()
@@ -2829,10 +2829,10 @@ const fr = ({
         "mask-l-to": E()
       }],
       "mask-image-l-from-color": [{
-        "mask-l-from": p()
+        "mask-l-from": g()
       }],
       "mask-image-l-to-color": [{
-        "mask-l-to": p()
+        "mask-l-to": g()
       }],
       "mask-image-x-from-pos": [{
         "mask-x-from": E()
@@ -2841,10 +2841,10 @@ const fr = ({
         "mask-x-to": E()
       }],
       "mask-image-x-from-color": [{
-        "mask-x-from": p()
+        "mask-x-from": g()
       }],
       "mask-image-x-to-color": [{
-        "mask-x-to": p()
+        "mask-x-to": g()
       }],
       "mask-image-y-from-pos": [{
         "mask-y-from": E()
@@ -2853,10 +2853,10 @@ const fr = ({
         "mask-y-to": E()
       }],
       "mask-image-y-from-color": [{
-        "mask-y-from": p()
+        "mask-y-from": g()
       }],
       "mask-image-y-to-color": [{
-        "mask-y-to": p()
+        "mask-y-to": g()
       }],
       "mask-image-radial": [{
         "mask-radial": [h, b]
@@ -2868,10 +2868,10 @@ const fr = ({
         "mask-radial-to": E()
       }],
       "mask-image-radial-from-color": [{
-        "mask-radial-from": p()
+        "mask-radial-from": g()
       }],
       "mask-image-radial-to-color": [{
-        "mask-radial-to": p()
+        "mask-radial-to": g()
       }],
       "mask-image-radial-shape": [{
         "mask-radial": ["circle", "ellipse"]
@@ -2895,10 +2895,10 @@ const fr = ({
         "mask-conic-to": E()
       }],
       "mask-image-conic-from-color": [{
-        "mask-conic-from": p()
+        "mask-conic-from": g()
       }],
       "mask-image-conic-to-color": [{
-        "mask-conic-to": p()
+        "mask-conic-to": g()
       }],
       /**
        * Mask Mode
@@ -3005,7 +3005,7 @@ const fr = ({
        * @see https://tailwindcss.com/docs/filter-drop-shadow#setting-the-shadow-color
        */
       "drop-shadow-color": [{
-        "drop-shadow": p()
+        "drop-shadow": g()
       }],
       /**
        * Grayscale
@@ -3376,7 +3376,7 @@ const fr = ({
        * @see https://tailwindcss.com/docs/accent-color
        */
       accent: [{
-        accent: p()
+        accent: g()
       }],
       /**
        * Appearance
@@ -3390,7 +3390,7 @@ const fr = ({
        * @see https://tailwindcss.com/docs/just-in-time-mode#caret-color-utilities
        */
       "caret-color": [{
-        caret: p()
+        caret: g()
       }],
       /**
        * Color Scheme
@@ -3636,21 +3636,21 @@ const fr = ({
        * @see https://tailwindcss.com/docs/fill
        */
       fill: [{
-        fill: ["none", ...p()]
+        fill: ["none", ...g()]
       }],
       /**
        * Stroke Width
        * @see https://tailwindcss.com/docs/stroke-width
        */
       "stroke-w": [{
-        stroke: [_, ye, ge, Ae]
+        stroke: [_, ye, pe, Ae]
       }],
       /**
        * Stroke
        * @see https://tailwindcss.com/docs/stroke
        */
       stroke: [{
-        stroke: ["none", ...p()]
+        stroke: ["none", ...g()]
       }],
       // ---------------------
       // --- Accessibility ---
@@ -3844,7 +3844,7 @@ function fn() {
   return Fe = e, Fe;
 }
 var Ue, ut;
-function gn() {
+function pn() {
   if (ut) return Ue;
   ut = 1;
   var e = mn(), t = fn(), r = "[object Symbol]";
@@ -3854,10 +3854,10 @@ function gn() {
   return Ue = n, Ue;
 }
 var $e, mt;
-function pn() {
+function gn() {
   if (mt) return $e;
   mt = 1;
-  var e = cn(), t = At(), r = gn(), n = NaN, a = /^[-+]0x[0-9a-f]+$/i, c = /^0b[01]+$/i, l = /^0o[0-7]+$/i, s = parseInt;
+  var e = cn(), t = At(), r = pn(), n = NaN, a = /^[-+]0x[0-9a-f]+$/i, c = /^0b[01]+$/i, l = /^0o[0-7]+$/i, s = parseInt;
   function m(f) {
     if (typeof f == "number")
       return f;
@@ -3879,7 +3879,7 @@ var Be, ft;
 function bn() {
   if (ft) return Be;
   ft = 1;
-  var e = At(), t = an(), r = pn(), n = "Expected a function", a = Math.max, c = Math.min;
+  var e = At(), t = an(), r = gn(), n = "Expected a function", a = Math.max, c = Math.min;
   function l(s, m, f) {
     var R, L, M, q, S, F, z = 0, H = !1, $ = !1, k = !0;
     if (typeof s != "function")
@@ -3971,13 +3971,13 @@ const xn = /* @__PURE__ */ cr(hn), vn = zt(
       handleDrop: u,
       insertImage: j,
       uploadPendingImages: A
-    } = pr({
+    } = gr({
       initialContent: e,
       onImageUpload: f,
       imageUploadEndpoint: R,
       allowedImageTypes: L,
       maxImageSize: M
-    }), D = re(null), U = re(!1), p = re(null), [X, B] = ee(!1), [o, y] = ee(""), [w, C] = ee(!1), [Z, ne] = ee(0), E = re(null), Q = re(t), te = re(k.content), oe = re(k.title);
+    }), D = re(null), U = re(!1), g = re(null), [X, B] = ee(!1), [o, y] = ee(""), [w, C] = ee(!1), [Z, ne] = ee(0), E = re(null), Q = re(t), te = re(k.content), oe = re(k.title);
     me(() => {
       Q.current = t;
     }, [t]), Ot($, () => ({
@@ -3988,23 +3988,23 @@ const xn = /* @__PURE__ */ cr(hn), vn = zt(
       focus: () => {
         if (N.current) {
           N.current.focus();
-          const g = document.createRange();
-          g.selectNodeContents(N.current), g.collapse(!1);
+          const p = document.createRange();
+          p.selectNodeContents(N.current), p.collapse(!1);
           const K = window.getSelection();
-          K?.removeAllRanges(), K?.addRange(g);
+          K?.removeAllRanges(), K?.addRange(p);
         }
       },
-      insertText: (g) => {
-        N.current && (document.execCommand("insertText", !1, g), V(N.current.innerHTML));
+      insertText: (p) => {
+        N.current && (document.execCommand("insertText", !1, p), V(N.current.innerHTML));
       },
-      insertHTML: (g) => {
-        N.current && (document.execCommand("insertHTML", !1, g), V(N.current.innerHTML));
+      insertHTML: (p) => {
+        N.current && (document.execCommand("insertHTML", !1, p), V(N.current.innerHTML));
       },
-      setHTML: (g) => {
-        v(g);
+      setHTML: (p) => {
+        v(p);
       },
-      executeCommand: (g, K) => {
-        J(g, K);
+      executeCommand: (p, K) => {
+        J(p, K);
       }
     })), me(() => {
       q && N.current && !U.current && (q(N.current), U.current = !0);
@@ -4012,23 +4012,23 @@ const xn = /* @__PURE__ */ cr(hn), vn = zt(
       H && N.current && !a && setTimeout(() => {
         if (N.current) {
           N.current.focus();
-          const g = document.createRange();
-          g.selectNodeContents(N.current), g.collapse(!1);
+          const p = document.createRange();
+          p.selectNodeContents(N.current), p.collapse(!1);
           const K = window.getSelection();
-          K?.removeAllRanges(), K?.addRange(g);
+          K?.removeAllRanges(), K?.addRange(p);
         }
       }, 100);
-    }, [H, a, N]), me(() => (p.current = xn(
-      (g, K, ae) => {
-        Q.current?.(g, K, ae);
+    }, [H, a, N]), me(() => (g.current = xn(
+      (p, K, ae) => {
+        Q.current?.(p, K, ae);
       },
       S
     ), () => {
-      p.current && p.current.cancel();
+      g.current && g.current.cancel();
     }), [S]), me(() => {
       if (!Q.current || k.content === te.current && k.title === oe.current)
         return;
-      const g = (() => {
+      const p = (() => {
         try {
           return P({
             includeStyles: !1,
@@ -4038,11 +4038,11 @@ const xn = /* @__PURE__ */ cr(hn), vn = zt(
           return `<!DOCTYPE html><html><body>${k.content}</body></html>`;
         }
       })();
-      te.current = k.content, oe.current = k.title, S > 0 && p.current ? p.current(
+      te.current = k.content, oe.current = k.title, S > 0 && g.current ? g.current(
         k.content,
-        g,
+        p,
         k.title
-      ) : Q.current(k.content, g, k.title);
+      ) : Q.current(k.content, p, k.title);
     }, [
       k.content,
       k.title,
@@ -4050,7 +4050,7 @@ const xn = /* @__PURE__ */ cr(hn), vn = zt(
       S
     ]);
     const le = W(async () => {
-      if (p.current && p.current.flush?.(), k.pendingImages.length > 0) {
+      if (g.current && g.current.flush?.(), k.pendingImages.length > 0) {
         C(!0);
         try {
           await A(), y("Images uploaded successfully!"), setTimeout(() => y(""), 3e3);
@@ -4063,9 +4063,9 @@ const xn = /* @__PURE__ */ cr(hn), vn = zt(
           C(!1);
         }
       }
-      const g = x();
-      if (!g.success) {
-        y(g.error || "Please fix validation errors before saving."), B(!0), setTimeout(() => {
+      const p = x();
+      if (!p.success) {
+        y(p.error || "Please fix validation errors before saving."), B(!0), setTimeout(() => {
           B(!1), y("");
         }, 3e3);
         return;
@@ -4086,20 +4086,20 @@ const xn = /* @__PURE__ */ cr(hn), vn = zt(
       P,
       r
     ]), O = W(async () => {
-      if (p.current && p.current.flush?.(), k.pendingImages.length > 0) {
+      if (g.current && g.current.flush?.(), k.pendingImages.length > 0) {
         C(!0);
         try {
           await A();
-        } catch (g) {
-          console.error("Failed to upload images:", g);
+        } catch (p) {
+          console.error("Failed to upload images:", p);
         } finally {
           C(!1);
         }
       }
       try {
-        const g = P();
-        n?.(g);
-        const K = new Blob([g], { type: "text/html" }), ae = URL.createObjectURL(K), fe = document.createElement("a");
+        const p = P();
+        n?.(p);
+        const K = new Blob([p], { type: "text/html" }), ae = URL.createObjectURL(K), fe = document.createElement("a");
         fe.href = ae, fe.download = `${k.title.replace(/[^\w\s]/gi, "").replace(/\s+/g, "_") || "document"}.html`, document.body.appendChild(fe), fe.click(), document.body.removeChild(fe), URL.revokeObjectURL(ae), y("Document exported successfully!"), B(!0), setTimeout(() => {
           B(!1), y("");
         }, 2e3);
@@ -4109,13 +4109,13 @@ const xn = /* @__PURE__ */ cr(hn), vn = zt(
         }, 3e3);
       }
     }, [k, A, P, n]), I = W(
-      (g) => {
-        V(g);
+      (p) => {
+        V(p);
       },
       [V]
-    ), de = async (g) => {
-      if (!g.target.files || a) return;
-      const K = Array.from(g.target.files);
+    ), de = async (p) => {
+      if (!p.target.files || a) return;
+      const K = Array.from(p.target.files);
       let ae = 0;
       const fe = K.length;
       for (const Nt of K)
@@ -4124,18 +4124,18 @@ const xn = /* @__PURE__ */ cr(hn), vn = zt(
         } catch (It) {
           console.error("Failed to insert image:", It);
         }
-      ne(0), g.target.value = "";
+      ne(0), p.target.value = "";
     }, se = W(() => {
       a || N.current && N.current.focus();
-    }, [a, N]), ie = W((g) => {
-      (g.ctrlKey || g.metaKey) && g.key === "s" && (g.preventDefault(), le()), (g.ctrlKey || g.metaKey) && g.key === "e" && (g.preventDefault(), O()), (g.ctrlKey || g.metaKey) && g.key === "k" && g.shiftKey && (g.preventDefault(), d());
+    }, [a, N]), ie = W((p) => {
+      (p.ctrlKey || p.metaKey) && p.key === "s" && (p.preventDefault(), le()), (p.ctrlKey || p.metaKey) && p.key === "e" && (p.preventDefault(), O()), (p.ctrlKey || p.metaKey) && p.key === "k" && p.shiftKey && (p.preventDefault(), d());
     }, [le, O, d]);
     return /* @__PURE__ */ i.jsxs(
       "div",
       {
         ref: E,
         className: Ee(
-          "relative w-full bg-white border border-gray-300 rounded-lg overflow-hidden flex flex-col",
+          "text-editor relative w-full bg-white border border-gray-300 rounded-lg overflow-hidden flex flex-col",
           a && "pointer-events-none opacity-80",
           F
         ),
@@ -4147,7 +4147,7 @@ const xn = /* @__PURE__ */ cr(hn), vn = zt(
               {
                 className: "w-full text-xl md:text-2xl font-bold bg-transparent outline-none placeholder:text-gray-400",
                 value: k.title,
-                onChange: (g) => G(g.target.value),
+                onChange: (p) => G(p.target.value),
                 placeholder: "Document Title",
                 readOnly: a,
                 maxLength: 100
@@ -4206,15 +4206,15 @@ const xn = /* @__PURE__ */ cr(hn), vn = zt(
               {
                 ref: N,
                 className: Ee(
-                  "flex-1 p-4 md:p-6 outline-none overflow-y-auto min-h-[200px] bg-transparent z-10",
+                  "editor-content flex-1 p-4 md:p-6 outline-none overflow-y-auto min-h-[200px] bg-transparent z-10",
                   a ? "cursor-default select-text" : "cursor-text"
                 ),
                 contentEditable: !a,
                 suppressContentEditableWarning: !0,
-                onInput: (g) => I(g.currentTarget.innerHTML),
+                onInput: (p) => I(p.currentTarget.innerHTML),
                 onPaste: T,
                 onDrop: u,
-                onDragOver: (g) => g.preventDefault(),
+                onDragOver: (p) => p.preventDefault(),
                 onClick: se,
                 onKeyDown: ie,
                 "data-placeholder": z,
@@ -4245,7 +4245,7 @@ const xn = /* @__PURE__ */ cr(hn), vn = zt(
             )
           ] }),
           s && /* @__PURE__ */ i.jsx(
-            gr,
+            pr,
             {
               wordCount: k.wordCount,
               characterCount: k.characterCount,