@cloud-ru/ds-markdown 1.0.0

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

@@ -0,0 +1,33 @@
+import { Editor } from '@tiptap/react';
+import { RefObject } from 'react';
+import { LinkProps } from './helperComponents/index.js';
+import { RawEdit } from './rawMarkdownCommands.js';
+import { HeadingLevel, ToolbarItemId } from './types.js';
+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/esm/toolbarApi.js

@@ -0,0 +1,96 @@
+import { TOOLBAR_ITEM } from './constants.js';
+import { applyBlockToggle, applyHeading, applyImage, applyInlineToggle, applyLink, applyParagraph, applyTable, } from './rawMarkdownCommands.js';
+const WYSIWYG_MARK = {
+    [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) {
+    const toggleCommand = {
+        [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,
+        // Видимый текст ссылки = выделенный текст (для префилла поля «текст ссылки»).
+        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);
+            };
+        },
+    };
+}
+export 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) => 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/dist/esm/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.js';
+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/esm/types.js

@@ -0,0 +1 @@
+export {};