@cloud-ru/ds-markdown 1.0.0

package/dist/esm/locale/index.d.ts

@@ -0,0 +1,199 @@
+declare const MARKDOWN_MESSAGES: {
+    readonly 'en-GB': {
+        readonly toolbar: {
+            readonly heading: "Heading";
+            readonly bold: "Bold";
+            readonly italic: "Italic";
+            readonly strikethrough: "Strikethrough";
+            readonly link: "Link";
+            readonly inlineCode: "Inline code";
+            readonly bulletList: "Bullet list";
+            readonly orderedList: "Ordered list";
+            readonly blockQuote: "Block quote";
+            readonly blockCode: "Block code";
+            readonly table: "Table";
+            readonly image: "Image";
+            readonly more: "More";
+        };
+        readonly clear: "Clear";
+        readonly copy: "Copy";
+        readonly copied: "Copied";
+        readonly add: "Add";
+        readonly cancel: "Cancel";
+        readonly link: {
+            readonly title: "Add link";
+            readonly titleField: {
+                readonly label: "Text";
+                readonly placeholder: "Link text";
+            };
+            readonly urlField: {
+                readonly label: "URL";
+                readonly placeholder: "https://";
+            };
+        };
+        readonly image: {
+            readonly title: "Add image";
+            readonly url: "URL";
+            readonly alt: "Alt text";
+            readonly placeholder: "https://";
+        };
+        readonly table: {
+            readonly pickSize: "Pick size";
+            readonly insert: "Insert {{rows}} × {{cols}} table";
+            readonly column: "Column {{index}}";
+            readonly customize: "Customize table";
+            readonly columns: "Columns";
+            readonly rows: "Rows";
+        };
+        readonly linkText: "link text";
+    };
+    readonly 'ru-RU': {
+        readonly toolbar: {
+            readonly heading: "Заголовок";
+            readonly bold: "Жирный";
+            readonly italic: "Курсив";
+            readonly strikethrough: "Зачёркнутый";
+            readonly link: "Ссылка";
+            readonly inlineCode: "Строчный код";
+            readonly bulletList: "Маркированный список";
+            readonly orderedList: "Нумерованный список";
+            readonly blockQuote: "Цитата";
+            readonly blockCode: "Блок кода";
+            readonly table: "Таблица";
+            readonly image: "Картинка";
+            readonly more: "Ещё";
+        };
+        readonly clear: "Очистить";
+        readonly copy: "Скопировать";
+        readonly copied: "Скопировано";
+        readonly add: "Добавить";
+        readonly cancel: "Отмена";
+        readonly link: {
+            readonly title: "Добавить ссылку";
+            readonly titleField: {
+                readonly label: "Текст";
+                readonly placeholder: "Текст ссылки";
+            };
+            readonly urlField: {
+                readonly label: "URL";
+                readonly placeholder: "https://";
+            };
+        };
+        readonly image: {
+            readonly title: "Добавить изображение";
+            readonly url: "URL";
+            readonly alt: "Альтернативный текст";
+            readonly placeholder: "https://";
+        };
+        readonly table: {
+            readonly pickSize: "Выберите размер";
+            readonly insert: "Вставить таблицу {{rows}} × {{cols}}";
+            readonly column: "Колонка {{index}}";
+            readonly customize: "Настроить таблицу";
+            readonly columns: "Столбцы";
+            readonly rows: "Строки";
+        };
+        readonly linkText: "текст ссылки";
+    };
+};
+export type MarkdownMessages = (typeof MARKDOWN_MESSAGES)['en-GB'];
+/** locale компонента Markdown: `markdownLocale.useTranslations()` в коде, `markdownLocale.extend(...)` в сервисе. */
+export declare const markdownLocale: import("@cloud-ru/ds-locale").DefinedLocale<{
+    readonly 'en-GB': {
+        readonly toolbar: {
+            readonly heading: "Heading";
+            readonly bold: "Bold";
+            readonly italic: "Italic";
+            readonly strikethrough: "Strikethrough";
+            readonly link: "Link";
+            readonly inlineCode: "Inline code";
+            readonly bulletList: "Bullet list";
+            readonly orderedList: "Ordered list";
+            readonly blockQuote: "Block quote";
+            readonly blockCode: "Block code";
+            readonly table: "Table";
+            readonly image: "Image";
+            readonly more: "More";
+        };
+        readonly clear: "Clear";
+        readonly copy: "Copy";
+        readonly copied: "Copied";
+        readonly add: "Add";
+        readonly cancel: "Cancel";
+        readonly link: {
+            readonly title: "Add link";
+            readonly titleField: {
+                readonly label: "Text";
+                readonly placeholder: "Link text";
+            };
+            readonly urlField: {
+                readonly label: "URL";
+                readonly placeholder: "https://";
+            };
+        };
+        readonly image: {
+            readonly title: "Add image";
+            readonly url: "URL";
+            readonly alt: "Alt text";
+            readonly placeholder: "https://";
+        };
+        readonly table: {
+            readonly pickSize: "Pick size";
+            readonly insert: "Insert {{rows}} × {{cols}} table";
+            readonly column: "Column {{index}}";
+            readonly customize: "Customize table";
+            readonly columns: "Columns";
+            readonly rows: "Rows";
+        };
+        readonly linkText: "link text";
+    };
+    readonly 'ru-RU': {
+        readonly toolbar: {
+            readonly heading: "Заголовок";
+            readonly bold: "Жирный";
+            readonly italic: "Курсив";
+            readonly strikethrough: "Зачёркнутый";
+            readonly link: "Ссылка";
+            readonly inlineCode: "Строчный код";
+            readonly bulletList: "Маркированный список";
+            readonly orderedList: "Нумерованный список";
+            readonly blockQuote: "Цитата";
+            readonly blockCode: "Блок кода";
+            readonly table: "Таблица";
+            readonly image: "Картинка";
+            readonly more: "Ещё";
+        };
+        readonly clear: "Очистить";
+        readonly copy: "Скопировать";
+        readonly copied: "Скопировано";
+        readonly add: "Добавить";
+        readonly cancel: "Отмена";
+        readonly link: {
+            readonly title: "Добавить ссылку";
+            readonly titleField: {
+                readonly label: "Текст";
+                readonly placeholder: "Текст ссылки";
+            };
+            readonly urlField: {
+                readonly label: "URL";
+                readonly placeholder: "https://";
+            };
+        };
+        readonly image: {
+            readonly title: "Добавить изображение";
+            readonly url: "URL";
+            readonly alt: "Альтернативный текст";
+            readonly placeholder: "https://";
+        };
+        readonly table: {
+            readonly pickSize: "Выберите размер";
+            readonly insert: "Вставить таблицу {{rows}} × {{cols}}";
+            readonly column: "Колонка {{index}}";
+            readonly customize: "Настроить таблицу";
+            readonly columns: "Столбцы";
+            readonly rows: "Строки";
+        };
+        readonly linkText: "текст ссылки";
+    };
+}, "@cloud-ru/ds-markdown">;
+export {};

