@dss-kit/ui-kit 0.3.0 → 0.3.1

package/dist/components/controls/MarkdownTextEditor/components/EditorToolbar/EditorToolbar.js

@@ -0,0 +1,334 @@
+import { jsx as o, jsxs as w } from "react/jsx-runtime";
+import { INSERT_ORDERED_LIST_COMMAND as ie, INSERT_UNORDERED_LIST_COMMAND as se } from "@lexical/list";
+import { useLexicalComposerContext as ce } from "@lexical/react/LexicalComposerContext";
+import { INSERT_TABLE_COMMAND as le } from "@lexical/table";
+import { $getSelection as ae, $isRangeSelection as ue, $createTextNode as de, $insertNodes as me, FORMAT_ELEMENT_COMMAND as D, FORMAT_TEXT_COMMAND as x } from "lexical";
+import pe from "lodash.debounce";
+import { useState as P, useRef as V, useMemo as p, useCallback as b, Fragment as fe, useEffect as he } from "react";
+import be from "../../../../../assets/svg/markdown/eye.svg.js";
+import { useMarkdownTextEditorLocale as ve } from "../../MarkdownTextEditor.locale.js";
+import { previewStyles as Ce } from "./EditorToolbar.styles.js";
+import { defaultOnImagesUpload as ge } from "./EditorToolbar.utils.js";
+import { TextSizeSelect as Ee } from "./TextSizeSelect/TextSizeSelect.js";
+import { useToolbarActions as Te } from "../../hooks/useToolbarActions/useToolbarActions.js";
+import { createCustomLinkNode as Ae } from "../../nodes/CustomLinkNode/CustomLinkNode.utils.js";
+import { createImageRowNode as Le } from "../../nodes/ImageRowNode/ImageRowNode.utils.js";
+import { MarkdownToolbarAction as c } from "../../hooks/useToolbarActions/useToolbarActions.const.js";
+import { LinkPopoverContent as q } from "./LinkPopoverContent/LinkPopoverContent.js";
+import { TablePopoverContent as X } from "./TablePopoverContent/TablePopoverContent.js";
+import { ActionMenuButton as Ne } from "./ActionMenuButton/ActionMenuButton.js";
+import { useEditorStates as Me } from "../../contexts/EditorStateContext/EditorStateContext.hook.js";
+import { Popover as I } from "../../../../shared/Popover/Popover.js";
+import { IconButton as W } from "../../../IconButton/IconButton.js";
+import { Box as R } from "../../../../builders/Box/Box.js";
+import { theme as we } from "../../../../../utils/theme/index.js";
+import { Button as xe } from "../../../Button/Button.js";
+const { color: E, cornerRadius: Ie, spacing: z } = we;
+function eo({
+  onImagesUpload: U = ge,
+  className: J
+}) {
+  const [d, Q] = P(11), [v, T] = P(null), [C, A] = P(
+    null
+  ), L = V(null), { toolbar: Y } = ve(), S = Y.preview, [r] = ce(), { isEditable: F, isPreviewMode: f, setPreviewMode: Z } = Me(), { availableActionGroups: N } = Te(), k = V(null), m = p(() => !F || f, [F, f]), ee = p(() => f ? S.hide : S.show, [f, S]), { toolbarGroups: y, menuGroups: $ } = p(() => {
+    const e = [], t = [];
+    let s = 0;
+    for (const i of N) {
+      const l = [], n = [];
+      for (const a of i)
+        s += 1, s <= d ? l.push(a) : n.push(a);
+      l.length && e.push(l), n.length && t.push(n);
+    }
+    return {
+      toolbarGroups: e,
+      menuGroups: t
+    };
+  }, [N, d]), oe = p(() => typeof v == "number" && v > d - 1, [v, d]), te = p(() => typeof C == "number" && C > d - 1, [C, d]), G = b(
+    (e) => {
+      const { text: t, url: s } = e;
+      r.update(() => {
+        const i = ae();
+        if (ue(i)) {
+          const l = Ae({
+            text: t,
+            url: s
+          });
+          i.insertNodes([l]);
+          const n = de(" ");
+          l.insertAfter(n), n.select();
+        }
+      }), T(null);
+    },
+    [r]
+  ), _ = b(
+    (e) => {
+      const { rows: t, columns: s } = e;
+      r.dispatchCommand(le, {
+        rows: t,
+        columns: s
+      }), A(null);
+    },
+    [r]
+  ), j = b(() => {
+    k.current && k.current.click();
+  }, []), ne = b(
+    async (e) => {
+      try {
+        const t = Array.from(e.target.files || []);
+        if (!t.length)
+          return;
+        const s = await U(t);
+        r.update(() => {
+          const i = Le(s);
+          i && me([i]);
+        });
+      } catch (t) {
+        console.error("Error uploading images:", t);
+      } finally {
+        e.target.value = "";
+      }
+    },
+    [r, U]
+  ), O = b(
+    (e, t) => {
+      ({
+        [c.BOLD]: () => {
+          r.dispatchCommand(x, "bold");
+        },
+        [c.ITALIC]: () => {
+          r.dispatchCommand(x, "italic");
+        },
+        [c.UNDERLINE]: () => {
+          r.dispatchCommand(x, "underline");
+        },
+        [c.STRIKETHROUGH]: () => {
+          r.dispatchCommand(x, "strikethrough");
+        },
+        [c.ALIGN_LEFT]: () => {
+          r.dispatchCommand(D, "left");
+        },
+        [c.ALIGN_CENTER]: () => {
+          r.dispatchCommand(D, "center");
+        },
+        [c.ALIGN_RIGHT]: () => {
+          r.dispatchCommand(D, "right");
+        },
+        [c.LINK]: () => {
+          T(t);
+        },
+        [c.IMAGE]: () => {
+          j();
+        },
+        [c.TABLE]: () => {
+          A(t);
+        },
+        [c.BULLET_LIST]: () => {
+          r.dispatchCommand(se, void 0);
+        },
+        [c.NUMBERED_LIST]: () => {
+          r.dispatchCommand(ie, void 0);
+        }
+      })[e]();
+    },
+    [j, r]
+  ), re = p(() => y.map((e, t) => {
+    const s = y.slice(0, t).reduce((n, a) => n + a.length, 0);
+    if (!e.length)
+      return null;
+    const i = e.map(
+      ({ IconComponent: n, isActive: a, id: u }, M) => {
+        const h = s + M, g = a ? "neutral" : "no-bg";
+        return u === c.LINK ? /* @__PURE__ */ o(
+          I,
+          {
+            content: /* @__PURE__ */ o(q, { onSave: G }),
+            placement: "bottom",
+            open: v === h,
+            onChange: (B) => {
+              T(B ? h : null);
+            },
+            children: /* @__PURE__ */ o(W, { size: "xs", color: "no-bg", disabled: m, children: /* @__PURE__ */ o(n, {}) })
+          },
+          u
+        ) : u === c.TABLE ? /* @__PURE__ */ o(
+          I,
+          {
+            content: /* @__PURE__ */ o(X, { onSave: _ }),
+            placement: "bottom",
+            open: C === h,
+            onChange: (B) => {
+              A(B ? h : null);
+            },
+            children: /* @__PURE__ */ o(
+              W,
+              {
+                size: "xs",
+                color: g,
+                disabled: m,
+                children: /* @__PURE__ */ o(n, {})
+              }
+            )
+          },
+          u
+        ) : /* @__PURE__ */ o(
+          W,
+          {
+            size: "xs",
+            color: g,
+            onClick: () => O(u, h),
+            disabled: m,
+            children: /* @__PURE__ */ o(n, {})
+          },
+          u
+        );
+      }
+    );
+    return i.every((n) => !n) ? null : /* @__PURE__ */ w(fe, { children: [
+      i,
+      /* @__PURE__ */ o(
+        R,
+        {
+          w: 1,
+          h: 32,
+          backgroundColor: E.border.neutralAlphaBasic
+        }
+      )
+    ] }, e.flatMap((n) => n.id).join("-"));
+  }), [
+    y,
+    O,
+    v,
+    m,
+    C,
+    G,
+    _
+  ]), H = b(() => {
+    const e = L.current;
+    if (!e)
+      return;
+    const t = e.clientWidth, s = 40, i = 4, l = 1, n = i + l + i + s + i;
+    let a = t - n, u = 0;
+    for (const M of N)
+      if (M.length) {
+        for (const h of M) {
+          const g = s + i;
+          if (a - g >= 0)
+            a -= g, u += 1;
+          else
+            break;
+        }
+        a -= l + i;
+      }
+    Q(u);
+  }, [N]), K = p(() => pe(H, 20, {}), [H]);
+  return he(() => {
+    if (!L.current)
+      return;
+    const e = new ResizeObserver(() => {
+      K();
+    });
+    return e.observe(L.current), () => e.disconnect();
+  }, [K]), /* @__PURE__ */ w(
+    R,
+    {
+      backgroundColor: E.fill.neutralPrimary,
+      border: `1px solid ${E.border.neutralAlphaBasic}`,
+      borderRadius: Ie.md,
+      flex: !0,
+      row: !0,
+      alignItems: "center",
+      justifyContent: "space-between",
+      p: z.sm,
+      className: J,
+      children: [
+        /* @__PURE__ */ w(R, { flex: !0, flexGrow: 1, row: !0, alignItems: "center", overflow: "hidden", children: [
+          /* @__PURE__ */ o(
+            "input",
+            {
+              ref: k,
+              type: "file",
+              accept: "image/*",
+              hidden: !0,
+              multiple: !0,
+              onChange: ne,
+              disabled: m
+            }
+          ),
+          /* @__PURE__ */ o(Ee, { disabled: m }),
+          /* @__PURE__ */ o(
+            I,
+            {
+              content: /* @__PURE__ */ o(q, { onSave: G }),
+              placement: "bottom",
+              open: oe,
+              onChange: (e) => {
+                e || T(null);
+              },
+              children: /* @__PURE__ */ o("div", {})
+            }
+          ),
+          /* @__PURE__ */ o(
+            I,
+            {
+              content: /* @__PURE__ */ o(X, { onSave: _ }),
+              placement: "bottom",
+              open: te,
+              onChange: (e) => {
+                e || A(null);
+              },
+              children: /* @__PURE__ */ o("div", {})
+            }
+          ),
+          /* @__PURE__ */ w(
+            R,
+            {
+              flex: !0,
+              row: !0,
+              alignItems: "center",
+              gap: z.xs,
+              w: "full",
+              ml: z.xs,
+              overflow: "hidden",
+              ref: L,
+              children: [
+                re,
+                $.length ? /* @__PURE__ */ o(
+                  Ne,
+                  {
+                    disabled: m,
+                    onAction: O,
+                    groups: $,
+                    toolbarVisibleActionsCount: d
+                  }
+                ) : null
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ o(
+          xe,
+          {
+            width: "auto",
+            size: "xs",
+            color: f ? "accent" : "neutral",
+            intensity: "secondary",
+            wrapperClassName: Ce,
+            onClick: () => {
+              Z((e) => !e);
+            },
+            iconLeft: /* @__PURE__ */ o(
+              be,
+              {
+                color: f ? E.icon.accent : E.icon.secondary
+              }
+            ),
+            children: ee
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  eo as EditorToolbar
+};

package/dist/components/controls/MarkdownTextEditor/components/EditorToolbar/EditorToolbar.styles.d.ts

@@ -1,2 +1 @@
 export declare const previewStyles: string;
-//# sourceMappingURL=EditorToolbar.styles.d.ts.map

package/dist/components/controls/MarkdownTextEditor/components/EditorToolbar/EditorToolbar.styles.js

@@ -0,0 +1,7 @@
+import { css as t } from "@emotion/css";
+const i = t({
+  minWidth: "fit-content"
+});
+export {
+  i as previewStyles
+};

package/dist/components/controls/MarkdownTextEditor/components/EditorToolbar/EditorToolbar.types.d.ts

@@ -5,4 +5,3 @@ export type EditorToolbarProps = {
     /** Кастомный CSS-класс для корневого `Box` тулбара. */
     className?: string;
 };
-//# sourceMappingURL=EditorToolbar.types.d.ts.map

package/dist/components/controls/MarkdownTextEditor/components/EditorToolbar/EditorToolbar.utils.d.ts

@@ -1,3 +1,2 @@
 import { OnImagesUpload } from './EditorToolbar.types';
 export declare const defaultOnImagesUpload: OnImagesUpload;
-//# sourceMappingURL=EditorToolbar.utils.d.ts.map

package/dist/components/controls/MarkdownTextEditor/components/EditorToolbar/EditorToolbar.utils.js

@@ -0,0 +1,6 @@
+const o = (e) => {
+  throw new Error("defaultOnImagesUpload function must be overridden");
+};
+export {
+  o as defaultOnImagesUpload
+};

package/dist/components/controls/MarkdownTextEditor/components/EditorToolbar/LinkPopoverContent/LinkPopoverContent.d.ts

@@ -1,3 +1,2 @@
 import { LinkPopoverContentProps } from './LinkPopoverContent.types';
 export declare function LinkPopoverContent({ onSave }: LinkPopoverContentProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=LinkPopoverContent.d.ts.map

package/dist/components/controls/MarkdownTextEditor/components/EditorToolbar/LinkPopoverContent/LinkPopoverContent.js

@@ -0,0 +1,65 @@
+import { jsx as r, jsxs as B } from "react/jsx-runtime";
+import { useState as u, useMemo as z, useCallback as o, useEffect as I } from "react";
+import { useMarkdownTextEditorLocale as P } from "../../../MarkdownTextEditor.locale.js";
+import { Input as g } from "../../../../Input/Input.js";
+import { Button as R } from "../../../../Button/Button.js";
+import { Box as c } from "../../../../../builders/Box/Box.js";
+import { theme as j } from "../../../../../../utils/theme/index.js";
+const { spacing: T } = j;
+function G({ onSave: d }) {
+  const [a, m] = u(""), [e, p] = u(""), [h, s] = u(null), V = P(), { textPlaceholder: b, linkPlaceholder: C, linkErrorText: f, buttonText: L } = V.toolbar.link, x = z(() => h === "link" ? f : null, [h, f]), l = o((t) => {
+    try {
+      const n = new URL(t);
+      if (!(n.protocol === "http:" || n.protocol === "https:"))
+        throw new Error("Invalid protocol");
+      return s(null), !0;
+    } catch {
+      return s("link"), !1;
+    }
+  }, []), w = o((t) => {
+    m(t.target.value);
+  }, []), y = o(
+    (t) => {
+      l(t.target.value), p(t.target.value);
+    },
+    [l]
+  ), v = o(() => [() => l(e)].map((k) => k()).every(Boolean), [e, l]), i = o(() => {
+    m(""), p(""), s(null);
+  }, []), E = o(
+    (t) => {
+      t.preventDefault(), v() && (d({
+        text: a || e,
+        url: e
+      }), i());
+    },
+    [e, d, a, v, i]
+  );
+  return I(() => () => {
+    i();
+  }, []), /* @__PURE__ */ r("form", { onSubmit: E, children: /* @__PURE__ */ B(c, { flex: !0, alignItems: "flex-start", p: T.sm, gap: T.sm, children: [
+    /* @__PURE__ */ r(c, { children: /* @__PURE__ */ r(
+      g,
+      {
+        placeholder: b,
+        size: "sm",
+        value: a,
+        onChange: w
+      }
+    ) }),
+    /* @__PURE__ */ r(c, { children: /* @__PURE__ */ r(
+      g,
+      {
+        placeholder: C,
+        size: "sm",
+        value: e,
+        onChange: y,
+        error: !!x,
+        errorText: x || ""
+      }
+    ) }),
+    /* @__PURE__ */ r(R, { size: "xs", width: "auto", type: "submit", children: L })
+  ] }) });
+}
+export {
+  G as LinkPopoverContent
+};

package/dist/components/controls/MarkdownTextEditor/components/EditorToolbar/LinkPopoverContent/LinkPopoverContent.types.d.ts

@@ -6,4 +6,3 @@ export type LinkPopoverErrorType = "link";
 export type LinkPopoverContentProps = {
     onSave: (data: LinkPopoverFormValue) => void;
 };
-//# sourceMappingURL=LinkPopoverContent.types.d.ts.map

package/dist/components/controls/MarkdownTextEditor/components/EditorToolbar/LinkPopoverContent/index.d.ts

@@ -1,3 +1,2 @@
 export * from './LinkPopoverContent';
 export type * from './LinkPopoverContent.types';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/controls/MarkdownTextEditor/components/EditorToolbar/TablePopoverContent/TablePopoverContent.const.d.ts

@@ -2,4 +2,3 @@ export declare const MAX_ROWS_COUNT = 50;
 export declare const MAX_COLUMNS_COUNT = 20;
 export declare const MIN_ROWS_COUNT = 1;
 export declare const MIN_COLUMNS_COUNT = 1;
-//# sourceMappingURL=TablePopoverContent.const.d.ts.map

package/dist/components/controls/MarkdownTextEditor/components/EditorToolbar/TablePopoverContent/TablePopoverContent.const.js

@@ -0,0 +1,7 @@
+const N = 50, O = 20, _ = 1, C = 1;
+export {
+  O as MAX_COLUMNS_COUNT,
+  N as MAX_ROWS_COUNT,
+  C as MIN_COLUMNS_COUNT,
+  _ as MIN_ROWS_COUNT
+};

package/dist/components/controls/MarkdownTextEditor/components/EditorToolbar/TablePopoverContent/TablePopoverContent.d.ts

@@ -1,3 +1,2 @@
 import { TablePopoverContentProps } from './TablePopoverContent.types';
 export declare function TablePopoverContent({ onSave }: TablePopoverContentProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=TablePopoverContent.d.ts.map

package/dist/components/controls/MarkdownTextEditor/components/EditorToolbar/TablePopoverContent/TablePopoverContent.js

@@ -0,0 +1,137 @@
+import { jsx as u, jsxs as W } from "react/jsx-runtime";
+import { useState as d, useMemo as A, useCallback as s, useEffect as X } from "react";
+import { useMarkdownTextEditorLocale as D } from "../../../MarkdownTextEditor.locale.js";
+import { MIN_ROWS_COUNT as y, MAX_ROWS_COUNT as B, MIN_COLUMNS_COUNT as O, MAX_COLUMNS_COUNT as S } from "./TablePopoverContent.const.js";
+import { Box as x } from "../../../../../builders/Box/Box.js";
+import { Input as _ } from "../../../../Input/Input.js";
+import { Button as F } from "../../../../Button/Button.js";
+function Z({ onSave: b }) {
+  const [t, f] = d(""), [n, h] = d(""), [p, l] = d(null), [N, m] = d(null), V = D(), {
+    maxRowsErrorText: C,
+    maxColumnsErrorText: E,
+    minRowsErrorText: v,
+    minColumnsErrorText: T,
+    rowsPlaceholder: U,
+    columnsPlaceholder: I,
+    buttonText: z
+  } = V.toolbar.table, M = A(() => {
+    switch (p) {
+      case "rows-max":
+        return C({
+          current: Number(t),
+          limit: B
+        });
+      case "rows-min":
+        return v({
+          current: Number(t),
+          limit: y
+        });
+      default:
+        return null;
+    }
+  }, [p, t, C, v]), g = A(() => {
+    switch (N) {
+      case "columns-max":
+        return E({
+          current: Number(n),
+          limit: S
+        });
+      case "columns-min":
+        return T({
+          current: Number(n),
+          limit: O
+        });
+      default:
+        return null;
+    }
+  }, [N, n, E, T]), a = s((e) => {
+    try {
+      const r = Number(e);
+      if (r > B)
+        throw l("rows-max"), new Error("Rows amount exceeds maximum");
+      if (r < y)
+        throw l("rows-min"), new Error("Rows amount below minimum");
+      return l(null), !0;
+    } catch {
+      return !1;
+    }
+  }, []), i = s((e) => {
+    try {
+      const r = Number(e);
+      if (r > S)
+        throw m("columns-max"), new Error("Columns amount exceeds maximum");
+      if (r < O)
+        throw m("columns-min"), new Error("Columns amount below minimum");
+      return m(null), !0;
+    } catch {
+      return !1;
+    }
+  }, []), c = s((e) => {
+    const r = Number(e);
+    return !Number.isNaN(r) && Number.isInteger(r) ? r : null;
+  }, []), L = s(
+    (e) => {
+      const r = e.target.value, o = c(r);
+      typeof o == "number" && (a(r), f(String(o)));
+    },
+    [a, c]
+  ), P = s(
+    (e) => {
+      const r = e.target.value, o = c(r);
+      typeof o == "number" && (i(r), h(String(o)));
+    },
+    [i, c]
+  ), R = s(() => [
+    () => a(t),
+    () => i(n)
+  ].map((o) => o()).every(Boolean), [n, t, i, a]), w = s(() => {
+    f(""), h(""), l(null), m(null);
+  }, []), j = s(
+    (e) => {
+      e.preventDefault(), R() && (b({
+        rows: t,
+        columns: n
+      }), w());
+    },
+    [n, b, t, R, w]
+  );
+  return X(() => () => {
+    w();
+  }, []), /* @__PURE__ */ u("form", { onSubmit: j, children: /* @__PURE__ */ W(
+    x,
+    {
+      flex: !0,
+      alignItems: "flex-start",
+      p: "var(--spacing-sm)",
+      gap: "var(--spacing-sm)",
+      children: [
+        /* @__PURE__ */ u(x, { children: /* @__PURE__ */ u(
+          _,
+          {
+            placeholder: U,
+            size: "sm",
+            value: t,
+            onChange: L,
+            error: !!M,
+            errorText: M || ""
+          }
+        ) }),
+        /* @__PURE__ */ u(x, { children: /* @__PURE__ */ u(
+          _,
+          {
+            placeholder: I,
+            size: "sm",
+            value: n,
+            onChange: P,
+            error: !!g,
+            errorText: g || ""
+          }
+        ) }),
+        /* @__PURE__ */ u(F, { size: "xs", width: "auto", type: "submit", children: z })
+      ]
+    }
+  ) });
+}
+export {
+  Z as TablePopoverContent
+};

package/dist/components/controls/MarkdownTextEditor/components/EditorToolbar/TablePopoverContent/TablePopoverContent.types.d.ts

@@ -7,4 +7,3 @@ export type TablePopoverColumnErrorType = "columns-min" | "columns-max";
 export type TablePopoverContentProps = {
     onSave: (data: TablePopoverFormValue) => void;
 };
-//# sourceMappingURL=TablePopoverContent.types.d.ts.map

package/dist/components/controls/MarkdownTextEditor/components/EditorToolbar/TablePopoverContent/index.d.ts

@@ -1,4 +1,3 @@
 export * from './TablePopoverContent.const';
 export * from './TablePopoverContent.tsx';
 export type * from './TablePopoverContent.types';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/controls/MarkdownTextEditor/components/EditorToolbar/TextSizeSelect/TextSizeSelect.d.ts

@@ -1,3 +1,2 @@
 import { TextSizeSelectProps } from './TextSizeSelect.types';
 export declare function TextSizeSelect({ disabled }: TextSizeSelectProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=TextSizeSelect.d.ts.map