@forgedevstack/bear 1.2.9 → 1.3.1

package/dist/components/RichEditor/components/ToolbarSignature/ToolbarSignature.js

@@ -0,0 +1,78 @@
+import { jsxs as n, jsx as r } from "react/jsx-runtime";
+import { useState as c, useRef as m } from "react";
+import { cn as E } from "../../../../utils/cn.js";
+import { useClickOutsideMultiple as R } from "../../../../hooks/useClickOutside.js";
+import "../../../../context/BearProvider.js";
+import "../../../../hooks/useBearComponent/useBearComponent.js";
+import { FOUR_HUNDRED as p, SIXTEEN as y, TWO_HUNDRED as x } from "../../../../constants/numbers.const.js";
+import { useFixedAnchorPosition as N } from "../../../../hooks/useFixedAnchorPosition/useFixedAnchorPosition.js";
+import { ANCHOR_DEFAULT_Z_INDEX as I } from "../../../../hooks/useFixedAnchorPosition/useFixedAnchorPosition.const.js";
+import "../../../FormControl/FormControl.context.js";
+import { EditIcon as T } from "../../../Icon/index.js";
+import { OverlayPortal as v } from "../../../OverlayPortal/OverlayPortal.js";
+import { SignPad as k } from "../../../SignPad/SignPad.js";
+import { Tooltip as C } from "../../../Tooltip/Tooltip.js";
+import { Button as u } from "../../../Button/Button.js";
+import { TITLE_CANCEL as z, TITLE_INSERT as O } from "../../RichEditor.const.js";
+const G = (h) => {
+  const { title: a, disabled: s, onInsert: f } = h, [e, t] = c(!1), [o, l] = c(null), i = m(null), d = m(null), { style: g, ready: b } = N({
+    anchorRef: i,
+    open: e,
+    minWidthPx: p
+  });
+  R(
+    [i, d],
+    () => t(!1),
+    { enabled: e }
+  );
+  const _ = () => {
+    o && (f(o), l(null), t(!1));
+  };
+  return /* @__PURE__ */ n("div", { className: "Bear-RichEditor__signature relative", children: [
+    /* @__PURE__ */ r(C, { content: a, delay: p, position: "top", children: /* @__PURE__ */ r(
+      "button",
+      {
+        ref: i,
+        type: "button",
+        "aria-label": a,
+        disabled: s,
+        onClick: () => t(!e),
+        className: E(
+          "Bear-RichEditor__button p-1.5 rounded transition-colors",
+          "text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-zinc-700",
+          e && "Bear-RichEditor__button--active bg-primary-500 text-white",
+          s && "Bear-RichEditor__button--disabled opacity-50 cursor-not-allowed"
+        ),
+        children: /* @__PURE__ */ r(T, { size: y })
+      }
+    ) }),
+    /* @__PURE__ */ n(
+      v,
+      {
+        open: e,
+        ready: b,
+        style: g,
+        zIndex: I,
+        panelRef: d,
+        className: "Bear-RichEditor__signature-menu p-3 bg-white dark:bg-zinc-800 border border-gray-200 dark:border-zinc-700 rounded-lg shadow-xl",
+        children: [
+          /* @__PURE__ */ r(
+            k,
+            {
+              height: x,
+              onChange: l,
+              placeholder: "Sign here"
+            }
+          ),
+          /* @__PURE__ */ n("div", { className: "flex justify-end gap-2 mt-2", children: [
+            /* @__PURE__ */ r(u, { size: "sm", variant: "ghost", onClick: () => t(!1), children: z }),
+            /* @__PURE__ */ r(u, { size: "sm", variant: "primary", onClick: _, disabled: !o, children: O })
+          ] })
+        ]
+      }
+    )
+  ] });
+};
+export {
+  G as ToolbarSignature
+};

package/dist/components/RichEditor/components/ToolbarSignature/ToolbarSignature.types.d.ts

@@ -0,0 +1,5 @@
+export interface ToolbarSignatureProps {
+    title: string;
+    disabled?: boolean;
+    onInsert: (dataUrl: string) => void;
+}

package/dist/components/RichEditor/components/ToolbarSignature/index.d.ts

@@ -0,0 +1,2 @@
+export { ToolbarSignature } from './ToolbarSignature';
+export type { ToolbarSignatureProps } from './ToolbarSignature.types';

package/dist/components/RichEditor/components/index.d.ts

@@ -2,3 +2,4 @@ export { ToolbarButton } from './ToolbarButton';
 export { ToolbarDropdown } from './ToolbarDropdown';
 export { ToolbarColorPicker } from './ToolbarColorPicker';
 export { ToolbarMore } from './ToolbarMore';
+export { ToolbarSignature } from './ToolbarSignature';

package/dist/components/RichEditor/helpers/IconRender.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("../../../constants/numbers.const.cjs"),n=require("../../Icon/icons/editor.cjs"),s={bold:e.jsx(n.BoldIcon,{size:i.SIXTEEN}),italic:e.jsx(n.ItalicIcon,{size:i.SIXTEEN}),underline:e.jsx(n.UnderlineIcon,{size:i.SIXTEEN}),strikethrough:e.jsx(n.StrikethroughIcon,{size:i.SIXTEEN}),heading1:e.jsx(n.Heading1Icon,{size:i.SIXTEEN}),heading2:e.jsx(n.Heading2Icon,{size:i.SIXTEEN}),heading3:e.jsx(n.Heading3Icon,{size:i.SIXTEEN}),bulletList:e.jsx(n.ListBulletIcon,{size:i.SIXTEEN}),orderedList:e.jsx(n.ListNumberedIcon,{size:i.SIXTEEN}),blockquote:e.jsx(n.QuoteIcon,{size:i.SIXTEEN}),code:e.jsx(n.CodeIcon,{size:i.SIXTEEN}),link:e.jsx(n.InsertLinkIcon,{size:i.SIXTEEN}),alignLeft:e.jsx(n.AlignLeftIcon,{size:i.SIXTEEN}),alignCenter:e.jsx(n.AlignCenterIcon,{size:i.SIXTEEN}),alignRight:e.jsx(n.AlignRightIcon,{size:i.SIXTEEN}),alignJustify:e.jsx(n.AlignJustifyIcon,{size:i.SIXTEEN}),image:e.jsx(n.InsertPhotoIcon,{size:i.SIXTEEN}),indent:e.jsx(n.IndentIncreaseIcon,{size:i.SIXTEEN}),outdent:e.jsx(n.IndentDecreaseIcon,{size:i.SIXTEEN}),clearFormat:e.jsx(n.FormatClearIcon,{size:i.SIXTEEN}),table:e.jsx(n.TableIcon,{size:i.SIXTEEN})};exports.RICH_EDITOR_ICONS=s;

