@commercetools/nimbus 1.0.1 → 2.0.1-rc1

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

@@ -1,691 +0,0 @@
-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-vA4cNUoc.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-DunxggA8.es.js";
-import { a as Ce, u as Z, c as Be, b as Le } from "./use-formatting-state-DdKYccZs.es.js";
-import { EDITOR_DEFAULTS as I, textStyles as Pe } from "../components/constants.es.js";
-import { B as b } from "./box-DuBoAZvq.es.js";
-import { D as X } from "./divider--BAm3ca4.es.js";
-import { G as J } from "./group-CqfSQXe7.es.js";
-import { I as k } from "./icon-button-C20Gw8gQ.es.js";
-import { I as R } from "./icon-toggle-button-CgHQMDs3.es.js";
-import { T as v } from "./text-DfQpupDi.es.js";
-import { b as d } from "./tooltip-B1YdruCE.es.js";
-import { V as T } from "./visually-hidden-BluyWhUI.es.js";
-import { T as Q } from "./toggle-button-group-jRdpdYyd.es.js";
-import { T as ze } from "./toolbar-hpBfKrTl.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-8g9Hn1nm.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-CgrxAPHc.es.js.map