@cloud-ru/ds-markdown 1.0.0

package/dist/cjs/components/Toolbar/hooks/useToolbarOverflow.js

@@ -0,0 +1,87 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useToolbarOverflow = useToolbarOverflow;
+const utils_1 = require("@cloud-ru/ds-utils");
+const react_1 = require("react");
+/**
+ * Считает, сколько кнопок тулбара помещается по ширине, остальные — в overflow («Ещё»).
+ * Возвращает `rootRef` (корень тулбара, под ResizeObserver), `moreButtonRef` (для измерения
+ * «веса» overflow-группы) и `visibleCount` (число видимых кнопок).
+ *
+ * Края слотов кэшируются в полной раскладке (все кнопки, без More) и переиспользуются при
+ * пересчёте — поэтому не нужно арифметически приближать гэпы/дивайдеры.
+ */
+function useToolbarOverflow(items) {
+    const rootRef = (0, react_1.useRef)(null);
+    const moreButtonRef = (0, react_1.useRef)(null);
+    // Правый край каждого слота (отн. левого края тулбара), измеренный в ПОЛНОЙ раскладке.
+    const slotEdgesRef = (0, react_1.useRef)(new Map());
+    // Реальная ширина группы «дивайдер + More» — измеряется, когда More присутствует в DOM.
+    const moreReserveRef = (0, react_1.useRef)(48);
+    const [visibleCount, setVisibleCount] = (0, react_1.useState)(items.length);
+    (0, utils_1.useLayoutEffect)(() => {
+        const root = rootRef.current;
+        if (!root) {
+            return;
+        }
+        const edges = slotEdgesRef.current;
+        edges.clear();
+        let rafId = 0;
+        const measure = () => {
+            const rootRect = root.getBoundingClientRect();
+            const padRight = parseFloat(getComputedStyle(root).paddingRight) || 0;
+            // Правая граница контентной области тулбара (отн. левого края root).
+            const limit = root.clientWidth - padRight;
+            const slots = Array.from(root.querySelectorAll('[data-toolbar-slot]'));
+            // Кэшируем края только в полной раскладке (все items, без More) — иначе край
+            // зависел бы от текущего visibleCount/набора дивайдеров и был бы неверным для пересчёта.
+            if (slots.length === items.length) {
+                for (const slot of slots) {
+                    const id = slot.dataset.toolbarItem;
+                    if (id) {
+                        edges.set(id, slot.getBoundingClientRect().right - rootRect.left);
+                    }
+                }
+            }
+            // Реальный «вес» More-группы (дивайдер + гэпы + кнопка): от правого края последнего
+            // видимого слота до правого края More-кнопки. Уточняется, как только More появляется.
+            const moreEl = moreButtonRef.current;
+            if (moreEl && slots.length > 0) {
+                const lastRight = slots[slots.length - 1].getBoundingClientRect().right - rootRect.left - moreReserveRef.current;
+                moreReserveRef.current = moreEl.getBoundingClientRect().right - rootRect.left - lastRight;
+            }
+            // Края ещё не собраны (нет полного рендера, напр. items только что изменились) —
+            // показываем всё и перезамеряем на следующем кадре, когда все слоты окажутся в DOM.
+            if (!items.every(id => edges.has(id))) {
+                setVisibleCount(items.length);
+                rafId = requestAnimationFrame(measure);
+                return;
+            }
+            // Всё помещается без overflow — показываем все кнопки, без More.
+            const fullRight = edges.get(items[items.length - 1]) ?? 0;
+            if (fullRight <= limit) {
+                setVisibleCount(items.length);
+                return;
+            }
+            // Иначе — максимум k кнопок, после которых ещё влезает группа «│ More».
+            const reserve = moreReserveRef.current;
+            let fits = 0;
+            for (const id of items) {
+                if ((edges.get(id) ?? 0) + reserve > limit) {
+                    break;
+                }
+                fits += 1;
+            }
+            setVisibleCount(Math.max(fits, 1));
+        };
+        measure();
+        const observer = new ResizeObserver(measure);
+        observer.observe(root);
+        return () => {
+            observer.disconnect();
+            if (rafId)
+                cancelAnimationFrame(rafId);
+        };
+    }, [items]);
+    return { rootRef, moreButtonRef, visibleCount };
+}

