@cloud-ru/ds-markdown 1.0.0

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

@@ -0,0 +1,205 @@
+.root{
+  box-sizing:border-box;
+  max-width:100%;
+  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));
+}
+.root p,
+.root h1,
+.root h2,
+.root h3,
+.root h4,
+.root h5,
+.root ul,
+.root ol,
+.root blockquote,
+.root pre,
+.root table,
+.root hr,
+.root img{
+  margin:0;
+}
+.root 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));
+}
+.root 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));
+}
+.root 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));
+}
+.root 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));
+}
+.root 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));
+}
+.root ul,
+.root ol{
+  padding-left:var(--sn-primitive-dimension-24, 24px);
+}
+.root 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)));
+}
+.root 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)));
+}
+.root a{
+  color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
+  text-decoration:underline;
+}
+.root table{
+  border-collapse:collapse;
+  width:100%;
+}
+.root th,
+.root 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;
+}
+.root th{
+  font-weight:600;
+  background:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
+}
+.root > *:not(:first-child){
+  margin-top:10px;
+}
+.root > ul:not(:first-child),
+.root > ol:not(:first-child){
+  margin-top:5px;
+}
+.root > h1:not(:first-child){
+  margin-top:var(--sn-markdown-anatomy-size-syntax-headings-h1-paddingTop, var(--sn-primitive-dimension-20, 20px));
+}
+.root > h2:not(:first-child){
+  margin-top:18px;
+}
+.root > h3:not(:first-child){
+  margin-top:var(--sn-markdown-anatomy-size-syntax-headings-h3-paddingTop, var(--sn-primitive-dimension-16, 16px));
+}
+.root > h4:not(:first-child){
+  margin-top:14px;
+}
+.root > h5:not(:first-child){
+  margin-top:var(--sn-markdown-anatomy-size-syntax-headings-h5-paddingTop, var(--sn-primitive-dimension-12, 12px));
+}
+.root > blockquote:not(:first-child){
+  margin-top:5px;
+}
+.root > pre:not(:first-child){
+  margin-top:5px;
+}
+.root > table:not(:first-child){
+  margin-top:5px;
+}
+.root > img:not(:first-child){
+  margin-top:5px;
+}
+.root > hr:not(:first-child){
+  margin-top:10px;
+}
+.root .codeBlock{
+  overflow:hidden;
+  border: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)));
+  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)));
+}
+.root .codeHeader{
+  display:flex;
+  gap:var(--sn-primitive-dimension-8, 8px);
+  align-items:center;
+  justify-content:space-between;
+  padding:var(--sn-primitive-dimension-6, 6px) var(--sn-primitive-dimension-12, 12px);
+  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)));
+}
+.root .codeLang{
+  font-family:var(--sn-brand-font-fontFamily-mono-body, var(--sn-primitive-fontFamily-brandA-mono, SB Sans Text Mono));
+  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)));
+  text-transform:lowercase;
+}
+.root .codeCopy[data-copied]{
+  color:var(--sn-theme-color-green-text, var(--sn-primitive-color-green-45, #438b4b));
+}
+.root .codeBody{
+  display:flex;
+  max-width:100%;
+}
+.root .codeGutter{
+  -webkit-user-select:none;
+     -moz-user-select:none;
+          user-select:none;
+  display:flex;
+  flex-direction:column;
+  flex-shrink:0;
+  padding:var(--sn-primitive-dimension-12, 12px) 0;
+  border-right: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)));
+  font-family:var(--sn-brand-font-fontFamily-mono-body, var(--sn-primitive-fontFamily-brandA-mono, SB Sans Text Mono));
+  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-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
+  text-align:right;
+}
+.root .codeLineNo{
+  padding:0 var(--sn-primitive-dimension-12, 12px);
+}
+.root .codeScroll{
+  flex:1;
+  margin:0;
+}
+.root .codePre{
+  margin:0;
+  padding:var(--sn-primitive-dimension-12, 12px);
+}
+.root .codeContent{
+  min-height:0;
+  padding:0;
+  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));
+  background:transparent;
+}
+.root hr{
+  border:0;
+  border-top: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)));
+}
+.root img{
+  max-width:100%;
+  height:auto;
+}

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