package/dist/esm/locale/index.js

@@ -0,0 +1,101 @@
+import { defineLocale, defineMessages } from '@cloud-ru/ds-locale';
+const MARKDOWN_MESSAGES = defineMessages({
+    'en-GB': {
+        toolbar: {
+            heading: 'Heading',
+            bold: 'Bold',
+            italic: 'Italic',
+            strikethrough: 'Strikethrough',
+            link: 'Link',
+            inlineCode: 'Inline code',
+            bulletList: 'Bullet list',
+            orderedList: 'Ordered list',
+            blockQuote: 'Block quote',
+            blockCode: 'Block code',
+            table: 'Table',
+            image: 'Image',
+            more: 'More',
+        },
+        clear: 'Clear',
+        copy: 'Copy',
+        copied: 'Copied',
+        add: 'Add',
+        cancel: 'Cancel',
+        link: {
+            title: 'Add link',
+            titleField: {
+                label: 'Text',
+                placeholder: 'Link text',
+            },
+            urlField: {
+                label: 'URL',
+                placeholder: 'https://',
+            },
+        },
+        image: {
+            title: 'Add image',
+            url: 'URL',
+            alt: 'Alt text',
+            placeholder: 'https://',
+        },
+        table: {
+            pickSize: 'Pick size',
+            insert: 'Insert {{rows}} × {{cols}} table',
+            column: 'Column {{index}}',
+            customize: 'Customize table',
+            columns: 'Columns',
+            rows: 'Rows',
+        },
+        linkText: 'link text',
+    },
+    'ru-RU': {
+        toolbar: {
+            heading: 'Заголовок',
+            bold: 'Жирный',
+            italic: 'Курсив',
+            strikethrough: 'Зачёркнутый',
+            link: 'Ссылка',
+            inlineCode: 'Строчный код',
+            bulletList: 'Маркированный список',
+            orderedList: 'Нумерованный список',
+            blockQuote: 'Цитата',
+            blockCode: 'Блок кода',
+            table: 'Таблица',
+            image: 'Картинка',
+            more: 'Ещё',
+        },
+        clear: 'Очистить',
+        copy: 'Скопировать',
+        copied: 'Скопировано',
+        add: 'Добавить',
+        cancel: 'Отмена',
+        link: {
+            title: 'Добавить ссылку',
+            titleField: {
+                label: 'Текст',
+                placeholder: 'Текст ссылки',
+            },
+            urlField: {
+                label: 'URL',
+                placeholder: 'https://',
+            },
+        },
+        image: {
+            title: 'Добавить изображение',
+            url: 'URL',
+            alt: 'Альтернативный текст',
+            placeholder: 'https://',
+        },
+        table: {
+            pickSize: 'Выберите размер',
+            insert: 'Вставить таблицу {{rows}} × {{cols}}',
+            column: 'Колонка {{index}}',
+            customize: 'Настроить таблицу',
+            columns: 'Столбцы',
+            rows: 'Строки',
+        },
+        linkText: 'текст ссылки',
+    },
+});
+/** locale компонента Markdown: `markdownLocale.useTranslations()` в коде, `markdownLocale.extend(...)` в сервисе. */
+export const markdownLocale = defineLocale('@cloud-ru/ds-markdown', MARKDOWN_MESSAGES);