package/dist/cjs/components/Toolbar/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Toolbar';
+export { DEFAULT_TOOLBAR } from './constants';

package/dist/cjs/components/Toolbar/index.js

@@ -0,0 +1,20 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_TOOLBAR = void 0;
+__exportStar(require("./Toolbar"), exports);
+var constants_1 = require("./constants");
+Object.defineProperty(exports, "DEFAULT_TOOLBAR", { enumerable: true, get: function () { return constants_1.DEFAULT_TOOLBAR; } });

package/dist/cjs/components/Toolbar/styles.module.css

@@ -0,0 +1,17 @@
+.root{
+  overflow:hidden;
+  display:flex;
+  flex-shrink:0;
+  align-items:center;
+  box-sizing:border-box;
+  padding:var(--sn-markdown-anatomy-size-buttons-paddingTop, var(--sn-primitive-dimension-8, 8px)) var(--sn-markdown-anatomy-size-buttons-paddingHorizontal, var(--sn-primitive-dimension-8, 8px)) var(--sn-markdown-anatomy-size-buttons-paddingBottom, var(--sn-primitive-dimension-6, 6px));
+}
+
+.tooltipTrigger{
+  display:inline-flex;
+}
+
+.tableCustomizeOption{
+  align-items:flex-start;
+  align-self:center;
+}

package/dist/cjs/components/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Markdown';
+export * from './MarkdownEditor';

package/dist/cjs/components/index.js

@@ -0,0 +1,20 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+// Публичные компоненты пакета. Toolbar — внутренний,
+// импортируется напрямую по относительным путям и наружу не экспортируется.
+__exportStar(require("./Markdown"), exports);
+__exportStar(require("./MarkdownEditor"), exports);

package/dist/cjs/constants.d.ts

@@ -0,0 +1,65 @@
+export declare const TOOLBAR_ITEM: {
+    readonly Heading: "heading";
+    readonly Bold: "bold";
+    readonly Italic: "italic";
+    readonly Strikethrough: "strikethrough";
+    readonly Link: "link";
+    readonly InlineCode: "inline-code";
+    readonly BulletList: "bullet-list";
+    readonly OrderedList: "ordered-list";
+    readonly BlockQuote: "block-quote";
+    readonly BlockCode: "block-code";
+    readonly Table: "table";
+    readonly Image: "image";
+};
+export declare const HEADING_LEVEL: {
+    readonly H1: 1;
+    readonly H2: 2;
+    readonly H3: 3;
+    readonly H4: 4;
+    readonly H5: 5;
+};
+export declare const ON_CHANGE_DEBOUNCE_MS = 150;
+export declare const TEST_IDS: {
+    readonly viewer: "markdown";
+    readonly viewerCodeCopy: "markdown__code-copy";
+    readonly editor: "markdown-editor";
+    readonly editorHeader: "markdown-editor__header";
+    readonly editorPreviewToggle: "markdown-editor__preview-toggle";
+    readonly editorLabel: "markdown-editor__label";
+    readonly editorClear: "markdown-editor__clear";
+    readonly editorContent: "markdown-editor__content";
+    readonly editorField: "markdown-editor__field";
+    readonly editorRawInput: "markdown-editor__raw-input";
+    readonly toolbar: "markdown-editor__toolbar";
+    readonly toolbarButton: "markdown-editor__toolbar-button";
+    readonly toolbarMore: "markdown-editor__toolbar-more";
+    readonly toolbarMoreList: "markdown-editor__toolbar-more-list";
+    readonly toolbarHeading: "markdown-editor__toolbar-heading";
+    readonly headingDropdown: "markdown-editor__heading-dropdown";
+    readonly headingOption: "markdown-editor__heading-option";
+    readonly tableGridPicker: "markdown-editor__table-picker";
+    readonly tablePickerCell: "markdown-editor__table-cell";
+    readonly tableCustomize: "markdown-editor__table-customize";
+    readonly customizeModal: "markdown-editor__customize-table";
+    readonly customizeColumns: "markdown-editor__customize-table-columns";
+    readonly customizeRows: "markdown-editor__customize-table-rows";
+    readonly customizeCancel: "markdown-editor__customize-table-cancel";
+    readonly customizeAdd: "markdown-editor__customize-table-add";
+    readonly linkModal: "markdown-editor__link-modal";
+    readonly linkModalUrl: "markdown-editor__link-modal-url";
+    readonly linkModalTitle: "markdown-editor__link-modal-title";
+    readonly linkModalCancel: "markdown-editor__link-modal-cancel";
+    readonly linkModalAdd: "markdown-editor__link-modal-add";
+    readonly imageModal: "markdown-editor__image-modal";
+    readonly imageModalUrl: "markdown-editor__image-modal-url";
+    readonly imageModalAlt: "markdown-editor__image-modal-alt";
+    readonly imageModalCancel: "markdown-editor__image-modal-cancel";
+    readonly imageModalAdd: "markdown-editor__image-modal-add";
+};
+/** Стабильный data-test-id конкретной кнопки тулбара (`markdown-editor__toolbar-button--bold`). */
+export declare const toolbarButtonTestId: (item: string) => string;
+/** data-test-id пункта heading-дропдауна (`…__heading-option--paragraph` | `…--2`). */
+export declare const headingOptionTestId: (level: number | "paragraph") => string;
+/** data-test-id ячейки table-picker'а (`…__table-cell--2x3`). */
+export declare const tableCellTestId: (rows: number, cols: number) => string;