package/dist/components/RichEditor/helpers/IconRender.d.ts

@@ -0,0 +1 @@
+export declare const RICH_EDITOR_ICONS: Record<string, JSX.Element>;

package/dist/components/RichEditor/helpers/IconRender.js

@@ -0,0 +1,29 @@
+import { jsx as e } from "react/jsx-runtime";
+import { SIXTEEN as i } from "../../../constants/numbers.const.js";
+import { TableIcon as n, FormatClearIcon as o, IndentDecreaseIcon as t, IndentIncreaseIcon as s, InsertPhotoIcon as I, AlignJustifyIcon as c, AlignRightIcon as r, AlignCenterIcon as l, AlignLeftIcon as a, InsertLinkIcon as z, CodeIcon as d, QuoteIcon as g, ListNumberedIcon as u, ListBulletIcon as h, Heading3Icon as m, Heading2Icon as f, Heading1Icon as L, StrikethroughIcon as b, UnderlineIcon as C, ItalicIcon as k, BoldIcon as p } from "../../Icon/icons/editor.js";
+const E = {
+  bold: /* @__PURE__ */ e(p, { size: i }),
+  italic: /* @__PURE__ */ e(k, { size: i }),
+  underline: /* @__PURE__ */ e(C, { size: i }),
+  strikethrough: /* @__PURE__ */ e(b, { size: i }),
+  heading1: /* @__PURE__ */ e(L, { size: i }),
+  heading2: /* @__PURE__ */ e(f, { size: i }),
+  heading3: /* @__PURE__ */ e(m, { size: i }),
+  bulletList: /* @__PURE__ */ e(h, { size: i }),
+  orderedList: /* @__PURE__ */ e(u, { size: i }),
+  blockquote: /* @__PURE__ */ e(g, { size: i }),
+  code: /* @__PURE__ */ e(d, { size: i }),
+  link: /* @__PURE__ */ e(z, { size: i }),
+  alignLeft: /* @__PURE__ */ e(a, { size: i }),
+  alignCenter: /* @__PURE__ */ e(l, { size: i }),
+  alignRight: /* @__PURE__ */ e(r, { size: i }),
+  alignJustify: /* @__PURE__ */ e(c, { size: i }),
+  image: /* @__PURE__ */ e(I, { size: i }),
+  indent: /* @__PURE__ */ e(s, { size: i }),
+  outdent: /* @__PURE__ */ e(t, { size: i }),
+  clearFormat: /* @__PURE__ */ e(o, { size: i }),
+  table: /* @__PURE__ */ e(n, { size: i })
+};
+export {
+  E as RICH_EDITOR_ICONS
+};

package/dist/components/RichEditor/helpers/formatHelpers.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=(t,n)=>document.execCommand(t,!1,n),e=t=>document.queryCommandState(t),s=t=>document.queryCommandValue(t),d=t=>{if(!t)return!1;const n=t.startsWith("http://")||t.startsWith("https://")||t.startsWith("mailto:")?t:`https://${t}`;return r("createLink",n)},m=t=>t?r("foreColor",t):r("removeFormat"),l=t=>t?r("hiliteColor",t):r("removeFormat"),u=()=>{const t=new Set;return e("bold")&&t.add("bold"),e("italic")&&t.add("italic"),e("underline")&&t.add("underline"),e("strikeThrough")&&t.add("strikethrough"),e("insertUnorderedList")&&t.add("bulletList"),e("insertOrderedList")&&t.add("orderedList"),t},a=t=>r("insertHTML",t),c=(t,n)=>{const i=`<img src="${t}" alt="" style="max-width: 100%; height: auto;" />`;return a(i)},h=t=>new Promise((n,i)=>{const o=new FileReader;o.onload=()=>n(o.result),o.onerror=i,o.readAsDataURL(t)});exports.execCommand=r;exports.fileToDataUrl=h;exports.getActiveFormats=u;exports.insertHTML=a;exports.insertImage=c;exports.insertLink=d;exports.queryCommandState=e;exports.queryCommandValue=s;exports.setHighlightColor=l;exports.setTextColor=m;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../../constants/generals.const.cjs"),n=(t,o)=>document.execCommand(t,e.BOOLEAN_FALSE,o),m=t=>document.queryCommandState(t),T=t=>document.queryCommandValue(t),_="http://",a="https://",M="mailto:",c=t=>{if(!t)return e.BOOLEAN_FALSE;const r=t.startsWith(_)||t.startsWith(a)||t.startsWith(M)?t:`${a}${t}`;return n(e.COMMAND_CREATE_LINK,r)},E=t=>t?n(e.COMMAND_FORE_COLOR,t):n(e.COMMAND_REMOVE_FORMAT),L=t=>t?n(e.COMMAND_HILITE_COLOR,t):n(e.COMMAND_REMOVE_FORMAT),R=[{command:e.COMMAND_BOLD,format:e.TOOLBAR_ITEM_BOLD},{command:e.COMMAND_ITALIC,format:e.TOOLBAR_ITEM_ITALIC},{command:e.COMMAND_UNDERLINE,format:e.TOOLBAR_ITEM_UNDERLINE},{command:e.COMMAND_STRIKE_THROUGH,format:e.TOOLBAR_ITEM_STRIKETHROUGH},{command:e.COMMAND_INSERT_UNORDERED_LIST,format:e.TOOLBAR_ITEM_BULLET_LIST},{command:e.COMMAND_INSERT_ORDERED_LIST,format:e.TOOLBAR_ITEM_ORDERED_LIST}],C=()=>{const t=new Set;return R.forEach(({command:o,format:r})=>{m(o)&&t.add(r)}),t},s=t=>n(e.COMMAND_INSERT_HTML,t),A=(t,o)=>{const r=`<img src="${t}" alt="${e.EMPTY_STRING}" />`;return s(r)},i=t=>new Promise((o,r)=>{const O=new FileReader;O.onload=()=>o(O.result),O.onerror=r,O.readAsDataURL(t)});exports.execCommand=n;exports.fileToDataUrl=i;exports.getActiveFormats=C;exports.insertHTML=s;exports.insertImage=A;exports.insertLink=c;exports.queryCommandState=m;exports.queryCommandValue=T;exports.setHighlightColor=L;exports.setTextColor=E;

