@cloud-ru/ds-markdown 1.0.0

package/dist/cjs/styles/syntax.module.css

@@ -0,0 +1,47 @@
+.syntax :global(.hljs-comment),
+.syntax :global(.hljs-quote){
+  font-style:italic;
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
+}
+.syntax :global(.hljs-keyword),
+.syntax :global(.hljs-selector-tag),
+.syntax :global(.hljs-built_in),
+.syntax :global(.hljs-name),
+.syntax :global(.hljs-tag){
+  color:var(--sn-theme-color-blue-text, var(--sn-primitive-color-blue-45, #3b6fad));
+}
+.syntax :global(.hljs-string),
+.syntax :global(.hljs-title),
+.syntax :global(.hljs-section),
+.syntax :global(.hljs-attribute),
+.syntax :global(.hljs-literal),
+.syntax :global(.hljs-template-tag),
+.syntax :global(.hljs-template-variable),
+.syntax :global(.hljs-type),
+.syntax :global(.hljs-addition){
+  color:var(--sn-theme-color-green-text, var(--sn-primitive-color-green-45, #438b4b));
+}
+.syntax :global(.hljs-number),
+.syntax :global(.hljs-symbol),
+.syntax :global(.hljs-bullet),
+.syntax :global(.hljs-link),
+.syntax :global(.hljs-meta),
+.syntax :global(.hljs-selector-id),
+.syntax :global(.hljs-selector-class){
+  color:var(--sn-theme-color-blue-accent, var(--sn-primitive-color-blue-55, #4387e2));
+}
+.syntax :global(.hljs-deletion),
+.syntax :global(.hljs-regexp),
+.syntax :global(.hljs-variable),
+.syntax :global(.hljs-template-variable){
+  color:var(--sn-theme-color-red-text, var(--sn-primitive-color-red-45, #a93533));
+}
+.syntax :global(.hljs-emphasis){
+  font-style:italic;
+}
+.syntax :global(.hljs-strong){
+  font-weight:600;
+}
+.syntax :global(.hljs-link){
+  text-decoration:underline;
+}

package/dist/cjs/toolbarApi.d.ts

@@ -0,0 +1,33 @@
+import { Editor } from '@tiptap/react';
+import { RefObject } from 'react';
+import { LinkProps } from './helperComponents';
+import { RawEdit } from './rawMarkdownCommands';
+import { HeadingLevel, ToolbarItemId } from './types';
+export type ToolbarApi = {
+    /** Режим бэкенда: `wysiwyg` (TipTap, preview) либо `raw` (markdown-исходник в textarea). */
+    mode: 'wysiwyg' | 'raw';
+    focus(): void;
+    /** Активна ли кнопка (checked-стейт). В raw-режиме — всегда false. */
+    isActive(id: ToolbarItemId): boolean;
+    /** Активен ли заголовок уровня `level` на текущей строке. В raw-режиме — false. */
+    isHeadingActive(level: HeadingLevel): boolean;
+    /** Toggle инлайн/блочной кнопки (bold…block-code). */
+    toggle(id: ToolbarItemId): void;
+    toggleHeading(level: HeadingLevel): void;
+    setParagraph(): void;
+    getLinkHref(): string | undefined;
+    getLinkTitle(): string | undefined;
+    setLink(props: LinkProps): void;
+    insertImage(src: string, alt: string): void;
+    insertTable(rows: number, cols: number): void;
+    /** Подписка на изменение selection/контента — для перерисовки checked-стейтов. */
+    subscribe(callback: () => void): () => void;
+};
+export declare function createWysiwygApi(editor: Editor): ToolbarApi;
+export type RawApiLabels = {
+    /** Текст-заглушка ссылки, когда выделения нет. */
+    linkText: string;
+    /** Подпись колонки таблицы по 1-based индексу. */
+    tableColumn(index: number): string;
+};
+export declare function createRawApi(textareaRef: RefObject<HTMLTextAreaElement | null>, commit: (edit: RawEdit) => void, labels: RawApiLabels): ToolbarApi;

package/dist/cjs/toolbarApi.js

@@ -0,0 +1,100 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createWysiwygApi = createWysiwygApi;
+exports.createRawApi = createRawApi;
+const constants_1 = require("./constants");
+const rawMarkdownCommands_1 = require("./rawMarkdownCommands");
+const WYSIWYG_MARK = {
+    [constants_1.TOOLBAR_ITEM.Bold]: 'bold',
+    [constants_1.TOOLBAR_ITEM.Italic]: 'italic',
+    [constants_1.TOOLBAR_ITEM.Strikethrough]: 'strike',
+    [constants_1.TOOLBAR_ITEM.InlineCode]: 'code',
+    [constants_1.TOOLBAR_ITEM.BulletList]: 'bulletList',
+    [constants_1.TOOLBAR_ITEM.OrderedList]: 'orderedList',
+    [constants_1.TOOLBAR_ITEM.BlockQuote]: 'blockquote',
+    [constants_1.TOOLBAR_ITEM.BlockCode]: 'codeBlock',
+};
+function createWysiwygApi(editor) {
+    const toggleCommand = {
+        [constants_1.TOOLBAR_ITEM.Bold]: () => editor.chain().focus().toggleBold().run(),
+        [constants_1.TOOLBAR_ITEM.Italic]: () => editor.chain().focus().toggleItalic().run(),
+        [constants_1.TOOLBAR_ITEM.Strikethrough]: () => editor.chain().focus().toggleStrike().run(),
+        [constants_1.TOOLBAR_ITEM.InlineCode]: () => editor.chain().focus().toggleCode().run(),
+        [constants_1.TOOLBAR_ITEM.BulletList]: () => editor.chain().focus().toggleBulletList().run(),
+        [constants_1.TOOLBAR_ITEM.OrderedList]: () => editor.chain().focus().toggleOrderedList().run(),
+        [constants_1.TOOLBAR_ITEM.BlockQuote]: () => editor.chain().focus().toggleBlockquote().run(),
+        [constants_1.TOOLBAR_ITEM.BlockCode]: () => editor.chain().focus().toggleCodeBlock().run(),
+    };
+    return {
+        mode: 'wysiwyg',
+        focus: () => editor.chain().focus().run(),
+        isActive: id => {
+            const mark = WYSIWYG_MARK[id];
+            return mark ? editor.isActive(mark) : false;
+        },
+        isHeadingActive: level => editor.isActive('heading', { level }),
+        toggle: id => toggleCommand[id]?.(),
+        toggleHeading: level => editor.chain().focus().toggleHeading({ level }).run(),
+        setParagraph: () => editor.chain().focus().setParagraph().run(),
+        getLinkHref: () => editor.getAttributes('link').href,
+        // Видимый текст ссылки = выделенный текст (для префилла поля «текст ссылки»).
+        getLinkTitle: () => {
+            const { from, to } = editor.state.selection;
+            return from === to ? undefined : editor.state.doc.textBetween(from, to);
+        },
+        setLink: ({ href, title }) => {
+            if (!href) {
+                editor.chain().focus().extendMarkRange('link').unsetLink().run();
+                return;
+            }
+            const chain = editor.chain().focus().extendMarkRange('link');
+            // Нет выделения, но задан текст — вставляем текст-ссылку. Иначе оборачиваем выделение.
+            if (editor.state.selection.empty && title) {
+                chain.insertContent({ type: 'text', text: title, marks: [{ type: 'link', attrs: { href } }] }).run();
+            }
+            else {
+                chain.setLink({ href }).run();
+            }
+        },
+        insertImage: (src, alt) => editor.chain().focus().setImage({ src, alt }).run(),
+        insertTable: (rows, cols) => editor.chain().focus().insertTable({ rows, cols, withHeaderRow: true }).run(),
+        subscribe: callback => {
+            editor.on('selectionUpdate', callback);
+            editor.on('transaction', callback);
+            return () => {
+                editor.off('selectionUpdate', callback);
+                editor.off('transaction', callback);
+            };
+        },
+    };
+}
+function createRawApi(textareaRef, commit, labels) {
+    const run = (compute) => {
+        const el = textareaRef.current;
+        if (!el)
+            return;
+        const edit = compute(el.value, el.selectionStart, el.selectionEnd);
+        if (edit)
+            commit(edit);
+    };
+    return {
+        mode: 'raw',
+        focus: () => textareaRef.current?.focus(),
+        // В raw-режиме разбор разметки под курсором не делаем — кнопки без checked-стейта.
+        isActive: () => false,
+        isHeadingActive: () => false,
+        toggle: id => run((value, start, end) => (0, rawMarkdownCommands_1.applyInlineToggle)(id, value, start, end) ?? (0, rawMarkdownCommands_1.applyBlockToggle)(id, value, start, end)),
+        toggleHeading: level => run((value, start, end) => (0, rawMarkdownCommands_1.applyHeading)(value, start, end, level)),
+        setParagraph: () => run((value, start, end) => (0, rawMarkdownCommands_1.applyParagraph)(value, start, end)),
+        getLinkHref: () => undefined,
+        getLinkTitle: () => undefined,
+        // В raw-режиме ссылка вставляется как сырой markdown-шаблон `[текст](href)` прямо в textarea
+        // (без модалки). href может быть пустым — пользователь дописывает URL в исходнике.
+        setLink: ({ href, title }) => {
+            run((value, start, end) => (0, rawMarkdownCommands_1.applyLink)(value, start, end, href ?? '', title ?? '', labels.linkText));
+        },
+        insertImage: (src, alt) => run((value, start, end) => (0, rawMarkdownCommands_1.applyImage)(value, start, end, src, alt)),
+        insertTable: (rows, cols) => run((value, start, end) => (0, rawMarkdownCommands_1.applyTable)(value, start, end, rows, cols, labels.tableColumn)),
+        subscribe: () => () => { },
+    };
+}

package/dist/cjs/types.d.ts

@@ -0,0 +1,52 @@
+import { ValueOf, WithSupportProps } from '@cloud-ru/ds-utils';
+import { Components } from 'react-markdown';
+import { PluggableList } from 'unified';
+import { HEADING_LEVEL, TOOLBAR_ITEM } from './constants';
+export type ToolbarItemId = ValueOf<typeof TOOLBAR_ITEM>;
+export type HeadingLevel = ValueOf<typeof HEADING_LEVEL>;
+export type MarkdownProps = WithSupportProps<{
+    /** Markdown-исходник */
+    value: string;
+    /** Доп. remark-плагины */
+    remarkPlugins?: PluggableList;
+    /** Доп. rehype-плагины */
+    rehypePlugins?: PluggableList;
+    /** Override рендера элементов */
+    components?: Components;
+    /** По умолчанию true — сырой HTML вырезается */
+    skipHtml?: boolean;
+    /** Колбэк кнопки Copy на code-блоке */
+    onCodeCopyClick?(code: string): void;
+    /** CSS-класс корневого элемента. */
+    className?: string;
+}>;
+export type MarkdownEditorProps = WithSupportProps<{
+    /** Controlled markdown */
+    value?: string;
+    /** Uncontrolled */
+    defaultValue?: string;
+    /** Колбэк изменения markdown. Вызывается с дебаунсом `ON_CHANGE_DEBOUNCE_MS` после остановки ввода. */
+    onChange?(markdown: string): void;
+    /** Controlled preview-режим: показывает форматированный WYSIWYG с активным тулбаром. Выключен — редактирование «сырого» markdown-текста в textarea */
+    preview?: boolean;
+    /** Uncontrolled */
+    defaultPreview?: boolean;
+    /** Колбэк переключения Preview-тогла в шапке */
+    onPreviewChange?(preview: boolean): void;
+    /** Подпись в шапке справа. По умолчанию — `Markdown field`. `false` — без подписи. */
+    label?: string | false;
+    /** Текст тогла Preview в шапке. По умолчанию `Preview`. */
+    previewLabel?: string;
+    /** Скрыть шапку с тоглом Preview и подписью */
+    hideHeader?: boolean;
+    /** Placeholder пустого редактора. */
+    placeholder?: string;
+    /** Нативная проверка орфографии (`spellcheck`). По умолчанию `true`. */
+    spellCheck?: boolean;
+    /** Может ли пользователь менять размеры поля перетаскиванием уголка. По умолчанию `true`. */
+    resizable?: boolean;
+    /** Какие кнопки тулбара показать. false — без тулбара */
+    toolbar?: false | ToolbarItemId[];
+    /** CSS-класс корневого элемента. */
+    className?: string;
+}>;

package/dist/cjs/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/esm/components/Markdown/CodeBlock.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+type CodeBlockProps = {
+    /** `<code>`-элемент с подсветкой, который react-markdown передаёт внутрь `pre`. */
+    children: ReactNode;
+    /** Колбэк на копирование. Получает сырой код блока. */
+    onCopyClick?(code: string): void;
+};
+export declare function CodeBlock({ children, onCopyClick }: CodeBlockProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/Markdown/CodeBlock.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '@cloud-ru/ds-button';
+import { CheckSVG, CopySVG } from '@cloud-ru/ds-icons/interface/system';
+import { Scroll } from '@cloud-ru/ds-scroll';
+import { copyToClipboard } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import { Children, isValidElement, useRef, useState } from 'react';
+import { TEST_IDS } from '../../constants.js';
+import { markdownLocale } from '../../locale/index.js';
+import styles from './styles.module.css';
+const LANGUAGE_PATTERN = /language-([\w-]+)/;
+const COPIED_RESET_MS = 1600;
+/** Рекурсивно собирает текстовое содержимое узла — для копирования и подсчёта строк. */
+function extractText(node) {
+    if (node === null || node === undefined || typeof node === 'boolean')
+        return '';
+    if (typeof node === 'string' || typeof node === 'number')
+        return String(node);
+    if (Array.isArray(node))
+        return node.map(extractText).join('');
+    if (isValidElement(node))
+        return extractText(node.props.children);
+    return '';
+}
+export function CodeBlock({ children, onCopyClick }) {
+    const { t } = markdownLocale.useTranslations();
+    const [copied, setCopied] = useState(false);
+    const resetTimer = useRef(null);
+    const codeElement = Children.toArray(children).find(child => isValidElement(child));
+    const codeProps = isValidElement(codeElement)
+        ? codeElement.props
+        : { className: '', children };
+    const className = codeProps.className ?? '';
+    const codeChildren = codeProps.children;
+    const language = LANGUAGE_PATTERN.exec(className)?.[1];
+    const raw = extractText(codeChildren).replace(/\n$/, '');
+    const lineCount = raw.length === 0 ? 1 : raw.split('\n').length;
+    const markCopied = () => {
+        setCopied(true);
+        if (resetTimer.current)
+            clearTimeout(resetTimer.current);
+        resetTimer.current = setTimeout(() => setCopied(false), COPIED_RESET_MS);
+    };
+    const handleCopy = () => {
+        onCopyClick?.(raw);
+        // `copyToClipboard` из @cloud-ru/ds-utils сам падает на execCommand, если Clipboard API недоступен
+        // (insecure-context). Ждать результат не нужно: галочка показывается по факту клика.
+        copyToClipboard(raw);
+        markCopied();
+    };
+    return (_jsxs("div", { className: styles.codeBlock, children: [_jsxs("div", { className: styles.codeHeader, children: [_jsx("span", { className: styles.codeLang, children: language ?? 'text' }), _jsx(Button, { view: 'function', appearance: 'neutral', size: 'm', icon: copied ? _jsx(CheckSVG, {}) : _jsx(CopySVG, {}), className: styles.codeCopy, "data-test-id": TEST_IDS.viewerCodeCopy, "data-copied": copied || undefined, "aria-label": copied ? t('copied') : t('copy'), onClick: handleCopy })] }), _jsxs("div", { className: styles.codeBody, children: [_jsx("span", { className: styles.codeGutter, "aria-hidden": 'true', children: Array.from({ length: lineCount }, (_, i) => (_jsx("span", { className: styles.codeLineNo, children: i + 1 }, i))) }), _jsx(Scroll, { className: styles.codeScroll, overflow: { y: 'hidden' }, children: _jsx("pre", { className: styles.codePre, children: _jsx("code", { className: cn(styles.codeContent, className), children: codeChildren }) }) })] })] }));
+}

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

@@ -0,0 +1,2 @@
+import { MarkdownProps } from '../../types.js';
+export declare function Markdown({ value, remarkPlugins, rehypePlugins, components, skipHtml, onCodeCopyClick, className, 'data-test-id': dataTestId, ...rest }: MarkdownProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/Markdown/Markdown.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { extractSupportProps } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import { useMemo } from 'react';
+import ReactMarkdown from 'react-markdown';
+import rehypeHighlight from 'rehype-highlight';
+import remarkGfm from 'remark-gfm';
+import { TEST_IDS } from '../../constants.js';
+import syntaxStyles from '../../styles/syntax.module.css';
+import { CodeBlock } from './CodeBlock.js';
+import styles from './styles.module.css';
+export function Markdown({ value, remarkPlugins, rehypePlugins, components, skipHtml = true, onCodeCopyClick, className, 'data-test-id': dataTestId = TEST_IDS.viewer, ...rest }) {
+    const supportProps = extractSupportProps(rest);
+    const mergedComponents = useMemo(() => ({
+        pre: ({ children }) => _jsx(CodeBlock, { onCopyClick: onCodeCopyClick, children: children }),
+        ...components,
+    }), [components, onCodeCopyClick]);
+    return (_jsx("div", { ...supportProps, className: cn(styles.root, syntaxStyles.syntax, className), "data-test-id": dataTestId, children: _jsx(ReactMarkdown, { remarkPlugins: [remarkGfm, ...(remarkPlugins ?? [])], rehypePlugins: [[rehypeHighlight, { detect: true }], ...(rehypePlugins ?? [])], skipHtml: skipHtml, components: mergedComponents, children: value }) }));
+}

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

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

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

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

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

@@ -0,0 +1,2 @@
+import { MarkdownEditorProps } from '../../types.js';
+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;