package/dist/cjs/constants.js

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.tableCellTestId = exports.headingOptionTestId = exports.toolbarButtonTestId = exports.TEST_IDS = exports.ON_CHANGE_DEBOUNCE_MS = exports.HEADING_LEVEL = exports.TOOLBAR_ITEM = void 0;
+exports.TOOLBAR_ITEM = {
+    Heading: 'heading',
+    Bold: 'bold',
+    Italic: 'italic',
+    Strikethrough: 'strikethrough',
+    Link: 'link',
+    InlineCode: 'inline-code',
+    BulletList: 'bullet-list',
+    OrderedList: 'ordered-list',
+    BlockQuote: 'block-quote',
+    BlockCode: 'block-code',
+    Table: 'table',
+    Image: 'image',
+};
+exports.HEADING_LEVEL = { H1: 1, H2: 2, H3: 3, H4: 4, H5: 5 };
+exports.ON_CHANGE_DEBOUNCE_MS = 150;
+exports.TEST_IDS = {
+    viewer: 'markdown',
+    viewerCodeCopy: 'markdown__code-copy',
+    editor: 'markdown-editor',
+    editorHeader: 'markdown-editor__header',
+    editorPreviewToggle: 'markdown-editor__preview-toggle',
+    editorLabel: 'markdown-editor__label',
+    editorClear: 'markdown-editor__clear',
+    editorContent: 'markdown-editor__content',
+    // Оболочка поля (FieldShell из @cloud-ru/ds-fields) — общая для raw и preview.
+    editorField: 'markdown-editor__field',
+    // Нативная textarea в raw-режиме.
+    editorRawInput: 'markdown-editor__raw-input',
+    toolbar: 'markdown-editor__toolbar',
+    toolbarButton: 'markdown-editor__toolbar-button',
+    toolbarMore: 'markdown-editor__toolbar-more',
+    toolbarMoreList: 'markdown-editor__toolbar-more-list',
+    toolbarHeading: 'markdown-editor__toolbar-heading',
+    headingDropdown: 'markdown-editor__heading-dropdown',
+    headingOption: 'markdown-editor__heading-option',
+    tableGridPicker: 'markdown-editor__table-picker',
+    tablePickerCell: 'markdown-editor__table-cell',
+    tableCustomize: 'markdown-editor__table-customize',
+    customizeModal: 'markdown-editor__customize-table',
+    customizeColumns: 'markdown-editor__customize-table-columns',
+    customizeRows: 'markdown-editor__customize-table-rows',
+    customizeCancel: 'markdown-editor__customize-table-cancel',
+    customizeAdd: 'markdown-editor__customize-table-add',
+    linkModal: 'markdown-editor__link-modal',
+    linkModalUrl: 'markdown-editor__link-modal-url',
+    linkModalTitle: 'markdown-editor__link-modal-title',
+    linkModalCancel: 'markdown-editor__link-modal-cancel',
+    linkModalAdd: 'markdown-editor__link-modal-add',
+    imageModal: 'markdown-editor__image-modal',
+    imageModalUrl: 'markdown-editor__image-modal-url',
+    imageModalAlt: 'markdown-editor__image-modal-alt',
+    imageModalCancel: 'markdown-editor__image-modal-cancel',
+    imageModalAdd: 'markdown-editor__image-modal-add',
+};
+/** Стабильный data-test-id конкретной кнопки тулбара (`markdown-editor__toolbar-button--bold`). */
+const toolbarButtonTestId = (item) => `${exports.TEST_IDS.toolbarButton}--${item}`;
+exports.toolbarButtonTestId = toolbarButtonTestId;
+/** data-test-id пункта heading-дропдауна (`…__heading-option--paragraph` | `…--2`). */
+const headingOptionTestId = (level) => `${exports.TEST_IDS.headingOption}--${level}`;
+exports.headingOptionTestId = headingOptionTestId;
+/** data-test-id ячейки table-picker'а (`…__table-cell--2x3`). */
+const tableCellTestId = (rows, cols) => `${exports.TEST_IDS.tablePickerCell}--${rows}x${cols}`;
+exports.tableCellTestId = tableCellTestId;

