@alixpartners/ui-components 2.5.6 → 2.5.7

package/dist/RichTextEditor-cvtLFe4t.js

@@ -1,443 +0,0 @@
-import { jsxs as c, jsx as o } from "react/jsx-runtime";
-import { c as b } from "./clsx-OuTLNxxd.js";
-import { useMemo as Ee, useId as ze, useRef as M, useState as u, useEffect as H } from "react";
-import qe from "./components/Dialog/Dialog.js";
-import U from "./components/Icon/Icon.js";
-import ve from "./components/Input/Input.js";
-import G from "./components/Tooltip/Tooltip.js";
-import { R as $e, T as We, P as Ke, C as Ve } from "./index-CCFDXH-J.js";
-import './assets/RichTextEditor.css';const Je = "RichTextEditor-module__container___AplP0", Ze = "RichTextEditor-module__label___vjzs-", Ge = "RichTextEditor-module__required___7duke", Ye = "RichTextEditor-module__frame___7OSyf", Xe = "RichTextEditor-module__frameFocused___GtJ2x", Qe = "RichTextEditor-module__frameDisabled___LubtU", et = "RichTextEditor-module__frameError___sPTiY", tt = "RichTextEditor-module__errorMessage___4VdKj", nt = "RichTextEditor-module__helpers___cpuz6", ot = "RichTextEditor-module__helperText___rFoU0", rt = "RichTextEditor-module__helpLink___7gYcv", it = "RichTextEditor-module__containerDisabled___6h9dd", at = "RichTextEditor-module__containerFullWidth___pOoeL", lt = "RichTextEditor-module__toolbarContent___YXKHD", ct = "RichTextEditor-module__toolbarPanel___OVGHO", st = "RichTextEditor-module__toolbarRow___f0xJR", dt = "RichTextEditor-module__editorBody___f8jPI", ut = "RichTextEditor-module__toolbar___m9-M-", mt = "RichTextEditor-module__toolbarStacked___6rB10", ht = "RichTextEditor-module__actions___ZAK9J", ft = "RichTextEditor-module__toolButton___IT2Kg", _t = "RichTextEditor-module__toolButtonActive___-HvZQ", pt = "RichTextEditor-module__toolIcon___Wndhd", gt = "RichTextEditor-module__formatControl___w4WcA", Tt = "RichTextEditor-module__toolbarLinkSlot___Gu-9l", bt = "RichTextEditor-module__selectTrigger___frv3x", xt = "RichTextEditor-module__selectIconBox___SYdTE", Rt = "RichTextEditor-module__selectTriggerOpen___tk2Pb", Et = "RichTextEditor-module__selectTriggerLabel___FkEv0", vt = "RichTextEditor-module__selectIcon___aJWUk", kt = "RichTextEditor-module__formatMenu___y-uBL", Mt = "RichTextEditor-module__formatMenuOptions___zcdlo", yt = "RichTextEditor-module__formatMenuOption___3ppTs", Ct = "RichTextEditor-module__formatMenuOptionSelected___bq9J9", Lt = "RichTextEditor-module__formatMenuOptionParagraph___4BLds", Ot = "RichTextEditor-module__formatMenuOptionHeading1___H1cKX", Nt = "RichTextEditor-module__formatMenuOptionHeading2___JdixR", Ht = "RichTextEditor-module__formatMenuOptionHeading3___NcwLr", wt = "RichTextEditor-module__formatMenuOptionHeading4___4mLbG", Bt = "RichTextEditor-module__formatMenuOptionPreformatted___cB0Ix", St = "RichTextEditor-module__editor___M32R7", Dt = "RichTextEditor-module__characterCount___gmUzj", It = "RichTextEditor-module__characterCountExceeded___vjIpc", Ft = "RichTextEditor-module__linkDialogForm___vOLO1", t = {
-  container: Je,
-  label: Ze,
-  required: Ge,
-  frame: Ye,
-  frameFocused: Xe,
-  frameDisabled: Qe,
-  frameError: et,
-  errorMessage: tt,
-  helpers: nt,
-  helperText: ot,
-  helpLink: rt,
-  containerDisabled: it,
-  containerFullWidth: at,
-  toolbarContent: lt,
-  toolbarPanel: ct,
-  toolbarRow: st,
-  editorBody: dt,
-  toolbar: ut,
-  toolbarStacked: mt,
-  actions: ht,
-  toolButton: ft,
-  toolButtonActive: _t,
-  toolIcon: pt,
-  formatControl: gt,
-  toolbarLinkSlot: Tt,
-  selectTrigger: bt,
-  selectIconBox: xt,
-  selectTriggerOpen: Rt,
-  selectTriggerLabel: Et,
-  selectIcon: vt,
-  formatMenu: kt,
-  formatMenuOptions: Mt,
-  formatMenuOption: yt,
-  formatMenuOptionSelected: Ct,
-  formatMenuOptionParagraph: Lt,
-  formatMenuOptionHeading1: Ot,
-  formatMenuOptionHeading2: Nt,
-  formatMenuOptionHeading3: Ht,
-  formatMenuOptionHeading4: wt,
-  formatMenuOptionPreformatted: Bt,
-  editor: St,
-  characterCount: Dt,
-  characterCountExceeded: It,
-  linkDialogForm: Ft
-}, At = {
-  paragraph: "p",
-  heading1: "h1",
-  heading2: "h2",
-  heading3: "h3",
-  heading4: "h4",
-  preformatted: "pre",
-  "unordered-list": "ul",
-  "ordered-list": "ol"
-};
-function Me(r) {
-  return r.trim().length > 0 ? r : "<br>";
-}
-function Pt(r) {
-  switch (r.toLowerCase()) {
-    case "h1":
-      return "heading1";
-    case "h2":
-      return "heading2";
-    case "h3":
-      return "heading3";
-    case "h4":
-      return "heading4";
-    case "pre":
-      return "preformatted";
-    case "ul":
-      return "unordered-list";
-    case "ol":
-      return "ordered-list";
-    case "p":
-    default:
-      return "paragraph";
-  }
-}
-function Y(r) {
-  if (!r.trim())
-    return {
-      blocks: [{
-        type: "paragraph",
-        html: "<br>"
-      }]
-    };
-  const f = new DOMParser().parseFromString(r, "text/html"), p = Array.from(f.body.childNodes), x = [];
-  return p.forEach((a) => {
-    var E;
-    if (a.nodeType === Node.TEXT_NODE) {
-      const y = (E = a.textContent) == null ? void 0 : E.trim();
-      y && x.push({
-        type: "paragraph",
-        html: y
-      });
-      return;
-    }
-    if (a.nodeType !== Node.ELEMENT_NODE)
-      return;
-    const m = a, R = m.style.textAlign;
-    x.push({
-      type: Pt(m.tagName),
-      html: Me(m.innerHTML),
-      align: R || void 0
-    });
-  }), {
-    blocks: x.length > 0 ? x : [{
-      type: "paragraph",
-      html: "<br>"
-    }]
-  };
-}
-function ke(r) {
-  return r.blocks.length ? r.blocks.map((s) => {
-    const f = At[s.type], p = s.align ? ` style="text-align:${s.align}"` : "";
-    return `<${f}${p}>${Me(s.html)}</${f}>`;
-  }).join("") : "<p><br></p>";
-}
-function Ut(r) {
-  return r.blocks.map((f) => f.html.replace(/<[^>]+>/g, "")).join("").length;
-}
-const jt = ["bold", "italic", "underline", "align-left", "align-center", "align-right", "bulleted", "link", "format"], zt = [{
-  label: "Paragraph",
-  value: "paragraph"
-}, {
-  label: "Heading 1",
-  value: "heading1"
-}, {
-  label: "Heading 2",
-  value: "heading2"
-}, {
-  label: "Heading 3",
-  value: "heading3"
-}, {
-  label: "Heading 4",
-  value: "heading4"
-}, {
-  label: "Preformatted",
-  value: "preformatted"
-}], qt = {
-  paragraph: "P",
-  heading1: "H1",
-  heading2: "H2",
-  heading3: "H3",
-  heading4: "H4",
-  preformatted: "PRE",
-  "unordered-list": "UL",
-  "ordered-list": "OL"
-};
-function X() {
-  return "<p><br></p>";
-}
-function $t(r) {
-  return r.trim().length > 0 ? r : X();
-}
-function Wt() {
-  const r = document.queryCommandValue("formatBlock");
-  switch (String(r || "").replace(/[<>]/g, "").toUpperCase()) {
-    case "H1":
-      return "heading1";
-    case "H2":
-      return "heading2";
-    case "H3":
-      return "heading3";
-    case "H4":
-      return "heading4";
-    case "PRE":
-      return "preformatted";
-    default:
-      return "paragraph";
-  }
-}
-function Kt(r) {
-  switch (r) {
-    case "heading1":
-      return t.formatMenuOptionHeading1;
-    case "heading2":
-      return t.formatMenuOptionHeading2;
-    case "heading3":
-      return t.formatMenuOptionHeading3;
-    case "heading4":
-      return t.formatMenuOptionHeading4;
-    case "preformatted":
-      return t.formatMenuOptionPreformatted;
-    default:
-      return t.formatMenuOptionParagraph;
-  }
-}
-function tn({
-  className: r,
-  label: s,
-  required: f = !1,
-  value: p,
-  placeholder: x = "Content",
-  disabled: a = !1,
-  errorMessage: m,
-  helpText: R,
-  helpLink: E,
-  helpLinkText: y,
-  toolbarLayout: j = "inline",
-  showToolbar: z = !0,
-  showCharacterCount: ye = !0,
-  maxCharacters: g,
-  resizable: Ce = !0,
-  rows: Le = 8,
-  fullWidth: q = !1,
-  tooltipEnabled: w = !0,
-  formatOptions: Q = zt,
-  toolbarOptions: ee = jt,
-  onChange: $,
-  onModelChange: W
-}) {
-  const Oe = Ee(() => new Set(ee), [ee]), C = (e) => Oe.has(e), te = ze(), d = M(null), ne = M(null), oe = M(null), L = M(null), B = M(!1), [Ne, re] = u(!1), [S, ie] = u(!1), [He, we] = u(0), [ae, le] = u(null), [Be, ce] = u(!1), [se, de] = u(""), [ue, me] = u(""), [he, O] = u(""), [D, fe] = u(() => Y(p || X())), [_e, Se] = u("paragraph"), [T, De] = u({
-    bold: !1,
-    italic: !1,
-    underline: !1,
-    justifyLeft: !1,
-    justifyCenter: !1,
-    justifyRight: !1,
-    insertUnorderedList: !1
-  }), N = Ee(() => Ut(D), [D]), pe = M(N);
-  pe.current = N;
-  const K = () => {
-    if (!d.current) return;
-    const e = Y(d.current.innerHTML);
-    fe(e), W == null || W(e), $ == null || $(ke(e));
-  }, I = () => {
-    Se(Wt()), De({
-      bold: document.queryCommandState("bold"),
-      italic: document.queryCommandState("italic"),
-      underline: document.queryCommandState("underline"),
-      justifyLeft: document.queryCommandState("justifyLeft"),
-      justifyCenter: document.queryCommandState("justifyCenter"),
-      justifyRight: document.queryCommandState("justifyRight"),
-      insertUnorderedList: document.queryCommandState("insertUnorderedList")
-    });
-  }, V = () => {
-    var e;
-    a || (e = d.current) == null || e.focus();
-  }, ge = (e, n) => {
-    a || (V(), document.execCommand(e, !1, n), K(), I());
-  }, Ie = (e) => {
-    ge("formatBlock", qt[e]);
-  }, Te = () => {
-    var l, k;
-    if (a) return;
-    V();
-    const e = window.getSelection();
-    let n = "", i = "";
-    if (e && e.rangeCount > 0) {
-      const h = e.getRangeAt(0);
-      L.current = h.cloneRange(), n = e.toString();
-      const _ = ((l = h.startContainer.parentElement) == null ? void 0 : l.closest("a")) ?? ((k = h.endContainer.parentElement) == null ? void 0 : k.closest("a"));
-      _ instanceof HTMLAnchorElement && (n = _.textContent ?? n, i = _.getAttribute("href") ?? "");
-    } else
-      L.current = null;
-    de(n), me(i), O(""), ce(!0);
-  }, J = () => {
-    if (B.current) {
-      B.current = !1;
-      return;
-    }
-    ce(!1), O(""), L.current = null;
-  }, Fe = (e) => {
-    me(e), he && O("");
-  }, Ae = (e) => {
-    const n = /^(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,}$/;
-    try {
-      const i = /^https?:\/\//i.test(e), l = new URL(i ? e : `https://${e}`);
-      return l.protocol !== "http:" && l.protocol !== "https:" ? !1 : n.test(l.hostname);
-    } catch {
-      return !1;
-    }
-  }, Pe = (e) => /^https?:\/\//i.test(e) ? e : `https://${/^www\./i.test(e) ? e : `www.${e}`}`, Ue = () => {
-    const e = ue.trim();
-    if (!e) {
-      O("This field is required"), B.current = !0;
-      return;
-    }
-    if (!Ae(e)) {
-      O("Invalid link"), B.current = !0;
-      return;
-    }
-    const n = Pe(e), i = se.trim() || e, l = (_) => _.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;"), k = `<a href="${l(n)}" target="_blank" rel="noopener noreferrer">${l(i)}</a>`;
-    V();
-    const h = window.getSelection();
-    h && L.current && (h.removeAllRanges(), h.addRange(L.current)), document.execCommand("insertHTML", !1, k), K(), I(), J();
-  }, je = (e) => {
-    if (!e.ctrlKey && !e.metaKey) return;
-    const n = e.target, i = n == null ? void 0 : n.closest("a");
-    i instanceof HTMLAnchorElement && i.href && (e.preventDefault(), window.open(i.href, "_blank", "noopener,noreferrer"));
-  };
-  H(() => {
-    const e = $t(p || X()), n = Y(e);
-    fe(n), d.current && d.current.innerHTML !== e && (d.current.innerHTML = e);
-  }, [p]), H(() => {
-    d.current && (d.current.innerHTML.trim() || (d.current.innerHTML = ke(D)));
-  }, [D]), H(() => {
-    const e = d.current;
-    if (!e || !g) return;
-    const n = (i) => {
-      var _;
-      if (!i.inputType.startsWith("insert")) return;
-      const l = window.getSelection(), k = l && !l.isCollapsed ? l.toString().length : 0, h = i.data ? i.data.length : ((_ = i.dataTransfer) == null ? void 0 : _.getData("text").length) ?? 0;
-      pe.current - k + h > g && i.preventDefault();
-    };
-    return e.addEventListener("beforeinput", n), () => e.removeEventListener("beforeinput", n);
-  }, [g]), H(() => {
-    var n;
-    const e = (n = ne.current) == null ? void 0 : n.getBoundingClientRect().width;
-    e && we(e);
-  }, [S]), H(() => {
-    if (!z || q) {
-      le(null);
-      return;
-    }
-    const e = oe.current;
-    if (!e) return;
-    const n = () => {
-      const l = e.getBoundingClientRect().width;
-      l > 0 && le(l);
-    };
-    n();
-    const i = new ResizeObserver(() => {
-      n();
-    });
-    return i.observe(e), window.addEventListener("resize", n), () => {
-      i.disconnect(), window.removeEventListener("resize", n);
-    };
-  }, [z, j, a, w, q]);
-  const v = (e) => /* @__PURE__ */ o(G, { content: e.tooltip, size: "sm", theme: "dark", tipSide: "top", tipAlignment: "center", disabled: !w, children: /* @__PURE__ */ o("button", { type: "button", className: b(t.toolButton, e.active && t.toolButtonActive), onMouseDown: (n) => n.preventDefault(), onClick: () => ge(e.command, e.value), "aria-label": e.tooltip, disabled: a, children: /* @__PURE__ */ o(U, { icon: e.icon, className: t.toolIcon }) }) }, e.id), Z = [{
-    id: "bold",
-    icon: "ap-icon-bold",
-    command: "bold",
-    tooltip: "Bold (CTRL + B)",
-    active: T.bold
-  }, {
-    id: "italic",
-    icon: "ap-icon-italic",
-    command: "italic",
-    tooltip: "Italic (CTRL + I)",
-    active: T.italic
-  }, {
-    id: "underline",
-    icon: "ap-icon-underline",
-    command: "underline",
-    tooltip: "Underline (CTRL + U)",
-    active: T.underline
-  }, {
-    id: "align-left",
-    icon: "ap-icon-align-left",
-    command: "justifyLeft",
-    tooltip: "Align left",
-    active: T.justifyLeft
-  }, {
-    id: "align-center",
-    icon: "ap-icon-align-center",
-    command: "justifyCenter",
-    tooltip: "Align center",
-    active: T.justifyCenter
-  }, {
-    id: "align-right",
-    icon: "ap-icon-align-right",
-    command: "justifyRight",
-    tooltip: "Align right",
-    active: T.justifyRight
-  }, {
-    id: "bulleted",
-    icon: "ap-icon-list",
-    command: "insertUnorderedList",
-    tooltip: "Bulleted list",
-    active: T.insertUnorderedList
-  }], F = Z.filter((e) => ["bold", "italic", "underline"].includes(e.id) && C(e.id)), A = Z.filter((e) => ["align-left", "align-center", "align-right"].includes(e.id) && C(e.id)), P = Z.filter((e) => ["bulleted"].includes(e.id) && C(e.id)), be = C("link"), xe = C("format"), Re = () => {
-    var e;
-    return /* @__PURE__ */ o("div", { className: t.formatControl, children: /* @__PURE__ */ c($e, { open: S, onOpenChange: ie, children: [
-      /* @__PURE__ */ c(We, { ref: ne, disabled: a, className: b(t.selectTrigger, S && t.selectTriggerOpen), children: [
-        /* @__PURE__ */ o("span", { className: t.selectTriggerLabel, children: ((e = Q.find((n) => n.value === _e)) == null ? void 0 : e.label) || "Paragraph" }),
-        /* @__PURE__ */ o("span", { className: t.selectIconBox, children: /* @__PURE__ */ o(U, { icon: S ? "ap-icon-expand-less" : "ap-icon-expand-more", className: t.selectIcon }) })
-      ] }),
-      /* @__PURE__ */ o(Ke, { children: /* @__PURE__ */ o(Ve, { align: "end", side: "bottom", sideOffset: 6, collisionPadding: 8, className: t.formatMenu, style: {
-        minWidth: He || 180,
-        zIndex: 9999
-      }, children: /* @__PURE__ */ o("div", { className: t.formatMenuOptions, children: Q.map((n) => /* @__PURE__ */ o("button", { type: "button", className: b(t.formatMenuOption, Kt(n.value), n.value === _e && t.formatMenuOptionSelected), onMouseDown: (i) => i.preventDefault(), onClick: () => {
-        Ie(n.value), ie(!1);
-      }, children: n.label }, n.value)) }) }) })
-    ] }) });
-  };
-  return /* @__PURE__ */ c("div", { className: b(t.container, a && t.containerDisabled, q && t.containerFullWidth, r), children: [
-    s && /* @__PURE__ */ c("label", { className: t.label, htmlFor: te, children: [
-      s,
-      f && /* @__PURE__ */ o("span", { className: t.required, children: "*" })
-    ] }),
-    /* @__PURE__ */ c("div", { className: b(t.frame, Ne && t.frameFocused, a && t.frameDisabled, m && t.frameError), style: {
-      width: ae ? `${ae}px` : void 0
-    }, children: [
-      z && /* @__PURE__ */ o("div", { className: b(t.toolbar, j === "stacked" && t.toolbarStacked), children: /* @__PURE__ */ o("div", { ref: oe, className: t.toolbarContent, children: j === "stacked" ? /* @__PURE__ */ c("div", { className: t.toolbarPanel, children: [
-        /* @__PURE__ */ c("div", { className: t.toolbarRow, children: [
-          F.length > 0 && /* @__PURE__ */ o("div", { className: t.actions, children: F.map(v) }),
-          A.length > 0 && /* @__PURE__ */ o("div", { className: t.actions, children: A.map(v) })
-        ] }),
-        /* @__PURE__ */ c("div", { className: t.toolbarRow, children: [
-          P.length > 0 && /* @__PURE__ */ o("div", { className: t.actions, children: P.map(v) }),
-          be && /* @__PURE__ */ o("div", { className: t.toolbarLinkSlot, children: /* @__PURE__ */ o(G, { content: "Insert link", size: "sm", theme: "dark", tipSide: "top", tipAlignment: "center", disabled: !w, children: /* @__PURE__ */ o("button", { type: "button", className: t.toolButton, onMouseDown: (e) => e.preventDefault(), onClick: Te, "aria-label": "Insert link", disabled: a, children: /* @__PURE__ */ o(U, { icon: "ap-icon-link", className: t.toolIcon }) }) }) }),
-          xe && Re()
-        ] })
-      ] }) : /* @__PURE__ */ o("div", { className: t.toolbarPanel, children: /* @__PURE__ */ c("div", { className: t.toolbarRow, children: [
-        F.length > 0 && /* @__PURE__ */ o("div", { className: t.actions, children: F.map(v) }),
-        A.length > 0 && /* @__PURE__ */ o("div", { className: t.actions, children: A.map(v) }),
-        P.length > 0 && /* @__PURE__ */ o("div", { className: t.actions, children: P.map(v) }),
-        be && /* @__PURE__ */ o("div", { className: t.toolbarLinkSlot, children: /* @__PURE__ */ o(G, { content: "Insert link", size: "sm", theme: "dark", tipSide: "top", tipAlignment: "center", disabled: !w, children: /* @__PURE__ */ o("button", { type: "button", className: t.toolButton, onMouseDown: (e) => e.preventDefault(), onClick: Te, "aria-label": "Insert link", disabled: a, children: /* @__PURE__ */ o(U, { icon: "ap-icon-link", className: t.toolIcon }) }) }) }),
-        xe && Re()
-      ] }) }) }) }),
-      /* @__PURE__ */ c("div", { className: t.editorBody, style: {
-        minHeight: `${Le * 20}px`,
-        resize: Ce && !a ? "vertical" : "none"
-      }, children: [
-        /* @__PURE__ */ o("div", { id: te, ref: d, className: t.editor, contentEditable: !a, suppressContentEditableWarning: !0, role: "textbox", "aria-multiline": "true", "aria-label": s || "Rich text editor", "data-placeholder": x, onInput: K, onFocus: () => re(!0), onBlur: () => re(!1), onKeyUp: I, onMouseUp: I, onClick: je }),
-        ye && /* @__PURE__ */ o("div", { className: b(t.characterCount, g && N > g && t.characterCountExceeded), children: g ? `${N}/${g}` : N })
-      ] })
-    ] }),
-    (m || R || E) && /* @__PURE__ */ c("div", { className: t.helpers, children: [
-      m ? /* @__PURE__ */ o("span", { title: m, className: t.errorMessage, children: m }) : R && /* @__PURE__ */ o("span", { title: R, className: t.helperText, children: R }),
-      E && y && /* @__PURE__ */ o("a", { href: E, className: t.helpLink, target: "_blank", rel: "noopener noreferrer", children: y })
-    ] }),
-    /* @__PURE__ */ o(qe, { isOpen: Be, onClose: J, title: "Attach link", cancelButtonText: "Cancel", cancelButtonType: "primary", cancelButtonVariant: "cancel", confirmButtonText: "Attach", confirmButtonType: "primary", onCancel: J, onConfirm: Ue, description: /* @__PURE__ */ c("div", { className: t.linkDialogForm, children: [
-      /* @__PURE__ */ o(ve, { type: "text", label: "Displayed text", value: se, onChange: de, autofocus: !0 }),
-      /* @__PURE__ */ o(ve, { type: "text", label: "Link", value: ue, placeholder: "https://example.com/", required: !0, errorMessage: he || void 0, onChange: Fe })
-    ] }) })
-  ] });
-}
-export {
-  tn as R,
-  t as s
-};