@cloud-ru/ds-markdown 1.0.0

package/dist/esm/components/Toolbar/constants.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { BlockCodeSVG, BlockQuoteSVG, BoldSVG, BulletListSVG, HeadingSVG, ImageSVG, InlineCodeSVG, ItalicSVG, LinkSVG, OrderedListSVG, StrikeSVG, TableSVG, } from '@cloud-ru/ds-icons/interface/system';
+import { TOOLBAR_ITEM } from '../../constants.js';
+// Группировка: text-style | inline | lists | blocks | media.
+export const GROUPS = [
+    [TOOLBAR_ITEM.Heading, TOOLBAR_ITEM.Bold, TOOLBAR_ITEM.Italic, TOOLBAR_ITEM.Strikethrough],
+    [TOOLBAR_ITEM.Link, TOOLBAR_ITEM.InlineCode, TOOLBAR_ITEM.BulletList, TOOLBAR_ITEM.OrderedList],
+    [TOOLBAR_ITEM.BlockQuote, TOOLBAR_ITEM.BlockCode, TOOLBAR_ITEM.Table, TOOLBAR_ITEM.Image],
+];
+export const BUTTONS = {
+    [TOOLBAR_ITEM.Heading]: { icon: _jsx(HeadingSVG, {}), nameKey: 'toolbar.heading' },
+    [TOOLBAR_ITEM.Bold]: { icon: _jsx(BoldSVG, {}), nameKey: 'toolbar.bold', hotkey: 'Ctrl+B' },
+    [TOOLBAR_ITEM.Italic]: { icon: _jsx(ItalicSVG, {}), nameKey: 'toolbar.italic', hotkey: 'Ctrl+I' },
+    [TOOLBAR_ITEM.Strikethrough]: { icon: _jsx(StrikeSVG, {}), nameKey: 'toolbar.strikethrough', hotkey: 'Ctrl+Shift+X' },
+    [TOOLBAR_ITEM.Link]: { icon: _jsx(LinkSVG, {}), nameKey: 'toolbar.link', hotkey: 'Ctrl+K' },
+    [TOOLBAR_ITEM.Image]: { icon: _jsx(ImageSVG, {}), nameKey: 'toolbar.image', hotkey: 'Ctrl+Shift+I' },
+    [TOOLBAR_ITEM.Table]: { icon: _jsx(TableSVG, {}), nameKey: 'toolbar.table' },
+    [TOOLBAR_ITEM.InlineCode]: { icon: _jsx(InlineCodeSVG, {}), nameKey: 'toolbar.inlineCode', hotkey: 'Ctrl+E' },
+    [TOOLBAR_ITEM.BulletList]: { icon: _jsx(BulletListSVG, {}), nameKey: 'toolbar.bulletList', hotkey: 'Ctrl+Shift+8' },
+    [TOOLBAR_ITEM.OrderedList]: { icon: _jsx(OrderedListSVG, {}), nameKey: 'toolbar.orderedList', hotkey: 'Ctrl+Shift+7' },
+    [TOOLBAR_ITEM.BlockQuote]: { icon: _jsx(BlockQuoteSVG, {}), nameKey: 'toolbar.blockQuote', hotkey: 'Ctrl+Shift+B' },
+    [TOOLBAR_ITEM.BlockCode]: { icon: _jsx(BlockCodeSVG, {}), nameKey: 'toolbar.blockCode', hotkey: 'Ctrl+Alt+C' },
+};
+export const DEFAULT_TOOLBAR = [
+    TOOLBAR_ITEM.Heading,
+    TOOLBAR_ITEM.Bold,
+    TOOLBAR_ITEM.Italic,
+    TOOLBAR_ITEM.Strikethrough,
+    TOOLBAR_ITEM.Link,
+    TOOLBAR_ITEM.InlineCode,
+    TOOLBAR_ITEM.BulletList,
+    TOOLBAR_ITEM.OrderedList,
+    TOOLBAR_ITEM.BlockQuote,
+    TOOLBAR_ITEM.BlockCode,
+    TOOLBAR_ITEM.Table,
+    TOOLBAR_ITEM.Image,
+];