package/dist/cjs/helperComponents/ButtonHeading/ButtonHeading.d.ts

@@ -0,0 +1,6 @@
+import { ToolbarApi } from '../../toolbarApi';
+export type ButtonHeadingProps = {
+    /** Бэкенд команд тулбара (WYSIWYG либо raw markdown). */
+    api: ToolbarApi;
+};
+export declare function ButtonHeading({ api }: ButtonHeadingProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/helperComponents/ButtonHeading/ButtonHeading.js

@@ -0,0 +1,61 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonHeading = ButtonHeading;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const system_1 = require("@cloud-ru/ds-icons/interface/system");
+const list_1 = require("@cloud-ru/ds-list");
+const portal_context_1 = require("@cloud-ru/ds-portal-context");
+const react_1 = require("react");
+const constants_1 = require("../../constants");
+const locale_1 = require("../../locale");
+const PrivateButton_1 = require("../PrivateButton");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+// Кнопка-триггер выбора уровня заголовка: иконка текущего уровня. Открывает Droplist со списком уровней.
+const HEADING_LEVELS = [1, 2, 3, 4, 5];
+const ICON_FOR = {
+    1: system_1.Heading1SVG,
+    2: system_1.Heading2SVG,
+    3: system_1.Heading3SVG,
+    4: system_1.Heading4SVG,
+    5: system_1.Heading5SVG,
+};
+function ButtonHeading({ api }) {
+    const portalContext = (0, portal_context_1.usePortalContext)();
+    const { t } = locale_1.markdownLocale.useTranslations();
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const activeLevel = HEADING_LEVELS.find(lvl => api.isHeadingActive(lvl));
+    const TriggerIcon = activeLevel != null ? ICON_FOR[activeLevel] : system_1.HeadingSVG;
+    const selectLevel = (lvl) => {
+        if (lvl == null) {
+            api.setParagraph();
+        }
+        else {
+            api.toggleHeading(lvl);
+        }
+        setOpen(false);
+    };
+    const items = [
+        {
+            id: 'paragraph',
+            content: { label: 'Paragraph' },
+            checked: activeLevel == null,
+            onClick: () => selectLevel(null),
+            'data-test-id': (0, constants_1.headingOptionTestId)('paragraph'),
+        },
+        ...HEADING_LEVELS.map((lvl) => {
+            const Icon = ICON_FOR[lvl];
+            return {
+                id: `heading-${lvl}`,
+                beforeContent: (0, jsx_runtime_1.jsx)(Icon, {}),
+                content: { label: `Heading ${lvl}` },
+                checked: activeLevel === lvl,
+                onClick: () => selectLevel(lvl),
+                'data-test-id': (0, constants_1.headingOptionTestId)(lvl),
+            };
+        }),
+    ];
+    return ((0, jsx_runtime_1.jsx)(list_1.Droplist, { size: 'm', selection: { mode: 'single', value: activeLevel }, container: portalContext, open: open, onOpenChange: setOpen, placement: 'bottom-start', items: items, triggerClassName: styles_module_scss_1.default.trigger, "data-test-id": constants_1.TEST_IDS.headingDropdown, children: (0, jsx_runtime_1.jsx)(PrivateButton_1.PrivateButton, { icon: (0, jsx_runtime_1.jsx)(TriggerIcon, {}), tip: { title: t('toolbar.heading') }, withChevron: true, checked: activeLevel != null, "aria-label": t('toolbar.heading'), "data-toolbar-slot": true, "data-toolbar-item": constants_1.TOOLBAR_ITEM.Heading, "data-test-id": constants_1.TEST_IDS.toolbarHeading, "aria-expanded": open }) }));
+}

package/dist/cjs/helperComponents/ButtonHeading/index.d.ts

@@ -0,0 +1 @@
+export * from './ButtonHeading';

package/dist/cjs/helperComponents/ButtonHeading/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ButtonHeading"), exports);

package/dist/cjs/helperComponents/ButtonHeading/styles.module.css

@@ -0,0 +1,3 @@
+.trigger{
+  display:inline-flex;
+}

package/dist/cjs/helperComponents/Buttons/Buttons.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+export type ButtonsProps = {
+    children: ReactNode;
+};
+export declare function Buttons({ children }: ButtonsProps): import("react/jsx-runtime").JSX.Element;
+export type ButtonsGroupProps = {
+    children: ReactNode;
+};
+export declare function ButtonsGroup({ children }: ButtonsGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare function ButtonsDivider(): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/helperComponents/Buttons/Buttons.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Buttons = Buttons;
+exports.ButtonsGroup = ButtonsGroup;
+exports.ButtonsDivider = ButtonsDivider;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const divider_1 = require("@cloud-ru/ds-divider");
+const constants_1 = require("../../constants");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function Buttons({ children }) {
+    return ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.root, "data-test-id": constants_1.TEST_IDS.toolbar, role: 'toolbar', children: children }));
+}
+function ButtonsGroup({ children }) {
+    return (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.group, children: children });
+}
+function ButtonsDivider() {
+    return (0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'vertical', className: styles_module_scss_1.default.divider });
+}

