@cloud-ru/ds-markdown 1.0.0

package/src/rawMarkdownCommands.ts

@@ -0,0 +1,179 @@
+import { TOOLBAR_ITEM } from './constants';
+import { HeadingLevel, ToolbarItemId } from './types';
+
+// Чистые трансформации markdown-исходника для raw-режима редактора (textarea).
+// Каждая возвращает новый текст и диапазон выделения, который надо восстановить.
+
+export type RawEdit = { text: string; selStart: number; selEnd: number };
+
+// Инлайн-обёртки (toggle): **bold**, *italic*, ~~strike~~, `code`.
+const INLINE_MARKER: Partial<Record<ToolbarItemId, string>> = {
+  [TOOLBAR_ITEM.Bold]: '**',
+  [TOOLBAR_ITEM.Italic]: '*',
+  [TOOLBAR_ITEM.Strikethrough]: '~~',
+  [TOOLBAR_ITEM.InlineCode]: '`',
+};
+
+// Любой ведущий блок-маркер строки (heading/quote/bullet/ordered) — снимается при смене типа блока.
+const BLOCK_MARKER_RE = /^(#{1,6}\s+|>\s+|[-*+]\s+|\d+\.\s+)/;
+
+function getLineBounds(value: string, start: number, end: number): { lineStart: number; lineEnd: number } {
+  const lineStart = value.lastIndexOf('\n', start - 1) + 1;
+  let lineEnd = value.indexOf('\n', end);
+  if (lineEnd === -1) lineEnd = value.length;
+  return { lineStart, lineEnd };
+}
+
+function wrapInline(value: string, start: number, end: number, marker: string): RawEdit {
+  const selected = value.slice(start, end);
+  const before = value.slice(Math.max(0, start - marker.length), start);
+  const after = value.slice(end, end + marker.length);
+
+  // Уже обёрнуто — снимаем обёртку (toggle off).
+  if (start >= marker.length && before === marker && after === marker) {
+    const text = value.slice(0, start - marker.length) + selected + value.slice(end + marker.length);
+    return { text, selStart: start - marker.length, selEnd: end - marker.length };
+  }
+
+  const text = value.slice(0, start) + marker + selected + marker + value.slice(end);
+  return { text, selStart: start + marker.length, selEnd: end + marker.length };
+}
+
+function transformLines(value: string, start: number, end: number, transform: (lines: string[]) => string[]): RawEdit {
+  const { lineStart, lineEnd } = getLineBounds(value, start, end);
+  const block = value.slice(lineStart, lineEnd);
+  const next = transform(block.split('\n')).join('\n');
+  const text = value.slice(0, lineStart) + next + value.slice(lineEnd);
+  return { text, selStart: lineStart, selEnd: lineStart + next.length };
+}
+
+function toggleLinePrefix(value: string, start: number, end: number, prefix: string): RawEdit {
+  const escaped = prefix.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  const ownRe = new RegExp(`^${escaped}`);
+  return transformLines(value, start, end, lines => {
+    const allPrefixed = lines.every(line => ownRe.test(line));
+    if (allPrefixed) return lines.map(line => line.replace(ownRe, ''));
+    return lines.map(line => prefix + line.replace(BLOCK_MARKER_RE, ''));
+  });
+}
+
+function toggleOrderedList(value: string, start: number, end: number): RawEdit {
+  const orderedRe = /^\d+\.\s+/;
+  return transformLines(value, start, end, lines => {
+    const allPrefixed = lines.every(line => orderedRe.test(line));
+    if (allPrefixed) return lines.map(line => line.replace(orderedRe, ''));
+    return lines.map((line, index) => `${index + 1}. ${line.replace(BLOCK_MARKER_RE, '')}`);
+  });
+}
+
+function setHeading(value: string, start: number, end: number, level: HeadingLevel): RawEdit {
+  const marker = `${'#'.repeat(level)} `;
+  const sameLevelRe = new RegExp(`^#{${level}}\\s+`);
+  return transformLines(value, start, end, lines => {
+    const allSame = lines.every(line => sameLevelRe.test(line));
+    // Повторный выбор того же уровня снимает заголовок (toggle).
+    if (allSame) return lines.map(line => line.replace(sameLevelRe, ''));
+    return lines.map(line => marker + line.replace(BLOCK_MARKER_RE, ''));
+  });
+}
+
+function setParagraph(value: string, start: number, end: number): RawEdit {
+  return transformLines(value, start, end, lines => lines.map(line => line.replace(/^#{1,6}\s+/, '')));
+}
+
+function fenceBlock(value: string, start: number, end: number): RawEdit {
+  const { lineStart, lineEnd } = getLineBounds(value, start, end);
+  const block = value.slice(lineStart, lineEnd);
+  const fenced = `\`\`\`\n${block}\n\`\`\``;
+  const text = value.slice(0, lineStart) + fenced + value.slice(lineEnd);
+  // Выделяем тело между fence'ами.
+  const innerStart = lineStart + 4;
+  return { text, selStart: innerStart, selEnd: innerStart + block.length };
+}
+
+function replaceSelection(
+  value: string,
+  start: number,
+  end: number,
+  insert: string,
+  selStart: number,
+  selEnd: number,
+): RawEdit {
+  const text = value.slice(0, start) + insert + value.slice(end);
+  return { text, selStart, selEnd };
+}
+
+export function buildMarkdownTable(rows: number, cols: number, columnLabel: (index: number) => string): string {
+  const header = `| ${Array.from({ length: cols }, (_, i) => columnLabel(i + 1)).join(' | ')} |`;
+  const divider = `| ${Array.from({ length: cols }, () => '---').join(' | ')} |`;
+  const bodyRow = `| ${Array.from({ length: cols }, () => ' ').join(' | ')} |`;
+  const body = Array.from({ length: rows }, () => bodyRow);
+  return [header, divider, ...body].join('\n');
+}
+
+/** Инлайн-toggle (bold/italic/strike/inline-code) или `null`, если id не инлайновый. */
+export function applyInlineToggle(id: ToolbarItemId, value: string, start: number, end: number): RawEdit | null {
+  const marker = INLINE_MARKER[id];
+  return marker ? wrapInline(value, start, end, marker) : null;
+}
+
+/** Блочный toggle (bullet/ordered/quote/block-code) или `null`, если id не блочный. */
+export function applyBlockToggle(id: ToolbarItemId, value: string, start: number, end: number): RawEdit | null {
+  switch (id) {
+    case TOOLBAR_ITEM.BulletList:
+      return toggleLinePrefix(value, start, end, '- ');
+    case TOOLBAR_ITEM.OrderedList:
+      return toggleOrderedList(value, start, end);
+    case TOOLBAR_ITEM.BlockQuote:
+      return toggleLinePrefix(value, start, end, '> ');
+    case TOOLBAR_ITEM.BlockCode:
+      return fenceBlock(value, start, end);
+    default:
+      return null;
+  }
+}
+
+export function applyHeading(value: string, start: number, end: number, level: HeadingLevel): RawEdit {
+  return setHeading(value, start, end, level);
+}
+
+export function applyParagraph(value: string, start: number, end: number): RawEdit {
+  return setParagraph(value, start, end);
+}
+
+export function applyLink(
+  value: string,
+  start: number,
+  end: number,
+  href: string,
+  title: string,
+  defaultText: string,
+): RawEdit {
+  const selected = title || value.slice(start, end) || defaultText;
+  const insert = `[${selected}](${href})`;
+  // Выделяем подпись ссылки внутри скобок.
+  return replaceSelection(value, start, end, insert, start + 1, start + 1 + selected.length);
+}
+
+export function applyImage(value: string, start: number, end: number, src: string, alt: string): RawEdit {
+  const insert = `![${alt}](${src})`;
+  const cursor = start + insert.length;
+  return replaceSelection(value, start, end, insert, cursor, cursor);
+}
+
+export function applyTable(
+  value: string,
+  start: number,
+  end: number,
+  rows: number,
+  cols: number,
+  columnLabel: (index: number) => string,
+): RawEdit {
+  const table = buildMarkdownTable(rows, cols, columnLabel);
+  // Таблица — отдельный блок: добавляем переводы строк по краям, если рядом непустой текст.
+  const prefix = start > 0 && value[start - 1] !== '\n' ? '\n\n' : '';
+  const suffix = end < value.length && value[end] !== '\n' ? '\n\n' : '';
+  const insert = prefix + table + suffix;
+  const cursor = start + insert.length;
+  return replaceSelection(value, start, end, insert, cursor, cursor);
+}

package/src/styles/syntax.module.scss

@@ -0,0 +1,54 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+
+// Подсветка кода поверх highlight.js / lowlight.
+// `@cloud-ru/ds-figma-variables` не содержит syntax-токенов, поэтому маппим на семантические theme-цвета.
+// Светлая тема — по умолчанию. Тёмная — через :global([data-theme='dark']).
+
+.syntax {
+  :global(.hljs-comment),
+  :global(.hljs-quote) {
+    font-style: italic;
+    color: base.$sn-theme-color-available-version-textTertiary;
+  }
+
+  :global(.hljs-keyword),
+  :global(.hljs-selector-tag),
+  :global(.hljs-built_in),
+  :global(.hljs-name),
+  :global(.hljs-tag) {
+    color: base.$sn-theme-color-blue-text;
+  }
+
+  :global(.hljs-string),
+  :global(.hljs-title),
+  :global(.hljs-section),
+  :global(.hljs-attribute),
+  :global(.hljs-literal),
+  :global(.hljs-template-tag),
+  :global(.hljs-template-variable),
+  :global(.hljs-type),
+  :global(.hljs-addition) {
+    color: base.$sn-theme-color-green-text;
+  }
+
+  :global(.hljs-number),
+  :global(.hljs-symbol),
+  :global(.hljs-bullet),
+  :global(.hljs-link),
+  :global(.hljs-meta),
+  :global(.hljs-selector-id),
+  :global(.hljs-selector-class) {
+    color: base.$sn-theme-color-blue-accent;
+  }
+
+  :global(.hljs-deletion),
+  :global(.hljs-regexp),
+  :global(.hljs-variable),
+  :global(.hljs-template-variable) {
+    color: base.$sn-theme-color-red-text;
+  }
+
+  :global(.hljs-emphasis) { font-style: italic; }
+  :global(.hljs-strong) { font-weight: 600; }
+  :global(.hljs-link) { text-decoration: underline; }
+}

package/src/toolbarApi.ts

@@ -0,0 +1,152 @@
+import { Editor } from '@tiptap/react';
+import { RefObject } from 'react';
+
+import { TOOLBAR_ITEM } from './constants';
+import { LinkProps } from './helperComponents';
+import {
+  applyBlockToggle,
+  applyHeading,
+  applyImage,
+  applyInlineToggle,
+  applyLink,
+  applyParagraph,
+  applyTable,
+  RawEdit,
+} from './rawMarkdownCommands';
+import { HeadingLevel, ToolbarItemId } from './types';
+
+// Бэкенд-независимый интерфейс тулбара: в preview-режиме его реализует TipTap (WYSIWYG),
+// в raw-режиме — трансформации markdown-исходника в textarea.
+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;
+};
+
+const WYSIWYG_MARK: Partial<Record<ToolbarItemId, string>> = {
+  [TOOLBAR_ITEM.Bold]: 'bold',
+  [TOOLBAR_ITEM.Italic]: 'italic',
+  [TOOLBAR_ITEM.Strikethrough]: 'strike',
+  [TOOLBAR_ITEM.InlineCode]: 'code',
+  [TOOLBAR_ITEM.BulletList]: 'bulletList',
+  [TOOLBAR_ITEM.OrderedList]: 'orderedList',
+  [TOOLBAR_ITEM.BlockQuote]: 'blockquote',
+  [TOOLBAR_ITEM.BlockCode]: 'codeBlock',
+};
+
+export function createWysiwygApi(editor: Editor): ToolbarApi {
+  const toggleCommand: Partial<Record<ToolbarItemId, () => void>> = {
+    [TOOLBAR_ITEM.Bold]: () => editor.chain().focus().toggleBold().run(),
+    [TOOLBAR_ITEM.Italic]: () => editor.chain().focus().toggleItalic().run(),
+    [TOOLBAR_ITEM.Strikethrough]: () => editor.chain().focus().toggleStrike().run(),
+    [TOOLBAR_ITEM.InlineCode]: () => editor.chain().focus().toggleCode().run(),
+    [TOOLBAR_ITEM.BulletList]: () => editor.chain().focus().toggleBulletList().run(),
+    [TOOLBAR_ITEM.OrderedList]: () => editor.chain().focus().toggleOrderedList().run(),
+    [TOOLBAR_ITEM.BlockQuote]: () => editor.chain().focus().toggleBlockquote().run(),
+    [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 as string | undefined,
+    // Видимый текст ссылки = выделенный текст (для префилла поля «текст ссылки»).
+    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);
+      };
+    },
+  };
+}
+
+// Локализованные строки, которые raw-команды вставляют в markdown-исходник.
+export type RawApiLabels = {
+  /** Текст-заглушка ссылки, когда выделения нет. */
+  linkText: string;
+  /** Подпись колонки таблицы по 1-based индексу. */
+  tableColumn(index: number): string;
+};
+
+export function createRawApi(
+  textareaRef: RefObject<HTMLTextAreaElement | null>,
+  commit: (edit: RawEdit) => void,
+  labels: RawApiLabels,
+): ToolbarApi {
+  const run = (compute: (value: string, start: number, end: number) => RawEdit | null) => {
+    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) => applyInlineToggle(id, value, start, end) ?? applyBlockToggle(id, value, start, end)),
+    toggleHeading: level => run((value, start, end) => applyHeading(value, start, end, level)),
+    setParagraph: () => run((value, start, end) => applyParagraph(value, start, end)),
+    getLinkHref: () => undefined,
+    getLinkTitle: () => undefined,
+    // В raw-режиме ссылка вставляется как сырой markdown-шаблон `[текст](href)` прямо в textarea
+    // (без модалки). href может быть пустым — пользователь дописывает URL в исходнике.
+    setLink: ({ href, title }) => {
+      run((value, start, end) => applyLink(value, start, end, href ?? '', title ?? '', labels.linkText));
+    },
+    insertImage: (src, alt) => run((value, start, end) => applyImage(value, start, end, src, alt)),
+    insertTable: (rows, cols) =>
+      run((value, start, end) => applyTable(value, start, end, rows, cols, labels.tableColumn)),
+    subscribe: () => () => {},
+  };
+}

package/src/types.ts

@@ -0,0 +1,56 @@
+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;
+}>;