package/dist/esm/lowlight.d.ts

@@ -0,0 +1,14 @@
+export declare const lowlight: {
+    highlight: (language: string, value: string, options?: Readonly<import("lowlight").Options> | null | undefined) => import("hast").Root;
+    highlightAuto: (value: string, options?: Readonly<import("lowlight").AutoOptions> | null | undefined) => import("hast").Root;
+    listLanguages: () => Array<string>;
+    register: {
+        (grammars: Readonly<Record<string, import("highlight.js").LanguageFn>>): undefined;
+        (name: string, grammar: import("highlight.js").LanguageFn): undefined;
+    };
+    registerAlias: {
+        (aliases: Readonly<Record<string, ReadonlyArray<string> | string>>): undefined;
+        (language: string, alias: ReadonlyArray<string> | string): undefined;
+    };
+    registered: (aliasOrName: string) => boolean;
+};

package/dist/esm/lowlight.js

@@ -0,0 +1,29 @@
+import bash from 'highlight.js/lib/languages/bash';
+import css from 'highlight.js/lib/languages/css';
+import diff from 'highlight.js/lib/languages/diff';
+import go from 'highlight.js/lib/languages/go';
+import javascript from 'highlight.js/lib/languages/javascript';
+import json from 'highlight.js/lib/languages/json';
+import markdown from 'highlight.js/lib/languages/markdown';
+import python from 'highlight.js/lib/languages/python';
+import scss from 'highlight.js/lib/languages/scss';
+import shell from 'highlight.js/lib/languages/shell';
+import typescript from 'highlight.js/lib/languages/typescript';
+import xml from 'highlight.js/lib/languages/xml';
+import yaml from 'highlight.js/lib/languages/yaml';
+import { createLowlight } from 'lowlight';
+export const lowlight = createLowlight({
+    bash,
+    css,
+    diff,
+    go,
+    javascript,
+    json,
+    markdown,
+    python,
+    scss,
+    shell,
+    typescript,
+    xml,
+    yaml,
+});

package/dist/esm/rawMarkdownCommands.d.ts

@@ -0,0 +1,16 @@
+import { HeadingLevel, ToolbarItemId } from './types.js';
+export type RawEdit = {
+    text: string;
+    selStart: number;
+    selEnd: number;
+};
+export declare function buildMarkdownTable(rows: number, cols: number, columnLabel: (index: number) => string): string;
+/** Инлайн-toggle (bold/italic/strike/inline-code) или `null`, если id не инлайновый. */
+export declare function applyInlineToggle(id: ToolbarItemId, value: string, start: number, end: number): RawEdit | null;
+/** Блочный toggle (bullet/ordered/quote/block-code) или `null`, если id не блочный. */
+export declare function applyBlockToggle(id: ToolbarItemId, value: string, start: number, end: number): RawEdit | null;
+export declare function applyHeading(value: string, start: number, end: number, level: HeadingLevel): RawEdit;
+export declare function applyParagraph(value: string, start: number, end: number): RawEdit;
+export declare function applyLink(value: string, start: number, end: number, href: string, title: string, defaultText: string): RawEdit;
+export declare function applyImage(value: string, start: number, end: number, src: string, alt: string): RawEdit;
+export declare function applyTable(value: string, start: number, end: number, rows: number, cols: number, columnLabel: (index: number) => string): RawEdit;

package/dist/esm/rawMarkdownCommands.js

@@ -0,0 +1,135 @@
+import { TOOLBAR_ITEM } from './constants.js';
+// Инлайн-обёртки (toggle): **bold**, *italic*, ~~strike~~, `code`.
+const INLINE_MARKER = {
+    [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, start, end) {
+    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, start, end, marker) {
+    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, start, end, transform) {
+    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, start, end, prefix) {
+    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, start, end) {
+    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, start, end, level) {
+    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, start, end) {
+    return transformLines(value, start, end, lines => lines.map(line => line.replace(/^#{1,6}\s+/, '')));
+}
+function fenceBlock(value, start, end) {
+    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, start, end, insert, selStart, selEnd) {
+    const text = value.slice(0, start) + insert + value.slice(end);
+    return { text, selStart, selEnd };
+}
+export function buildMarkdownTable(rows, cols, columnLabel) {
+    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, value, start, end) {
+    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, value, start, end) {
+    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, start, end, level) {
+    return setHeading(value, start, end, level);
+}
+export function applyParagraph(value, start, end) {
+    return setParagraph(value, start, end);
+}
+export function applyLink(value, start, end, href, title, defaultText) {
+    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, start, end, src, alt) {
+    const insert = `![${alt}](${src})`;
+    const cursor = start + insert.length;
+    return replaceSelection(value, start, end, insert, cursor, cursor);
+}
+export function applyTable(value, start, end, rows, cols, columnLabel) {
+    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);
+}