package/dist/cjs/helperComponents/Buttons/index.d.ts

@@ -0,0 +1 @@
+export * from './Buttons';

package/dist/cjs/helperComponents/Buttons/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Buttons"), exports);

package/dist/cjs/helperComponents/Buttons/styles.module.css

@@ -0,0 +1,17 @@
+.root{
+  overflow:hidden;
+  display:flex;
+  flex:0 0 auto;
+  gap:var(--sn-markdown-anatomy-size-buttons-gap, var(--sn-primitive-dimension-8, 8px));
+  box-sizing:border-box;
+}
+
+.group{
+  display:flex;
+  gap:var(--sn-primitive-dimension-4, 4px);
+  align-items:center;
+}
+
+.divider[data-orientation=vertical]{
+  height:auto;
+}

package/dist/cjs/helperComponents/Modals/CustomizeTableModal.d.ts

@@ -0,0 +1,8 @@
+type CustomizeTableModalProps = {
+    open: boolean;
+    onClose(): void;
+    /** Вставить таблицу заданного размера. */
+    onSubmit(rows: number, cols: number): void;
+};
+export declare function CustomizeTableModal({ open, onClose, onSubmit }: CustomizeTableModalProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/helperComponents/Modals/CustomizeTableModal.js

@@ -0,0 +1,39 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomizeTableModal = CustomizeTableModal;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const button_1 = require("@cloud-ru/ds-button");
+const fields_1 = require("@cloud-ru/ds-fields");
+const modal_1 = require("@cloud-ru/ds-modal");
+const portal_context_1 = require("@cloud-ru/ds-portal-context");
+const react_1 = require("react");
+const constants_1 = require("../../constants");
+const locale_1 = require("../../locale");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+const DEFAULT_SIZE = 1;
+function CustomizeTableModal({ open, onClose, onSubmit }) {
+    const { t } = locale_1.markdownLocale.useTranslations();
+    const portalContext = (0, portal_context_1.usePortalContext)();
+    const [columns, setColumns] = (0, react_1.useState)(DEFAULT_SIZE);
+    const [rows, setRows] = (0, react_1.useState)(DEFAULT_SIZE);
+    // Сбрасываем значения при каждом открытии, чтобы модалка не помнила прошлый ввод.
+    (0, react_1.useEffect)(() => {
+        if (open) {
+            setColumns(DEFAULT_SIZE);
+            setRows(DEFAULT_SIZE);
+        }
+    }, [open]);
+    const handleAdd = () => onSubmit(rows, columns);
+    return (
+    // TODO: заменить на адаптив
+    (0, jsx_runtime_1.jsx)(modal_1.Modal, { open: open, onClose: onClose, container: portalContext.current ?? undefined, title: t('table.customize'), "data-test-id": constants_1.TEST_IDS.customizeModal, content: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.fields, children: [(0, jsx_runtime_1.jsx)(fields_1.FieldStepper, { size: 'm', className: styles_module_scss_1.default.field, label: t('table.columns'), min: DEFAULT_SIZE, value: columns, onChange: setColumns, "data-test-id": constants_1.TEST_IDS.customizeColumns }), (0, jsx_runtime_1.jsx)(fields_1.FieldStepper, { size: 'm', className: styles_module_scss_1.default.field, label: t('table.rows'), min: DEFAULT_SIZE, value: rows, onChange: setRows, "data-test-id": constants_1.TEST_IDS.customizeRows })] }), footer: (0, jsx_runtime_1.jsx)(button_1.ButtonGroup, { size: 'm', primaryAction: { label: t('add'), onClick: handleAdd, 'data-test-id': constants_1.TEST_IDS.customizeAdd }, secondaryAction: {
+                appearance: 'neutral',
+                view: 'outline',
+                label: t('cancel'),
+                onClick: onClose,
+                'data-test-id': constants_1.TEST_IDS.customizeCancel,
+            }, className: styles_module_scss_1.default.buttons }) }));
+}