package/dist/components/RichEditor/helpers/formatHelpers.d.ts

@@ -1,57 +1,15 @@
 import { ToolbarOption } from '../RichEditor.types';
-/**
- * Execute a document command for rich text editing
- */
 export declare const execCommand: (command: string, value?: string) => boolean;
-/**
- * Query the state of a document command
- */
 export declare const queryCommandState: (command: string) => boolean;
-/**
- * Query the value of a document command
- */
 export declare const queryCommandValue: (command: string) => string;
-/**
- * Get current block format (p, h1, h2, etc.)
- */
 export declare const getCurrentBlockFormat: () => string;
-/**
- * Apply a format command based on toolbar option
- */
 export declare const applyFormat: (format: ToolbarOption, editorRef?: React.RefObject<HTMLDivElement>) => boolean;
-/**
- * Insert a link at current selection
- */
 export declare const insertLink: (url: string) => boolean;
-/**
- * Remove link from current selection
- */
 export declare const removeLink: () => boolean;
-/**
- * Set text color
- */
 export declare const setTextColor: (color: string) => boolean;
-/**
- * Set background/highlight color
- */
 export declare const setHighlightColor: (color: string) => boolean;
-/**
- * Get active formats from current selection
- */
 export declare const getActiveFormats: () => Set<string>;
-/**
- * Insert HTML at current cursor position
- */
 export declare const insertHTML: (html: string) => boolean;
-/**
- * Insert image at current cursor position
- */
 export declare const insertImage: (src: string, alt?: string) => boolean;
-/**
- * Convert file to base64 data URL
- */
 export declare const fileToDataUrl: (file: File) => Promise<string>;
-/**
- * Handle paste event to process images
- */
 export declare const handlePasteImages: (event: ClipboardEvent) => Promise<string[]>;

package/dist/components/RichEditor/helpers/formatHelpers.js

