@commercetools/nimbus 0.0.0-canary-20250826133439 → 0.0.0-canary-20250827101922

package/dist/chunks/rich-text-input-D3xrDvLR.es.js

@@ -0,0 +1,691 @@
+import { jsx as o, jsxs as n } from "react/jsx-runtime";
+import { forwardRef as ae, useMemo as se, useCallback as M, useImperativeHandle as de, useState as G, useRef as ce, useEffect as he } from "react";
+import { defineSlotRecipe as ue, createSlotRecipeContext as pe, useSlotRecipe as fe } from "@chakra-ui/react";
+import { e as ge } from "./extractStyleProps-DX5GBd9K.es.js";
+import { h as _, j as W, O as N, P as j, k as me, w as ye, l as ve, r as xe, e as Se, g as be, L as we, m as Re, c as B, n as Te, o as Me, u as Y, b as V, f as q, t as De, v as Ie } from "./slate-helpers-BwRHJO4o.es.js";
+import { a as Ce, u as Z, c as Be, b as Le } from "./use-formatting-state-RJvSR-Zg.es.js";
+import { EDITOR_DEFAULTS as I, textStyles as Pe } from "../components/constants.es.js";
+import { B as b } from "./box-C8731OYq.es.js";
+import { D as X } from "./divider-CpctZ_-U.es.js";
+import { G as J } from "./group-BQeamedA.es.js";
+import { I as k } from "./icon-button-O_dSWgZr.es.js";
+import { I as R } from "./icon-toggle-button-sFqCJEvI.es.js";
+import { T as v } from "./text-B2wziCK6.es.js";
+import { b as d } from "./tooltip-BOK0Uejw.es.js";
+import { V as T } from "./visually-hidden-vh07nrZa.es.js";
+import { T as Q } from "./toggle-button-group-BjQefKya.es.js";
+import { T as ze } from "./toolbar-CD5Nrn7W.es.js";
+import { MoreHoriz as He, FormatStrikethrough as Ee, Code as Fe, KeyboardArrowDown as Oe, FormatBold as Ve, FormatItalic as Ae, FormatUnderlined as We, FormatListBulleted as Ne, FormatListNumbered as ke, Undo as Ke, Redo as Ue } from "@commercetools/nimbus-icons";
+import { M as g } from "./menu-DbKjf1RS.es.js";
+const $ = /* @__PURE__ */ ue({
+  slots: ["root", "toolbar", "editable"],
+  className: "nimbus-rich-text-input",
+  base: {
+    root: {
+      display: "flex",
+      flexDirection: "column",
+      position: "relative",
+      width: "full",
+      borderRadius: "200",
+      borderWidth: "{sizes.25}",
+      colorPalette: "slate",
+      borderColor: "colorPalette.7",
+      backgroundColor: "colorPalette.contrast",
+      // Invalid state styling
+      "&[data-invalid='true']": {
+        borderWidth: "{sizes.50}",
+        borderColor: "critical.7"
+      }
+    },
+    toolbar: {
+      boxShadow: "1",
+      // Disabled state styling for toolbar
+      "[data-disabled='true'] &": {
+        opacity: "0.5"
+      }
+    },
+    editable: {
+      padding: "400",
+      minHeight: "inherit",
+      outline: "none",
+      // Disabled state styling for editable
+      "[data-disabled='true'] &": {
+        cursor: "not-allowed",
+        opacity: "0.5"
+      },
+      // Styling for user-facing editor text
+      "& p": {
+        textStyle: "md",
+        fontWeight: "500"
+      },
+      "& h1": {
+        textStyle: "2xl",
+        fontWeight: "500"
+      },
+      "& h2": {
+        textStyle: "xl",
+        fontWeight: "500"
+      },
+      "& h3": {
+        textStyle: "lg",
+        fontWeight: "500"
+      },
+      "& h4": {
+        textStyle: "md",
+        fontWeight: "500"
+      },
+      "& h5": {
+        textStyle: "xs",
+        fontWeight: "500"
+      },
+      "& blockquote": {
+        textStyle: "md",
+        fontWeight: "400",
+        borderLeftWidth: "{sizes.100}",
+        paddingLeft: "400"
+      },
+      "& ul": {
+        paddingLeft: "600",
+        listStyleType: "disc"
+      },
+      "& ol": {
+        paddingLeft: "600",
+        listStyleType: "decimal"
+      },
+      "& code": {
+        padding: "100",
+        fontFamily: "mono"
+      },
+      "& pre": {
+        padding: "300",
+        borderRadius: "200",
+        overflow: "auto",
+        "& code": {
+          padding: "0"
+        }
+      },
+      "& a": {
+        color: "primary.11",
+        textDecoration: "underline",
+        cursor: "pointer",
+        _hover: {
+          textDecoration: "none"
+        }
+      },
+      "& strong": {
+        fontWeight: "700"
+      },
+      "& em": {
+        fontStyle: "italic"
+      },
+      "& u": {
+        textDecoration: "underline"
+      },
+      "& del": {
+        textDecoration: "line-through"
+      },
+      "& sup": {
+        fontSize: "75%",
+        verticalAlign: "super",
+        lineHeight: "0"
+      },
+      "& sub": {
+        fontSize: "75%",
+        verticalAlign: "sub",
+        lineHeight: "0"
+      }
+    }
+  },
+  variants: {}
+}), { withProvider: Ge, withContext: ee } = /* @__PURE__ */ pe({
+  recipe: $
+}), _e = /* @__PURE__ */ Ge("div", "root"), je = /* @__PURE__ */ ee("div", "toolbar"), qe = /* @__PURE__ */ ee("div", "editable");
+var Xe = {
+  /**
+   * Check if a value is a `History` object.
+   */
+  isHistory(e) {
+    return me(e) && Array.isArray(e.redos) && Array.isArray(e.undos) && (e.redos.length === 0 || N.isOperationList(e.redos[0].operations)) && (e.undos.length === 0 || N.isOperationList(e.undos[0].operations));
+  }
+}, A = /* @__PURE__ */ new WeakMap(), S = /* @__PURE__ */ new WeakMap(), C = /* @__PURE__ */ new WeakMap(), m = {
+  /**
+   * Check if a value is a `HistoryEditor` object.
+   */
+  isHistoryEditor(e) {
+    return Xe.isHistory(e.history) && W.isEditor(e);
+  },
+  /**
+   * Get the merge flag's current value.
+   */
+  isMerging(e) {
+    return S.get(e);
+  },
+  /**
+   * Get the splitting once flag's current value.
+   */
+  isSplittingOnce(e) {
+    return C.get(e);
+  },
+  setSplittingOnce(e, t) {
+    C.set(e, t);
+  },
+  /**
+   * Get the saving flag's current value.
+   */
+  isSaving(e) {
+    return A.get(e);
+  },
+  /**
+   * Redo to the previous saved state.
+   */
+  redo(e) {
+    e.redo();
+  },
+  /**
+   * Undo to the previous saved state.
+   */
+  undo(e) {
+    e.undo();
+  },
+  /**
+   * Apply a series of changes inside a synchronous `fn`, These operations will
+   * be merged into the previous history.
+   */
+  withMerging(e, t) {
+    var i = m.isMerging(e);
+    S.set(e, !0), t(), S.set(e, i);
+  },
+  /**
+   * Apply a series of changes inside a synchronous `fn`, ensuring that the first
+   * operation starts a new batch in the history. Subsequent operations will be
+   * merged as usual.
+   */
+  withNewBatch(e, t) {
+    var i = m.isMerging(e);
+    S.set(e, !0), C.set(e, !0), t(), S.set(e, i), C.delete(e);
+  },
+  /**
+   * Apply a series of changes inside a synchronous `fn`, without merging any of
+   * the new operations into previous save point in the history.
+   */
+  withoutMerging(e, t) {
+    var i = m.isMerging(e);
+    S.set(e, !1), t(), S.set(e, i);
+  },
+  /**
+   * Apply a series of changes inside a synchronous `fn`, without saving any of
+   * their operations into the history.
+   */
+  withoutSaving(e, t) {
+    var i = m.isSaving(e);
+    A.set(e, !1);
+    try {
+      t();
+    } finally {
+      A.set(e, i);
+    }
+  }
+}, Je = (e) => {
+  var t = e, {
+    apply: i
+  } = t;
+  return t.history = {
+    undos: [],
+    redos: []
+  }, t.redo = () => {
+    var {
+      history: a
+    } = t, {
+      redos: l
+    } = a;
+    if (l.length > 0) {
+      var s = l[l.length - 1];
+      s.selectionBefore && _.setSelection(t, s.selectionBefore), m.withoutSaving(t, () => {
+        W.withoutNormalizing(t, () => {
+          for (var c of s.operations)
+            t.apply(c);
+        });
+      }), a.redos.pop(), t.writeHistory("undos", s);
+    }
+  }, t.undo = () => {
+    var {
+      history: a
+    } = t, {
+      undos: l
+    } = a;
+    if (l.length > 0) {
+      var s = l[l.length - 1];
+      m.withoutSaving(t, () => {
+        W.withoutNormalizing(t, () => {
+          var c = s.operations.map(N.inverse).reverse();
+          for (var h of c)
+            t.apply(h);
+          s.selectionBefore && _.setSelection(t, s.selectionBefore);
+        });
+      }), t.writeHistory("redos", s), a.undos.pop();
+    }
+  }, t.apply = (a) => {
+    var {
+      operations: l,
+      history: s
+    } = t, {
+      undos: c
+    } = s, h = c[c.length - 1], y = h && h.operations[h.operations.length - 1], f = m.isSaving(t), u = m.isMerging(t);
+    if (f == null && (f = Ye(a)), f) {
+      if (u == null && (h == null ? u = !1 : l.length !== 0 ? u = !0 : u = Qe(a, y)), m.isSplittingOnce(t) && (u = !1, m.setSplittingOnce(t, void 0)), h && u)
+        h.operations.push(a);
+      else {
+        var r = {
+          operations: [a],
+          selectionBefore: t.selection
+        };
+        t.writeHistory("undos", r);
+      }
+      for (; c.length > 100; )
+        c.shift();
+      s.redos = [];
+    }
+    i(a);
+  }, t.writeHistory = (a, l) => {
+    t.history[a].push(l);
+  }, t;
+}, Qe = (e, t) => !!(t && e.type === "insert_text" && t.type === "insert_text" && e.offset === t.offset + t.text.length && j.equals(e.path, t.path) || t && e.type === "remove_text" && t.type === "remove_text" && e.offset + e.text.length === t.offset && j.equals(e.path, t.path)), Ye = (e, t) => e.type !== "set_selection";
+const te = /* @__PURE__ */ ae((e, t) => {
+  const {
+    value: i,
+    onChange: a,
+    onFocus: l,
+    onBlur: s,
+    placeholder: c = I.placeholder,
+    isDisabled: h = I.isDisabled,
+    isReadOnly: y = I.isReadOnly,
+    autoFocus: f = I.autoFocus,
+    toolbar: u
+  } = e, r = se(() => {
+    const p = Me();
+    return ye(Je(ve(p)));
+  }, []), { handleKeyDown: L } = Ce({ editor: r }), P = M(
+    (p) => {
+      l && l(p);
+    },
+    [l]
+  ), z = M(
+    (p) => {
+      s && s(p);
+    },
+    [s]
+  );
+  de(
+    t,
+    () => ({
+      focus: () => Se(r),
+      resetValue: (p) => xe(r, p)
+    }),
+    [r]
+  );
+  const H = M(
+    (p) => /* @__PURE__ */ o(be, { ...p }),
+    []
+  ), E = M(
+    (p) => /* @__PURE__ */ o(we, { ...p }),
+    []
+  ), F = B(), O = Array.isArray(i) && i.length > 0 ? i : F;
+  return /* @__PURE__ */ n(Re, { editor: r, value: O, onChange: a, children: [
+    u && /* @__PURE__ */ o(je, { children: u }),
+    /* @__PURE__ */ o(qe, { asChild: !0, children: /* @__PURE__ */ o(
+      Te,
+      {
+        renderElement: H,
+        renderLeaf: E,
+        placeholder: c,
+        autoFocus: f,
+        readOnly: y || h,
+        onKeyDown: L,
+        onFocus: P,
+        onBlur: z,
+        "aria-label": "Rich text editor",
+        role: "textbox",
+        "aria-multiline": "true"
+      }
+    ) })
+  ] });
+});
+te.displayName = "RichTextEditor";
+const Ze = ({ isDisabled: e = !1 }) => {
+  const t = Y(), i = Z(t), { allSelectedKeys: a, handleAllSelectionChange: l } = Be({
+    withPreservedSelection: i
+  });
+  return /* @__PURE__ */ n(
+    g.Root,
+    {
+      selectionMode: "multiple",
+      selectedKeys: a,
+      onSelectionChange: l,
+      children: [
+        /* @__PURE__ */ n(d.Root, { delay: 0, closeDelay: 0, children: [
+          /* @__PURE__ */ o(g.Trigger, { asChild: !0, children: /* @__PURE__ */ o(
+            k,
+            {
+              size: "xs",
+              variant: "ghost",
+              "aria-label": "More formatting options",
+              isDisabled: e,
+              onMouseDown: (s) => s.preventDefault(),
+              children: /* @__PURE__ */ o(He, {})
+            }
+          ) }),
+          /* @__PURE__ */ o(d.Content, { placement: "top", children: "More styles" })
+        ] }),
+        /* @__PURE__ */ n(g.Content, { children: [
+          /* @__PURE__ */ o(g.Item, { id: "strikethrough", children: /* @__PURE__ */ n(b, { slot: "label", display: "flex", alignItems: "center", gap: "200", children: [
+            /* @__PURE__ */ o(Ee, {}),
+            /* @__PURE__ */ o(v, { textStyle: "sm", children: "Strikethrough" })
+          ] }) }),
+          /* @__PURE__ */ o(g.Item, { id: "code", children: /* @__PURE__ */ n(b, { slot: "label", display: "flex", alignItems: "center", gap: "200", children: [
+            /* @__PURE__ */ o(Fe, {}),
+            /* @__PURE__ */ o(v, { textStyle: "sm", children: "Code" })
+          ] }) }),
+          /* @__PURE__ */ o(g.Item, { id: "superscript", children: /* @__PURE__ */ n(b, { slot: "label", display: "flex", alignItems: "center", gap: "200", children: [
+            /* @__PURE__ */ o(v, { children: "X²" }),
+            /* @__PURE__ */ o(v, { textStyle: "sm", children: "Superscript" })
+          ] }) }),
+          /* @__PURE__ */ o(g.Item, { id: "subscript", children: /* @__PURE__ */ n(b, { slot: "label", display: "flex", alignItems: "center", gap: "200", children: [
+            /* @__PURE__ */ o(v, { children: "X₂" }),
+            /* @__PURE__ */ o(v, { textStyle: "sm", children: "Subscript" })
+          ] }) })
+        ] })
+      ]
+    }
+  );
+}, oe = ({
+  isDisabled: e = !1
+}) => {
+  const t = Y(), i = Z(t), {
+    currentTextStyle: a,
+    selectedTextStyleLabel: l,
+    handleTextStyleChange: s,
+    handleListToggle: c,
+    selectedFormatKeys: h,
+    selectedListKeys: y,
+    hasUndos: f,
+    hasRedos: u
+  } = Le({ withPreservedSelection: i });
+  return /* @__PURE__ */ n(
+    ze,
+    {
+      orientation: "horizontal",
+      "aria-label": "Text formatting",
+      width: "full",
+      overflow: "hidden",
+      size: "xs",
+      children: [
+        /* @__PURE__ */ o(J, { children: /* @__PURE__ */ n(
+          g.Root,
+          {
+            onAction: (r) => s(String(r)),
+            children: [
+              /* @__PURE__ */ n(d.Root, { delay: 0, closeDelay: 0, children: [
+                /* @__PURE__ */ o(
+                  g.Trigger,
+                  {
+                    height: "800",
+                    width: "4000",
+                    bg: "primary.1",
+                    borderRadius: "200",
+                    _hover: { bg: "primary.2" },
+                    isDisabled: e,
+                    onMouseDown: (r) => r.preventDefault(),
+                    "aria-label": "Text style menu",
+                    children: /* @__PURE__ */ n(b, { display: "flex", alignItems: "center", gap: "200", px: "200", children: [
+                      /* @__PURE__ */ o(b, { display: "flex", alignItems: "center", gap: "200", flexGrow: "1", children: /* @__PURE__ */ o(v, { my: "auto", textStyle: "sm", fontWeight: "500", children: l }) }),
+                      /* @__PURE__ */ o(Oe, {})
+                    ] })
+                  }
+                ),
+                /* @__PURE__ */ o(d.Content, { placement: "top", children: "Text style" })
+              ] }),
+              /* @__PURE__ */ o(g.Content, { children: Pe.map((r) => /* @__PURE__ */ o(
+                g.Item,
+                {
+                  id: r.id,
+                  ...a === r.id && {
+                    "data-state": "checked"
+                  },
+                  children: /* @__PURE__ */ o(v, { ...r.props, children: r.label })
+                },
+                r.id
+              )) })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ o(X, { orientation: "vertical" }),
+        /* @__PURE__ */ n(
+          Q.Root,
+          {
+            selectionMode: "multiple",
+            selectedKeys: h,
+            isDisabled: e,
+            children: [
+              /* @__PURE__ */ n(d.Root, { delay: 0, closeDelay: 0, children: [
+                /* @__PURE__ */ n(
+                  R,
+                  {
+                    id: "bold",
+                    size: "xs",
+                    variant: "ghost",
+                    "aria-label": "Bold",
+                    isDisabled: e,
+                    onMouseDown: (r) => r.preventDefault(),
+                    onPress: i(() => V(t, "bold")),
+                    children: [
+                      /* @__PURE__ */ o(Ve, {}),
+                      /* @__PURE__ */ o(T, { children: "Bold" })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ o(d.Content, { placement: "top", children: "Bold" })
+              ] }),
+              /* @__PURE__ */ n(d.Root, { delay: 0, closeDelay: 0, children: [
+                /* @__PURE__ */ n(
+                  R,
+                  {
+                    id: "italic",
+                    size: "xs",
+                    variant: "ghost",
+                    "aria-label": "Italic",
+                    isDisabled: e,
+                    onMouseDown: (r) => r.preventDefault(),
+                    onPress: i(() => V(t, "italic")),
+                    children: [
+                      /* @__PURE__ */ o(Ae, {}),
+                      /* @__PURE__ */ o(T, { children: "Italic" })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ o(d.Content, { placement: "top", children: "Italic" })
+              ] }),
+              /* @__PURE__ */ n(d.Root, { delay: 0, closeDelay: 0, children: [
+                /* @__PURE__ */ n(
+                  R,
+                  {
+                    id: "underline",
+                    size: "xs",
+                    variant: "ghost",
+                    "aria-label": "Underline",
+                    isDisabled: e,
+                    onMouseDown: (r) => r.preventDefault(),
+                    onPress: i(
+                      () => V(t, "underline")
+                    ),
+                    children: [
+                      /* @__PURE__ */ o(We, {}),
+                      /* @__PURE__ */ o(T, { children: "Underline" })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ o(d.Content, { placement: "top", children: "Underline" })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ o(Ze, { isDisabled: e }),
+        /* @__PURE__ */ o(X, { orientation: "vertical" }),
+        /* @__PURE__ */ n(
+          Q.Root,
+          {
+            selectionMode: "single",
+            selectedKeys: y,
+            onSelectionChange: c,
+            "aria-label": "List formatting",
+            isDisabled: e,
+            children: [
+              /* @__PURE__ */ n(d.Root, { delay: 0, closeDelay: 0, children: [
+                /* @__PURE__ */ o(
+                  R,
+                  {
+                    id: "bulleted-list",
+                    size: "xs",
+                    variant: "ghost",
+                    "aria-label": "Bulleted List",
+                    isDisabled: e,
+                    onMouseDown: (r) => r.preventDefault(),
+                    children: /* @__PURE__ */ o(Ne, {})
+                  }
+                ),
+                /* @__PURE__ */ o(d.Content, { placement: "top", children: "Bulleted list" })
+              ] }),
+              /* @__PURE__ */ n(d.Root, { delay: 0, closeDelay: 0, children: [
+                /* @__PURE__ */ o(
+                  R,
+                  {
+                    id: "numbered-list",
+                    size: "xs",
+                    variant: "ghost",
+                    "aria-label": "Numbered List",
+                    isDisabled: e,
+                    onMouseDown: (r) => r.preventDefault(),
+                    children: /* @__PURE__ */ o(ke, {})
+                  }
+                ),
+                /* @__PURE__ */ o(d.Content, { placement: "top", children: "Numbered list" })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ o(b, { flexGrow: "1" }),
+        /* @__PURE__ */ n(J, { children: [
+          /* @__PURE__ */ n(d.Root, { delay: 0, closeDelay: 0, children: [
+            /* @__PURE__ */ n(
+              k,
+              {
+                size: "xs",
+                variant: "ghost",
+                "aria-label": "Undo",
+                isDisabled: !f || e,
+                onPress: i(() => t.undo()),
+                onMouseDown: (r) => r.preventDefault(),
+                children: [
+                  /* @__PURE__ */ o(Ke, {}),
+                  /* @__PURE__ */ o(T, { children: "Undo" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ o(d.Content, { placement: "top", children: "Undo" })
+          ] }),
+          /* @__PURE__ */ n(d.Root, { delay: 0, closeDelay: 0, children: [
+            /* @__PURE__ */ n(
+              k,
+              {
+                size: "xs",
+                variant: "ghost",
+                "aria-label": "Redo",
+                isDisabled: !u || e,
+                onPress: i(() => t.redo()),
+                onMouseDown: (r) => r.preventDefault(),
+                children: [
+                  /* @__PURE__ */ o(Ue, {}),
+                  /* @__PURE__ */ o(T, { children: "Redo" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ o(d.Content, { placement: "top", children: "Redo" })
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+oe.displayName = "RichTextToolbar";
+const $e = (e) => {
+  const {
+    ref: t,
+    value: i,
+    defaultValue: a,
+    onChange: l,
+    onFocus: s,
+    onBlur: c,
+    placeholder: h = "",
+    isDisabled: y = !1,
+    isReadOnly: f = !1,
+    isInvalid: u = !1,
+    autoFocus: r = !1,
+    ...L
+  } = e, P = fe({ recipe: $ }), [z, H] = P.splitVariantProps({
+    // Only semantic variants go here (none currently defined)
+    ...L
+  }), [E, F] = ge(H), O = {
+    "data-disabled": y ? "true" : void 0,
+    "data-invalid": u ? "true" : void 0,
+    "data-readonly": f ? "true" : void 0
+  }, [p, K] = G(() => {
+    const x = i ?? a ?? "";
+    try {
+      return x ? q(x) : B();
+    } catch (w) {
+      return console.warn("Failed to parse initial HTML, using empty value:", w), B();
+    }
+  }), [D, U] = G(() => i ?? a ?? ""), re = ce(null);
+  he(() => {
+    if (i !== void 0 && i !== D) {
+      const x = i ? q(i) : B();
+      K(x), U(i);
+    }
+  }, [i, D]);
+  const ie = M(
+    (x) => {
+      const w = De(x), le = w !== D;
+      K(x), U(w), le && l && l(w);
+    },
+    [D, l]
+  ), ne = Ie(p);
+  return /* @__PURE__ */ o(
+    _e,
+    {
+      ...z,
+      ...E,
+      ...F,
+      ...O,
+      ref: t,
+      children: /* @__PURE__ */ o(
+        te,
+        {
+          ref: re,
+          value: ne,
+          onChange: ie,
+          onFocus: s,
+          onBlur: c,
+          placeholder: h,
+          isDisabled: y,
+          isReadOnly: f,
+          autoFocus: r,
+          toolbar: f ? null : /* @__PURE__ */ o(oe, { isDisabled: y })
+        }
+      )
+    }
+  );
+};
+$e.displayName = "RichTextInput";
+export {
+  $e as R
+};
+//# sourceMappingURL=rich-text-input-D3xrDvLR.es.js.map