@techzyapp/ui-library 1.0.43 → 1.0.45

package/dist/RichTextEditor-zkoxujnO.js

@@ -0,0 +1,1148 @@
+import { jsx as r, jsxs as S, Fragment as Ue } from "react/jsx-runtime";
+import { useId as nt, useState as T, useRef as M, useEffect as A, useCallback as $e, forwardRef as ot } from "react";
+import { clsx as he } from "clsx";
+import { DecoratorNode as Be, $applyNodeReplacement as Pe, $getNodeByKey as se, $getSelection as q, $isRangeSelection as V, $isElementNode as fe, SELECTION_CHANGE_COMMAND as it, COMMAND_PRIORITY_LOW as me, CAN_UNDO_COMMAND as at, CAN_REDO_COMMAND as lt, UNDO_COMMAND as ct, REDO_COMMAND as st, $createParagraphNode as _e, FORMAT_ELEMENT_COMMAND as mt, $getRoot as ge, $isParagraphNode as He, FORMAT_TEXT_COMMAND as ut, TextNode as dt, $isTextNode as pt, getStyleObjectFromCSS as ht, $insertNodes as ft, $setSelection as _t } from "lexical";
+import { LexicalComposer as gt } from "@lexical/react/LexicalComposer";
+import { useLexicalComposerContext as ye } from "@lexical/react/LexicalComposerContext";
+import { RichTextPlugin as yt } from "@lexical/react/LexicalRichTextPlugin";
+import { ContentEditable as bt } from "@lexical/react/LexicalContentEditable";
+import { LexicalErrorBoundary as Tt } from "@lexical/react/LexicalErrorBoundary";
+import { HistoryPlugin as vt } from "@lexical/react/LexicalHistoryPlugin";
+import { ListPlugin as Et } from "@lexical/react/LexicalListPlugin";
+import { CheckListPlugin as Nt } from "@lexical/react/LexicalCheckListPlugin";
+import { LinkPlugin as xt } from "@lexical/react/LexicalLinkPlugin";
+import { MarkdownShortcutPlugin as Lt } from "@lexical/react/LexicalMarkdownShortcutPlugin";
+import { ELEMENT_TRANSFORMERS as Ct, TEXT_FORMAT_TRANSFORMERS as St, TEXT_MATCH_TRANSFORMERS as kt } from "@lexical/markdown";
+import { $isHeadingNode as At, $isQuoteNode as Mt, $createQuoteNode as Ot, $createHeadingNode as Dt, HeadingNode as Rt, QuoteNode as wt } from "@lexical/rich-text";
+import { ListNode as ze, REMOVE_LIST_COMMAND as It, INSERT_UNORDERED_LIST_COMMAND as Ft, INSERT_ORDERED_LIST_COMMAND as Ut, INSERT_CHECK_LIST_COMMAND as $t, ListItemNode as Bt } from "@lexical/list";
+import { $isLinkNode as Se, TOGGLE_LINK_COMMAND as Pt, LinkNode as qe } from "@lexical/link";
+import { $generateNodesFromDOM as Ht, $generateHtmlFromNodes as zt } from "@lexical/html";
+import { u as qt } from "./formContext-B7ln1Miy.js";
+import { T as ke } from "./Typography-ChSuxgkc.js";
+import { t as Vt } from "./toastStore-Cx_JOKwS.js";
+import { $getSelectionStyleValueForProperty as Ae, $patchStyleText as Me, $setBlocksType as ue } from "@lexical/selection";
+import { $findMatchingParent as Gt, $getNearestNodeOfType as Kt, mergeRegister as Wt, $insertNodeToNearestRoot as Xt } from "@lexical/utils";
+import { B } from "./Button-C415LPw_.js";
+import { C as Jt, D as Qt } from "./ColorPickerPanel-DThSuUoz.js";
+import { D as U } from "./Divider-LtH3dLgw.js";
+import { D as j } from "./Dropdown-D-D_Z1Jo.js";
+import { F as Yt } from "./FloatingPanel-C5c_eMQ0.js";
+import { b as v } from "./Icon-B7DJn8Tw.js";
+import { I as $ } from "./IconButton-re6xITGO.js";
+import { L as G } from "./ListItem-Ezmdk7q-.js";
+import { M as Ve } from "./Modal-DpoiMMM3.js";
+import { T as Ge } from "./TextField-CyKIx-d-.js";
+import { useLexicalEditable as jt } from "@lexical/react/useLexicalEditable";
+import { a as ee } from "./ConfigProvider-DVDGtCUc.js";
+const Zt = /^(?:https?:|mailto:|tel:|ftp:|#|\/|\?|\.)/i, er = /^[a-z][a-z0-9+.-]*:/i;
+function be(o) {
+  const e = o.trim();
+  return e === "" ? "" : Zt.test(e) || !er.test(e) ? e : "#";
+}
+function Ke(o) {
+  const e = o.trim();
+  if (/^data:(?:image|video)\//i.test(e) || /^blob:/i.test(e)) return e;
+  const i = be(e);
+  return i === "#" ? "" : i;
+}
+const tr = "_editor_ynman_1", rr = "_label_ynman_9", nr = "_required_ynman_15", or = "_helper_ynman_18", ir = "_control_ynman_24", ar = "_error_ynman_38", lr = "_disabled_ynman_45", cr = "_toolbar_ynman_51", sr = "_sm_ynman_67", mr = "_md_ynman_71", ur = "_lg_ynman_75", dr = "_colorGlyph_ynman_81", pr = "_colorBar_ynman_89", hr = "_shell_ynman_107", fr = "_content_ynman_110", _r = "_placeholder_ynman_125", gr = "_paragraph_ynman_148", yr = "_h1_ynman_154", br = "_h2_ynman_155", Tr = "_h3_ynman_156", vr = "_h4_ynman_157", Er = "_h5_ynman_158", Nr = "_h6_ynman_159", xr = "_quote_ynman_178", Lr = "_ul_ynman_187", Cr = "_ol_ynman_193", Sr = "_li_ynman_199", kr = "_nestedLi_ynman_202", Ar = "_liChecked_ynman_206", Mr = "_liUnchecked_ynman_207", Or = "_link_ynman_244", Dr = "_bold_ynman_251", Rr = "_italic_ynman_254", wr = "_underline_ynman_257", Ir = "_strike_ynman_260", Fr = "_codeInline_ynman_266", Ur = "_imageFrame_ynman_284", $r = "_imageFrame_left_ynman_298", Br = "_imageFrame_right_ynman_303", Pr = "_imageFrame_center_ynman_308", Hr = "_imageTools_ynman_317", zr = "_imageToolButton_ynman_326", qr = "_imageToolIcon_ynman_348", c = {
+  editor: tr,
+  label: rr,
+  required: nr,
+  helper: or,
+  control: ir,
+  error: ar,
+  disabled: lr,
+  toolbar: cr,
+  sm: sr,
+  md: mr,
+  lg: ur,
+  colorGlyph: dr,
+  colorBar: pr,
+  shell: hr,
+  content: fr,
+  placeholder: _r,
+  paragraph: gr,
+  h1: yr,
+  h2: br,
+  h3: Tr,
+  h4: vr,
+  h5: Er,
+  h6: Nr,
+  quote: xr,
+  ul: Lr,
+  ol: Cr,
+  li: Sr,
+  nestedLi: kr,
+  liChecked: Ar,
+  liUnchecked: Mr,
+  link: Or,
+  bold: Dr,
+  italic: Rr,
+  underline: wr,
+  strike: Ir,
+  codeInline: Fr,
+  imageFrame: Ur,
+  imageFrame_left: $r,
+  imageFrame_right: Br,
+  imageFrame_center: Pr,
+  imageTools: Hr,
+  imageToolButton: zr,
+  imageToolIcon: qr
+}, Vr = {
+  inline: "",
+  left: "float: left; margin: 0 16px 8px 0; max-width: 50%;",
+  right: "float: right; margin: 0 0 8px 16px; max-width: 50%;",
+  center: "display: block; margin: 8px auto;"
+};
+function Gr(o) {
+  const { float: e, display: i, marginLeft: n, marginRight: s } = o.style;
+  return e === "left" ? "left" : e === "right" ? "right" : i === "block" && n === "auto" && s === "auto" ? "center" : "inline";
+}
+function Kr(o) {
+  return o instanceof HTMLImageElement && o.src ? {
+    node: Z(
+      o.getAttribute("src") ?? o.src,
+      o.alt,
+      Gr(o)
+    )
+  } : null;
+}
+class K extends Be {
+  static getType() {
+    return "tz-image";
+  }
+  static clone(e) {
+    return new K(e.__src, e.__alt, e.__layout, e.__key);
+  }
+  constructor(e, i = "", n = "inline", s) {
+    super(s), this.__src = Ke(e), this.__alt = i, this.__layout = n;
+  }
+  static importJSON(e) {
+    return Z(e.src, e.alt, e.layout ?? "inline");
+  }
+  exportJSON() {
+    return {
+      ...super.exportJSON(),
+      type: "tz-image",
+      version: 1,
+      src: this.__src,
+      alt: this.__alt,
+      layout: this.__layout
+    };
+  }
+  static importDOM() {
+    return { img: () => ({ conversion: Kr, priority: 0 }) };
+  }
+  exportDOM() {
+    const e = document.createElement("img");
+    e.setAttribute("src", this.__src), e.setAttribute("alt", this.__alt);
+    const i = Vr[this.__layout];
+    return i && e.setAttribute("style", i), { element: e };
+  }
+  /** A `display: contents` wrapper; the image itself is rendered by {@link decorate}. */
+  createDOM() {
+    const e = document.createElement("div");
+    return e.style.display = "contents", e;
+  }
+  updateDOM() {
+    return !1;
+  }
+  getSrc() {
+    return this.__src;
+  }
+  getAltText() {
+    return this.__alt;
+  }
+  /** Set the image's alt text (use inside an `editor.update`). */
+  setAltText(e) {
+    this.getWritable().__alt = e;
+  }
+  getLayout() {
+    return this.__layout;
+  }
+  /** Set how the image sits among the text (use inside an `editor.update`). */
+  setLayout(e) {
+    this.getWritable().__layout = e;
+  }
+  decorate() {
+    return /* @__PURE__ */ r(Jr, { nodeKey: this.getKey(), src: this.__src, alt: this.__alt, layout: this.__layout });
+  }
+}
+const Wr = ["inline", "left", "right", "center"], Xr = {
+  inline: "rte.layoutInline",
+  left: "rte.layoutLeft",
+  right: "rte.layoutRight",
+  center: "rte.layoutCenter"
+};
+function Oe({ layout: o }) {
+  const e = (n, s, a) => /* @__PURE__ */ r("rect", { x: n, y: s, width: a, height: 1.5, rx: 0.75 }, `${n}-${s}`), i = {
+    // the image on the line, text on its bottom edge
+    inline: [/* @__PURE__ */ r("rect", { x: 1, y: 4, width: 7, height: 7, rx: 1.5 }, "img"), e(9.5, 9.5, 5.5)],
+    // floated left / right: text runs down beside it, then under it
+    left: [
+      /* @__PURE__ */ r("rect", { x: 1, y: 2, width: 6, height: 6, rx: 1.5 }, "img"),
+      e(8.5, 2.5, 6.5),
+      e(8.5, 5.5, 6.5),
+      e(1, 10, 14),
+      e(1, 13, 10)
+    ],
+    right: [
+      /* @__PURE__ */ r("rect", { x: 9, y: 2, width: 6, height: 6, rx: 1.5 }, "img"),
+      e(1, 2.5, 6.5),
+      e(1, 5.5, 6.5),
+      e(1, 10, 14),
+      e(1, 13, 10)
+    ],
+    // a line of its own, centered
+    center: [
+      e(3, 1.5, 10),
+      /* @__PURE__ */ r("rect", { x: 4.5, y: 4.5, width: 7, height: 7, rx: 1.5 }, "img"),
+      e(3, 13, 10)
+    ]
+  };
+  return /* @__PURE__ */ r("svg", { viewBox: "0 0 16 16", width: 16, height: 16, fill: "currentColor", "aria-hidden": "true", children: i[o] });
+}
+function Jr({
+  nodeKey: o,
+  src: e,
+  alt: i,
+  layout: n
+}) {
+  const [s] = ye(), a = jt(), m = ee(), y = nt(), [d, p] = T(!1), [E, f] = T(i), g = M(null);
+  A(() => {
+    const l = g.current;
+    if (!l) return;
+    const h = (N) => N.stopPropagation();
+    return l.addEventListener("keydown", h), () => l.removeEventListener("keydown", h);
+  }, [a]);
+  const b = M(null);
+  A(() => {
+    const l = b.current;
+    if (!l) return;
+    const h = (N) => {
+      ["Enter", " ", "Backspace", "Delete"].includes(N.key) && N.stopPropagation();
+    };
+    return l.addEventListener("keydown", h), () => l.removeEventListener("keydown", h);
+  }, [a]);
+  const x = () => {
+    s.update(() => {
+      const l = se(o);
+      De(l) && l.setAltText(E.trim());
+    }), p(!1);
+  }, P = (l) => s.update(() => {
+    const h = se(o);
+    De(h) && h.setLayout(l);
+  });
+  return /* @__PURE__ */ S(
+    "span",
+    {
+      className: he(c.imageFrame, n !== "inline" && c[`imageFrame_${n}`]),
+      contentEditable: !1,
+      onMouseDown: (l) => {
+        if (!a || l.button !== 0 || !l.currentTarget.contains(l.target) || l.target.closest("button")) return;
+        l.preventDefault();
+        const h = l.currentTarget.getBoundingClientRect(), N = l.clientX < h.left + h.width / 2;
+        s.update(() => {
+          const O = se(o);
+          O && (N ? O.selectPrevious() : O.selectNext(0, 0));
+        }), s.focus();
+      },
+      children: [
+        /* @__PURE__ */ r("img", { src: e, alt: i, draggable: !1 }),
+        a && /* @__PURE__ */ S("span", { className: c.imageTools, children: [
+          /* @__PURE__ */ r(
+            j,
+            {
+              placement: "bottom-end",
+              size: "sm",
+              trigger: /* @__PURE__ */ r(
+                "button",
+                {
+                  ref: b,
+                  type: "button",
+                  className: he(c.imageToolButton, c.imageToolIcon),
+                  "aria-label": m("rte.imageLayout"),
+                  title: m("rte.imageLayout"),
+                  onMouseDown: (l) => {
+                    l.preventDefault(), l.stopPropagation();
+                  },
+                  children: /* @__PURE__ */ r(Oe, { layout: n })
+                }
+              ),
+              children: Wr.map((l) => /* @__PURE__ */ r(
+                G,
+                {
+                  clickable: !0,
+                  selected: l === n,
+                  icon: /* @__PURE__ */ r(Oe, { layout: l }),
+                  onClick: () => P(l),
+                  children: m(Xr[l])
+                },
+                l
+              ))
+            }
+          ),
+          /* @__PURE__ */ S(
+            "button",
+            {
+              ref: g,
+              type: "button",
+              className: c.imageToolButton,
+              "aria-label": m("rte.editAlt"),
+              title: i || m("rte.editAlt"),
+              onMouseDown: (l) => {
+                l.preventDefault(), l.stopPropagation();
+              },
+              onClick: () => {
+                f(i), p(!0);
+              },
+              children: [
+                /* @__PURE__ */ r(v, { name: "Text", size: "sm" }),
+                /* @__PURE__ */ r("span", { children: m("rte.altText") })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ r(
+          Ve,
+          {
+            open: d,
+            onClose: () => p(!1),
+            size: "sm",
+            icon: "Text",
+            title: m("rte.altText"),
+            footer: /* @__PURE__ */ S(Ue, { children: [
+              /* @__PURE__ */ r(B, { variant: "text", size: "sm", onClick: () => p(!1), children: m("common.cancel") }),
+              /* @__PURE__ */ r(B, { type: "submit", size: "sm", form: y, children: m("common.save") })
+            ] }),
+            children: /* @__PURE__ */ r(
+              "form",
+              {
+                id: y,
+                onSubmit: (l) => {
+                  l.preventDefault(), l.stopPropagation(), x();
+                },
+                children: /* @__PURE__ */ r(
+                  Ge,
+                  {
+                    label: m("rte.altText"),
+                    placeholder: m("rte.altPlaceholder"),
+                    value: E,
+                    onChange: (l) => f(l.target.value),
+                    autoFocus: !0
+                  }
+                )
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function Z(o, e = "", i = "inline") {
+  return Pe(new K(o, e, i));
+}
+function De(o) {
+  return o instanceof K;
+}
+function Re(o) {
+  return /\.(mp4|webm|ogg|ogv|mov|m4v)(\?.*)?$/i.test(o);
+}
+function Qr(o) {
+  const e = o.match(
+    /(?:youtube\.com\/(?:watch\?(?:.*&)?v=|embed\/|shorts\/)|youtu\.be\/)([\w-]{11})/
+  );
+  if (e) return `https://www.youtube.com/embed/${e[1]}`;
+  const i = o.match(/vimeo\.com\/(?:video\/)?(\d+)/);
+  return i ? `https://player.vimeo.com/video/${i[1]}` : o;
+}
+function we(o) {
+  var i;
+  const e = o.getAttribute("src") || ((i = o.querySelector("source")) == null ? void 0 : i.getAttribute("src"));
+  return e ? { node: Te(e) } : null;
+}
+class te extends Be {
+  static getType() {
+    return "tz-video";
+  }
+  static clone(e) {
+    return new te(e.__src, e.__key);
+  }
+  constructor(e, i) {
+    super(i), this.__src = Ke(e);
+  }
+  static importJSON(e) {
+    return Te(e.src);
+  }
+  exportJSON() {
+    return { ...super.exportJSON(), type: "tz-video", version: 1, src: this.__src };
+  }
+  static importDOM() {
+    return {
+      iframe: () => ({ conversion: we, priority: 0 }),
+      video: () => ({ conversion: we, priority: 0 })
+    };
+  }
+  exportDOM() {
+    if (Re(this.__src)) {
+      const i = document.createElement("video");
+      return i.setAttribute("src", this.__src), i.setAttribute("controls", "true"), { element: i };
+    }
+    const e = document.createElement("iframe");
+    return e.setAttribute("src", this.__src), e.setAttribute("frameborder", "0"), e.setAttribute("allowfullscreen", "true"), e.setAttribute(
+      "allow",
+      "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+    ), { element: e };
+  }
+  /** A `display: contents` wrapper; the media element itself is rendered by {@link decorate}. */
+  createDOM() {
+    const e = document.createElement("div");
+    return e.style.display = "contents", e;
+  }
+  updateDOM() {
+    return !1;
+  }
+  getSrc() {
+    return this.__src;
+  }
+  decorate() {
+    return Re(this.__src) ? /* @__PURE__ */ r("video", { src: this.__src, controls: !0 }) : /* @__PURE__ */ r(Yr, { src: this.__src });
+  }
+}
+function Yr({ src: o }) {
+  const e = ee();
+  return /* @__PURE__ */ r("div", { className: "tz-rte-embed", children: /* @__PURE__ */ r(
+    "iframe",
+    {
+      src: o,
+      title: e("rte.embeddedVideo"),
+      frameBorder: 0,
+      allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
+      allowFullScreen: !0
+    }
+  ) });
+}
+function Te(o) {
+  return Pe(new te(Qr(o)));
+}
+const jr = {
+  paragraph: "Paragraph",
+  h1: "Heading 1",
+  h2: "Heading 2",
+  h3: "Heading 3",
+  quote: "Quote",
+  bullet: "Bullet List",
+  number: "Numbered List",
+  check: "Check List"
+}, Zr = [
+  { type: "paragraph", icon: "Text" },
+  { type: "h1", icon: "Hashtag" },
+  { type: "h2", icon: "Hashtag" },
+  { type: "h3", icon: "Hashtag" }
+], en = [
+  { value: "left", labelKey: "rte.alignLeft", icon: "TextalignLeft" },
+  { value: "center", labelKey: "rte.alignCenter", icon: "TextalignCenter" },
+  { value: "right", labelKey: "rte.alignRight", icon: "TextalignRight" }
+], tn = ["10px", "12px", "13px", "14px", "16px", "18px", "20px"], rn = { sm: "12px", md: "13px", lg: "16px" };
+function nn({ color: o, size: e }) {
+  return /* @__PURE__ */ S("span", { className: c.colorGlyph, children: [
+    /* @__PURE__ */ r(v, { name: "Brush", size: e }),
+    /* @__PURE__ */ r(
+      "span",
+      {
+        className: c.colorBar,
+        style: { borderColor: `transparent transparent ${o || "currentColor"} transparent` },
+        "aria-hidden": "true"
+      }
+    )
+  ] });
+}
+function on({ size: o, disabled: e, onImageUpload: i }) {
+  const n = ee(), s = (t) => jr[t] ?? t, [a] = ye(), m = M(null), [y, d] = T(!1), [p, E] = T(!1), [f, g] = T(!1), [b, x] = T(!1), [P, l] = T(""), [h, N] = T("paragraph"), [O, re] = T("left"), [k, L] = T(""), [F, H] = T(""), [W, X] = T(!1), z = M(null), [ne, J] = T(!1), [oe, C] = T(!1), [_, ie] = T(null), [ve, Ee] = T(""), ae = $e(() => {
+    const t = q();
+    if (!V(t)) return;
+    d(t.hasFormat("bold")), E(t.hasFormat("italic")), g(t.hasFormat("underline")), H(Ae(t, "color", "")), L(Ae(t, "font-size", ""));
+    const u = t.anchor.getNode(), w = u.getParent(), R = Se(u) ? u : Se(w) ? w : null;
+    x(R !== null), l((R == null ? void 0 : R.getURL()) ?? "");
+    const I = u.getKey() === "root" ? u : Gt(u, (rt) => {
+      const Ce = rt.getParent();
+      return Ce === null || Ce.getKey() === "root";
+    }) ?? u.getTopLevelElement();
+    re(fe(I) && I.getFormatType() || "left");
+    const Y = Kt(u, ze);
+    Y ? N(Y.getListType()) : At(I) ? N(I.getTag()) : Mt(I) ? N("quote") : N("paragraph");
+  }, []);
+  A(() => Wt(
+    a.registerUpdateListener(({ editorState: t }) => t.read(ae)),
+    a.registerCommand(
+      it,
+      () => (ae(), !1),
+      me
+    ),
+    a.registerCommand(
+      at,
+      (t) => (J(t), !1),
+      me
+    ),
+    a.registerCommand(
+      lt,
+      (t) => (C(t), !1),
+      me
+    )
+  ), [a, ae]);
+  const le = (t) => a.dispatchCommand(ut, t), We = (t) => a.dispatchCommand(mt, t), Xe = (t) => {
+    H(t), a.update(() => {
+      const u = q();
+      V(u) && Me(u, { color: t || null });
+    });
+  }, Je = (t) => {
+    L(t), a.update(() => {
+      const u = q();
+      V(u) && Me(u, { "font-size": t || null });
+    });
+  }, Q = (t) => {
+    if (t === "bullet" || t === "number" || t === "check") {
+      if (h === t)
+        a.dispatchCommand(It, void 0);
+      else {
+        const u = t === "bullet" ? Ft : t === "number" ? Ut : $t;
+        a.dispatchCommand(u, void 0);
+      }
+      return;
+    }
+    a.update(() => {
+      const u = q();
+      V(u) && (t === "paragraph" ? ue(u, () => _e()) : t === "quote" ? ue(u, () => Ot()) : ue(u, () => Dt(t)));
+    });
+  }, Qe = () => Q(h === "quote" ? "paragraph" : "quote"), ce = (t, u = "") => {
+    Ee(u), ie(t);
+  }, Ne = () => ie(null), Ye = () => {
+    _ == null || _.onConfirm(ve.trim()), ie(null);
+  }, je = () => ce(
+    {
+      icon: "Link2",
+      title: n("rte.linkTitle"),
+      label: n("rte.linkUrl"),
+      placeholder: "https://example.com",
+      confirmLabel: n(b ? "common.update" : "common.insert"),
+      // an empty value removes the link (matches the old prompt behavior); sanitize the scheme
+      onConfirm: (t) => a.dispatchCommand(Pt, t === "" ? null : be(t))
+    },
+    P
+    // prefill the current link's URL when the cursor sits in one
+  ), Ze = () => ce({
+    icon: "GalleryAdd",
+    title: n("rte.imageTitle"),
+    label: n("rte.imageUrl"),
+    placeholder: "https://example.com/image.jpg",
+    confirmLabel: n("common.insert"),
+    onConfirm: (t) => {
+      t && a.update(() => de(Z(t)));
+    }
+  }), et = async (t) => {
+    var w;
+    const u = (w = t.target.files) == null ? void 0 : w[0];
+    if (t.target.value = "", !!u)
+      try {
+        const R = i ? await i(u) : await an(u);
+        a.update(() => de(Z(R)));
+      } catch {
+        Vt.error(n("rte.imageError"));
+      }
+  }, tt = () => ce({
+    icon: "VideoSquare",
+    title: n("rte.videoTitle"),
+    label: n("rte.videoUrl"),
+    placeholder: n("rte.videoUrlPlaceholder"),
+    confirmLabel: n("common.insert"),
+    onConfirm: (t) => {
+      t && a.update(() => de(Te(t)));
+    }
+  }), D = (t, u, w, R, I) => /* @__PURE__ */ r(
+    $,
+    {
+      variant: t ? "filled" : "text",
+      color: "primary",
+      size: o,
+      disabled: e,
+      "aria-label": u,
+      "aria-pressed": t,
+      onMouseDown: (Y) => Y.preventDefault(),
+      onClick: w,
+      children: R
+    },
+    I
+  ), xe = h.startsWith("h") ? h : "paragraph", Le = k || rn[o];
+  return /* @__PURE__ */ S(
+    "div",
+    {
+      className: c.toolbar,
+      role: "toolbar",
+      "aria-label": n("rte.formatting"),
+      "aria-orientation": "horizontal",
+      children: [
+        /* @__PURE__ */ r(
+          $,
+          {
+            variant: "text",
+            color: "primary",
+            size: o,
+            disabled: e || !ne,
+            "aria-label": n("rte.undo"),
+            onMouseDown: (t) => t.preventDefault(),
+            onClick: () => a.dispatchCommand(ct, void 0),
+            children: /* @__PURE__ */ r(v, { name: "UndoArrow" })
+          }
+        ),
+        /* @__PURE__ */ r(
+          $,
+          {
+            variant: "text",
+            color: "primary",
+            size: o,
+            disabled: e || !oe,
+            "aria-label": n("rte.redo"),
+            onMouseDown: (t) => t.preventDefault(),
+            onClick: () => a.dispatchCommand(st, void 0),
+            children: /* @__PURE__ */ r(v, { name: "RedoArrow" })
+          }
+        ),
+        /* @__PURE__ */ r(U, { orientation: "vertical" }),
+        /* @__PURE__ */ r(
+          j,
+          {
+            size: o,
+            disabled: e,
+            minWidth: !1,
+            trigger: /* @__PURE__ */ r(
+              B,
+              {
+                variant: "text",
+                color: "primary",
+                size: o,
+                disabled: e,
+                endIcon: /* @__PURE__ */ r(v, { name: "ArrowDown4" }),
+                "aria-label": n("rte.fontSize"),
+                onMouseDown: (t) => t.preventDefault(),
+                children: Le
+              }
+            ),
+            children: tn.map((t) => /* @__PURE__ */ r(
+              G,
+              {
+                clickable: !0,
+                selected: t === Le,
+                onClick: () => Je(t),
+                children: t
+              },
+              t
+            ))
+          }
+        ),
+        /* @__PURE__ */ r(U, { orientation: "vertical" }),
+        /* @__PURE__ */ r(
+          j,
+          {
+            size: o,
+            disabled: e,
+            trigger: /* @__PURE__ */ r(
+              B,
+              {
+                variant: "text",
+                color: "primary",
+                size: o,
+                disabled: e,
+                endIcon: /* @__PURE__ */ r(v, { name: "ArrowDown4" }),
+                onMouseDown: (t) => t.preventDefault(),
+                children: s(xe)
+              }
+            ),
+            children: Zr.map((t) => /* @__PURE__ */ r(
+              G,
+              {
+                clickable: !0,
+                selected: xe === t.type,
+                icon: t.icon,
+                onClick: () => Q(t.type),
+                children: s(t.type)
+              },
+              t.type
+            ))
+          }
+        ),
+        /* @__PURE__ */ r(U, { orientation: "vertical" }),
+        D(y, n("rte.bold"), () => le("bold"), /* @__PURE__ */ r(v, { name: "TextBold" })),
+        D(p, n("rte.italic"), () => le("italic"), /* @__PURE__ */ r(v, { name: "TextItalic" })),
+        D(
+          f,
+          n("rte.underline"),
+          () => le("underline"),
+          /* @__PURE__ */ r(v, { name: "TextUnderline" })
+        ),
+        /* @__PURE__ */ r(U, { orientation: "vertical" }),
+        D(
+          h === "bullet",
+          n("rte.bulletList"),
+          () => Q("bullet"),
+          /* @__PURE__ */ r(v, { name: "ListBullet" })
+        ),
+        D(
+          h === "number",
+          n("rte.numberedList"),
+          () => Q("number"),
+          /* @__PURE__ */ r(v, { name: "ListNumber" })
+        ),
+        D(h === "quote", n("rte.quote"), Qe, /* @__PURE__ */ r(v, { name: "QuoteUp" })),
+        /* @__PURE__ */ r(U, { orientation: "vertical" }),
+        en.map(
+          (t) => D(
+            O === t.value,
+            n(t.labelKey),
+            () => We(t.value),
+            /* @__PURE__ */ r(v, { name: t.icon }),
+            t.value
+          )
+        ),
+        /* @__PURE__ */ r(U, { orientation: "vertical" }),
+        /* @__PURE__ */ r(
+          $,
+          {
+            ref: z,
+            variant: "text",
+            color: "primary",
+            size: o,
+            disabled: e,
+            "aria-label": n("rte.textColor"),
+            "aria-expanded": W,
+            onMouseDown: (t) => t.preventDefault(),
+            onClick: () => X((t) => !t),
+            children: /* @__PURE__ */ r(nn, { color: F })
+          }
+        ),
+        /* @__PURE__ */ r(
+          Yt,
+          {
+            open: W,
+            triggerRef: z,
+            onClose: (t) => {
+              var u;
+              X(!1), t && ((u = z.current) == null || u.focus());
+            },
+            role: "dialog",
+            ariaLabel: n("rte.textColor"),
+            width: 232,
+            children: /* @__PURE__ */ r(
+              Jt,
+              {
+                value: F || Qt[0],
+                onChange: Xe,
+                clearable: !1
+              }
+            )
+          }
+        ),
+        D(b, n("rte.link"), je, /* @__PURE__ */ r(v, { name: "Link2" })),
+        /* @__PURE__ */ S(
+          j,
+          {
+            size: o,
+            disabled: e,
+            minWidth: !1,
+            trigger: /* @__PURE__ */ r(
+              $,
+              {
+                variant: "text",
+                color: "primary",
+                size: o,
+                disabled: e,
+                "aria-label": n("rte.insertImage"),
+                children: /* @__PURE__ */ r(v, { name: "GalleryAdd" })
+              }
+            ),
+            children: [
+              /* @__PURE__ */ r(G, { clickable: !0, icon: "GalleryImport", onClick: () => {
+                var t;
+                return (t = m.current) == null ? void 0 : t.click();
+              }, children: n("rte.uploadImage") }),
+              /* @__PURE__ */ r(G, { clickable: !0, icon: "Link", onClick: Ze, children: n("rte.imageByUrl") })
+            ]
+          }
+        ),
+        /* @__PURE__ */ r(
+          $,
+          {
+            variant: "text",
+            color: "primary",
+            size: o,
+            disabled: e,
+            "aria-label": n("rte.insertVideo"),
+            onClick: tt,
+            children: /* @__PURE__ */ r(v, { name: "VideoSquare" })
+          }
+        ),
+        /* @__PURE__ */ r(
+          "input",
+          {
+            ref: m,
+            type: "file",
+            accept: "image/*",
+            hidden: !0,
+            onChange: et,
+            "aria-hidden": "true",
+            tabIndex: -1
+          }
+        ),
+        /* @__PURE__ */ r(
+          Ve,
+          {
+            open: _ !== null,
+            onClose: Ne,
+            size: "sm",
+            icon: _ == null ? void 0 : _.icon,
+            title: _ == null ? void 0 : _.title,
+            footer: /* @__PURE__ */ S(Ue, { children: [
+              /* @__PURE__ */ r(B, { variant: "text", size: "sm", onClick: Ne, children: n("common.cancel") }),
+              /* @__PURE__ */ r(B, { type: "submit", size: "sm", form: "rte-url-form", children: (_ == null ? void 0 : _.confirmLabel) ?? n("common.insert") })
+            ] }),
+            children: /* @__PURE__ */ r(
+              "form",
+              {
+                id: "rte-url-form",
+                onSubmit: (t) => {
+                  t.preventDefault(), t.stopPropagation(), Ye();
+                },
+                children: /* @__PURE__ */ r(
+                  Ge,
+                  {
+                    label: _ == null ? void 0 : _.label,
+                    placeholder: _ == null ? void 0 : _.placeholder,
+                    value: ve,
+                    onChange: (t) => Ee(t.target.value)
+                  }
+                )
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function de(o) {
+  const e = q(), i = V(e) ? e.anchor.getNode().getTopLevelElement() : ge().getLastChild();
+  if (He(i) && i.isEmpty()) {
+    i.append(o), i.selectEnd();
+    return;
+  }
+  const n = _e();
+  n.append(o), Xt(n);
+  const s = n.getNextSibling();
+  fe(s) && s.isEmpty() && (s.remove(), n.selectEnd());
+  const a = n.getPreviousSibling();
+  fe(a) && a.isEmpty() && a.remove();
+}
+function an(o) {
+  return new Promise((e, i) => {
+    const n = new FileReader();
+    n.onload = () => e(n.result), n.onerror = () => i(n.error), n.readAsDataURL(o);
+  });
+}
+const ln = {
+  paragraph: c.paragraph,
+  heading: {
+    h1: c.h1,
+    h2: c.h2,
+    h3: c.h3,
+    h4: c.h4,
+    h5: c.h5,
+    h6: c.h6
+  },
+  quote: c.quote,
+  list: {
+    ul: c.ul,
+    ol: c.ol,
+    listitem: c.li,
+    listitemChecked: c.liChecked,
+    listitemUnchecked: c.liUnchecked,
+    nested: { listitem: c.nestedLi }
+  },
+  link: c.link,
+  text: {
+    bold: c.bold,
+    italic: c.italic,
+    underline: c.underline,
+    strikethrough: c.strike,
+    code: c.codeInline
+  }
+}, cn = [
+  Rt,
+  wt,
+  ze,
+  Bt,
+  qe,
+  K,
+  te
+], sn = [
+  ...Ct,
+  ...St,
+  ...kt
+], mn = ["color", "font-size"], un = {
+  span: (o) => {
+    var i, n;
+    const e = (n = (i = dt.importDOM()) == null ? void 0 : i.span) == null ? void 0 : n.call(i, o);
+    return {
+      priority: 1,
+      conversion: (s) => {
+        const a = (e == null ? void 0 : e.conversion(s)) ?? { node: null }, m = mn.flatMap((d) => {
+          const p = s.style.getPropertyValue(d);
+          return p ? [[d, p]] : [];
+        });
+        if (m.length === 0) return a;
+        const y = a.forChild;
+        return {
+          ...a,
+          forChild: (d, p) => {
+            const E = y ? y(d, p) : d;
+            if (pt(E)) {
+              const f = {
+                ...ht(E.getStyle())
+              };
+              for (const [g, b] of m) f[g] = b;
+              E.setStyle(
+                Object.entries(f).map(([g, b]) => `${g}: ${b};`).join(" ")
+              );
+            }
+            return E;
+          }
+        };
+      }
+    };
+  }
+}, dn = /* @__PURE__ */ new Set([
+  "A",
+  "B",
+  "CODE",
+  "EM",
+  "I",
+  "MARK",
+  "S",
+  "SPAN",
+  "STRONG",
+  "SUB",
+  "SUP",
+  "U"
+]);
+function pn(o) {
+  const e = o.split(";").map((i) => i.trim()).filter((i) => i && !/^white-space\s*:\s*pre-wrap$/i.test(i));
+  return e.length ? `${e.join("; ")};` : null;
+}
+function hn(o) {
+  const e = document.createTreeWalker(o, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT);
+  let i = !0, n = !1, s = null;
+  const a = () => {
+    s && s.data.endsWith(" ") && (s.data = `${s.data.slice(0, -1)} `), s = null, i = !0, n = !1;
+  };
+  for (let m = e.nextNode(); m; m = e.nextNode()) {
+    if (m.nodeType === Node.ELEMENT_NODE) {
+      dn.has(m.tagName) || a();
+      continue;
+    }
+    const y = m;
+    if (!y.data) continue;
+    let d = "";
+    for (const p of y.data)
+      p === " " && (i || n) ? (d += " ", n = !1) : (d += p, n = p === " "), i = !1;
+    y.data = d, s = y;
+  }
+  a();
+}
+function fn(o) {
+  if (typeof document > "u") return o;
+  const e = document.createElement("template");
+  e.innerHTML = o;
+  const i = e.content;
+  return i.querySelectorAll("[class]").forEach((n) => n.removeAttribute("class")), i.querySelectorAll("[style]").forEach((n) => {
+    var a;
+    if ((a = n.textContent) != null && a.includes("	")) return;
+    const s = pn(n.getAttribute("style") ?? "");
+    s ? n.setAttribute("style", s) : n.removeAttribute("style");
+  }), i.querySelectorAll("span").forEach((n) => {
+    n.attributes.length === 0 && n.replaceWith(...n.childNodes);
+  }), i.normalize(), hn(i), e.innerHTML;
+}
+function _n() {
+  const o = ge(), e = o.getFirstChild();
+  return o.getChildrenSize() <= 1 && (e === null || He(e) && e.getChildrenSize() === 0);
+}
+function Ie(o, e) {
+  const i = ge();
+  if (i.clear(), e) {
+    const n = new DOMParser().parseFromString(e, "text/html"), s = Ht(o, n);
+    i.select(), ft(s);
+  }
+  i.getChildrenSize() === 0 && i.append(_e()), _t(null);
+}
+const pe = "tz-external-value";
+function Fe(o) {
+  return _n() ? "" : fn(zt(o, null));
+}
+function gn({ value: o, defaultValue: e, onChange: i, onReady: n, disabled: s }) {
+  const [a] = ye(), m = M(void 0), y = M(i);
+  y.current = i;
+  const d = M(n);
+  d.current = n;
+  const p = M(!1), E = (f) => {
+    var g;
+    p.current || (p.current = !0, (g = d.current) == null || g.call(d, f));
+  };
+  return A(() => a.setEditable(!s), [a, s]), A(
+    () => a.registerNodeTransform(qe, (f) => {
+      const g = f.getURL(), b = be(g);
+      b !== g && f.setURL(b);
+    }),
+    [a]
+  ), A(() => {
+    if (o === void 0) {
+      if (!e) {
+        m.current = "", E("");
+        return;
+      }
+      m.current = e, a.update(() => Ie(a, e), {
+        tag: ["history-merge", pe]
+      });
+    }
+  }, []), A(() => {
+    o === void 0 || o === m.current || (m.current = o, a.update(() => Ie(a, o), {
+      tag: ["history-merge", pe]
+    }));
+  }, [a, o]), A(
+    () => a.registerUpdateListener(({ dirtyElements: f, dirtyLeaves: g, tags: b }) => {
+      if (b.has(pe)) {
+        a.read(() => {
+          const x = Fe(a);
+          m.current = x, E(x);
+        });
+        return;
+      }
+      f.size === 0 && g.size === 0 || a.read(() => {
+        const x = Fe(a);
+        x !== m.current && (m.current = x, y.current(x));
+      });
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [a]
+  ), null;
+}
+const eo = ot(
+  function({
+    label: e,
+    size: i = "md",
+    error: n,
+    helperText: s,
+    required: a = !1,
+    disabled: m = !1,
+    placeholder: y,
+    name: d,
+    value: p,
+    defaultValue: E,
+    onChange: f,
+    onReady: g,
+    onImageUpload: b,
+    minHeight: x = 220,
+    "aria-label": P,
+    className: l,
+    style: h
+  }, N) {
+    const O = ee(), re = P ?? O("rte.label"), k = qt(), L = k && d ? k.field(d) : void 0, F = n ?? (L == null ? void 0 : L.error) ?? !1, H = s ?? (L == null ? void 0 : L.helperText), W = k && d ? k.values[d] : void 0, X = p !== void 0 ? p : k && d ? String(W ?? "") : void 0, z = $e(
+      (C) => {
+        k && d && k.setValue(d, C), f == null || f(C);
+      },
+      [k, d, f]
+    ), ne = (C) => L == null ? void 0 : L.onBlur(C), J = M(null);
+    A(() => {
+      const C = J.current;
+      C && (d ? C.setAttribute("name", d) : C.removeAttribute("name"));
+    }, [d]);
+    const oe = {
+      namespace: "tz-rich-text-editor",
+      theme: ln,
+      nodes: cn,
+      html: { import: un },
+      editable: !m,
+      onError: (C) => {
+        throw C;
+      }
+    };
+    return /* @__PURE__ */ S(
+      "div",
+      {
+        ref: N,
+        className: he(
+          c.editor,
+          c[i],
+          F && c.error,
+          m && c.disabled,
+          l
+        ),
+        style: { "--tz-rte-min-height": `${x}px`, ...h },
+        children: [
+          e != null && /* @__PURE__ */ S("div", { className: c.label, children: [
+            /* @__PURE__ */ r(ke, { as: "span", variant: "bodySmall", color: "muted", children: e }),
+            a && /* @__PURE__ */ r("span", { className: c.required, "aria-hidden": "true", children: "*" })
+          ] }),
+          /* @__PURE__ */ r("div", { className: c.control, children: /* @__PURE__ */ S(gt, { initialConfig: oe, children: [
+            /* @__PURE__ */ r(on, { size: i, disabled: m, onImageUpload: b }),
+            /* @__PURE__ */ r("div", { className: c.shell, children: /* @__PURE__ */ r(
+              yt,
+              {
+                contentEditable: /* @__PURE__ */ r(
+                  bt,
+                  {
+                    ref: J,
+                    className: c.content,
+                    "aria-label": re,
+                    "aria-invalid": F || void 0,
+                    onBlur: ne
+                  }
+                ),
+                placeholder: /* @__PURE__ */ r("div", { className: c.placeholder, children: y ?? O("rte.placeholder") }),
+                ErrorBoundary: Tt
+              }
+            ) }),
+            /* @__PURE__ */ r(vt, {}),
+            /* @__PURE__ */ r(Et, {}),
+            /* @__PURE__ */ r(Nt, {}),
+            /* @__PURE__ */ r(xt, {}),
+            /* @__PURE__ */ r(Lt, { transformers: sn }),
+            /* @__PURE__ */ r(
+              gn,
+              {
+                value: X,
+                defaultValue: E,
+                onChange: z,
+                onReady: g,
+                disabled: m
+              }
+            )
+          ] }) }),
+          H != null && /* @__PURE__ */ r(
+            ke,
+            {
+              as: "span",
+              variant: "bodySmall",
+              color: F ? "error" : "muted",
+              className: c.helper,
+              children: H
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+export {
+  eo as R
+};
+//# sourceMappingURL=RichTextEditor-zkoxujnO.js.map