@forgedevstack/bear 1.0.6 → 1.0.7

package/dist/components/RichEditor/RichEditor.js

@@ -1,84 +1,85 @@
-import { jsxs as me, jsx as t } from "react/jsx-runtime";
-import { useRef as pe, useState as C, useEffect as _, useCallback as d } from "react";
-import { cn as b } from "../../utils/cn.js";
-import { getActiveFormats as be, queryCommandValue as Re, execCommand as u, insertLink as Te, setTextColor as x, setHighlightColor as S, fileToDataUrl as v, insertImage as A } from "./helpers/formatHelpers.js";
-import { RICH_EDITOR_MIN_HEIGHT as ye, RICH_EDITOR_DEFAULT_TOOLBAR as _e, RICH_EDITOR_CONTENT_STYLES as Ee, RICH_EDITOR_BUTTON_CONFIG as O, RICH_EDITOR_TOOLBAR_CLASSES as Le, RICH_EDITOR_CONTENT_CLASSES as ze, RICH_EDITOR_ROOT_CLASSES as He, RICH_EDITOR_DIVIDER_CLASSES as ke, RICH_EDITOR_HEADING_OPTIONS as xe } from "./RichEditor.const.js";
+import { jsxs as Re, jsx as t } from "react/jsx-runtime";
+import { useRef as Te, useState as I, useEffect as y, useCallback as d } from "react";
+import { cn as R } from "../../utils/cn.js";
+import { getActiveFormats as be, queryCommandValue as _e, execCommand as u, insertLink as Ee, setTextColor as x, setHighlightColor as A, fileToDataUrl as S, insertImage as v } from "./helpers/formatHelpers.js";
+import { RICH_EDITOR_MIN_HEIGHT as ye, RICH_EDITOR_DEFAULT_TOOLBAR as Le, RICH_EDITOR_CONTENT_STYLES as He, RICH_EDITOR_BUTTON_CONFIG as B, RICH_EDITOR_MOBILE_TOOLBAR as Oe, RICH_EDITOR_TOOLBAR_CLASSES as ze, RICH_EDITOR_CONTENT_CLASSES as ke, RICH_EDITOR_ROOT_CLASSES as xe, RICH_EDITOR_DIVIDER_CLASSES as Ae, RICH_EDITOR_HEADING_OPTIONS as Se, RICH_EDITOR_MOBILE_MORE_ITEMS as ve, RICH_EDITOR_MOBILE_BREAKPOINT as Be } from "./RichEditor.const.js";
+import { useMediaQuery as De } from "../../hooks/useMediaQuery.js";
 import { ToolbarButton as f } from "./components/ToolbarButton/ToolbarButton.js";
-import { ToolbarDropdown as Se } from "./components/ToolbarDropdown/ToolbarDropdown.js";
+import { ToolbarDropdown as Ne } from "./components/ToolbarDropdown/ToolbarDropdown.js";
 import { ToolbarColorPicker as D } from "./components/ToolbarColorPicker/ToolbarColorPicker.js";