package/dist/esm/components/Toolbar/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useToolbarHotkeys.js';
+export * from './useToolbarOverflow.js';

package/dist/esm/components/Toolbar/hooks/index.js

@@ -0,0 +1,2 @@
+export * from './useToolbarHotkeys.js';
+export * from './useToolbarOverflow.js';

package/dist/esm/components/Toolbar/hooks/useToolbarHotkeys.d.ts

@@ -0,0 +1,21 @@
+import { RefObject } from 'react';
+import { ToolbarApi } from '../../../toolbarApi.js';
+import { ToolbarItemId } from '../../../types.js';
+type ToolbarHotkeysParams = {
+    /** Корень тулбара (из useToolbarOverflow) — от его родителя ищем scope-предка для listener'а. */
+    rootRef: RefObject<HTMLDivElement | null>;
+    items: ToolbarItemId[];
+    api: ToolbarApi;
+    /** Действие кнопки Link (открыть модалку или вставить сырой markdown). */
+    onLink(): void;
+    /** Действие кнопки Image (открыть модалку). */
+    onImage(): void;
+};
+/**
+ * Вешает хоткеи тулбара на корень редактора (scope), а не на конкретный input:
+ * - Link/Image открывают UI (модалку/пикер), а не команды TipTap → биндим всегда;
+ * - остальные кнопки (bold/italic/…) в WYSIWYG обрабатывает сам keymap TipTap, а в raw-режиме
+ *   textarea их не знает, поэтому в raw биндим все hotkey'и на api-команды вручную.
+ */
+export declare function useToolbarHotkeys({ rootRef, items, api, onLink, onImage }: ToolbarHotkeysParams): void;
+export {};

package/dist/esm/components/Toolbar/hooks/useToolbarHotkeys.js

@@ -0,0 +1,56 @@
+import { useEffect } from 'react';
+import { TOOLBAR_ITEM } from '../../../constants.js';
+import { BUTTONS } from '../constants.js';
+// Сопоставляет KeyboardEvent с хоткеем вида 'Ctrl+Shift+I' (Cmd подменяет Ctrl на macOS).
+const matchesHotkey = (event, hotkey) => {
+    const parts = hotkey.toLowerCase().split('+');
+    const last = parts[parts.length - 1];
+    // С Shift цифры дают символ (Shift+8 → '*'), поэтому помимо event.key матчим и по event.code
+    // (Digit8 / KeyB) — иначе Ctrl+Shift+8/7 не распознались бы.
+    const code = event.code.toLowerCase();
+    const keyMatches = event.key.toLowerCase() === last || code === `key${last}` || code === `digit${last}`;
+    return ((event.ctrlKey || event.metaKey) === parts.includes('ctrl') &&
+        event.shiftKey === parts.includes('shift') &&
+        event.altKey === parts.includes('alt') &&
+        keyMatches);
+};
+/**
+ * Вешает хоткеи тулбара на корень редактора (scope), а не на конкретный input:
+ * - Link/Image открывают UI (модалку/пикер), а не команды TipTap → биндим всегда;
+ * - остальные кнопки (bold/italic/…) в WYSIWYG обрабатывает сам keymap TipTap, а в raw-режиме
+ *   textarea их не знает, поэтому в raw биндим все hotkey'и на api-команды вручную.
+ */
+export function useToolbarHotkeys({ rootRef, items, api, onLink, onImage }) {
+    useEffect(() => {
+        // Ищем scope от РОДИТЕЛЯ тулбара: у самого toolbar-root есть data-test-id, и closest вернул бы
+        // его же — а input (textarea/ProseMirror) лежит рядом, не внутри тулбара. Нужен общий предок
+        // (оболочка поля), который содержит и тулбар, и input, чтобы keydown из input всплывал к нему.
+        const scope = rootRef.current?.parentElement?.closest('[data-test-id]');
+        if (!scope)
+            return;
+        const bindings = [];
+        for (const id of items) {
+            const hotkey = BUTTONS[id]?.hotkey;
+            if (!hotkey)
+                continue;
+            if (id === TOOLBAR_ITEM.Link) {
+                bindings.push({ hotkey, action: onLink });
+            }
+            else if (id === TOOLBAR_ITEM.Image) {
+                bindings.push({ hotkey, action: onImage });
+            }
+            else if (api.mode === 'raw') {
+                bindings.push({ hotkey, action: () => api.toggle(id) });
+            }
+        }
+        const handleKeyDown = (event) => {
+            const hit = bindings.find(binding => matchesHotkey(event, binding.hotkey));
+            if (hit) {
+                event.preventDefault();
+                hit.action();
+            }
+        };
+        scope.addEventListener('keydown', handleKeyDown);
+        return () => scope.removeEventListener('keydown', handleKeyDown);
+    }, [items, api, onLink, onImage, rootRef]);
+}