@@ -1,26 +1,37 @@
-const n = (t, e) => document.execCommand(t, !1, e), r = (t) => document.queryCommandState(t), a = (t) => document.queryCommandValue(t), d = (t) => {
-  if (!t) return !1;
-  const e = t.startsWith("http://") || t.startsWith("https://") || t.startsWith("mailto:") ? t : `https://${t}`;
-  return n("createLink", e);
-}, m = (t) => t ? n("foreColor", t) : n("removeFormat"), u = (t) => t ? n("hiliteColor", t) : n("removeFormat"), c = () => {
+import { BOOLEAN_FALSE as T, COMMAND_REMOVE_FORMAT as a, COMMAND_HILITE_COLOR as m, COMMAND_FORE_COLOR as _, COMMAND_CREATE_LINK as s, TOOLBAR_ITEM_BOLD as M, COMMAND_BOLD as R, TOOLBAR_ITEM_ITALIC as c, COMMAND_ITALIC as E, TOOLBAR_ITEM_UNDERLINE as L, COMMAND_UNDERLINE as A, TOOLBAR_ITEM_STRIKETHROUGH as C, COMMAND_STRIKE_THROUGH as I, TOOLBAR_ITEM_BULLET_LIST as D, COMMAND_INSERT_UNORDERED_LIST as N, TOOLBAR_ITEM_ORDERED_LIST as d, COMMAND_INSERT_ORDERED_LIST as i, COMMAND_INSERT_HTML as u, EMPTY_STRING as S } from "../../../constants/generals.const.js";
+const n = (t, o) => document.execCommand(t, T, o), f = (t) => document.queryCommandState(t), U = (t) => document.queryCommandValue(t), H = "http://", O = "https://", h = "mailto:", g = (t) => {
+  if (!t)
+    return T;
+  const r = t.startsWith(H) || t.startsWith(O) || t.startsWith(h) ? t : `${O}${t}`;
+  return n(s, r);
+}, F = (t) => t ? n(_, t) : n(a), p = (t) => t ? n(m, t) : n(a), l = [
+  { command: R, format: M },
+  { command: E, format: c },
+  { command: A, format: L },
+  { command: I, format: C },
+  { command: N, format: D },
+  { command: i, format: d }
+], q = () => {
   const t = /* @__PURE__ */ new Set();
-  return r("bold") && t.add("bold"), r("italic") && t.add("italic"), r("underline") && t.add("underline"), r("strikeThrough") && t.add("strikethrough"), r("insertUnorderedList") && t.add("bulletList"), r("insertOrderedList") && t.add("orderedList"), t;
-}, s = (t) => n("insertHTML", t), l = (t, e) => {
-  const i = `<img src="${t}" alt="" style="max-width: 100%; height: auto;" />`;
-  return s(i);
-}, h = (t) => new Promise((e, i) => {
-  const o = new FileReader();
-  o.onload = () => e(o.result), o.onerror = i, o.readAsDataURL(t);
+  return l.forEach(({ command: o, format: r }) => {
+    f(o) && t.add(r);
+  }), t;
+}, B = (t) => n(u, t), x = (t, o) => {
+  const r = `<img src="${t}" alt="${S}" />`;
+  return B(r);
+}, y = (t) => new Promise((o, r) => {
+  const e = new FileReader();
+  e.onload = () => o(e.result), e.onerror = r, e.readAsDataURL(t);
 });
 export {
   n as execCommand,
-  h as fileToDataUrl,
-  c as getActiveFormats,
-  s as insertHTML,
-  l as insertImage,
-  d as insertLink,
-  r as queryCommandState,
-  a as queryCommandValue,
-  u as setHighlightColor,
-  m as setTextColor
+  y as fileToDataUrl,
+  q as getActiveFormats,
+  B as insertHTML,
+  x as insertImage,
+  g as insertLink,
+  f as queryCommandState,
+  U as queryCommandValue,
+  p as setHighlightColor,
+  F as setTextColor
 };

package/dist/components/RichEditor/helpers/toolbarItemRender.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),i=require("../../../constants/numbers.const.cjs"),T=require("../../../constants/generals.const.cjs"),l=require("../../Icon/icons/editor.cjs"),E=require("../components/ToolbarButton/ToolbarButton.cjs"),A=require("../components/ToolbarDropdown/ToolbarDropdown.cjs"),L=require("../components/ToolbarColorPicker/ToolbarColorPicker.cjs"),N=require("../components/ToolbarMore/ToolbarMore.cjs"),M=require("../components/ToolbarSignature/ToolbarSignature.cjs"),I=require("../RichEditor.const.cjs"),d=require("./IconRender.cjs"),c=e=>{const n=e.disabled||e.readOnly,R={[T.TOOLBAR_ITEM_DIVIDER]:_=>o.jsx("div",{className:"Bear-RichEditor__divider w-px h-5 bg-gray-300 dark:bg-zinc-600 mx-1"},`${T.TOOLBAR_ITEM_DIVIDER}-${_}`),[T.TOOLBAR_ITEM_HEADING_DROPDOWN]:()=>o.jsx(A.ToolbarDropdown,{options:I.RICH_EDITOR_HEADING_OPTIONS,value:e.currentBlock,onChange:e.handleHeadingChange,title:I.TITLE_TEXT_STYLE,disabled:n,icon:o.jsx(l.TextIcon,{size:i.SIXTEEN})},T.TOOLBAR_ITEM_HEADING_DROPDOWN),[T.TOOLBAR_ITEM_TEXT_COLOR]:()=>o.jsx(L.ToolbarColorPicker,{value:e.textColorValue,onChange:e.handleTextColor,title:I.TITLE_TEXT_COLOR,disabled:n,type:"text",recentColors:e.recentTextColors,onApplyLast:e.handleApplyLastTextColor},T.TOOLBAR_ITEM_TEXT_COLOR),[T.TOOLBAR_ITEM_HIGHLIGHT_COLOR]:()=>o.jsx(L.ToolbarColorPicker,{value:e.highlightColorValue,onChange:e.handleHighlightColor,title:I.TITLE_HIGHLIGHT_COLOR,disabled:n,type:"highlight",recentColors:e.recentHighlightColors,onApplyLast:e.handleApplyLastHighlightColor},T.TOOLBAR_ITEM_HIGHLIGHT_COLOR),[T.TOOLBAR_ITEM_LINK]:()=>o.jsx(E.ToolbarButton,{icon:o.jsx(l.InsertLinkIcon,{size:i.SIXTEEN}),title:I.TITLE_INSERT_LINK,onClick:e.handleLink,disabled:n},T.TOOLBAR_ITEM_LINK),[T.TOOLBAR_ITEM_IMAGE]:()=>o.jsx(E.ToolbarButton,{icon:o.jsx(l.InsertPhotoIcon,{size:i.SIXTEEN}),title:I.TITLE_INSERT_IMAGE,onClick:e.handleImageUpload,disabled:n},T.TOOLBAR_ITEM_IMAGE),[T.TOOLBAR_ITEM_SIGNATURE]:()=>o.jsx(M.ToolbarSignature,{title:I.TITLE_INSERT_SIGNATURE,disabled:n,onInsert:e.handleInsertSignature},T.TOOLBAR_ITEM_SIGNATURE),[T.TOOLBAR_ITEM_ALIGN_LEFT]:()=>o.jsx(E.ToolbarButton,{icon:o.jsx(l.AlignLeftIcon,{size:i.SIXTEEN}),title:I.TITLE_ALIGN_LEFT,onClick:()=>e.execAlign(T.COMMAND_JUSTIFY_LEFT),disabled:n},T.TOOLBAR_ITEM_ALIGN_LEFT),[T.TOOLBAR_ITEM_ALIGN_CENTER]:()=>o.jsx(E.ToolbarButton,{icon:o.jsx(l.AlignCenterIcon,{size:i.SIXTEEN}),title:I.TITLE_ALIGN_CENTER,onClick:()=>e.execAlign(T.COMMAND_JUSTIFY_CENTER),disabled:n},T.TOOLBAR_ITEM_ALIGN_CENTER),[T.TOOLBAR_ITEM_ALIGN_RIGHT]:()=>o.jsx(E.ToolbarButton,{icon:o.jsx(l.AlignRightIcon,{size:i.SIXTEEN}),title:I.TITLE_ALIGN_RIGHT,onClick:()=>e.execAlign(T.COMMAND_JUSTIFY_RIGHT),disabled:n},T.TOOLBAR_ITEM_ALIGN_RIGHT),[T.TOOLBAR_ITEM_ALIGN_JUSTIFY]:()=>o.jsx(E.ToolbarButton,{icon:o.jsx(l.AlignJustifyIcon,{size:i.SIXTEEN}),title:I.TITLE_JUSTIFY,onClick:()=>e.execAlign(T.COMMAND_JUSTIFY_FULL),disabled:n},T.TOOLBAR_ITEM_ALIGN_JUSTIFY),[T.TOOLBAR_ITEM_INDENT]:()=>o.jsx(E.ToolbarButton,{icon:o.jsx(l.IndentIncreaseIcon,{size:i.SIXTEEN}),title:I.TITLE_INCREASE_INDENT,onClick:()=>e.execAlign(T.COMMAND_INDENT),disabled:n},T.TOOLBAR_ITEM_INDENT),[T.TOOLBAR_ITEM_OUTDENT]:()=>o.jsx(E.ToolbarButton,{icon:o.jsx(l.IndentDecreaseIcon,{size:i.SIXTEEN}),title:I.TITLE_DECREASE_INDENT,onClick:()=>e.execAlign(T.COMMAND_OUTDENT),disabled:n},T.TOOLBAR_ITEM_OUTDENT),[T.TOOLBAR_ITEM_CLEAR_FORMAT]:()=>o.jsx(E.ToolbarButton,{icon:o.jsx(l.FormatClearIcon,{size:i.SIXTEEN}),title:I.TITLE_CLEAR_FORMATTING,onClick:()=>e.execAlign(T.COMMAND_REMOVE_FORMAT),disabled:n},T.TOOLBAR_ITEM_CLEAR_FORMAT),[T.TOOLBAR_ITEM_MORE]:()=>{const _=e.isMobile?I.RICH_EDITOR_MOBILE_MORE_ITEMS:I.RICH_EDITOR_DESKTOP_MORE_ITEMS;return o.jsx(N.ToolbarMore,{disabled:n,isMobile:e.isMobile,children:_.map((t,r)=>O(t,r))},T.TOOLBAR_ITEM_MORE)}},O=(_,t)=>{const r=R[_];if(r)return r(t);const s=I.RICH_EDITOR_BUTTON_CONFIG[_],a=d.RICH_EDITOR_ICONS[_];return!s||!a?null:o.jsx(E.ToolbarButton,{icon:a,title:s.title,active:e.activeFormats.has(_),onClick:()=>e.handleFormat(_),disabled:n},_)};return O};exports.createToolbarItemRenderer=c;

package/dist/components/RichEditor/helpers/toolbarItemRender.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+import { ToolbarOption } from '../RichEditor.types';
+import { UseRichEditorReturn } from '../useRichEditor';
+export interface ToolbarRenderContext extends UseRichEditorReturn {
+    disabled: boolean;
+    readOnly: boolean;
+}
+export declare const createToolbarItemRenderer: (ctx: ToolbarRenderContext) => (item: ToolbarOption, index: number) => ReactNode;

package/dist/components/RichEditor/helpers/toolbarItemRender.js

@@ -0,0 +1,183 @@
+import { jsx as o } from "react/jsx-runtime";
+import { SIXTEEN as l } from "../../../constants/numbers.const.js";
+import { TOOLBAR_ITEM_MORE as a, TOOLBAR_ITEM_CLEAR_FORMAT as O, COMMAND_REMOVE_FORMAT as S, TOOLBAR_ITEM_OUTDENT as s, COMMAND_OUTDENT as G, TOOLBAR_ITEM_INDENT as L, COMMAND_INDENT as B, TOOLBAR_ITEM_ALIGN_JUSTIFY as d, COMMAND_JUSTIFY_FULL as H, TOOLBAR_ITEM_ALIGN_RIGHT as A, COMMAND_JUSTIFY_RIGHT as F, TOOLBAR_ITEM_ALIGN_CENTER as R, COMMAND_JUSTIFY_CENTER as f, TOOLBAR_ITEM_ALIGN_LEFT as C, COMMAND_JUSTIFY_LEFT as k, TOOLBAR_ITEM_SIGNATURE as M, TOOLBAR_ITEM_IMAGE as N, TOOLBAR_ITEM_LINK as c, TOOLBAR_ITEM_HIGHLIGHT_COLOR as g, TOOLBAR_ITEM_TEXT_COLOR as h, TOOLBAR_ITEM_HEADING_DROPDOWN as p, TOOLBAR_ITEM_DIVIDER as b } from "../../../constants/generals.const.js";
+import { FormatClearIcon as u, IndentDecreaseIcon as U, IndentIncreaseIcon as z, AlignJustifyIcon as y, AlignRightIcon as v, AlignCenterIcon as J, AlignLeftIcon as Y, InsertPhotoIcon as P, InsertLinkIcon as V, TextIcon as X } from "../../Icon/icons/editor.js";
+import { ToolbarButton as n } from "../components/ToolbarButton/ToolbarButton.js";
+import { ToolbarDropdown as K } from "../components/ToolbarDropdown/ToolbarDropdown.js";
+import { ToolbarColorPicker as m } from "../components/ToolbarColorPicker/ToolbarColorPicker.js";
+import { ToolbarMore as w } from "../components/ToolbarMore/ToolbarMore.js";
+import { ToolbarSignature as $ } from "../components/ToolbarSignature/ToolbarSignature.js";
+import { RICH_EDITOR_BUTTON_CONFIG as j, RICH_EDITOR_MOBILE_MORE_ITEMS as W, RICH_EDITOR_DESKTOP_MORE_ITEMS as q, TITLE_CLEAR_FORMATTING as Q, TITLE_DECREASE_INDENT as Z, TITLE_INCREASE_INDENT as x, TITLE_JUSTIFY as ee, TITLE_ALIGN_RIGHT as oe, TITLE_ALIGN_CENTER as Te, TITLE_ALIGN_LEFT as ie, TITLE_INSERT_SIGNATURE as le, TITLE_INSERT_IMAGE as ne, TITLE_INSERT_LINK as Ie, TITLE_HIGHLIGHT_COLOR as _e, TITLE_TEXT_COLOR as re, TITLE_TEXT_STYLE as Ee, RICH_EDITOR_HEADING_OPTIONS as te } from "../RichEditor.const.js";
+import { RICH_EDITOR_ICONS as ae } from "./IconRender.js";
+const he = (e) => {
+  const T = e.disabled || e.readOnly, D = {
+    [b]: (i) => /* @__PURE__ */ o(
+      "div",
+      {
+        className: "Bear-RichEditor__divider w-px h-5 bg-gray-300 dark:bg-zinc-600 mx-1"
+      },
+      `${b}-${i}`
+    ),
+    [p]: () => /* @__PURE__ */ o(
+      K,
+      {
+        options: te,
+        value: e.currentBlock,
+        onChange: e.handleHeadingChange,
+        title: Ee,
+        disabled: T,
+        icon: /* @__PURE__ */ o(X, { size: l })
+      },
+      p
+    ),
+    [h]: () => /* @__PURE__ */ o(
+      m,
+      {
+        value: e.textColorValue,
+        onChange: e.handleTextColor,
+        title: re,
+        disabled: T,
+        type: "text",
+        recentColors: e.recentTextColors,
+        onApplyLast: e.handleApplyLastTextColor
+      },
+      h
+    ),
+    [g]: () => /* @__PURE__ */ o(
+      m,
+      {
+        value: e.highlightColorValue,
+        onChange: e.handleHighlightColor,
+        title: _e,
+        disabled: T,
+        type: "highlight",
+        recentColors: e.recentHighlightColors,
+        onApplyLast: e.handleApplyLastHighlightColor
+      },
+      g
+    ),
+    [c]: () => /* @__PURE__ */ o(
+      n,
+      {
+        icon: /* @__PURE__ */ o(V, { size: l }),
+        title: Ie,
+        onClick: e.handleLink,
+        disabled: T
+      },
+      c
+    ),
+    [N]: () => /* @__PURE__ */ o(
+      n,
+      {
+        icon: /* @__PURE__ */ o(P, { size: l }),
+        title: ne,
+        onClick: e.handleImageUpload,
+        disabled: T
+      },
+      N
+    ),
+    [M]: () => /* @__PURE__ */ o(
+      $,
+      {
+        title: le,
+        disabled: T,
+        onInsert: e.handleInsertSignature
+      },
+      M
+    ),
+    [C]: () => /* @__PURE__ */ o(
+      n,
+      {
+        icon: /* @__PURE__ */ o(Y, { size: l }),
+        title: ie,
+        onClick: () => e.execAlign(k),
+        disabled: T
+      },
+      C
+    ),
+    [R]: () => /* @__PURE__ */ o(
+      n,
+      {
+        icon: /* @__PURE__ */ o(J, { size: l }),
+        title: Te,
+        onClick: () => e.execAlign(f),
+        disabled: T
+      },
+      R
+    ),
+    [A]: () => /* @__PURE__ */ o(
+      n,
+      {
+        icon: /* @__PURE__ */ o(v, { size: l }),
+        title: oe,
+        onClick: () => e.execAlign(F),
+        disabled: T
+      },
+      A
+    ),
+    [d]: () => /* @__PURE__ */ o(
+      n,
+      {
+        icon: /* @__PURE__ */ o(y, { size: l }),
+        title: ee,
+        onClick: () => e.execAlign(H),
+        disabled: T
+      },
+      d
+    ),
+    [L]: () => /* @__PURE__ */ o(
+      n,
+      {
+        icon: /* @__PURE__ */ o(z, { size: l }),
+        title: x,
+        onClick: () => e.execAlign(B),
+        disabled: T
+      },
+      L
+    ),
+    [s]: () => /* @__PURE__ */ o(
+      n,
+      {
+        icon: /* @__PURE__ */ o(U, { size: l }),
+        title: Z,
+        onClick: () => e.execAlign(G),
+        disabled: T
+      },
+      s
+    ),
+    [O]: () => /* @__PURE__ */ o(
+      n,
+      {
+        icon: /* @__PURE__ */ o(u, { size: l }),
+        title: Q,
+        onClick: () => e.execAlign(S),
+        disabled: T
+      },
+      O
+    ),
+    [a]: () => {
+      const i = e.isMobile ? W : q;
+      return /* @__PURE__ */ o(w, { disabled: T, isMobile: e.isMobile, children: i.map((_, I) => r(_, I)) }, a);
+    }
+  }, r = (i, _) => {
+    const I = D[i];
+    if (I)
+      return I(_);
+    const E = j[i], t = ae[i];
+    return !E || !t ? null : /* @__PURE__ */ o(
+      n,
+      {
+        icon: t,
+        title: E.title,
+        active: e.activeFormats.has(i),
+        onClick: () => e.handleFormat(i),
+        disabled: T
+      },
+      i
+    );
+  };
+  return r;
+};
+export {
+  he as createToolbarItemRenderer
+};

package/dist/components/RichEditor/index.d.ts

@@ -1,4 +1,4 @@
-export { RichEditor, default } from './RichEditor';
+export { RichEditor } from './RichEditor';
 export type { RichEditorProps, ToolbarOption, ToolbarButtonProps, DropdownOption, ToolbarDropdownProps } from './RichEditor.types';
 export * from './RichEditor.const';
 export * from './helpers';

package/dist/components/RichEditor/useRichEditor/index.d.ts

@@ -0,0 +1,2 @@
+export { useRichEditor } from './useRichEditor';
+export type { UseRichEditorOptions, UseRichEditorReturn } from './useRichEditor.types';

package/dist/components/RichEditor/useRichEditor/useRichEditor.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react"),$=require("../../../hooks/useMediaQuery.cjs"),g=require("../../../constants/numbers.const.cjs"),o=require("../../../constants/generals.const.cjs"),r=require("../helpers/formatHelpers.cjs"),f=require("../RichEditor.const.cjs"),K=(_,T,h)=>{if(!_)return;const d=T??g.ONE_HUNDRED_FIFTY;_.style.minHeight=typeof d===o.TYPE_NUMBER?`${d}${o.UNIT_PX}`:String(d),h&&(_.style.maxHeight=typeof h===o.TYPE_NUMBER?`${h}${o.UNIT_PX}`:String(h),_.style.overflowY="auto")},Z=_=>{const{value:T,defaultValue:h,onChange:d,disabled:l,readOnly:u,toolbar:L,allowImagePaste:p,showCharCount:H,minHeight:M,maxHeight:P}=_,n=a.useRef(null),I=$.useMediaQuery(`(max-width: ${f.RICH_EDITOR_MOBILE_BREAKPOINT}${o.UNIT_PX})`),A=I?f.RICH_EDITOR_MOBILE_TOOLBAR:L,[S,y]=a.useState(new Set),[N,O]=a.useState(o.BLOCK_PARAGRAPH),[U,x]=a.useState(g.ZERO),[F,v]=a.useState(o.COLOR_BLACK),[B,D]=a.useState(o.COLOR_HIGHLIGHT_YELLOW),[Y,w]=a.useState([]),[G,b]=a.useState([]);K(n.current,M,P),a.useEffect(()=>{n.current&&T!==void 0&&n.current.innerHTML!==T&&(n.current.innerHTML=T)},[T]),a.useEffect(()=>{n.current&&h&&!T&&(n.current.innerHTML=h)},[]);const R=()=>{y(r.getActiveFormats());const t=r.queryCommandValue(o.COMMAND_FORMAT_BLOCK);t&&O(t.toLowerCase().replace(/[<>]/g,o.EMPTY_STRING))},i=()=>{var t;n.current&&(d==null||d(n.current.innerHTML),H&&x(((t=n.current.textContent)==null?void 0:t.length)??g.ZERO)),R()},X=t=>{var s;if(l||u)return;(s=n.current)==null||s.focus();const e=f.RICH_EDITOR_BUTTON_CONFIG[t];if(!e)return;const c="value"in e?e.value:void 0;r.execCommand(e.command,c),R(),i()},q=t=>{var e;l||u||((e=n.current)==null||e.focus(),r.execCommand(o.COMMAND_FORMAT_BLOCK,t),O(t),i())},k=()=>{var s;if(l||u)return;const t=window.getSelection(),e=t&&t.toString().length>g.ZERO,c=prompt(f.PROMPT_ENTER_URL,e?o.EMPTY_STRING:f.URL_HTTPS_PREFIX);c&&((s=n.current)==null||s.focus(),r.insertLink(c),i())},m=(t,e)=>{if(!t)return;(e===o.COLOR_TYPE_TEXT?w:b)(s=>{const C=s.filter(E=>E!==t);return[t,...C].slice(g.ZERO,g.SIX)})};return{editorRef:n,isMobile:I,activeToolbar:A,activeFormats:S,currentBlock:N,charCount:U,textColorValue:F,highlightColorValue:B,recentTextColors:Y,recentHighlightColors:G,updateActiveFormats:R,handleInput:i,handleFormat:X,handleHeadingChange:q,handleLink:k,handleTextColor:t=>{var e;l||u||((e=n.current)==null||e.focus(),r.setTextColor(t),v(t),m(t,o.COLOR_TYPE_TEXT),i())},handleHighlightColor:t=>{var e;l||u||((e=n.current)==null||e.focus(),r.setHighlightColor(t),D(t),m(t,o.COLOR_TYPE_HIGHLIGHT),i())},handleApplyLastTextColor:t=>{var e;l||u||((e=n.current)==null||e.focus(),r.setTextColor(t),i())},handleApplyLastHighlightColor:t=>{var e;l||u||((e=n.current)==null||e.focus(),r.setHighlightColor(t),i())},handlePaste:async t=>{var s;if(!p)return;const e=(s=t.clipboardData)==null?void 0:s.items;if(!e)return;const c=Array.from(e);for(const C of c)if(C.type.startsWith(f.IMAGE_MIME_PREFIX)){t.preventDefault();const E=C.getAsFile();if(E){const V=await r.fileToDataUrl(E);r.insertImage(V),i()}return}},handleImageUpload:()=>{if(l||u)return;const t=document.createElement("input");t.type=f.INPUT_TYPE_FILE,t.accept=f.INPUT_ACCEPT_IMAGE,t.onchange=async e=>{var s,C;const c=(s=e.target.files)==null?void 0:s[g.ZERO];if(c){const E=await r.fileToDataUrl(c);(C=n.current)==null||C.focus(),r.insertImage(E),i()}},t.click()},handleInsertSignature:t=>{var e;l||u||!t||((e=n.current)==null||e.focus(),r.insertImage(t),i())},execAlign:t=>{var e;(e=n.current)==null||e.focus(),r.execCommand(t),i()}}};exports.useRichEditor=Z;

package/dist/components/RichEditor/useRichEditor/useRichEditor.d.ts

@@ -0,0 +1,2 @@
+import { UseRichEditorOptions, UseRichEditorReturn } from './useRichEditor.types';
+export declare const useRichEditor: (options: UseRichEditorOptions) => UseRichEditorReturn;

package/dist/components/RichEditor/useRichEditor/useRichEditor.js

@@ -0,0 +1,140 @@
+import { useRef as tt, useState as h, useEffect as L } from "react";
+import { useMediaQuery as et } from "../../../hooks/useMediaQuery.js";
+import { ZERO as T, ONE_HUNDRED_FIFTY as nt, SIX as rt } from "../../../constants/numbers.const.js";
+import { UNIT_PX as p, BLOCK_PARAGRAPH as ot, COLOR_BLACK as it, COLOR_HIGHLIGHT_YELLOW as st, TYPE_NUMBER as O, EMPTY_STRING as H, COMMAND_FORMAT_BLOCK as A, COLOR_TYPE_TEXT as P, COLOR_TYPE_HIGHLIGHT as ct } from "../../../constants/generals.const.js";
+import { execCommand as m, insertImage as _, fileToDataUrl as M, setHighlightColor as y, setTextColor as x, insertLink as lt, getActiveFormats as at, queryCommandValue as ut } from "../helpers/formatHelpers.js";
+import { RICH_EDITOR_MOBILE_BREAKPOINT as ft, RICH_EDITOR_MOBILE_TOOLBAR as ht, INPUT_TYPE_FILE as dt, INPUT_ACCEPT_IMAGE as Ct, IMAGE_MIME_PREFIX as Tt, PROMPT_ENTER_URL as gt, URL_HTTPS_PREFIX as mt, RICH_EDITOR_BUTTON_CONFIG as _t } from "../RichEditor.const.js";
+const pt = (d, l, a) => {
+  if (!d)
+    return;
+  const u = l ?? nt;
+  d.style.minHeight = typeof u === O ? `${u}${p}` : String(u), a && (d.style.maxHeight = typeof a === O ? `${a}${p}` : String(a), d.style.overflowY = "auto");
+}, Nt = (d) => {
+  const {
+    value: l,
+    defaultValue: a,
+    onChange: u,
+    disabled: s,
+    readOnly: c,
+    toolbar: F,
+    allowImagePaste: S,
+    showCharCount: v,
+    minHeight: N,
+    maxHeight: U
+  } = d, n = tt(null), I = et(`(max-width: ${ft}${p})`), B = I ? ht : F, [w, D] = h(/* @__PURE__ */ new Set()), [G, R] = h(ot), [Y, b] = h(T), [k, V] = h(it), [$, X] = h(st), [K, W] = h([]), [q, z] = h([]);
+  pt(n.current, N, U), L(() => {
+    n.current && l !== void 0 && n.current.innerHTML !== l && (n.current.innerHTML = l);
+  }, [l]), L(() => {
+    n.current && a && !l && (n.current.innerHTML = a);
+  }, []);
+  const g = () => {
+    D(at());
+    const t = ut(A);
+    t && R(t.toLowerCase().replace(/[<>]/g, H));
+  }, o = () => {
+    var t;
+    n.current && (u == null || u(n.current.innerHTML), v && b(((t = n.current.textContent) == null ? void 0 : t.length) ?? T)), g();
+  }, Q = (t) => {
+    var r;
+    if (s || c)
+      return;
+    (r = n.current) == null || r.focus();
+    const e = _t[t];
+    if (!e)
+      return;
+    const i = "value" in e ? e.value : void 0;
+    m(e.command, i), g(), o();
+  }, Z = (t) => {
+    var e;
+    s || c || ((e = n.current) == null || e.focus(), m(A, t), R(t), o());
+  }, j = () => {
+    var r;
+    if (s || c)
+      return;
+    const t = window.getSelection(), e = t && t.toString().length > T, i = prompt(gt, e ? H : mt);
+    i && ((r = n.current) == null || r.focus(), lt(i), o());
+  }, E = (t, e) => {
+    if (!t)
+      return;
+    (e === P ? W : z)((r) => {
+      const f = r.filter((C) => C !== t);
+      return [t, ...f].slice(T, rt);
+    });
+  };
+  return {
+    editorRef: n,
+    isMobile: I,
+    activeToolbar: B,
+    activeFormats: w,
+    currentBlock: G,
+    charCount: Y,
+    textColorValue: k,
+    highlightColorValue: $,
+    recentTextColors: K,
+    recentHighlightColors: q,
+    updateActiveFormats: g,
+    handleInput: o,
+    handleFormat: Q,
+    handleHeadingChange: Z,
+    handleLink: j,
+    handleTextColor: (t) => {
+      var e;
+      s || c || ((e = n.current) == null || e.focus(), x(t), V(t), E(t, P), o());
+    },
+    handleHighlightColor: (t) => {
+      var e;
+      s || c || ((e = n.current) == null || e.focus(), y(t), X(t), E(t, ct), o());
+    },
+    handleApplyLastTextColor: (t) => {
+      var e;
+      s || c || ((e = n.current) == null || e.focus(), x(t), o());
+    },
+    handleApplyLastHighlightColor: (t) => {
+      var e;
+      s || c || ((e = n.current) == null || e.focus(), y(t), o());
+    },
+    handlePaste: async (t) => {
+      var r;
+      if (!S)
+        return;
+      const e = (r = t.clipboardData) == null ? void 0 : r.items;
+      if (!e)
+        return;
+      const i = Array.from(e);
+      for (const f of i)
+        if (f.type.startsWith(Tt)) {
+          t.preventDefault();
+          const C = f.getAsFile();
+          if (C) {
+            const J = await M(C);
+            _(J), o();
+          }
+          return;
+        }
+    },
+    handleImageUpload: () => {
+      if (s || c)
+        return;
+      const t = document.createElement("input");
+      t.type = dt, t.accept = Ct, t.onchange = async (e) => {
+        var r, f;
+        const i = (r = e.target.files) == null ? void 0 : r[T];
+        if (i) {
+          const C = await M(i);
+          (f = n.current) == null || f.focus(), _(C), o();
+        }
+      }, t.click();
+    },
+    handleInsertSignature: (t) => {
+      var e;
+      s || c || !t || ((e = n.current) == null || e.focus(), _(t), o());
+    },
+    execAlign: (t) => {
+      var e;
+      (e = n.current) == null || e.focus(), m(t), o();
+    }
+  };
+};
+export {
+  Nt as useRichEditor
+};