@cloud-ru/ds-markdown 1.0.0

package/dist/esm/components/MarkdownEditor/MarkdownEditor.js

@@ -0,0 +1,170 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '@cloud-ru/ds-button';
+import { FieldShell } from '@cloud-ru/ds-fields';
+import { CrossCircleSVG } from '@cloud-ru/ds-icons/interface/system';
+import { Scroll } from '@cloud-ru/ds-scroll';
+import { Switch } from '@cloud-ru/ds-toggles';
+import { extractSupportProps, isBrowser, useDebounce, useValueControl } from '@cloud-ru/ds-utils';
+import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight';
+import { Image } from '@tiptap/extension-image';
+import Placeholder from '@tiptap/extension-placeholder';
+import { Table } from '@tiptap/extension-table';
+import { TableCell } from '@tiptap/extension-table-cell';
+import { TableHeader } from '@tiptap/extension-table-header';
+import { TableRow } from '@tiptap/extension-table-row';
+import { Markdown as MarkdownExtension } from '@tiptap/markdown';
+import { EditorContent, useEditor } from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
+import cn from 'classnames';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import TextareaAutosize from 'react-textarea-autosize';
+import { ON_CHANGE_DEBOUNCE_MS, TEST_IDS } from '../../constants.js';
+import { markdownLocale } from '../../locale/index.js';
+import { lowlight } from '../../lowlight.js';
+import syntaxStyles from '../../styles/syntax.module.css';
+import { createRawApi, createWysiwygApi } from '../../toolbarApi.js';
+import { DEFAULT_TOOLBAR, Toolbar } from '../Toolbar/index.js';
+import styles from './styles.module.css';
+export function MarkdownEditor({ value, defaultValue, onChange, preview, defaultPreview, onPreviewChange, label = 'Markdown field', previewLabel = 'Preview', hideHeader = false, placeholder, spellCheck = true, resizable = true, toolbar, className, 'data-test-id': dataTestId = TEST_IDS.editor, ...rest }) {
+    const supportProps = extractSupportProps(rest);
+    const { t } = markdownLocale.useTranslations();
+    // onChange не передаём в useValueControl: внутреннее значение обновляется сразу (uncontrolled
+    // рендер, видимость clear), а наружу onChange уходит с дебаунсом ON_CHANGE_DEBOUNCE_MS.
+    const [currentValue, setValue] = useValueControl({ value, defaultValue });
+    const latestMarkdown = useRef(currentValue ?? '');
+    const textareaRef = useRef(null);
+    const editorContentRef = useRef(null);
+    const emitChange = useDebounce(() => onChange?.(latestMarkdown.current), ON_CHANGE_DEBOUNCE_MS);
+    const [previewMode, setPreview] = useValueControl({
+        value: preview,
+        defaultValue: defaultPreview ?? false,
+        onChange: onPreviewChange,
+    });
+    const [previewFocusVisible, setPreviewFocusVisible] = useState(false);
+    const [previewHover, setPreviewHover] = useState(false);
+    const extensions = useMemo(() => [
+        StarterKit.configure({
+            codeBlock: false,
+            link: { openOnClick: true },
+        }),
+        MarkdownExtension,
+        Placeholder.configure({ placeholder: placeholder ?? '' }),
+        Table.configure({ resizable: true }),
+        TableRow,
+        TableHeader,
+        TableCell,
+        CodeBlockLowlight.configure({ lowlight }),
+        // Ресайз картинок не включаем: контент сериализуется в markdown (`![alt](src)`),
+        // а синтаксис markdown не хранит ширину/высоту — размер всё равно терялся бы на round-trip.
+        Image,
+    ], [placeholder]);
+    const editor = useEditor({
+        extensions,
+        content: currentValue ?? '',
+        // Начальное значение — markdown-строка, парсим её в rich-узлы (а не как HTML/text).
+        contentType: 'markdown',
+        immediatelyRender: false,
+        onUpdate({ editor }) {
+            const markdown = editor.getMarkdown();
+            latestMarkdown.current = markdown;
+            setValue(markdown);
+            emitChange();
+        },
+    }, [extensions]);
+    useEffect(() => {
+        if (!editor || value === undefined) {
+            return;
+        }
+        // Во время ввода не перетираем контент (иначе курсор прыгает на конец) —
+        // синхронизируем только внешние изменения value, пока редактор не в фокусе.
+        if (editor.isFocused) {
+            return;
+        }
+        if (editor.getMarkdown() === value) {
+            return;
+        }
+        editor.commands.setContent(value, { contentType: 'markdown' });
+    }, [editor, value]);
+    useEffect(() => {
+        // При переходе raw → preview подтягиваем в TipTap последний markdown,
+        // набранный в textarea (latestMarkdown держит актуальное значение обоих режимов).
+        if (!editor || !previewMode) {
+            return;
+        }
+        const markdown = latestMarkdown.current;
+        if (editor.getMarkdown() === markdown) {
+            return;
+        }
+        editor.commands.setContent(markdown, { contentType: 'markdown' });
+    }, [editor, previewMode]);
+    // Toolbar форматирует WYSIWYG в preview-режиме; в raw-режиме (textarea) он виден, но
+    // кнопки вставляют markdown-разметку. `toolbar === false` прячет тулбар целиком.
+    const toolbarItems = toolbar === false ? null : (toolbar ?? DEFAULT_TOOLBAR);
+    const showHeader = !hideHeader;
+    const hasValue = Boolean(currentValue && currentValue.length > 0);
+    const handleRawValueChange = useCallback((e) => {
+        const markdown = e.target.value;
+        latestMarkdown.current = markdown;
+        setValue(markdown);
+        emitChange();
+    }, [emitChange, setValue]);
+    // Применяет результат raw-команды тулбара к textarea: новый текст + восстановление выделения.
+    const applyRawEdit = useCallback((edit) => {
+        latestMarkdown.current = edit.text;
+        setValue(edit.text);
+        emitChange();
+        // Восстанавливаем фокус и выделение после того, как React применит новое значение textarea.
+        if (isBrowser()) {
+            requestAnimationFrame(() => {
+                const el = textareaRef.current;
+                if (!el) {
+                    return;
+                }
+                el.focus();
+                el.setSelectionRange(edit.selStart, edit.selEnd);
+            });
+        }
+    }, [setValue, emitChange]);
+    // Тулбар работает в обоих режимах: WYSIWYG (TipTap) в preview, markdown-исходник (textarea) — в raw.
+    const toolbarApi = useMemo(() => {
+        if (previewMode) {
+            return editor ? createWysiwygApi(editor) : null;
+        }
+        return createRawApi(textareaRef, applyRawEdit, {
+            linkText: t('linkText'),
+            tableColumn: index => t('table.column', { index }),
+        });
+    }, [previewMode, editor, applyRawEdit, t]);
+    const handleClearButtonClick = useCallback(() => {
+        latestMarkdown.current = '';
+        setValue('');
+        emitChange();
+        editor?.commands.clearContent(true);
+        textareaRef.current?.focus();
+    }, [editor, emitChange, setValue]);
+    const handlePreviewFocus = useCallback((event) => {
+        setPreviewFocusVisible(event.target.matches(':focus-visible'));
+    }, []);
+    const handlePreviewBlur = useCallback(() => setPreviewFocusVisible(false), []);
+    // Клик в пустую зону поля (ниже контента, когда поле растянуто ресайзом, но контент короткий)
+    // переводит фокус в активный инпут и ставит курсор в конец — паритет с FieldTextArea, где
+    // контент сам не заполняет всю высоту. Клики по самому инпуту/кнопкам/скроллбару не трогаем.
+    const handleContentClick = useCallback((event) => {
+        const textarea = textareaRef.current;
+        const target = event.target;
+        // Клик по самому инпуту (textarea / WYSIWYG-контейнеру) обрабатывается нативно, фокус не форвардим.
+        if (target === textarea || editorContentRef.current?.contains(target)) {
+            return;
+        }
+        if (previewMode) {
+            editor?.commands.focus('end');
+            return;
+        }
+        if (textarea) {
+            textarea.focus();
+            textarea.setSelectionRange(textarea.value.length, textarea.value.length);
+        }
+    }, [previewMode, editor]);
+    const toolbarNode = toolbarItems && toolbarApi ? (_jsx("div", { className: styles.toolbarSlot, children: _jsx(Toolbar, { api: toolbarApi, items: toolbarItems }) })) : undefined;
+    return (_jsxs("div", { ...supportProps, className: cn(styles.root, syntaxStyles.syntax, className), "data-test-id": dataTestId, "data-preview": previewMode || undefined, children: [showHeader && (_jsxs("div", { className: styles.header, "data-test-id": TEST_IDS.editorHeader, children: [_jsxs("label", { className: styles.previewToggle, children: [_jsx(Switch, { size: 's', checked: previewMode, onChange: setPreview, "data-test-id": TEST_IDS.editorPreviewToggle }), _jsx("span", { className: styles.previewToggleLabel, children: previewLabel })] }), label && (_jsx("span", { className: styles.label, "data-test-id": TEST_IDS.editorLabel, children: label }))] })), _jsx(FieldShell, { "data-test-id": TEST_IDS.editorField, header: toolbarNode, focusVisible: previewFocusVisible, hover: previewHover, onMouseEnter: () => setPreviewHover(true), onMouseLeave: () => setPreviewHover(false), children: _jsxs("div", { className: styles.contentArea, onClick: handleContentClick, onFocus: handlePreviewFocus, onBlur: handlePreviewBlur, children: [_jsx(Scroll, { className: styles.resizeBox, size: 's', resize: resizable ? 'vertical' : 'none', overflow: { x: 'hidden' }, children: previewMode ? (_jsx(EditorContent, { ref: editorContentRef, editor: editor, className: styles.content, "data-test-id": TEST_IDS.editorContent, spellCheck: spellCheck })) : (_jsx("div", { className: styles.rawInputWrapper, children: _jsx(TextareaAutosize, { ref: textareaRef, className: styles.rawInput, "data-test-id": TEST_IDS.editorRawInput, value: currentValue ?? '', onChange: handleRawValueChange, placeholder: placeholder, spellCheck: spellCheck }) })) }), hasValue && (_jsx("div", { className: styles.postfix, children: _jsx(Button, { view: 'function', appearance: 'neutral', size: 'm', icon: _jsx(CrossCircleSVG, {}), "data-test-id": TEST_IDS.editorClear, "aria-label": t('clear'), onClick: handleClearButtonClick }) }))] }) })] }));
+}