@@ -0,0 +1,2 @@
+import { MarkdownEditorProps } from '../../types';
+export declare function MarkdownEditor({ value, defaultValue, onChange, preview, defaultPreview, onPreviewChange, label, previewLabel, hideHeader, placeholder, spellCheck, resizable, toolbar, className, 'data-test-id': dataTestId, ...rest }: MarkdownEditorProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/MarkdownEditor/MarkdownEditor.js

@@ -0,0 +1,176 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MarkdownEditor = MarkdownEditor;
+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 system_1 = require("@cloud-ru/ds-icons/interface/system");
+const scroll_1 = require("@cloud-ru/ds-scroll");
+const toggles_1 = require("@cloud-ru/ds-toggles");
+const utils_1 = require("@cloud-ru/ds-utils");
+const extension_code_block_lowlight_1 = __importDefault(require("@tiptap/extension-code-block-lowlight"));
+const extension_image_1 = require("@tiptap/extension-image");
+const extension_placeholder_1 = __importDefault(require("@tiptap/extension-placeholder"));
+const extension_table_1 = require("@tiptap/extension-table");
+const extension_table_cell_1 = require("@tiptap/extension-table-cell");
+const extension_table_header_1 = require("@tiptap/extension-table-header");
+const extension_table_row_1 = require("@tiptap/extension-table-row");
+const markdown_1 = require("@tiptap/markdown");
+const react_1 = require("@tiptap/react");
+const starter_kit_1 = __importDefault(require("@tiptap/starter-kit"));
+const classnames_1 = __importDefault(require("classnames"));
+const react_2 = require("react");
+const react_textarea_autosize_1 = __importDefault(require("react-textarea-autosize"));
+const constants_1 = require("../../constants");
+const locale_1 = require("../../locale");
+const lowlight_1 = require("../../lowlight");
+const syntax_module_scss_1 = __importDefault(require('../../styles/syntax.module.css'));
+const toolbarApi_1 = require("../../toolbarApi");
+const Toolbar_1 = require("../Toolbar");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+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 = constants_1.TEST_IDS.editor, ...rest }) {
+    const supportProps = (0, utils_1.extractSupportProps)(rest);
+    const { t } = locale_1.markdownLocale.useTranslations();
+    // onChange не передаём в useValueControl: внутреннее значение обновляется сразу (uncontrolled
+    // рендер, видимость clear), а наружу onChange уходит с дебаунсом ON_CHANGE_DEBOUNCE_MS.
+    const [currentValue, setValue] = (0, utils_1.useValueControl)({ value, defaultValue });
+    const latestMarkdown = (0, react_2.useRef)(currentValue ?? '');
+    const textareaRef = (0, react_2.useRef)(null);
+    const editorContentRef = (0, react_2.useRef)(null);
+    const emitChange = (0, utils_1.useDebounce)(() => onChange?.(latestMarkdown.current), constants_1.ON_CHANGE_DEBOUNCE_MS);
+    const [previewMode, setPreview] = (0, utils_1.useValueControl)({
+        value: preview,
+        defaultValue: defaultPreview ?? false,
+        onChange: onPreviewChange,
+    });
+    const [previewFocusVisible, setPreviewFocusVisible] = (0, react_2.useState)(false);
+    const [previewHover, setPreviewHover] = (0, react_2.useState)(false);
+    const extensions = (0, react_2.useMemo)(() => [
+        starter_kit_1.default.configure({
+            codeBlock: false,
+            link: { openOnClick: true },
+        }),
+        markdown_1.Markdown,
+        extension_placeholder_1.default.configure({ placeholder: placeholder ?? '' }),
+        extension_table_1.Table.configure({ resizable: true }),
+        extension_table_row_1.TableRow,
+        extension_table_header_1.TableHeader,
+        extension_table_cell_1.TableCell,
+        extension_code_block_lowlight_1.default.configure({ lowlight: lowlight_1.lowlight }),
+        // Ресайз картинок не включаем: контент сериализуется в markdown (`![alt](src)`),
+        // а синтаксис markdown не хранит ширину/высоту — размер всё равно терялся бы на round-trip.
+        extension_image_1.Image,
+    ], [placeholder]);
+    const editor = (0, react_1.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]);
+    (0, react_2.useEffect)(() => {
+        if (!editor || value === undefined) {
+            return;
+        }
+        // Во время ввода не перетираем контент (иначе курсор прыгает на конец) —
+        // синхронизируем только внешние изменения value, пока редактор не в фокусе.
+        if (editor.isFocused) {
+            return;
+        }
+        if (editor.getMarkdown() === value) {
+            return;
+        }
+        editor.commands.setContent(value, { contentType: 'markdown' });
+    }, [editor, value]);
+    (0, react_2.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 ?? Toolbar_1.DEFAULT_TOOLBAR);
+    const showHeader = !hideHeader;
+    const hasValue = Boolean(currentValue && currentValue.length > 0);
+    const handleRawValueChange = (0, react_2.useCallback)((e) => {
+        const markdown = e.target.value;
+        latestMarkdown.current = markdown;
+        setValue(markdown);
+        emitChange();
+    }, [emitChange, setValue]);
+    // Применяет результат raw-команды тулбара к textarea: новый текст + восстановление выделения.
+    const applyRawEdit = (0, react_2.useCallback)((edit) => {
+        latestMarkdown.current = edit.text;
+        setValue(edit.text);
+        emitChange();
+        // Восстанавливаем фокус и выделение после того, как React применит новое значение textarea.
+        if ((0, utils_1.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 = (0, react_2.useMemo)(() => {
+        if (previewMode) {
+            return editor ? (0, toolbarApi_1.createWysiwygApi)(editor) : null;
+        }
+        return (0, toolbarApi_1.createRawApi)(textareaRef, applyRawEdit, {
+            linkText: t('linkText'),
+            tableColumn: index => t('table.column', { index }),
+        });
+    }, [previewMode, editor, applyRawEdit, t]);
+    const handleClearButtonClick = (0, react_2.useCallback)(() => {
+        latestMarkdown.current = '';
+        setValue('');
+        emitChange();
+        editor?.commands.clearContent(true);
+        textareaRef.current?.focus();
+    }, [editor, emitChange, setValue]);
+    const handlePreviewFocus = (0, react_2.useCallback)((event) => {
+        setPreviewFocusVisible(event.target.matches(':focus-visible'));
+    }, []);
+    const handlePreviewBlur = (0, react_2.useCallback)(() => setPreviewFocusVisible(false), []);
+    // Клик в пустую зону поля (ниже контента, когда поле растянуто ресайзом, но контент короткий)
+    // переводит фокус в активный инпут и ставит курсор в конец — паритет с FieldTextArea, где
+    // контент сам не заполняет всю высоту. Клики по самому инпуту/кнопкам/скроллбару не трогаем.
+    const handleContentClick = (0, react_2.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 ? ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.toolbarSlot, children: (0, jsx_runtime_1.jsx)(Toolbar_1.Toolbar, { api: toolbarApi, items: toolbarItems }) })) : undefined;
+    return ((0, jsx_runtime_1.jsxs)("div", { ...supportProps, className: (0, classnames_1.default)(styles_module_scss_1.default.root, syntax_module_scss_1.default.syntax, className), "data-test-id": dataTestId, "data-preview": previewMode || undefined, children: [showHeader && ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.header, "data-test-id": constants_1.TEST_IDS.editorHeader, children: [(0, jsx_runtime_1.jsxs)("label", { className: styles_module_scss_1.default.previewToggle, children: [(0, jsx_runtime_1.jsx)(toggles_1.Switch, { size: 's', checked: previewMode, onChange: setPreview, "data-test-id": constants_1.TEST_IDS.editorPreviewToggle }), (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.previewToggleLabel, children: previewLabel })] }), label && ((0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.label, "data-test-id": constants_1.TEST_IDS.editorLabel, children: label }))] })), (0, jsx_runtime_1.jsx)(fields_1.FieldShell, { "data-test-id": constants_1.TEST_IDS.editorField, header: toolbarNode, focusVisible: previewFocusVisible, hover: previewHover, onMouseEnter: () => setPreviewHover(true), onMouseLeave: () => setPreviewHover(false), children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.contentArea, onClick: handleContentClick, onFocus: handlePreviewFocus, onBlur: handlePreviewBlur, children: [(0, jsx_runtime_1.jsx)(scroll_1.Scroll, { className: styles_module_scss_1.default.resizeBox, size: 's', resize: resizable ? 'vertical' : 'none', overflow: { x: 'hidden' }, children: previewMode ? ((0, jsx_runtime_1.jsx)(react_1.EditorContent, { ref: editorContentRef, editor: editor, className: styles_module_scss_1.default.content, "data-test-id": constants_1.TEST_IDS.editorContent, spellCheck: spellCheck })) : ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.rawInputWrapper, children: (0, jsx_runtime_1.jsx)(react_textarea_autosize_1.default, { ref: textareaRef, className: styles_module_scss_1.default.rawInput, "data-test-id": constants_1.TEST_IDS.editorRawInput, value: currentValue ?? '', onChange: handleRawValueChange, placeholder: placeholder, spellCheck: spellCheck }) })) }), hasValue && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.postfix, children: (0, jsx_runtime_1.jsx)(button_1.Button, { view: 'function', appearance: 'neutral', size: 'm', icon: (0, jsx_runtime_1.jsx)(system_1.CrossCircleSVG, {}), "data-test-id": constants_1.TEST_IDS.editorClear, "aria-label": t('clear'), onClick: handleClearButtonClick }) }))] }) })] }));
+}

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

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

package/dist/cjs/components/MarkdownEditor/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("./MarkdownEditor"), exports);