@cloud-ru/ds-markdown 1.0.0

package/package.json

@@ -0,0 +1,84 @@
+{
+  "name": "@cloud-ru/ds-markdown",
+  "version": "1.0.0",
+  "description": "Просмотр и редактирование markdown — рендер GFM и WYSIWYG-редактор на TipTap.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/cloud-ru-tech/snack-v2.git",
+    "directory": "packages/markdown"
+  },
+  "homepage": "https://github.com/cloud-ru-tech/snack-v2/tree/master/packages/markdown",
+  "license": "Apache-2.0",
+  "author": "Nikita Ershov <niershov@cloud.ru>",
+  "type": "module",
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/esm/index.d.ts",
+  "exports": {
+    ".": {
+      "source": "./src/index.ts",
+      "types": "./dist/esm/index.d.ts",
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js"
+    },
+    "./locale": {
+      "source": "./src/locale/index.ts",
+      "types": "./dist/esm/locale/index.d.ts",
+      "import": "./dist/esm/locale/index.js",
+      "require": "./dist/cjs/locale/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src",
+    "./CHANGELOG.md",
+    "./LICENSE"
+  ],
+  "sideEffects": [
+    "*.css",
+    "**/*.css"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@tiptap/core": "^3.29.1",
+    "@tiptap/extension-code-block-lowlight": "^3.29.1",
+    "@tiptap/extension-image": "^3.29.1",
+    "@tiptap/extension-placeholder": "^3.29.1",
+    "@tiptap/extension-table": "^3.29.1",
+    "@tiptap/extension-table-cell": "^3.29.1",
+    "@tiptap/extension-table-header": "^3.29.1",
+    "@tiptap/extension-table-row": "^3.29.1",
+    "@tiptap/markdown": "^3.29.1",
+    "@tiptap/pm": "^3.29.1",
+    "@tiptap/react": "^3.29.1",
+    "@tiptap/starter-kit": "^3.29.1",
+    "classnames": "^2.5.1",
+    "highlight.js": "^11.11.1",
+    "lowlight": "^3.3.0",
+    "react-markdown": "^10.1.0",
+    "react-textarea-autosize": "^8.5.9",
+    "rehype-highlight": "^7.0.2",
+    "remark-gfm": "^4.0.1",
+    "unified": "^11.0.5",
+    "@cloud-ru/ds-button": "^1.0.0",
+    "@cloud-ru/ds-divider": "^1.0.0",
+    "@cloud-ru/ds-icons": "^1.0.0",
+    "@cloud-ru/ds-fields": "^1.0.0",
+    "@cloud-ru/ds-locale": "^1.0.0",
+    "@cloud-ru/ds-materials": "^1.0.0",
+    "@cloud-ru/ds-list": "^1.0.0",
+    "@cloud-ru/ds-toggles": "^1.0.0",
+    "@cloud-ru/ds-tooltip": "^1.0.0",
+    "@cloud-ru/ds-modal": "^1.0.0",
+    "@cloud-ru/ds-portal-context": "^1.0.0",
+    "@cloud-ru/ds-scroll": "^1.0.0",
+    "@cloud-ru/ds-typography": "^1.0.0",
+    "@cloud-ru/ds-utils": "^1.0.0"
+  },
+  "devDependencies": {
+    "sass": "1.102.0",
+    "typescript": "5.9.3"
+  }
+}

package/src/components/Markdown/CodeBlock.tsx