-import { ToolbarMore as ve } from "./components/ToolbarMore/ToolbarMore.js";
-import { TextIcon as Ae, InsertLinkIcon as B, InsertPhotoIcon as F, AlignLeftIcon as N, AlignCenterIcon as w, AlignRightIcon as U, AlignJustifyIcon as M, IndentIncreaseIcon as V, IndentDecreaseIcon as j, FormatClearIcon as J, TableIcon as Oe, CodeIcon as De, QuoteIcon as Be, ListNumberedIcon as Fe, ListBulletIcon as Ne, Heading3Icon as we, Heading2Icon as Ue, Heading1Icon as Me, StrikethroughIcon as Ve, UnderlineIcon as je, ItalicIcon as Je, BoldIcon as Pe } from "../Icon/icons/editor.js";
-const qe = 6, nt = (P) => {
+import { ToolbarMore as Fe } from "./components/ToolbarMore/ToolbarMore.js";
+import { TextIcon as Me, InsertLinkIcon as N, InsertPhotoIcon as F, AlignLeftIcon as M, AlignCenterIcon as w, AlignRightIcon as U, AlignJustifyIcon as V, IndentIncreaseIcon as P, IndentDecreaseIcon as j, FormatClearIcon as J, TableIcon as we, CodeIcon as Ue, QuoteIcon as Ve, ListNumberedIcon as Pe, ListBulletIcon as je, Heading3Icon as Je, Heading2Icon as $e, Heading1Icon as qe, StrikethroughIcon as Ge, UnderlineIcon as Ke, ItalicIcon as Qe, BoldIcon as Ye } from "../Icon/icons/editor.js";
+const We = 6, ct = ($) => {
   const {
-    value: I,
-    defaultValue: E = "",
-    onChange: R,
+    value: C,
+    defaultValue: L = "",
+    onChange: T,
     placeholder: q = "Start typing...",
     disabled: i = !1,
     readOnly: o = !1,
-    minHeight: T = ye,
+    minHeight: b = ye,
     maxHeight: m,
-    toolbar: L = _e,
-    className: G = "",
-    testId: $,
+    toolbar: G = Le,
+    className: K = "",
+    testId: Q,
     id: Y,
-    allowImagePaste: z = !0,
-    ...K
-  } = P, a = pe(null), [Q, W] = C(/* @__PURE__ */ new Set()), [X, H] = C("p"), [Z, ee] = C("#000000"), [te, ne] = C("#fef08a"), [ie, oe] = C([]), [re, le] = C([]);
-  _(() => {
+    allowImagePaste: H = !0,
+    ...W
+  } = $, a = Te(null), _ = De(`(max-width: ${Be}px)`), O = _ ? Oe : G, [X, Z] = I(/* @__PURE__ */ new Set()), [ee, z] = I("p"), [te, ne] = I("#000000"), [ie, oe] = I("#fef08a"), [re, le] = I([]), [ae, se] = I([]);
+  y(() => {
     const e = "bear-rich-editor-styles";
     if (!document.getElementById(e)) {
       const n = document.createElement("style");
-      n.id = e, n.textContent = Ee, document.head.appendChild(n);
+      n.id = e, n.textContent = He, document.head.appendChild(n);
     }
-  }, []), _(() => {
-    a.current && I !== void 0 && a.current.innerHTML !== I && (a.current.innerHTML = I);
-  }, [I]), _(() => {
-    a.current && E && !I && (a.current.innerHTML = E);
+  }, []), y(() => {
+    a.current && C !== void 0 && a.current.innerHTML !== C && (a.current.innerHTML = C);
+  }, [C]), y(() => {
+    a.current && L && !C && (a.current.innerHTML = L);
   }, []);
   const h = d(() => {
-    W(be());
-    const e = Re("formatBlock");
-    e && H(e.toLowerCase().replace(/[<>]/g, ""));
+    Z(be());
+    const e = _e("formatBlock");
+    e && z(e.toLowerCase().replace(/[<>]/g, ""));
   }, []), l = d(() => {
-    a.current && R && R(a.current.innerHTML), h();
-  }, [R, h]), ae = d((e) => {
+    a.current && T && T(a.current.innerHTML), h();
+  }, [T, h]), ce = d((e) => {
     var s;
     if (i || o) return;
     (s = a.current) == null || s.focus();
-    const n = O[e];
+    const n = B[e];
     if (!n) return;
     const c = "value" in n ? n.value : void 0;
     c ? u(n.command, c) : u(n.command), h(), l();
-  }, [i, o, h, l]), se = d((e) => {
+  }, [i, o, h, l]), de = d((e) => {
     var n;
-    i || o || ((n = a.current) == null || n.focus(), u("formatBlock", e), H(e), l());
-  }, [i, o, l]), ce = d(() => {
+    i || o || ((n = a.current) == null || n.focus(), u("formatBlock", e), z(e), l());
+  }, [i, o, l]), ue = d(() => {
     var s;
     if (i || o) return;
     const e = window.getSelection(), n = e && e.toString().length > 0, c = prompt("Enter URL:", n ? "" : "https://");
-    c && ((s = a.current) == null || s.focus(), Te(c), l());
+    c && ((s = a.current) == null || s.focus(), Ee(c), l());
   }, [i, o, l]), p = d((e, n) => {
     if (!e) return;
-    (n === "text" ? oe : le)((s) => {
+    (n === "text" ? le : se)((s) => {
       const r = s.filter((g) => g !== e);
-      return [e, ...r].slice(0, qe);
+      return [e, ...r].slice(0, We);
     });
-  }, []), de = d((e) => {
+  }, []), fe = d((e) => {
     var n;
-    i || o || ((n = a.current) == null || n.focus(), x(e), ee(e), p(e, "text"), l());
-  }, [i, o, l, p]), ue = d((e) => {
+    i || o || ((n = a.current) == null || n.focus(), x(e), ne(e), p(e, "text"), l());
+  }, [i, o, l, p]), ge = d((e) => {
     var n;
-    i || o || ((n = a.current) == null || n.focus(), S(e), ne(e), p(e, "highlight"), l());
-  }, [i, o, l, p]), fe = d((e) => {
+    i || o || ((n = a.current) == null || n.focus(), A(e), oe(e), p(e, "highlight"), l());
+  }, [i, o, l, p]), he = d((e) => {
     var n;
     i || o || ((n = a.current) == null || n.focus(), x(e), l());
-  }, [i, o, l]), ge = d((e) => {
+  }, [i, o, l]), Ie = d((e) => {
     var n;
-    i || o || ((n = a.current) == null || n.focus(), S(e), l());
-  }, [i, o, l]), he = d(async (e) => {
+    i || o || ((n = a.current) == null || n.focus(), A(e), l());
+  }, [i, o, l]), Ce = d(async (e) => {
     var c;
-    if (!z) return;
+    if (!H) return;
     const n = (c = e.clipboardData) == null ? void 0 : c.items;
     if (n)
       for (let s = 0; s < n.length; s++) {
@@ -87,58 +88,58 @@ const qe = 6, nt = (P) => {
           e.preventDefault();
           const g = r.getAsFile();
           if (g) {
-            const y = await v(g);
-            A(y), l();
+            const E = await S(g);
+            v(E), l();
           }
           return;
         }
       }
-  }, [z, l]), Ce = d(() => {
+  }, [H, l]), me = d(() => {
     if (i || o) return;
     const e = document.createElement("input");
     e.type = "file", e.accept = "image/*", e.onchange = async (n) => {
       var s, r;
       const c = (s = n.target.files) == null ? void 0 : s[0];
       if (c) {
-        const g = await v(c);
-        (r = a.current) == null || r.focus(), A(g), l();
+        const g = await S(c);
+        (r = a.current) == null || r.focus(), v(g), l();
       }
     }, e.click();
-  }, [i, o, l]), Ie = {
-    bold: /* @__PURE__ */ t(Pe, { size: 16 }),
-    italic: /* @__PURE__ */ t(Je, { size: 16 }),
-    underline: /* @__PURE__ */ t(je, { size: 16 }),
-    strikethrough: /* @__PURE__ */ t(Ve, { size: 16 }),
-    heading1: /* @__PURE__ */ t(Me, { size: 16 }),
-    heading2: /* @__PURE__ */ t(Ue, { size: 16 }),
-    heading3: /* @__PURE__ */ t(we, { size: 16 }),
-    bulletList: /* @__PURE__ */ t(Ne, { size: 16 }),
-    orderedList: /* @__PURE__ */ t(Fe, { size: 16 }),
-    blockquote: /* @__PURE__ */ t(Be, { size: 16 }),
-    code: /* @__PURE__ */ t(De, { size: 16 }),
-    link: /* @__PURE__ */ t(B, { size: 16 }),
-    alignLeft: /* @__PURE__ */ t(N, { size: 16 }),
+  }, [i, o, l]), pe = {
+    bold: /* @__PURE__ */ t(Ye, { size: 16 }),
+    italic: /* @__PURE__ */ t(Qe, { size: 16 }),
+    underline: /* @__PURE__ */ t(Ke, { size: 16 }),
+    strikethrough: /* @__PURE__ */ t(Ge, { size: 16 }),
+    heading1: /* @__PURE__ */ t(qe, { size: 16 }),
+    heading2: /* @__PURE__ */ t($e, { size: 16 }),
+    heading3: /* @__PURE__ */ t(Je, { size: 16 }),
+    bulletList: /* @__PURE__ */ t(je, { size: 16 }),
+    orderedList: /* @__PURE__ */ t(Pe, { size: 16 }),
+    blockquote: /* @__PURE__ */ t(Ve, { size: 16 }),
+    code: /* @__PURE__ */ t(Ue, { size: 16 }),
+    link: /* @__PURE__ */ t(N, { size: 16 }),
+    alignLeft: /* @__PURE__ */ t(M, { size: 16 }),
     alignCenter: /* @__PURE__ */ t(w, { size: 16 }),
     alignRight: /* @__PURE__ */ t(U, { size: 16 }),
-    alignJustify: /* @__PURE__ */ t(M, { size: 16 }),
+    alignJustify: /* @__PURE__ */ t(V, { size: 16 }),
     image: /* @__PURE__ */ t(F, { size: 16 }),
-    indent: /* @__PURE__ */ t(V, { size: 16 }),
+    indent: /* @__PURE__ */ t(P, { size: 16 }),
     outdent: /* @__PURE__ */ t(j, { size: 16 }),
     clearFormat: /* @__PURE__ */ t(J, { size: 16 }),
-    table: /* @__PURE__ */ t(Oe, { size: 16 })
+    table: /* @__PURE__ */ t(we, { size: 16 })
   }, k = (e, n) => {
     if (e === "divider")
-      return /* @__PURE__ */ t("div", { className: b("Bear-RichEditor__divider", ke) }, `divider-${n}`);
+      return /* @__PURE__ */ t("div", { className: R("Bear-RichEditor__divider", Ae) }, `divider-${n}`);
     if (e === "headingDropdown")
       return /* @__PURE__ */ t(
-        Se,
+        Ne,
         {
-          options: xe,
-          value: X,
-          onChange: se,
+          options: Se,
+          value: ee,
+          onChange: de,
           title: "Text Style",
           disabled: i || o,
-          icon: /* @__PURE__ */ t(Ae, { size: 16 })
+          icon: /* @__PURE__ */ t(Me, { size: 16 })
         },
         "heading-dropdown"
       );
@@ -146,13 +147,13 @@ const qe = 6, nt = (P) => {
       return /* @__PURE__ */ t(
         D,
         {
-          value: Z,
-          onChange: de,
+          value: te,
+          onChange: fe,
           title: "Text Color",
           disabled: i || o,
           type: "text",
-          recentColors: ie,
-          onApplyLast: fe
+          recentColors: re,
+          onApplyLast: he
         },
         "text-color"
       );
@@ -160,13 +161,13 @@ const qe = 6, nt = (P) => {
       return /* @__PURE__ */ t(
         D,
         {
-          value: te,
-          onChange: ue,
+          value: ie,
+          onChange: ge,
           title: "Highlight Color",
           disabled: i || o,
           type: "highlight",
-          recentColors: re,
-          onApplyLast: ge
+          recentColors: ae,
+          onApplyLast: Ie
         },
         "highlight-color"
       );
@@ -174,9 +175,9 @@ const qe = 6, nt = (P) => {
       return /* @__PURE__ */ t(
         f,
         {
-          icon: /* @__PURE__ */ t(B, { size: 16 }),
+          icon: /* @__PURE__ */ t(N, { size: 16 }),
           title: "Insert Link",
-          onClick: ce,
+          onClick: ue,
           disabled: i || o
         },
         "link"
@@ -187,7 +188,7 @@ const qe = 6, nt = (P) => {
         {
           icon: /* @__PURE__ */ t(F, { size: 16 }),
           title: "Insert Image",
-          onClick: Ce,
+          onClick: me,
           disabled: i || o
         },
         "image"
@@ -196,7 +197,7 @@ const qe = 6, nt = (P) => {
       return /* @__PURE__ */ t(
         f,
         {
-          icon: /* @__PURE__ */ t(N, { size: 16 }),
+          icon: /* @__PURE__ */ t(M, { size: 16 }),
           title: "Align Left",
           onClick: () => {
             var r;
@@ -238,7 +239,7 @@ const qe = 6, nt = (P) => {
       return /* @__PURE__ */ t(
         f,
         {
-          icon: /* @__PURE__ */ t(M, { size: 16 }),
+          icon: /* @__PURE__ */ t(V, { size: 16 }),
           title: "Justify",
           onClick: () => {
             var r;
@@ -252,7 +253,7 @@ const qe = 6, nt = (P) => {
       return /* @__PURE__ */ t(
         f,
         {
-          icon: /* @__PURE__ */ t(V, { size: 16 }),
+          icon: /* @__PURE__ */ t(P, { size: 16 }),
           title: "Increase Indent",
           onClick: () => {
             var r;
@@ -291,7 +292,7 @@ const qe = 6, nt = (P) => {
         "clearFormat"
       );
     if (e === "more")
-      return /* @__PURE__ */ t(ve, { disabled: i || o, children: [
+      return /* @__PURE__ */ t(Fe, { disabled: i || o, isMobile: _, children: (_ ? ve : [
         "alignLeft",
         "alignCenter",
         "alignRight",
@@ -301,35 +302,35 @@ const qe = 6, nt = (P) => {
         "blockquote",
         "code",
         "clearFormat"
-      ].map((g, y) => k(g, y + 1e3)) }, "more");
-    const c = O[e], s = Ie[e];
+      ]).map((g, E) => k(g, E + 1e3)) }, "more");
+    const c = B[e], s = pe[e];
     return !c || !s ? null : /* @__PURE__ */ t(
       f,
       {
         icon: s,
         title: c.title,
-        active: Q.has(e),
-        onClick: () => ae(e),
+        active: X.has(e),
+        onClick: () => ce(e),
         disabled: i || o
       },
       e
     );
   };
-  return /* @__PURE__ */ me(
+  return /* @__PURE__ */ Re(
     "div",
     {
       id: Y,
-      "data-testid": $,
-      className: b(
+      "data-testid": Q,
+      className: R(
         "Bear-RichEditor",
-        He,
+        xe,
         i && "Bear-RichEditor--disabled",
         o && "Bear-RichEditor--readonly",
-        G
+        K
       ),
-      ...K,
+      ...W,
       children: [
-        L.length > 0 && /* @__PURE__ */ t("div", { className: b("Bear-RichEditor__toolbar", Le), children: L.map((e, n) => k(e, n)) }),
+        O.length > 0 && /* @__PURE__ */ t("div", { className: R("Bear-RichEditor__toolbar", ze), children: O.map((e, n) => k(e, n)) }),
         /* @__PURE__ */ t(
           "div",
           {
@@ -339,16 +340,16 @@ const qe = 6, nt = (P) => {
             onSelect: h,
             onKeyUp: h,
             onMouseUp: h,
-            onPaste: he,
+            onPaste: Ce,
             "data-placeholder": q,
-            className: b(
+            className: R(
               "Bear-RichEditor__content",
-              ze,
+              ke,
               "[&:empty]:before:bear-content-[attr(data-placeholder)] [&:empty]:before:bear-text-gray-400 [&:empty]:before:bear-pointer-events-none",
               i && "Bear-RichEditor__content--disabled bear-opacity-50 bear-cursor-not-allowed"
             ),
             style: {
-              minHeight: typeof T == "number" ? `${T}px` : T,
+              minHeight: typeof b == "number" ? `${b}px` : b,
               maxHeight: m ? typeof m == "number" ? `${m}px` : m : void 0,
               overflowY: m ? "auto" : void 0
             }
@@ -359,5 +360,5 @@ const qe = 6, nt = (P) => {
   );
 };
 export {
-  nt as RichEditor
+  ct as RichEditor
 };

package/dist/components/RichEditor/components/ToolbarColorPicker/ToolbarColorPicker.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),g=require("react"),s=require("../../../../utils/cn.cjs"),i=require("../../RichEditor.const.cjs"),m=require("../../../Icon/icons/editor.cjs"),_=require("../../../Icon/icons/status.cjs"),C=p=>{const{value:r,onChange:f,title:y,disabled:o,type:n="text",recentColors:a=[],onApplyLast:h}=p,[b,c]=g.useState(!1),l=g.useRef(null);g.useEffect(()=>{const e=u=>{l.current&&!l.current.contains(u.target)&&c(!1)};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[]);const d=e=>{f(e),c(!1)},k=n==="text"?m.FormatColorTextIcon:m.HighlightIcon,x=a[0]||r;return t.jsxs("div",{ref:l,className:"Bear-RichEditor__color-picker relative flex items-center",children:[t.jsxs("button",{type:"button",title:y,disabled:o,onClick:()=>c(!b),className:s.cn("Bear-RichEditor__color-trigger",i.RICH_EDITOR_BUTTON_BASE_CLASSES,i.RICH_EDITOR_BUTTON_INACTIVE_CLASSES,"flex items-center gap-0.5",o&&`Bear-RichEditor__color-trigger--disabled ${i.RICH_EDITOR_BUTTON_DISABLED_CLASSES}`),children:[t.jsx(k,{size:16}),t.jsx("span",{className:"w-3 h-1 rounded-sm mt-0.5",style:{backgroundColor:r||(n==="text"?"#000000":"#fef08a")}})]}),x&&h&&t.jsx("button",{type:"button",title:`Apply ${n==="text"?"text":"highlight"} color`,disabled:o,onClick:()=>h(x),className:s.cn("Bear-RichEditor__color-apply","p-0.5 rounded transition-colors","text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-zinc-700",o&&"opacity-50 cursor-not-allowed"),children:t.jsx(_.CheckIcon,{size:12})}),b&&t.jsxs("div",{className:"Bear-RichEditor__color-menu absolute bottom-full left-0 mb-1 p-3 bg-white dark:bg-zinc-800 border border-gray-200 dark:border-zinc-700 rounded-lg shadow-xl min-w-[200px]",style:{zIndex:9999},children:[a.length>0&&t.jsxs("div",{className:"mb-3",children:[t.jsx("p",{className:"text-xs text-gray-500 dark:text-gray-400 mb-1.5",children:"Recent"}),t.jsx("div",{className:"flex gap-1",children:a.slice(0,6).map((e,u)=>t.jsx("button",{type:"button",onClick:()=>d(e),className:s.cn("w-6 h-6 rounded-full border border-gray-300 dark:border-zinc-600 transition-transform hover:scale-110",r===e&&"ring-2 ring-pink-500 ring-offset-1 dark:ring-offset-zinc-800"),style:{backgroundColor:e},title:e},`recent-${u}`))})]}),t.jsx("div",{className:"grid grid-cols-8 gap-1",children:i.RICH_EDITOR_COLORS.map(e=>t.jsx("button",{type:"button",onClick:()=>d(e),className:s.cn("Bear-RichEditor__color-swatch","w-5 h-5 rounded-full border border-gray-300 dark:border-zinc-600 transition-transform hover:scale-110",r===e&&"ring-2 ring-pink-500 ring-offset-1 dark:ring-offset-zinc-800"),style:{backgroundColor:e},title:e},e))}),t.jsxs("button",{type:"button",onClick:()=>d(""),className:"w-full mt-2 px-2 py-1.5 text-xs text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-zinc-700 rounded transition-colors",children:["Remove ",n==="text"?"color":"highlight"]})]})]})};exports.ToolbarColorPicker=C;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),r=require("react"),S=require("react-dom"),i=require("../../../../utils/cn.cjs"),d=require("../../RichEditor.const.cjs"),j=require("../../../../hooks/useMediaQuery.cjs"),_=require("../../../Icon/icons/editor.cjs"),I=require("../../../Icon/icons/status.cjs"),N=R=>{const{value:s,onChange:w,title:v,disabled:c,type:a="text",recentColors:u=[],onApplyLast:p}=R,[l,g]=r.useState(!1),[x,b]=r.useState({top:0,left:0}),m=r.useRef(null),h=r.useRef(null),o=j.useMediaQuery("(max-width: 640px)");r.useEffect(()=>{if(l&&o&&h.current&&typeof document<"u"){const e=h.current.getBoundingClientRect(),n=e.top,C=window.innerHeight-e.bottom;C>=240||C>=n?b({top:e.bottom+4,left:Math.max(8,Math.min(e.left,window.innerWidth-220))}):b({top:e.top-244,left:Math.max(8,Math.min(e.left,window.innerWidth-220))})}},[l,o]),r.useEffect(()=>{const e=n=>{m.current&&!m.current.contains(n.target)&&g(!1)};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[]);const f=e=>{w(e),g(!1)},E=a==="text"?_.FormatColorTextIcon:_.HighlightIcon,y=u[0]||s,k=t.jsxs("div",{className:i.cn("Bear-RichEditor__color-menu p-3 bg-white dark:bg-zinc-800 border border-gray-200 dark:border-zinc-700 rounded-lg shadow-xl min-w-[200px] max-w-[min(90vw,240px)]",o?"fixed z-[9999]":"absolute bottom-full left-0 mb-1"),style:o?{top:x.top,left:x.left}:void 0,children:[u.length>0&&t.jsxs("div",{className:"mb-3",children:[t.jsx("p",{className:"text-xs text-gray-500 dark:text-gray-400 mb-1.5",children:"Recent"}),t.jsx("div",{className:"flex gap-1 flex-wrap",children:u.slice(0,6).map((e,n)=>t.jsx("button",{type:"button",onClick:()=>f(e),className:i.cn("w-6 h-6 rounded-full border border-gray-300 dark:border-zinc-600 transition-transform hover:scale-110 touch-manipulation",s===e&&"ring-2 ring-pink-500 ring-offset-1 dark:ring-offset-zinc-800"),style:{backgroundColor:e},title:e},`recent-${n}`))})]}),t.jsx("div",{className:"grid grid-cols-8 gap-1",children:d.RICH_EDITOR_COLORS.map(e=>t.jsx("button",{type:"button",onClick:()=>f(e),className:i.cn("Bear-RichEditor__color-swatch w-5 h-5 rounded-full border border-gray-300 dark:border-zinc-600 transition-transform hover:scale-110 touch-manipulation",s===e&&"ring-2 ring-pink-500 ring-offset-1 dark:ring-offset-zinc-800"),style:{backgroundColor:e},title:e},e))}),t.jsxs("button",{type:"button",onClick:()=>f(""),className:"w-full mt-2 px-2 py-1.5 text-xs text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-zinc-700 rounded transition-colors touch-manipulation",children:["Remove ",a==="text"?"color":"highlight"]})]});return t.jsxs("div",{ref:m,className:"Bear-RichEditor__color-picker relative flex items-center",children:[t.jsxs("button",{ref:h,type:"button",title:v,disabled:c,onClick:()=>g(!l),className:i.cn("Bear-RichEditor__color-trigger",d.RICH_EDITOR_BUTTON_BASE_CLASSES,d.RICH_EDITOR_BUTTON_INACTIVE_CLASSES,"flex items-center gap-0.5",c&&`Bear-RichEditor__color-trigger--disabled ${d.RICH_EDITOR_BUTTON_DISABLED_CLASSES}`),children:[t.jsx(E,{size:16}),t.jsx("span",{className:"w-3 h-1 rounded-sm mt-0.5",style:{backgroundColor:s||(a==="text"?"#000000":"#fef08a")}})]}),y&&p&&t.jsx("button",{type:"button",title:`Apply ${a==="text"?"text":"highlight"} color`,disabled:c,onClick:()=>p(y),className:i.cn("Bear-RichEditor__color-apply","p-0.5 rounded transition-colors","text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-zinc-700",c&&"opacity-50 cursor-not-allowed"),children:t.jsx(I.CheckIcon,{size:12})}),l&&(o&&typeof document<"u"?S.createPortal(k,document.body):k)]})};exports.ToolbarColorPicker=N;

package/dist/components/RichEditor/components/ToolbarColorPicker/ToolbarColorPicker.js

@@ -1,126 +1,136 @@
-import { jsxs as r, jsx as t } from "react/jsx-runtime";
-import { useState as k, useRef as y, useEffect as _ } from "react";
-import { cn as a } from "../../../../utils/cn.js";
-import { RICH_EDITOR_BUTTON_DISABLED_CLASSES as C, RICH_EDITOR_BUTTON_INACTIVE_CLASSES as E, RICH_EDITOR_BUTTON_BASE_CLASSES as R, RICH_EDITOR_COLORS as v } from "../../RichEditor.const.js";
-import { FormatColorTextIcon as I, HighlightIcon as N } from "../../../Icon/icons/editor.js";
-import { CheckIcon as S } from "../../../Icon/icons/status.js";
-const L = (p) => {
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import { useState as C, useRef as _, useEffect as w } from "react";
+import { createPortal as N } from "react-dom";
+import { cn as i } from "../../../../utils/cn.js";
+import { RICH_EDITOR_COLORS as S, RICH_EDITOR_BUTTON_DISABLED_CLASSES as B, RICH_EDITOR_BUTTON_INACTIVE_CLASSES as T, RICH_EDITOR_BUTTON_BASE_CLASSES as O } from "../../RichEditor.const.js";
+import { useMediaQuery as z } from "../../../../hooks/useMediaQuery.js";
+import { FormatColorTextIcon as A, HighlightIcon as L } from "../../../Icon/icons/editor.js";
+import { CheckIcon as M } from "../../../Icon/icons/status.js";
+const Q = (R) => {
   const {
-    value: o,
-    onChange: b,
-    title: f,
-    disabled: n,
-    type: i = "text",
-    recentColors: l = [],
-    onApplyLast: m
-  } = p, [h, s] = k(!1), c = y(null);
-  _(() => {
-    const e = (g) => {
-      c.current && !c.current.contains(g.target) && s(!1);
+    value: a,
+    onChange: v,
+    title: E,
+    disabled: l,
+    type: c = "text",
+    recentColors: d = [],
+    onApplyLast: g
+  } = R, [s, m] = C(!1), [h, b] = C({ top: 0, left: 0 }), u = _(null), p = _(null), o = z("(max-width: 640px)");
+  w(() => {
+    if (s && o && p.current && typeof document < "u") {
+      const t = p.current.getBoundingClientRect(), r = t.top, k = window.innerHeight - t.bottom;
+      k >= 240 || k >= r ? b({ top: t.bottom + 4, left: Math.max(8, Math.min(t.left, window.innerWidth - 220)) }) : b({ top: t.top - 244, left: Math.max(8, Math.min(t.left, window.innerWidth - 220)) });
+    }
+  }, [s, o]), w(() => {
+    const t = (r) => {
+      u.current && !u.current.contains(r.target) && m(!1);
     };
-    return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+    return document.addEventListener("mousedown", t), () => document.removeEventListener("mousedown", t);
   }, []);
-  const d = (e) => {
-    b(e), s(!1);
-  }, x = i === "text" ? I : N, u = l[0] || o;
-  return /* @__PURE__ */ r("div", { ref: c, className: "Bear-RichEditor__color-picker relative flex items-center", children: [
-    /* @__PURE__ */ r(
+  const f = (t) => {
+    v(t), m(!1);
+  }, I = c === "text" ? A : L, x = d[0] || a, y = /* @__PURE__ */ n(
+    "div",
+    {
+      className: i(
+        "Bear-RichEditor__color-menu p-3 bg-white dark:bg-zinc-800 border border-gray-200 dark:border-zinc-700 rounded-lg shadow-xl min-w-[200px] max-w-[min(90vw,240px)]",
+        o ? "fixed z-[9999]" : "absolute bottom-full left-0 mb-1"
+      ),
+      style: o ? { top: h.top, left: h.left } : void 0,
+      children: [
+        d.length > 0 && /* @__PURE__ */ n("div", { className: "mb-3", children: [
+          /* @__PURE__ */ e("p", { className: "text-xs text-gray-500 dark:text-gray-400 mb-1.5", children: "Recent" }),
+          /* @__PURE__ */ e("div", { className: "flex gap-1 flex-wrap", children: d.slice(0, 6).map((t, r) => /* @__PURE__ */ e(
+            "button",
+            {
+              type: "button",
+              onClick: () => f(t),
+              className: i(
+                "w-6 h-6 rounded-full border border-gray-300 dark:border-zinc-600 transition-transform hover:scale-110 touch-manipulation",
+                a === t && "ring-2 ring-pink-500 ring-offset-1 dark:ring-offset-zinc-800"
+              ),
+              style: { backgroundColor: t },
+              title: t
+            },
+            `recent-${r}`
+          )) })
+        ] }),
+        /* @__PURE__ */ e("div", { className: "grid grid-cols-8 gap-1", children: S.map((t) => /* @__PURE__ */ e(
+          "button",
+          {
+            type: "button",
+            onClick: () => f(t),
+            className: i(
+              "Bear-RichEditor__color-swatch w-5 h-5 rounded-full border border-gray-300 dark:border-zinc-600 transition-transform hover:scale-110 touch-manipulation",
+              a === t && "ring-2 ring-pink-500 ring-offset-1 dark:ring-offset-zinc-800"
+            ),
+            style: { backgroundColor: t },
+            title: t
+          },
+          t
+        )) }),
+        /* @__PURE__ */ n(
+          "button",
+          {
+            type: "button",
+            onClick: () => f(""),
+            className: "w-full mt-2 px-2 py-1.5 text-xs text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-zinc-700 rounded transition-colors touch-manipulation",
+            children: [
+              "Remove ",
+              c === "text" ? "color" : "highlight"
+            ]
+          }
+        )
+      ]
+    }
+  );
+  return /* @__PURE__ */ n("div", { ref: u, className: "Bear-RichEditor__color-picker relative flex items-center", children: [
+    /* @__PURE__ */ n(
       "button",
       {
+        ref: p,
         type: "button",
-        title: f,
-        disabled: n,
-        onClick: () => s(!h),
-        className: a(
+        title: E,
+        disabled: l,
+        onClick: () => m(!s),
+        className: i(
           "Bear-RichEditor__color-trigger",
-          R,
-          E,
+          O,
+          T,
           "flex items-center gap-0.5",
-          n && `Bear-RichEditor__color-trigger--disabled ${C}`
+          l && `Bear-RichEditor__color-trigger--disabled ${B}`
         ),
         children: [
-          /* @__PURE__ */ t(x, { size: 16 }),
-          /* @__PURE__ */ t(
+          /* @__PURE__ */ e(I, { size: 16 }),
+          /* @__PURE__ */ e(
             "span",
             {
               className: "w-3 h-1 rounded-sm mt-0.5",
-              style: { backgroundColor: o || (i === "text" ? "#000000" : "#fef08a") }
+              style: { backgroundColor: a || (c === "text" ? "#000000" : "#fef08a") }
             }
           )
         ]
       }
     ),
-    u && m && /* @__PURE__ */ t(
+    x && g && /* @__PURE__ */ e(
       "button",
       {
         type: "button",
-        title: `Apply ${i === "text" ? "text" : "highlight"} color`,
-        disabled: n,
-        onClick: () => m(u),
-        className: a(
+        title: `Apply ${c === "text" ? "text" : "highlight"} color`,
+        disabled: l,
+        onClick: () => g(x),
+        className: i(
           "Bear-RichEditor__color-apply",
           "p-0.5 rounded transition-colors",
           "text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-zinc-700",
-          n && "opacity-50 cursor-not-allowed"
+          l && "opacity-50 cursor-not-allowed"
         ),
-        children: /* @__PURE__ */ t(S, { size: 12 })
+        children: /* @__PURE__ */ e(M, { size: 12 })
       }
     ),
-    h && /* @__PURE__ */ r(
-      "div",
-      {
-        className: "Bear-RichEditor__color-menu absolute bottom-full left-0 mb-1 p-3 bg-white dark:bg-zinc-800 border border-gray-200 dark:border-zinc-700 rounded-lg shadow-xl min-w-[200px]",
-        style: { zIndex: 9999 },
-        children: [
-          l.length > 0 && /* @__PURE__ */ r("div", { className: "mb-3", children: [
-            /* @__PURE__ */ t("p", { className: "text-xs text-gray-500 dark:text-gray-400 mb-1.5", children: "Recent" }),
-            /* @__PURE__ */ t("div", { className: "flex gap-1", children: l.slice(0, 6).map((e, g) => /* @__PURE__ */ t(
-              "button",
-              {
-                type: "button",
-                onClick: () => d(e),
-                className: a(
-                  "w-6 h-6 rounded-full border border-gray-300 dark:border-zinc-600 transition-transform hover:scale-110",
-                  o === e && "ring-2 ring-pink-500 ring-offset-1 dark:ring-offset-zinc-800"
-                ),
-                style: { backgroundColor: e },
-                title: e
-              },
-              `recent-${g}`
-            )) })
-          ] }),
-          /* @__PURE__ */ t("div", { className: "grid grid-cols-8 gap-1", children: v.map((e) => /* @__PURE__ */ t(
-            "button",
-            {
-              type: "button",
-              onClick: () => d(e),
-              className: a(
-                "Bear-RichEditor__color-swatch",
-                "w-5 h-5 rounded-full border border-gray-300 dark:border-zinc-600 transition-transform hover:scale-110",
-                o === e && "ring-2 ring-pink-500 ring-offset-1 dark:ring-offset-zinc-800"
-              ),
-              style: { backgroundColor: e },
-              title: e
-            },
-            e
-          )) }),
-          /* @__PURE__ */ r(
-            "button",
-            {
-              type: "button",
-              onClick: () => d(""),
-              className: "w-full mt-2 px-2 py-1.5 text-xs text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-zinc-700 rounded transition-colors",
-              children: [
-                "Remove ",
-                i === "text" ? "color" : "highlight"
-              ]
-            }
-          )
-        ]
-      }
-    )
+    s && (o && typeof document < "u" ? N(y, document.body) : y)
   ] });
 };
 export {
-  L as ToolbarColorPicker
+  Q as ToolbarColorPicker
 };