package/dist/esm/components/MarkdownEditor/index.d.ts

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

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

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

package/dist/esm/components/MarkdownEditor/styles.module.css

@@ -0,0 +1,273 @@
+.root{
+  display:flex;
+  flex-direction:column;
+  gap:var(--sn-markdown-anatomy-size-container-gap, var(--sn-primitive-dimension-4, 4px));
+  box-sizing:border-box;
+}
+
+.header{
+  display:flex;
+  gap:var(--sn-primitive-dimension-8, 8px);
+  align-items:center;
+  justify-content:space-between;
+  font-family:var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface));
+  font-size:var(--sn-density-typography-roleBody-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px));
+  line-height:var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px));
+  color:var(--sn-theme-color-available-version-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(65, 66, 78, 0.8)));
+}
+
+.previewToggle{
+  cursor:pointer;
+  -webkit-user-select:none;
+     -moz-user-select:none;
+          user-select:none;
+  display:inline-flex;
+  gap:var(--sn-markdown-anatomy-size-container-headlineWrapper-headline-gap, var(--sn-primitive-dimension-8, 8px));
+  align-items:center;
+}
+
+.previewToggleLabel{
+  font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-body-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-m, var(--sn-brand-font-fontWeight-light-regular-body-m, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
+  font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
+  letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
+  paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
+  color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-45, var(--sn-primitive-color-gray-45, #81869c)));
+}
+
+.label{
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
+}
+
+.toolbarSlot{
+  flex:1 1 auto;
+  min-width:0;
+}
+
+.contentArea{
+  position:relative;
+  display:flex;
+  box-sizing:border-box;
+  width:100%;
+  padding:var(--sn-field-anatomy-size-m-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-m, var(--sn-primitive-dimension-8, 8px))) var(--sn-field-anatomy-size-m-fieldContainer-paddingRight, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px)));
+}
+
+.resizeBox{
+  display:flex;
+  flex:1 1 auto;
+  flex-direction:column;
+  min-width:0;
+  min-height:var(--sn-field-anatomy-size-m-fieldContainer-multiLine-minHeight, var(--sn-primitive-dimension-68, 68px));
+}
+
+.resizeBoxResizable{
+  resize:vertical;
+  overflow:hidden;
+  height:var(--sn-field-anatomy-size-m-fieldContainer-multiLine-minHeight, var(--sn-primitive-dimension-68, 68px));
+}
+
+.postfix{
+  position:absolute;
+  top:calc(var(--sn-field-anatomy-size-m-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-m, var(--sn-primitive-dimension-8, 8px))) + (var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px))) - var(--sn-field-anatomy-size-m-fieldContainer-centeredWrapper-maxHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)))) / 2);
+  right:calc(var(--sn-scroll-anatomy-container-size-s-square, var(--sn-primitive-dimension-8, 8px)) + var(--sn-field-anatomy-size-m-fieldContainer-contentWrapper-inputLine-horizontalPadding, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-primitive-dimension-8, 8px))));
+  display:grid;
+  grid-auto-rows:var(--sn-field-anatomy-size-m-fieldContainer-centeredWrapper-maxHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
+  grid-template-columns:100%;
+  row-gap:var(--sn-primitive-dimension-2, 2px);
+  place-items:center center;
+  width:var(--sn-field-anatomy-size-m-fieldContainer-centeredWrapper-maxHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
+}
+
+.rawInputWrapper{
+  display:flex;
+  width:100%;
+  height:100%;
+}
+
+.rawInput{
+  resize:none;
+  overflow-y:auto;
+  flex:1 1 auto;
+  min-height:0;
+  padding:0;
+  padding-right:calc(var(--sn-field-anatomy-size-m-fieldContainer-centeredWrapper-maxHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px))) + var(--sn-scroll-anatomy-container-size-s-square, var(--sn-primitive-dimension-8, 8px)) + var(--sn-field-anatomy-size-m-fieldContainer-contentWrapper-inputLine-horizontalPadding, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-primitive-dimension-8, 8px))));
+  border:none;
+  font-family:var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface));
+  font-size:var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px));
+  line-height:var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px));
+  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
+  background:transparent;
+  outline:none;
+}
+.rawInput::-moz-placeholder{
+  color:var(--sn-theme-color-available-version-textDisabled, var(--sn-brand-color-text-version-disabled, rgba(65, 66, 78, 0.3490196078)));
+}
+.rawInput::placeholder{
+  color:var(--sn-theme-color-available-version-textDisabled, var(--sn-brand-color-text-version-disabled, rgba(65, 66, 78, 0.3490196078)));
+}
+
+.content{
+  overflow-y:auto;
+  flex:1 1 auto;
+  min-height:0;
+  font-family:var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface));
+  font-size:var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px));
+  line-height:var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px));
+  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
+}
+.content :global(.ProseMirror){
+  min-height:100%;
+  padding-right:calc(var(--sn-field-anatomy-size-m-fieldContainer-centeredWrapper-maxHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px))) + var(--sn-scroll-anatomy-container-size-s-square, var(--sn-primitive-dimension-8, 8px)) + var(--sn-field-anatomy-size-m-fieldContainer-contentWrapper-inputLine-horizontalPadding, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-primitive-dimension-8, 8px))));
+  outline:none;
+}
+.content :global(.ProseMirror) p,
+.content :global(.ProseMirror) h1,
+.content :global(.ProseMirror) h2,
+.content :global(.ProseMirror) h3,
+.content :global(.ProseMirror) h4,
+.content :global(.ProseMirror) h5,
+.content :global(.ProseMirror) ul,
+.content :global(.ProseMirror) ol,
+.content :global(.ProseMirror) blockquote,
+.content :global(.ProseMirror) pre,
+.content :global(.ProseMirror) table,
+.content :global(.ProseMirror) hr,
+.content :global(.ProseMirror) img{
+  margin:0;
+}
+.content :global(.ProseMirror) h1{
+  font-family:var(--sn-regular-headline-l-fontFamily, var(--sn-brand-font-fontFamily-regular-headline, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-headline-l-fontWeight, var(--sn-theme-typography-fontWeight-regular-headline-l, var(--sn-brand-font-fontWeight-light-regular-headline-l, var(--sn-primitive-font-fontWeightValue-600, 600))));
+  line-height:var(--sn-regular-headline-l-lineHeight, var(--sn-density-typography-roleHeadline-lineHeightL, var(--sn-primitive-font-lineHeight-by40, 48px)));
+  font-size:var(--sn-regular-headline-l-fontSize, var(--sn-density-typography-roleHeadline-fontSizeL, var(--sn-primitive-font-fontSize-36, 36px)));
+  letter-spacing:var(--sn-regular-headline-l-letterSpacing, var(--sn-primitive-font-letterSpacing-xs, -0.5px));
+  paragraph-spacing:var(--sn-regular-headline-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize32, 16px));
+}
+.content :global(.ProseMirror) h2{
+  font-family:var(--sn-regular-headline-m-fontFamily, var(--sn-brand-font-fontFamily-regular-headline, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-headline-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-headline-m, var(--sn-brand-font-fontWeight-light-regular-headline-m, var(--sn-primitive-font-fontWeightValue-600, 600))));
+  line-height:var(--sn-regular-headline-m-lineHeight, var(--sn-density-typography-roleHeadline-lineHeightM, var(--sn-primitive-font-lineHeight-by32, 40px)));
+  font-size:var(--sn-regular-headline-m-fontSize, var(--sn-density-typography-roleHeadline-fontSizeM, var(--sn-primitive-font-fontSize-32, 32px)));
+  letter-spacing:var(--sn-regular-headline-m-letterSpacing, var(--sn-primitive-font-letterSpacing-xs, -0.5px));
+  paragraph-spacing:var(--sn-regular-headline-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize28, 14px));
+}
+.content :global(.ProseMirror) h3{
+  font-family:var(--sn-regular-headline-s-fontFamily, var(--sn-brand-font-fontFamily-regular-headline, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-headline-s-fontWeight, var(--sn-theme-typography-fontWeight-regular-headline-s, var(--sn-brand-font-fontWeight-light-regular-headline-s, var(--sn-primitive-font-fontWeightValue-600, 600))));
+  line-height:var(--sn-regular-headline-s-lineHeight, var(--sn-density-typography-roleHeadline-lineHeightS, var(--sn-primitive-font-lineHeight-by24, 32px)));
+  font-size:var(--sn-regular-headline-s-fontSize, var(--sn-density-typography-roleHeadline-fontSizeS, var(--sn-primitive-font-fontSize-24, 24px)));
+  letter-spacing:var(--sn-regular-headline-s-letterSpacing, var(--sn-primitive-font-letterSpacing-xs, -0.5px));
+  paragraph-spacing:var(--sn-regular-headline-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize24, 12px));
+}
+.content :global(.ProseMirror) h4{
+  font-family:var(--sn-regular-title-l-fontFamily, var(--sn-brand-font-fontFamily-regular-title, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-title-l-fontWeight, var(--sn-theme-typography-fontWeight-regular-title-l, var(--sn-brand-font-fontWeight-light-regular-title-l, var(--sn-primitive-font-fontWeightValue-600, 600))));
+  line-height:var(--sn-regular-title-l-lineHeight, var(--sn-density-typography-roleTitle-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
+  font-size:var(--sn-regular-title-l-fontSize, var(--sn-density-typography-roleTitle-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px)));
+  letter-spacing:var(--sn-regular-title-l-letterSpacing, var(--sn-primitive-font-letterSpacing-l, 0.15px));
+  paragraph-spacing:var(--sn-regular-title-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize20, 10px));
+}
+.content :global(.ProseMirror) h5{
+  font-family:var(--sn-regular-title-m-fontFamily, var(--sn-brand-font-fontFamily-regular-title, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-title-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-title-m, var(--sn-brand-font-fontWeight-light-regular-title-m, var(--sn-primitive-font-fontWeightValue-600, 600))));
+  line-height:var(--sn-regular-title-m-lineHeight, var(--sn-density-typography-roleTitle-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
+  font-size:var(--sn-regular-title-m-fontSize, var(--sn-density-typography-roleTitle-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
+  letter-spacing:var(--sn-regular-title-m-letterSpacing, var(--sn-primitive-font-letterSpacing-l, 0.15px));
+  paragraph-spacing:var(--sn-regular-title-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize16, 8px));
+}
+.content :global(.ProseMirror) ul,
+.content :global(.ProseMirror) ol{
+  padding-left:var(--sn-primitive-dimension-24, 24px);
+}
+.content :global(.ProseMirror) blockquote{
+  padding:var(--sn-markdown-anatomy-size-syntax-quote-wrapper-paddingVertical, var(--sn-primitive-dimension-8, 8px)) var(--sn-markdown-anatomy-size-syntax-quote-wrapper-paddingHorizontal, var(--sn-primitive-dimension-8, 8px));
+  border-left:var(--sn-markdown-anatomy-size-syntax-quote-wrapper-borderWidth, var(--sn-primitive-strokeWeight-strokeSemiBold, 2px)) solid var(--sn-theme-color-available-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
+  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
+  background:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
+}
+.content :global(.ProseMirror) code{
+  min-height:var(--sn-markdown-anatomy-size-syntax-inlineCode-minHeight, var(--sn-primitive-dimension-20, 20px));
+  padding:0 var(--sn-markdown-anatomy-size-syntax-inlineCode-paddingHorizontal, var(--sn-primitive-dimension-4, 4px));
+  border-radius:var(--sn-markdown-anatomy-size-syntax-inlineCode-borderRadius, var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
+  font-family:var(--sn-brand-font-fontFamily-mono-body, var(--sn-primitive-fontFamily-brandA-mono, SB Sans Text Mono));
+  background:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
+}
+.content :global(.ProseMirror) a{
+  color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
+  text-decoration:underline;
+}
+.content :global(.ProseMirror) table{
+  border-collapse:collapse;
+  width:100%;
+}
+.content :global(.ProseMirror) th,
+.content :global(.ProseMirror) td{
+  min-height:var(--sn-markdown-anatomy-size-syntax-table-tableCell-minHeight, var(--sn-primitive-dimension-40, 40px));
+  padding:var(--sn-markdown-anatomy-size-syntax-table-tableCell-paddingVertical, var(--sn-primitive-dimension-8, 8px)) var(--sn-markdown-anatomy-size-syntax-table-tableCell-paddingHorizontal, var(--sn-primitive-dimension-16, 16px));
+  border-bottom:var(--sn-primitive-strokeWeight-strokeRegular, 1px) solid var(--sn-theme-color-available-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
+  text-align:left;
+}
+.content :global(.ProseMirror) th{
+  font-weight:600;
+  background:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
+}
+.content :global(.ProseMirror) > *:not(:first-child){
+  margin-top:10px;
+}
+.content :global(.ProseMirror) > ul:not(:first-child),
+.content :global(.ProseMirror) > ol:not(:first-child){
+  margin-top:5px;
+}
+.content :global(.ProseMirror) > h1:not(:first-child){
+  margin-top:var(--sn-markdown-anatomy-size-syntax-headings-h1-paddingTop, var(--sn-primitive-dimension-20, 20px));
+}
+.content :global(.ProseMirror) > h2:not(:first-child){
+  margin-top:18px;
+}
+.content :global(.ProseMirror) > h3:not(:first-child){
+  margin-top:var(--sn-markdown-anatomy-size-syntax-headings-h3-paddingTop, var(--sn-primitive-dimension-16, 16px));
+}
+.content :global(.ProseMirror) > h4:not(:first-child){
+  margin-top:14px;
+}
+.content :global(.ProseMirror) > h5:not(:first-child){
+  margin-top:var(--sn-markdown-anatomy-size-syntax-headings-h5-paddingTop, var(--sn-primitive-dimension-12, 12px));
+}
+.content :global(.ProseMirror) > blockquote:not(:first-child){
+  margin-top:5px;
+}
+.content :global(.ProseMirror) > pre:not(:first-child){
+  margin-top:5px;
+}
+.content :global(.ProseMirror) > table:not(:first-child){
+  margin-top:5px;
+}
+.content :global(.ProseMirror) > img:not(:first-child){
+  margin-top:5px;
+}
+.content :global(.ProseMirror) > hr:not(:first-child){
+  margin-top:10px;
+}
+.content :global(.ProseMirror) pre{
+  overflow-x:auto;
+  padding:var(--sn-primitive-dimension-12, 12px);
+  border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
+  background:var(--sn-theme-color-neutral-background2Level, var(--sn-brand-color-neutral-99, var(--sn-primitive-color-gray-99, #ffffff)));
+}
+.content :global(.ProseMirror) pre code{
+  min-height:0;
+  padding:0;
+  background:transparent;
+}
+.content :global(.ProseMirror) :global(p.is-editor-empty:first-child)::before{
+  pointer-events:none;
+  content:attr(data-placeholder);
+  float:left;
+  height:0;
+  color:var(--sn-theme-color-available-version-textDisabled, var(--sn-brand-color-text-version-disabled, rgba(65, 66, 78, 0.3490196078)));
+}
+.content :global(.ProseMirror) img{
+  max-width:100%;
+  height:auto;
+}

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

@@ -0,0 +1,9 @@
+import { ToolbarApi } from '../../toolbarApi.js';
+import { ToolbarItemId } from '../../types.js';
+type ToolbarProps = {
+    /** Бэкенд команд: WYSIWYG (TipTap) в preview-режиме либо markdown-исходник (textarea) в raw-режиме. */
+    api: ToolbarApi;
+    items: ToolbarItemId[];
+};
+export declare function Toolbar({ api, items }: ToolbarProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,167 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ChevronRightSVG, MoreSVG } from '@cloud-ru/ds-icons/interface/system';
+import { Droplist } from '@cloud-ru/ds-list';
+import { usePortalContext } from '@cloud-ru/ds-portal-context';
+import { Tooltip } from '@cloud-ru/ds-tooltip';
+import { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
+import { TEST_IDS, TOOLBAR_ITEM, toolbarButtonTestId } from '../../constants.js';
+import { ButtonHeading, Buttons, ButtonsDivider, ButtonsGroup, CustomizeTableModal, ImageModal, LinkModal, PrivateButton, TableSelectSettingsGrid, } from '../../helperComponents/index.js';
+import { markdownLocale } from '../../locale/index.js';
+import { BUTTONS, GROUPS } from './constants.js';
+import { useToolbarHotkeys, useToolbarOverflow } from './hooks/index.js';
+import styles from './styles.module.css';
+export function Toolbar({ api, items }) {
+    const portalContext = usePortalContext();
+    const { t } = markdownLocale.useTranslations();
+    // Overflow тулбара (сколько кнопок видно, остальные — в «Ещё») вынесен в хук.
+    const { rootRef, moreButtonRef, visibleCount } = useToolbarOverflow(items);
+    const [moreOpen, setMoreOpen] = useState(false);
+    const [tableOpen, setTableOpen] = useState(false);
+    const [linkInitial, setLinkInitial] = useState(undefined);
+    const [toolbarItemModal, setToolbarItemModal] = useState();
+    // Закрывает оба table-picker'а и открывает модалку настройки размеров.
+    const openCustomize = useCallback(() => {
+        setTableOpen(false);
+        setMoreOpen(false);
+        setToolbarItemModal('table');
+    }, []);
+    const openLink = useCallback(() => {
+        setMoreOpen(false);
+        // raw-режим: ссылка добавляется как сырой markdown-шаблон прямо в textarea, без модалки.
+        if (api.mode === 'raw') {
+            api.setLink({});
+            return;
+        }
+        setLinkInitial({
+            href: api.getLinkHref(),
+            title: api.getLinkTitle(),
+        });
+        setToolbarItemModal('link');
+    }, [api]);
+    const openImage = useCallback(() => {
+        setMoreOpen(false);
+        setToolbarItemModal('image');
+    }, []);
+    const closeToolbarItemModal = () => {
+        setToolbarItemModal(undefined);
+        api.focus();
+    };
+    // Принудительный re-render тулбара на selection/transaction → переключаются checked-стейты кнопок.
+    const [, setTick] = useState(0);
+    useEffect(() => api.subscribe(() => setTick(n => n + 1)), [api]);
+    useToolbarHotkeys({ rootRef, items, api, onLink: openLink, onImage: openImage });
+    const toolbarTableItems = useMemo(() => [
+        {
+            content: (_jsx(TableSelectSettingsGrid, { onPick: (rows, cols) => {
+                    api.insertTable(rows, cols);
+                    setTableOpen(false);
+                    setMoreOpen(false);
+                } })),
+            inactive: true,
+        },
+        { type: 'group', content: '', divider: true },
+        {
+            content: {
+                label: t('table.customize'),
+                className: styles.tableCustomizeOption,
+            },
+            onClick: openCustomize,
+            afterContent: _jsx(ChevronRightSVG, {}),
+            'data-test-id': TEST_IDS.tableCustomize,
+        },
+    ], [api, t, openCustomize]);
+    const renderItem = (id) => {
+        const spec = BUTTONS[id];
+        if (!spec) {
+            return null;
+        }
+        const name = t(spec.nameKey);
+        const commonButtonProps = {
+            id,
+            icon: spec.icon,
+            'data-test-id': toolbarButtonTestId(id),
+            'aria-label': name,
+            tip: { title: name, caption: spec.hotkey },
+            checked: api.isActive(id),
+            onClick: () => api.toggle(id),
+        };
+        if (id === TOOLBAR_ITEM.Heading) {
+            return _jsx(ButtonHeading, { api: api }, id);
+        }
+        if (id === TOOLBAR_ITEM.Link && spec) {
+            commonButtonProps.onClick = openLink;
+        }
+        if (id === TOOLBAR_ITEM.Image) {
+            commonButtonProps.onClick = openImage;
+        }
+        if (id === TOOLBAR_ITEM.Table && spec) {
+            return (_jsx(Droplist, { size: 'm', container: portalContext, open: tableOpen, onOpenChange: setTableOpen, placement: 'bottom-start', triggerClassName: styles.tooltipTrigger, items: toolbarTableItems, children: _jsx(PrivateButton, { ...commonButtonProps }, id) }, id));
+        }
+        return _jsx(PrivateButton, { ...commonButtonProps }, id);
+    };
+    // Решаем, какие items видимы, группируем под GROUPS, рисуем дивайдеры между группами.
+    const visibleItems = new Set(items.slice(0, visibleCount));
+    const overflowItems = items.slice(visibleCount);
+    const presentGroups = GROUPS.map(group => group.filter(id => visibleItems.has(id))).filter(g => g.length > 0);
+    const handleMoreSelect = (id) => {
+        if (id === TOOLBAR_ITEM.Table) {
+            // Table-picker открывается вторым уровнем, якорь — More-кнопка (childless Dropdown + triggerRef).
+            setTableOpen(true);
+            return;
+        }
+        if (id === TOOLBAR_ITEM.Link) {
+            openLink();
+        }
+        else if (id === TOOLBAR_ITEM.Image) {
+            openImage();
+        }
+        else {
+            setMoreOpen(false);
+            api.toggle(id);
+        }
+    };
+    const handleSubmitCustomizeTable = (rows, cols) => {
+        api.insertTable(rows, cols);
+        closeToolbarItemModal();
+        setMoreOpen(false);
+    };
+    const handleLinkSubmit = linkProps => {
+        api.setLink(linkProps);
+        closeToolbarItemModal();
+    };
+    const handleImageSubmit = (url, alt) => {
+        api.insertImage(url, alt);
+        closeToolbarItemModal();
+    };
+    // Строки More-списка: иконка + подпись + хоткей справа (caption).
+    const moreItems = overflowItems.flatMap((id) => {
+        const spec = BUTTONS[id];
+        if (!spec)
+            return [];
+        const base = {
+            id,
+            beforeContent: spec?.icon,
+            content: { label: t(spec.nameKey), caption: spec.hotkey },
+            onClick: () => handleMoreSelect(id),
+            'data-test-id': toolbarButtonTestId(id),
+        };
+        if (id === TOOLBAR_ITEM.Table) {
+            return [
+                {
+                    ...base,
+                    type: 'next-list',
+                    items: toolbarTableItems,
+                },
+            ];
+        }
+        return [
+            {
+                ...base,
+                beforeContent: spec.icon,
+                content: { label: t(spec.nameKey), caption: spec.hotkey },
+                checked: api.isActive(id),
+            },
+        ];
+    });
+    return (_jsxs("div", { ref: rootRef, className: styles.root, children: [_jsxs(Buttons, { children: [presentGroups.map((group, gi) => (_jsxs(Fragment, { children: [gi > 0 && _jsx(ButtonsDivider, {}), _jsx(ButtonsGroup, { children: group.map(renderItem) })] }, `g-${gi}`))), overflowItems.length > 0 && (_jsxs(_Fragment, { children: [_jsx(ButtonsDivider, {}), _jsx(Droplist, { size: 'm', container: portalContext, open: moreOpen, onOpenChange: setMoreOpen, placement: 'bottom-end', marker: false, items: moreItems, triggerElemRef: moreButtonRef, triggerClassName: styles.tooltipTrigger, "data-test-id": TEST_IDS.toolbarMoreList, children: _jsx(Tooltip, { tip: t('toolbar.more'), triggerClassName: styles.tooltipTrigger, children: _jsx(PrivateButton, { icon: _jsx(MoreSVG, {}), "data-test-id": TEST_IDS.toolbarMore, "aria-label": t('toolbar.more'), "aria-haspopup": 'menu', "aria-expanded": moreOpen }) }) })] }))] }), _jsx(CustomizeTableModal, { open: toolbarItemModal === 'table', onClose: closeToolbarItemModal, onSubmit: handleSubmitCustomizeTable }), _jsx(LinkModal, { open: toolbarItemModal === 'link', initial: linkInitial, onClose: closeToolbarItemModal, onSubmit: handleLinkSubmit }), _jsx(ImageModal, { open: toolbarItemModal === 'image', onClose: closeToolbarItemModal, onSubmit: handleImageSubmit })] }));
+}

package/dist/esm/components/Toolbar/constants.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+import { MarkdownMessages } from '../../locale/index.js';
+import { ToolbarItemId } from '../../types.js';
+export declare const GROUPS: ToolbarItemId[][];
+type ButtonSpec = {
+    icon: ReactNode;
+    nameKey: `toolbar.${Extract<keyof MarkdownMessages['toolbar'], string>}`;
+    /** Хоткей для строки в More-списке. Только реально работающие биндинги TipTap. */
+    hotkey?: string;
+};
+export declare const BUTTONS: Record<ToolbarItemId, ButtonSpec>;
+export declare const DEFAULT_TOOLBAR: ToolbarItemId[];
+export {};