@@ -0,0 +1,96 @@
+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, ReactNode, useRef, useState } from 'react';
+
+import { TEST_IDS } from '../../constants';
+import { markdownLocale } from '../../locale';
+import styles from './styles.module.scss';
+
+const LANGUAGE_PATTERN = /language-([\w-]+)/;
+const COPIED_RESET_MS = 1600;
+
+/** Рекурсивно собирает текстовое содержимое узла — для копирования и подсчёта строк. */
+function extractText(node: ReactNode): string {
+  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<{ children?: ReactNode }>(node)) return extractText(node.props.children);
+  return '';
+}
+
+type CodeBlockProps = {
+  /** `<code>`-элемент с подсветкой, который react-markdown передаёт внутрь `pre`. */
+  children: ReactNode;
+  /** Колбэк на копирование. Получает сырой код блока. */
+  onCopyClick?(code: string): void;
+};
+
+export function CodeBlock({ children, onCopyClick }: CodeBlockProps) {
+  const { t } = markdownLocale.useTranslations();
+  const [copied, setCopied] = useState(false);
+  const resetTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const codeElement = Children.toArray(children).find(child => isValidElement(child));
+  const codeProps = isValidElement<{ className?: string; children?: ReactNode }>(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 (
+    <div className={styles.codeBlock}>
+      <div className={styles.codeHeader}>
+        <span className={styles.codeLang}>{language ?? 'text'}</span>
+        <Button
+          view='function'
+          appearance='neutral'
+          size='m'
+          icon={copied ? <CheckSVG /> : <CopySVG />}
+          className={styles.codeCopy}
+          data-test-id={TEST_IDS.viewerCodeCopy}
+          data-copied={copied || undefined}
+          aria-label={copied ? t('copied') : t('copy')}
+          onClick={handleCopy}
+        />
+      </div>
+      <div className={styles.codeBody}>
+        <span className={styles.codeGutter} aria-hidden='true'>
+          {Array.from({ length: lineCount }, (_, i) => (
+            <span key={i} className={styles.codeLineNo}>
+              {i + 1}
+            </span>
+          ))}
+        </span>
+        {/* Горизонтальный скролл длинных строк кода — через @cloud-ru/ds-scroll вместо нативного overflow.
+            Вертикаль скрыта: блок растёт по высоте вместе с нумерацией строк. */}
+        <Scroll className={styles.codeScroll} overflow={{ y: 'hidden' }}>
+          <pre className={styles.codePre}>
+            <code className={cn(styles.codeContent, className)}>{codeChildren}</code>
+          </pre>
+        </Scroll>
+      </div>
+    </div>
+  );
+}

package/src/components/Markdown/Markdown.tsx

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

package/src/components/Markdown/index.ts

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

package/src/components/Markdown/styles.module.scss

@@ -0,0 +1,105 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+@use '@cloud-ru/ds-figma-variables/build/scss/components/markdown.module' as md;
+@use '../../mixins' as mx;
+
+.root {
+  box-sizing: border-box;
+  max-width: 100%;
+
+  font-family: md.$sn-brand-font-fontFamily-regular-body;
+  font-size: md.$sn-density-typography-roleBody-fontSizeM;
+  line-height: md.$sn-density-typography-roleBody-lineHeightM;
+  color: md.$sn-theme-color-available-version-textMain;
+
+  @include mx.markdown-content;
+  @include mx.markdown-block-spacings;
+
+  // Code-блок: заголовок (язык + copy) + тело (нумерация строк + код).
+  // Структуру задаёт компонент CodeBlock, подсветку — .syntax (hljs).
+  .codeBlock {
+    overflow: hidden;
+    border: md.$sn-primitive-strokeWeight-strokeRegular solid md.$sn-theme-color-available-borderColor;
+    border-radius: md.$sn-density-radius-2xs;
+    background: md.$sn-theme-color-neutral-background2Level;
+  }
+
+  .codeHeader {
+    display: flex;
+    gap: base.$sn-primitive-dimension-8;
+    align-items: center;
+    justify-content: space-between;
+
+    padding: base.$sn-primitive-dimension-6 base.$sn-primitive-dimension-12;
+    border-bottom: md.$sn-primitive-strokeWeight-strokeRegular solid md.$sn-theme-color-available-borderColor;
+  }
+
+  .codeLang {
+    font-family: md.$sn-brand-font-fontFamily-mono-body;
+    font-size: md.$sn-density-typography-roleBody-fontSizeS;
+    line-height: md.$sn-density-typography-roleBody-lineHeightS;
+    color: md.$sn-theme-color-available-version-textSecondary;
+    text-transform: lowercase;
+  }
+
+  // Кнопка копирования — Button (view=function, appearance=neutral) из @cloud-ru/ds-button;
+  // здесь только success-состояние «скопировано».
+  .codeCopy[data-copied] {
+    color: md.$sn-theme-color-green-text;
+  }
+
+  .codeBody {
+    display: flex;
+    max-width: 100%;
+  }
+
+  .codeGutter {
+    user-select: none;
+
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 0;
+
+    padding: base.$sn-primitive-dimension-12 0;
+    border-right: md.$sn-primitive-strokeWeight-strokeRegular solid md.$sn-theme-color-available-borderColor;
+
+    font-family: md.$sn-brand-font-fontFamily-mono-body;
+    font-size: md.$sn-density-typography-roleBody-fontSizeM;
+    line-height: md.$sn-density-typography-roleBody-lineHeightM;
+    color: md.$sn-theme-color-available-version-textTertiary;
+    text-align: right;
+  }
+
+  .codeLineNo {
+    padding: 0 base.$sn-primitive-dimension-12;
+  }
+
+  .codeScroll {
+    flex: 1;
+    margin: 0;
+  }
+
+  .codePre {
+    margin: 0;
+    padding: base.$sn-primitive-dimension-12;
+  }
+
+  .codeContent {
+    min-height: 0;
+    padding: 0;
+
+    font-size: md.$sn-density-typography-roleBody-fontSizeM;
+    line-height: md.$sn-density-typography-roleBody-lineHeightM;
+
+    background: transparent;
+  }
+
+  hr {
+    border: 0;
+    border-top: md.$sn-primitive-strokeWeight-strokeRegular solid md.$sn-theme-color-available-borderColor;
+  }
+
+  img {
+    max-width: 100%;
+    height: auto;
+  }
+}

package/src/components/MarkdownEditor/MarkdownEditor.tsx

@@ -0,0 +1,322 @@
+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 { ChangeEvent, FocusEvent, MouseEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import TextareaAutosize from 'react-textarea-autosize';
+
+import { ON_CHANGE_DEBOUNCE_MS, TEST_IDS } from '../../constants';
+import { markdownLocale } from '../../locale';
+import { lowlight } from '../../lowlight';
+import { RawEdit } from '../../rawMarkdownCommands';
+import syntaxStyles from '../../styles/syntax.module.scss';
+import { createRawApi, createWysiwygApi, ToolbarApi } from '../../toolbarApi';
+import { MarkdownEditorProps } from '../../types';
+import { DEFAULT_TOOLBAR, Toolbar } from '../Toolbar';
+import styles from './styles.module.scss';
+
+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
+}: MarkdownEditorProps) {
+  const supportProps = extractSupportProps(rest);
+  const { t } = markdownLocale.useTranslations();
+
+  // onChange не передаём в useValueControl: внутреннее значение обновляется сразу (uncontrolled
+  // рендер, видимость clear), а наружу onChange уходит с дебаунсом ON_CHANGE_DEBOUNCE_MS.
+  const [currentValue, setValue] = useValueControl<string>({ value, defaultValue });
+
+  const latestMarkdown = useRef(currentValue ?? '');
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const editorContentRef = useRef<HTMLDivElement>(null);
+
+  const emitChange = useDebounce(() => onChange?.(latestMarkdown.current), ON_CHANGE_DEBOUNCE_MS);
+
+  const [previewMode, setPreview] = useValueControl<boolean>({
+    value: preview,
+    defaultValue: defaultPreview ?? false,
+    onChange: onPreviewChange,
+  });
+
+  const [previewFocusVisible, setPreviewFocusVisible] = useState(false);
+  const [previewHover, setPreviewHover] = useState(false);
+
+  const extensions = useMemo<Parameters<typeof useEditor>[0]['extensions']>(
+    () => [
+      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: ChangeEvent<HTMLTextAreaElement>) => {
+      const markdown = e.target.value;
+      latestMarkdown.current = markdown;
+      setValue(markdown);
+      emitChange();
+    },
+    [emitChange, setValue],
+  );
+
+  // Применяет результат raw-команды тулбара к textarea: новый текст + восстановление выделения.
+  const applyRawEdit = useCallback(
+    (edit: RawEdit) => {
+      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<ToolbarApi | null>(() => {
+    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: FocusEvent<HTMLDivElement>) => {
+    setPreviewFocusVisible(event.target.matches(':focus-visible'));
+  }, []);
+
+  const handlePreviewBlur = useCallback(() => setPreviewFocusVisible(false), []);
+
+  // Клик в пустую зону поля (ниже контента, когда поле растянуто ресайзом, но контент короткий)
+  // переводит фокус в активный инпут и ставит курсор в конец — паритет с FieldTextArea, где
+  // контент сам не заполняет всю высоту. Клики по самому инпуту/кнопкам/скроллбару не трогаем.
+  const handleContentClick = useCallback(
+    (event: MouseEvent<HTMLDivElement>) => {
+      const textarea = textareaRef.current;
+      const target = event.target as HTMLElement;
+
+      // Клик по самому инпуту (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 ? (
+      <div className={styles.toolbarSlot}>
+        <Toolbar api={toolbarApi} items={toolbarItems} />
+      </div>
+    ) : undefined;
+
+  return (
+    <div
+      {...supportProps}
+      className={cn(styles.root, syntaxStyles.syntax, className)}
+      data-test-id={dataTestId}
+      data-preview={previewMode || undefined}
+    >
+      {showHeader && (
+        <div className={styles.header} data-test-id={TEST_IDS.editorHeader}>
+          <label className={styles.previewToggle}>
+            <Switch size='s' checked={previewMode} onChange={setPreview} data-test-id={TEST_IDS.editorPreviewToggle} />
+
+            <span className={styles.previewToggleLabel}>{previewLabel}</span>
+          </label>
+
+          {label && (
+            <span className={styles.label} data-test-id={TEST_IDS.editorLabel}>
+              {label}
+            </span>
+          )}
+        </div>
+      )}
+
+      <FieldShell
+        data-test-id={TEST_IDS.editorField}
+        header={toolbarNode}
+        focusVisible={previewFocusVisible}
+        hover={previewHover}
+        onMouseEnter={() => setPreviewHover(true)}
+        onMouseLeave={() => setPreviewHover(false)}
+      >
+        {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
+        <div
+          className={styles.contentArea}
+          onClick={handleContentClick}
+          onFocus={handlePreviewFocus}
+          onBlur={handlePreviewBlur}
+        >
+          <Scroll
+            className={styles.resizeBox}
+            size='s'
+            resize={resizable ? 'vertical' : 'none'}
+            overflow={{ x: 'hidden' }}
+          >
+            {previewMode ? (
+              <EditorContent
+                ref={editorContentRef}
+                editor={editor}
+                className={styles.content}
+                data-test-id={TEST_IDS.editorContent}
+                spellCheck={spellCheck}
+              />
+            ) : (
+              <div className={styles.rawInputWrapper}>
+                <TextareaAutosize
+                  ref={textareaRef}
+                  className={styles.rawInput}
+                  data-test-id={TEST_IDS.editorRawInput}
+                  value={currentValue ?? ''}
+                  onChange={handleRawValueChange}
+                  placeholder={placeholder}
+                  spellCheck={spellCheck}
+                />
+              </div>
+            )}
+          </Scroll>
+
+          {hasValue && (
+            <div className={styles.postfix}>
+              <Button
+                view='function'
+                appearance='neutral'
+                size='m'
+                icon={<CrossCircleSVG />}
+                data-test-id={TEST_IDS.editorClear}
+                aria-label={t('clear')}
+                onClick={handleClearButtonClick}
+              />
+            </div>
+          )}
+        </div>
+      </FieldShell>
+    </div>
+  );
+}

package/src/components/MarkdownEditor/index.ts

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