package/dist/cjs/helperComponents/Modals/ImageModal.d.ts

@@ -0,0 +1,7 @@
+type ImageModalProps = {
+    open: boolean;
+    onClose(): void;
+    onSubmit(url: string, alt: string): void;
+};
+export declare function ImageModal({ open, onClose, onSubmit }: ImageModalProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/helperComponents/Modals/ImageModal.js

@@ -0,0 +1,44 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImageModal = ImageModal;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const button_1 = require("@cloud-ru/ds-button");
+const fields_1 = require("@cloud-ru/ds-fields");
+const modal_1 = require("@cloud-ru/ds-modal");
+const portal_context_1 = require("@cloud-ru/ds-portal-context");
+const react_1 = require("react");
+const constants_1 = require("../../constants");
+const locale_1 = require("../../locale");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function ImageModal({ open, onClose, onSubmit }) {
+    const { t } = locale_1.markdownLocale.useTranslations();
+    const portalContext = (0, portal_context_1.usePortalContext)();
+    const [url, setUrl] = (0, react_1.useState)('');
+    const [alt, setAlt] = (0, react_1.useState)('');
+    // Сбрасываем поля при каждом открытии.
+    (0, react_1.useEffect)(() => {
+        if (open) {
+            setUrl('');
+            setAlt('');
+        }
+    }, [open]);
+    const trimmedUrl = url.trim();
+    const handleAdd = () => onSubmit(trimmedUrl, alt.trim() || 'image');
+    return (
+    // TODO: заменить на адаптив
+    (0, jsx_runtime_1.jsx)(modal_1.Modal, { open: open, onClose: onClose, container: portalContext.current ?? undefined, title: t('image.title'), "data-test-id": constants_1.TEST_IDS.imageModal, content: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.fields, "data-column": true, children: [(0, jsx_runtime_1.jsx)(fields_1.FieldCombo, { size: 'm', label: t('image.url'), placeholder: t('image.placeholder'), value: url, onChange: setUrl, autoFocus: true, "data-test-id": constants_1.TEST_IDS.imageModalUrl }), (0, jsx_runtime_1.jsx)(fields_1.FieldCombo, { size: 'm', label: t('image.alt'), value: alt, onChange: setAlt, "data-test-id": constants_1.TEST_IDS.imageModalAlt })] }), footer: (0, jsx_runtime_1.jsx)(button_1.ButtonGroup, { size: 'm', primaryAction: {
+                label: t('add'),
+                onClick: handleAdd,
+                disabled: trimmedUrl === '',
+                'data-test-id': constants_1.TEST_IDS.imageModalAdd,
+            }, secondaryAction: {
+                appearance: 'neutral',
+                view: 'outline',
+                label: t('cancel'),
+                onClick: onClose,
+                'data-test-id': constants_1.TEST_IDS.imageModalCancel,
+            }, className: styles_module_scss_1.default.buttons }) }));
+}