package/dist/esm/components/Toolbar/hooks/useToolbarOverflow.d.ts

@@ -0,0 +1,14 @@
+import { ToolbarItemId } from '../../../types.js';
+/**
+ * Считает, сколько кнопок тулбара помещается по ширине, остальные — в overflow («Ещё»).
+ * Возвращает `rootRef` (корень тулбара, под ResizeObserver), `moreButtonRef` (для измерения
+ * «веса» overflow-группы) и `visibleCount` (число видимых кнопок).
+ *
+ * Края слотов кэшируются в полной раскладке (все кнопки, без More) и переиспользуются при
+ * пересчёте — поэтому не нужно арифметически приближать гэпы/дивайдеры.
+ */
+export declare function useToolbarOverflow(items: ToolbarItemId[]): {
+    rootRef: import("react").MutableRefObject<HTMLDivElement | null>;
+    moreButtonRef: import("react").RefObject<HTMLElement>;
+    visibleCount: number;
+};

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

@@ -0,0 +1,84 @@
+import { useLayoutEffect } from '@cloud-ru/ds-utils';
+import { useRef, useState } from 'react';
+/**
+ * Считает, сколько кнопок тулбара помещается по ширине, остальные — в overflow («Ещё»).
+ * Возвращает `rootRef` (корень тулбара, под ResizeObserver), `moreButtonRef` (для измерения
+ * «веса» overflow-группы) и `visibleCount` (число видимых кнопок).
+ *
+ * Края слотов кэшируются в полной раскладке (все кнопки, без More) и переиспользуются при
+ * пересчёте — поэтому не нужно арифметически приближать гэпы/дивайдеры.
+ */
+export function useToolbarOverflow(items) {
+    const rootRef = useRef(null);
+    const moreButtonRef = useRef(null);
+    // Правый край каждого слота (отн. левого края тулбара), измеренный в ПОЛНОЙ раскладке.
+    const slotEdgesRef = useRef(new Map());
+    // Реальная ширина группы «дивайдер + More» — измеряется, когда More присутствует в DOM.
+    const moreReserveRef = useRef(48);
+    const [visibleCount, setVisibleCount] = useState(items.length);
+    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/esm/components/Toolbar/index.d.ts

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

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

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

package/dist/esm/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/esm/components/index.d.ts

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

package/dist/esm/components/index.js

@@ -0,0 +1,4 @@
+// Публичные компоненты пакета. Toolbar — внутренний,
+// импортируется напрямую по относительным путям и наружу не экспортируется.
+export * from './Markdown/index.js';
+export * from './MarkdownEditor/index.js';

package/dist/esm/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/esm/constants.js

@@ -0,0 +1,61 @@
+export const 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',
+};
+export const HEADING_LEVEL = { H1: 1, H2: 2, H3: 3, H4: 4, H5: 5 };
+export const ON_CHANGE_DEBOUNCE_MS = 150;
+export const 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`). */
+export const toolbarButtonTestId = (item) => `${TEST_IDS.toolbarButton}--${item}`;
+/** data-test-id пункта heading-дропдауна (`…__heading-option--paragraph` | `…--2`). */
+export const headingOptionTestId = (level) => `${TEST_IDS.headingOption}--${level}`;
+/** data-test-id ячейки table-picker'а (`…__table-cell--2x3`). */
+export const tableCellTestId = (rows, cols) => `${TEST_IDS.tablePickerCell}--${rows}x${cols}`;

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

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

package/dist/esm/helperComponents/ButtonHeading/ButtonHeading.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Heading1SVG, Heading2SVG, Heading3SVG, Heading4SVG, Heading5SVG, HeadingSVG, } from '@cloud-ru/ds-icons/interface/system';
+import { Droplist } from '@cloud-ru/ds-list';
+import { usePortalContext } from '@cloud-ru/ds-portal-context';
+import { useState } from 'react';
+import { headingOptionTestId, TEST_IDS, TOOLBAR_ITEM } from '../../constants.js';
+import { markdownLocale } from '../../locale/index.js';
+import { PrivateButton } from '../PrivateButton/index.js';
+import styles from './styles.module.css';
+// Кнопка-триггер выбора уровня заголовка: иконка текущего уровня. Открывает Droplist со списком уровней.
+const HEADING_LEVELS = [1, 2, 3, 4, 5];
+const ICON_FOR = {
+    1: Heading1SVG,
+    2: Heading2SVG,
+    3: Heading3SVG,
+    4: Heading4SVG,
+    5: Heading5SVG,
+};
+export function ButtonHeading({ api }) {
+    const portalContext = usePortalContext();
+    const { t } = markdownLocale.useTranslations();
+    const [open, setOpen] = useState(false);
+    const activeLevel = HEADING_LEVELS.find(lvl => api.isHeadingActive(lvl));
+    const TriggerIcon = activeLevel != null ? ICON_FOR[activeLevel] : 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': headingOptionTestId('paragraph'),
+        },
+        ...HEADING_LEVELS.map((lvl) => {
+            const Icon = ICON_FOR[lvl];
+            return {
+                id: `heading-${lvl}`,
+                beforeContent: _jsx(Icon, {}),
+                content: { label: `Heading ${lvl}` },
+                checked: activeLevel === lvl,
+                onClick: () => selectLevel(lvl),
+                'data-test-id': headingOptionTestId(lvl),
+            };
+        }),
+    ];
+    return (_jsx(Droplist, { size: 'm', selection: { mode: 'single', value: activeLevel }, container: portalContext, open: open, onOpenChange: setOpen, placement: 'bottom-start', items: items, triggerClassName: styles.trigger, "data-test-id": TEST_IDS.headingDropdown, children: _jsx(PrivateButton, { icon: _jsx(TriggerIcon, {}), tip: { title: t('toolbar.heading') }, withChevron: true, checked: activeLevel != null, "aria-label": t('toolbar.heading'), "data-toolbar-slot": true, "data-toolbar-item": TOOLBAR_ITEM.Heading, "data-test-id": TEST_IDS.toolbarHeading, "aria-expanded": open }) }));
+}

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

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

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

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

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

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

package/dist/esm/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/esm/helperComponents/Buttons/Buttons.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Divider } from '@cloud-ru/ds-divider';
+import { TEST_IDS } from '../../constants.js';
+import styles from './styles.module.css';
+export function Buttons({ children }) {
+    return (_jsx("div", { className: styles.root, "data-test-id": TEST_IDS.toolbar, role: 'toolbar', children: children }));
+}
+export function ButtonsGroup({ children }) {
+    return _jsx("div", { className: styles.group, children: children });
+}
+export function ButtonsDivider() {
+    return _jsx(Divider, { orientation: 'vertical', className: styles.divider });
+}

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

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

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

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

package/dist/esm/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/esm/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/esm/helperComponents/Modals/CustomizeTableModal.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ButtonGroup } from '@cloud-ru/ds-button';
+import { FieldStepper } from '@cloud-ru/ds-fields';
+import { Modal } from '@cloud-ru/ds-modal';
+import { usePortalContext } from '@cloud-ru/ds-portal-context';
+import { useEffect, useState } from 'react';
+import { TEST_IDS } from '../../constants.js';
+import { markdownLocale } from '../../locale/index.js';
+import styles from './styles.module.css';
+const DEFAULT_SIZE = 1;
+export function CustomizeTableModal({ open, onClose, onSubmit }) {
+    const { t } = markdownLocale.useTranslations();
+    const portalContext = usePortalContext();
+    const [columns, setColumns] = useState(DEFAULT_SIZE);
+    const [rows, setRows] = useState(DEFAULT_SIZE);
+    // Сбрасываем значения при каждом открытии, чтобы модалка не помнила прошлый ввод.
+    useEffect(() => {
+        if (open) {
+            setColumns(DEFAULT_SIZE);
+            setRows(DEFAULT_SIZE);
+        }
+    }, [open]);
+    const handleAdd = () => onSubmit(rows, columns);
+    return (
+    // TODO: заменить на адаптив
+    _jsx(Modal, { open: open, onClose: onClose, container: portalContext.current ?? undefined, title: t('table.customize'), "data-test-id": TEST_IDS.customizeModal, content: _jsxs("div", { className: styles.fields, children: [_jsx(FieldStepper, { size: 'm', className: styles.field, label: t('table.columns'), min: DEFAULT_SIZE, value: columns, onChange: setColumns, "data-test-id": TEST_IDS.customizeColumns }), _jsx(FieldStepper, { size: 'm', className: styles.field, label: t('table.rows'), min: DEFAULT_SIZE, value: rows, onChange: setRows, "data-test-id": TEST_IDS.customizeRows })] }), footer: _jsx(ButtonGroup, { size: 'm', primaryAction: { label: t('add'), onClick: handleAdd, 'data-test-id': TEST_IDS.customizeAdd }, secondaryAction: {
+                appearance: 'neutral',
+                view: 'outline',
+                label: t('cancel'),
+                onClick: onClose,
+                'data-test-id': TEST_IDS.customizeCancel,
+            }, className: styles.buttons }) }));
+}

package/dist/esm/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/esm/helperComponents/Modals/ImageModal.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ButtonGroup } from '@cloud-ru/ds-button';
+import { FieldCombo } from '@cloud-ru/ds-fields';
+import { Modal } from '@cloud-ru/ds-modal';
+import { usePortalContext } from '@cloud-ru/ds-portal-context';
+import { useEffect, useState } from 'react';
+import { TEST_IDS } from '../../constants.js';
+import { markdownLocale } from '../../locale/index.js';
+import styles from './styles.module.css';
+export function ImageModal({ open, onClose, onSubmit }) {
+    const { t } = markdownLocale.useTranslations();
+    const portalContext = usePortalContext();
+    const [url, setUrl] = useState('');
+    const [alt, setAlt] = useState('');
+    // Сбрасываем поля при каждом открытии.
+    useEffect(() => {
+        if (open) {
+            setUrl('');
+            setAlt('');
+        }
+    }, [open]);
+    const trimmedUrl = url.trim();
+    const handleAdd = () => onSubmit(trimmedUrl, alt.trim() || 'image');
+    return (
+    // TODO: заменить на адаптив
+    _jsx(Modal, { open: open, onClose: onClose, container: portalContext.current ?? undefined, title: t('image.title'), "data-test-id": TEST_IDS.imageModal, content: _jsxs("div", { className: styles.fields, "data-column": true, children: [_jsx(FieldCombo, { size: 'm', label: t('image.url'), placeholder: t('image.placeholder'), value: url, onChange: setUrl, autoFocus: true, "data-test-id": TEST_IDS.imageModalUrl }), _jsx(FieldCombo, { size: 'm', label: t('image.alt'), value: alt, onChange: setAlt, "data-test-id": TEST_IDS.imageModalAlt })] }), footer: _jsx(ButtonGroup, { size: 'm', primaryAction: {
+                label: t('add'),
+                onClick: handleAdd,
+                disabled: trimmedUrl === '',
+                'data-test-id': TEST_IDS.imageModalAdd,
+            }, secondaryAction: {
+                appearance: 'neutral',
+                view: 'outline',
+                label: t('cancel'),
+                onClick: onClose,
+                'data-test-id': TEST_IDS.imageModalCancel,
+            }, className: styles.buttons }) }));
+}

package/dist/esm/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 {};