package/dist/cjs/helperComponents/Modals/LinkModal.d.ts

@@ -0,0 +1,13 @@
+export type LinkProps = {
+    href?: string;
+    title?: string;
+};
+type LinkModalProps = {
+    open: boolean;
+    /** Текущий href (для редактирования существующей ссылки). */
+    initial?: LinkProps;
+    onClose(): void;
+    onSubmit(props: LinkProps): void;
+};
+export declare function LinkModal({ open, initial, onClose, onSubmit }: LinkModalProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/helperComponents/Modals/LinkModal.js

@@ -0,0 +1,42 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LinkModal = LinkModal;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const button_1 = require("@cloud-ru/ds-button");
+const fields_1 = require("@cloud-ru/ds-fields");
+const modal_1 = require("@cloud-ru/ds-modal");
+const portal_context_1 = require("@cloud-ru/ds-portal-context");
+const react_1 = require("react");
+const constants_1 = require("../../constants");
+const locale_1 = require("../../locale");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function LinkModal({ open, initial, onClose, onSubmit }) {
+    const { t } = locale_1.markdownLocale.useTranslations();
+    const portalContext = (0, portal_context_1.usePortalContext)();
+    const [linkProps, setLinkProps] = (0, react_1.useState)(initial);
+    // Префилл значением при каждом открытии (текущий href либо пусто).
+    (0, react_1.useEffect)(() => {
+        if (open) {
+            setLinkProps({ href: initial?.href, title: initial?.title });
+        }
+    }, [open, initial?.href, initial?.title]);
+    const trimmedUrl = linkProps?.href?.trim() ?? '';
+    const handleAdd = () => onSubmit({ href: trimmedUrl, title: linkProps?.title });
+    return (
+    // TODO: заменить на адаптив
+    (0, jsx_runtime_1.jsx)(modal_1.Modal, { open: open, onClose: onClose, container: portalContext.current ?? undefined, title: t('link.title'), "data-test-id": constants_1.TEST_IDS.linkModal, content: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.fields, "data-column": true, children: [(0, jsx_runtime_1.jsx)(fields_1.FieldCombo, { size: 'm', label: t('link.titleField.label'), placeholder: t('link.titleField.placeholder'), value: linkProps?.title ?? '', onChange: title => setLinkProps(prev => ({ ...prev, title })), autoFocus: !initial?.title, "data-test-id": constants_1.TEST_IDS.linkModalTitle }), (0, jsx_runtime_1.jsx)(fields_1.FieldCombo, { size: 'm', label: t('link.urlField.label'), placeholder: t('link.urlField.placeholder'), value: linkProps?.href ?? '', autoFocus: Boolean(initial?.title), onChange: href => setLinkProps(prev => ({ ...prev, href })), "data-test-id": constants_1.TEST_IDS.linkModalUrl })] }), footer: (0, jsx_runtime_1.jsx)(button_1.ButtonGroup, { size: 'm', primaryAction: {
+                label: t('add'),
+                onClick: handleAdd,
+                disabled: trimmedUrl === '',
+                'data-test-id': constants_1.TEST_IDS.linkModalAdd,
+            }, secondaryAction: {
+                appearance: 'neutral',
+                view: 'outline',
+                label: t('cancel'),
+                onClick: onClose,
+                'data-test-id': constants_1.TEST_IDS.linkModalCancel,
+            }, className: styles_module_scss_1.default.buttons }) }));
+}

package/dist/cjs/helperComponents/Modals/index.d.ts

@@ -0,0 +1,3 @@
+export * from './CustomizeTableModal';
+export * from './ImageModal';
+export * from './LinkModal';