@gravity-ui/markdown-editor 14.3.1 → 14.5.0

package/build/esm/markup/codemirror/create.js

@@ -3,18 +3,20 @@ import { defaultKeymap, history, historyKeymap, indentWithTab, insertNewlineKeep
 import { syntaxHighlighting } from '@codemirror/language';
 import { EditorView, keymap, placeholder } from '@codemirror/view';
 import { ActionName } from '../../bundle/config/action-names';
-import { DataTransferType } from '../../extensions/behavior/Clipboard/utils';
 import { logger } from '../../logger';
 import { Action as A, formatter as f } from '../../shortcuts';
+import { DataTransferType, shouldSkipHtmlConversion } from '../../utils/clipboard';
 import { insertImages, insertLink, toH1, toH2, toH3, toH4, toH5, toH6, toggleBold, toggleItalic, toggleStrikethrough, toggleUnderline, wrapToCodeBlock, wrapToInlineCode, wrapToYfmCut, wrapToYfmNote, } from '../commands';
+import { DirectiveSyntaxFacet } from './directive-facet';
 import { FileUploadHandlerFacet } from './files-upload-facet';
 import { gravityHighlightStyle, gravityTheme } from './gravity';
+import { MarkdownConverter } from './html-to-markdown/converters';
 import { PairingCharactersExtension } from './pairing-chars';
 import { ReactRendererFacet } from './react-facet';
 import { SearchPanelPlugin } from './search-plugin/plugin';
 import { yfmLang } from './yfm';
 export function createCodemirror(params) {
-    const { doc, reactRenderer, onCancel, onScroll, onSubmit, onChange, onDocChange, disabledExtensions = {}, keymaps = [], receiver, yfmLangOptions, extensions: extraExtensions, placeholder: placeholderContent, autocompletion: autocompletionConfig, parseInsertedUrlAsImage, } = params;
+    const { doc, reactRenderer, onCancel, onScroll, onSubmit, onChange, onDocChange, disabledExtensions = {}, keymaps = [], receiver, yfmLangOptions, extensions: extraExtensions, placeholder: placeholderContent, autocompletion: autocompletionConfig, parseHtmlOnPaste, parseInsertedUrlAsImage, directiveSyntax, } = params;
     const extensions = [gravityTheme, placeholder(placeholderContent)];
     if (!disabledExtensions.history) {
         extensions.push(history());
@@ -60,13 +62,49 @@ export function createCodemirror(params) {
         ...defaultKeymap,
         ...(disabledExtensions.history ? [] : historyKeymap),
         ...keymaps,
-    ]), autocompletion(autocompletionConfig), yfmLang(yfmLangOptions), ReactRendererFacet.of(reactRenderer), PairingCharactersExtension, EditorView.lineWrapping, EditorView.contentAttributes.of({ spellcheck: 'true' }), EditorView.domEventHandlers({
+    ]), autocompletion(autocompletionConfig), yfmLang(yfmLangOptions), ReactRendererFacet.of(reactRenderer), DirectiveSyntaxFacet.of(directiveSyntax), PairingCharactersExtension, EditorView.lineWrapping, EditorView.contentAttributes.of({ spellcheck: 'true' }), EditorView.domEventHandlers({
         scroll(event) {
             onScroll(event);
         },
         paste(event, editor) {
             var _a;
-            if (event.clipboardData && parseInsertedUrlAsImage) {
+            if (!event.clipboardData)
+                return;
+            // if clipboard contains YFM content - avoid any meddling with pasted content
+            // since text/yfm will contain valid markdown
+            const yfmContent = event.clipboardData.getData(DataTransferType.Yfm);
+            if (yfmContent) {
+                event.preventDefault();
+                editor.dispatch(editor.state.replaceSelection(yfmContent));
+                return;
+            }
+            // checking if a copy buffer content is suitable for convertion
+            const shouldSkipHtml = shouldSkipHtmlConversion(event.clipboardData);
+            // if we have text/html inside copy/paste buffer
+            const htmlContent = event.clipboardData.getData(DataTransferType.Html);
+            // if we pasting markdown from VsCode we need skip html transformation
+            if (htmlContent && parseHtmlOnPaste && !shouldSkipHtml) {
+                let parsedMarkdownMarkup;
+                try {
+                    const parser = new DOMParser();
+                    const htmlDoc = parser.parseFromString(htmlContent, 'text/html');
+                    const converter = new MarkdownConverter();
+                    parsedMarkdownMarkup = converter.processNode(htmlDoc.body).trim();
+                }
+                catch (e) {
+                    // The code is pretty new and there might be random issues we haven't caught yet,
+                    // especially with invalid HTML or weird DOM parsing errors.
+                    // If something goes wrong, I just want to fall back to the "default pasting"
+                    // rather than break the entire experience for the user.
+                    logger.error(e);
+                }
+                if (parsedMarkdownMarkup !== undefined) {
+                    event.preventDefault();
+                    editor.dispatch(editor.state.replaceSelection(parsedMarkdownMarkup));
+                    return;
+                }
+            }
+            if (parseInsertedUrlAsImage) {
                 const { imageUrl, title } = parseInsertedUrlAsImage((_a = event.clipboardData.getData(DataTransferType.Text)) !== null && _a !== void 0 ? _a : '') || {};
                 if (!imageUrl) {
                     return;

package/build/esm/markup/codemirror/directive-facet.d.ts

@@ -0,0 +1,3 @@
+import { Facet } from '@codemirror/state';
+import type { DirectiveSyntaxContext } from '../../utils/directive';
+export declare const DirectiveSyntaxFacet: Facet<DirectiveSyntaxContext, Omit<DirectiveSyntaxContext, "shouldSerializeToDirective">>;

package/build/esm/markup/codemirror/directive-facet.js

@@ -0,0 +1,5 @@
+import { Facet } from '@codemirror/state';
+export const DirectiveSyntaxFacet = Facet.define({
+    combine: ([context]) => context,
+    static: true,
+});

package/build/esm/markup/codemirror/html-to-markdown/converters.d.ts

@@ -0,0 +1,111 @@
+/**
+ * Interface defining methods for visiting different types of HTML nodes.
+ * Each method corresponds to a specific HTML element type and returns its Markdown representation.
+ */
+export interface HTMLNodeVisitor {
+    /** Converts a text node to Markdown */
+    visitText(node: Text): string;
+    /** Converts an anchor element to Markdown link syntax */
+    visitLink(node: HTMLAnchorElement): string;
+    /** Converts a header element to Markdown heading syntax */
+    visitHeader(node: HTMLElement, level: number): string;
+    /** Converts a paragraph element to Markdown */
+    visitParagraph(node: HTMLElement): string;
+    /** Converts formatting elements (bold, italic, etc.) to Markdown */
+    visitFormatting(node: HTMLElement): string;
+    /** Converts code elements to Markdown inline code syntax */
+    visitCode(node: HTMLElement): string;
+    /** Handles generic HTML elements with no specific Markdown conversion */
+    visitGeneric(node: HTMLElement): string;
+    /** Converts an HTML div element to Markdown format, adding a single newline */
+    visitDiv(node: HTMLElement): string;
+    /** Converts an HTML br element to a newline in Markdown */
+    visitBr(): string;
+    /** Converts a table row element to Markdown */
+    visitTableRow(node: HTMLTableRowElement): string;
+    /** Converts an HTML table element to Markdown table format */
+    visitTable(node: HTMLTableElement): string;
+    /** Convert img tag to Markdown image format */
+    visitImage(node: HTMLImageElement): string;
+}
+/**
+ * Main converter class that implements the visitor interface to convert HTML to Markdown.
+ * Uses the Chain of Responsibility pattern for handling different node types.
+ */
+export declare class MarkdownConverter implements HTMLNodeVisitor {
+    private handler;
+    constructor();
+    /**
+     * Converts a text node to Markdown, escaping special characters.
+     */
+    visitText(node: Text): string;
+    /**
+     * Converts an HTML anchor element to Markdown link syntax.
+     */
+    visitLink(node: HTMLAnchorElement): string;
+    /**
+     * Converts an HTML heading element to Markdown heading syntax.
+     */
+    visitHeader(node: HTMLElement, level: number): string;
+    /**
+     * Converts an HTML paragraph to Markdown format.
+     */
+    visitParagraph(node: HTMLElement): string;
+    /**
+     * Applies Markdown formatting (bold, italic, etc.) to text content.
+     */
+    visitFormatting(node: HTMLElement): string;
+    /**
+     * Converts HTML code elements to Markdown inline code syntax.
+     */
+    visitCode(node: HTMLElement): string;
+    /**
+     * Handles generic HTML elements by processing their children.
+     */
+    visitGeneric(node: HTMLElement): string;
+    /**
+     * Converts an HTML div element to Markdown format, adding a single newline.
+     */
+    visitDiv(node: HTMLElement): string;
+    /**
+     * Converts an HTML br element to a newline in Markdown.
+     */
+    visitBr(): string;
+    /**
+     * Converts an HTML table row element to Markdown table row format.
+     */
+    visitTableRow(node: HTMLTableRowElement): string;
+    /**
+     * Converts an HTML table element to Markdown table format.
+     */
+    visitTable(node: HTMLTableElement): string;
+    /**
+     * Converts img tag to Markdown image format
+     */
+    visitImage(node: HTMLImageElement): string;
+    /**
+     * Processes a single node using the handler chain.
+     */
+    processNode(node: Node): string;
+    /**
+     * Creates and links together handlers in a specific order implementing the Chain of Responsibility pattern.
+     * @returns The first handler in the chain
+     */
+    private setupHandlerChain;
+    /**
+     * Recursively collects and processes text content from a node and its children.
+     */
+    private collectTextContent;
+    /**
+     * Collects raw text content from code elements.
+     */
+    private collectCodeContent;
+    /**
+     * Processes all child nodes of a given node.
+     */
+    private processChildren;
+    /**
+     * Gets the first handler in the chain.
+     */
+    private getHandler;
+}

package/build/esm/markup/codemirror/html-to-markdown/converters.js

@@ -0,0 +1,210 @@
+import { BrHandler, CodeHandler, DivHandler, FormattingHandler, GenericHandler, HeaderHandler, ImageHandler, LinkHandler, OrderedListHandler, ParagraphHandler, TableHandler, TableRowHandler, TextNodeHandler, UnorderedListHandler, } from './handlers';
+import { applyFormatting } from './helpers';
+/**
+ * Main converter class that implements the visitor interface to convert HTML to Markdown.
+ * Uses the Chain of Responsibility pattern for handling different node types.
+ */
+export class MarkdownConverter {
+    constructor() {
+        // Set up the chain of responsibility for handling different node types
+        this.handler = this.setupHandlerChain();
+    }
+    /**
+     * Converts a text node to Markdown, escaping special characters.
+     */
+    visitText(node) {
+        return (node.textContent || '').replace(/\n+/g, '').replace(/([<>])/g, '\\$1');
+    }
+    /**
+     * Converts an HTML anchor element to Markdown link syntax.
+     */
+    visitLink(node) {
+        var _a;
+        const linkText = this.collectTextContent(node);
+        const url = node.href || '';
+        // Handle links with formatted content vs plain text differently
+        const formattedText = node.childNodes.length === 1 && ((_a = node.firstChild) === null || _a === void 0 ? void 0 : _a.nodeType) === Node.TEXT_NODE
+            ? applyFormatting(linkText, node) // Plain text link
+            : Array.from(node.childNodes)
+                .map((child) => {
+                if (child.nodeType === Node.ELEMENT_NODE) {
+                    return applyFormatting(child.textContent || '', child);
+                }
+                return child.textContent || '';
+            })
+                .join(''); // Apply formatting for each formatted child node
+        return `[${formattedText}](${url} "${linkText.replace(/"/g, '\\"')}")`;
+    }
+    /**
+     * Converts an HTML heading element to Markdown heading syntax.
+     */
+    visitHeader(node, level) {
+        const headerContent = this.collectTextContent(node);
+        return '#'.repeat(level) + ' ' + headerContent + '\n';
+    }
+    /**
+     * Converts an HTML paragraph to Markdown format.
+     */
+    visitParagraph(node) {
+        const content = this.processChildren(node);
+        return content.trim() + '\n\n';
+    }
+    /**
+     * Applies Markdown formatting (bold, italic, etc.) to text content.
+     */
+    visitFormatting(node) {
+        var _a;
+        if (node.childNodes.length === 1 && ((_a = node.firstChild) === null || _a === void 0 ? void 0 : _a.nodeType) === Node.TEXT_NODE) {
+            const text = this.collectTextContent(node);
+            return applyFormatting(text, node);
+        }
+        return applyFormatting(this.visitGeneric(node), node);
+    }
+    /**
+     * Converts HTML code elements to Markdown inline code syntax.
+     */
+    visitCode(node) {
+        const codeContent = this.collectCodeContent(node);
+        if (codeContent.includes('\n')) {
+            return '```\n' + codeContent + '\n```\n';
+        }
+        else if (codeContent.includes('`')) {
+            return '`` ' + codeContent + ' ``';
+        }
+        else {
+            return `\`${codeContent}\``;
+        }
+    }
+    /**
+     * Handles generic HTML elements by processing their children.
+     */
+    visitGeneric(node) {
+        return this.processChildren(node);
+    }
+    /**
+     * Converts an HTML div element to Markdown format, adding a single newline.
+     */
+    visitDiv(node) {
+        const content = this.processChildren(node);
+        return content + '\n'; // Add a single newline for <div>
+    }
+    /**
+     * Converts an HTML br element to a newline in Markdown.
+     */
+    visitBr() {
+        return '\n'; // Single newline for <br>
+    }
+    /**
+     * Converts an HTML table row element to Markdown table row format.
+     */
+    visitTableRow(node) {
+        const cells = Array.from(node.children).map((cell) => {
+            return this.visitGeneric(cell).trim() || '';
+        });
+        return '||\n' + cells.join('\n|\n') + '\n||';
+    }
+    /**
+     * Converts an HTML table element to Markdown table format.
+     */
+    visitTable(node) {
+        const rows = [];
+        const tableRows = Array.from(node.querySelectorAll('tr'));
+        tableRows.forEach((row) => {
+            rows.push(this.visitTableRow(row));
+        });
+        return '\n\n#|\n' + rows.join('\n') + '\n|#\n\n';
+    }
+    /**
+     * Converts img tag to Markdown image format
+     */
+    visitImage(node) {
+        const imgElement = node;
+        const altText = imgElement.alt || '';
+        const src = imgElement.src || '';
+        return `![${altText}](${src})`;
+    }
+    /**
+     * Processes a single node using the handler chain.
+     */
+    processNode(node) {
+        const result = this.getHandler().handle(node, this);
+        return result;
+    }
+    /**
+     * Creates and links together handlers in a specific order implementing the Chain of Responsibility pattern.
+     * @returns The first handler in the chain
+     */
+    setupHandlerChain() {
+        // Create handlers for each type of node
+        const textHandler = new TextNodeHandler();
+        const linkHandler = new LinkHandler();
+        const headerHandler = new HeaderHandler();
+        const paragraphHandler = new ParagraphHandler();
+        const formattingHandler = new FormattingHandler();
+        const codeHandler = new CodeHandler();
+        const genericHandler = new GenericHandler();
+        const orderedListHandler = new OrderedListHandler();
+        const unorderedListHandler = new UnorderedListHandler();
+        const divHandler = new DivHandler();
+        const brHandler = new BrHandler();
+        const tableRowHandler = new TableRowHandler();
+        const tableHandler = new TableHandler();
+        const imageHandler = new ImageHandler(); // New handler for <img>
+        // Chain handlers together in priority order
+        textHandler
+            .setNext(linkHandler)
+            .setNext(headerHandler)
+            .setNext(paragraphHandler)
+            .setNext(divHandler)
+            .setNext(brHandler)
+            .setNext(orderedListHandler)
+            .setNext(unorderedListHandler)
+            .setNext(formattingHandler)
+            .setNext(codeHandler)
+            .setNext(imageHandler) // Add image handler
+            .setNext(tableHandler)
+            .setNext(tableRowHandler)
+            .setNext(genericHandler);
+        return textHandler;
+    }
+    /**
+     * Recursively collects and processes text content from a node and its children.
+     */
+    collectTextContent(node) {
+        // handle seo elements (hide it's content)
+        if (node.className === 'visually-hidden') {
+            return '';
+        }
+        if (node.nodeType === Node.TEXT_NODE) {
+            return this.visitText(node);
+        }
+        return Array.from(node.childNodes)
+            .map((child) => this.collectTextContent(child))
+            .join('');
+    }
+    /**
+     * Collects raw text content from code elements.
+     */
+    collectCodeContent(node) {
+        if (node.nodeType === Node.TEXT_NODE) {
+            return node.textContent || '';
+        }
+        return Array.from(node.childNodes)
+            .map((child) => this.collectCodeContent(child))
+            .join('');
+    }
+    /**
+     * Processes all child nodes of a given node.
+     */
+    processChildren(node) {
+        return Array.from(node.childNodes)
+            .map((child) => this.processNode(child))
+            .join('');
+    }
+    /**
+     * Gets the first handler in the chain.
+     */
+    getHandler() {
+        return this.handler;
+    }
+}

package/build/esm/markup/codemirror/html-to-markdown/handlers.d.ts

@@ -0,0 +1,104 @@
+import { HTMLNodeVisitor } from './converters';
+/**
+ * Base handler class implementing the Chain of Responsibility pattern for HTML node processing.
+ * Each concrete handler decides whether it can process a node or should pass it to the next handler.
+ */
+export declare abstract class NodeHandler {
+    protected next: NodeHandler | null;
+    /**
+     * Sets up the next handler in the chain
+     */
+    setNext(handler: NodeHandler): NodeHandler;
+    /**
+     * Process the given node or delegate to the next handler
+     */
+    abstract handle(node: Node, visitor: HTMLNodeVisitor): string;
+    /**
+     * Delegates processing to the next handler in the chain
+     */
+    protected handleNext(node: Node, visitor: HTMLNodeVisitor): string;
+}
+/**
+ * Handles text nodes, converting them to markdown text
+ */
+export declare class TextNodeHandler extends NodeHandler {
+    handle(node: Node, visitor: HTMLNodeVisitor): string;
+}
+/**
+ * Handles anchor elements, converting them to markdown links
+ */
+export declare class LinkHandler extends NodeHandler {
+    handle(node: Node, visitor: HTMLNodeVisitor): string;
+}
+/**
+ * Handles header elements (h1-h6), converting them to markdown headers
+ */
+export declare class HeaderHandler extends NodeHandler {
+    handle(node: Node, visitor: HTMLNodeVisitor): string;
+}
+/**
+ * Handles paragraph elements, converting them to markdown paragraphs
+ */
+export declare class ParagraphHandler extends NodeHandler {
+    handle(node: Node, visitor: HTMLNodeVisitor): string;
+}
+/**
+ * Handles text formatting elements (b, strong, i, em), converting them to markdown formatting
+ */
+export declare class FormattingHandler extends NodeHandler {
+    handle(node: Node, visitor: HTMLNodeVisitor): string;
+}
+/**
+ * Handles code elements, converting them to markdown code blocks or inline code
+ */
+export declare class CodeHandler extends NodeHandler {
+    handle(node: Node, visitor: HTMLNodeVisitor): string;
+}
+/**
+ * Fallback handler for any HTML elements not handled by other specific handlers
+ */
+export declare class GenericHandler extends NodeHandler {
+    handle(node: Node, visitor: HTMLNodeVisitor): string;
+}
+/**
+ * Handles ordered list elements, converting them to markdown ordered lists
+ */
+export declare class OrderedListHandler extends NodeHandler {
+    handle(node: Node, visitor: HTMLNodeVisitor): string;
+}
+/**
+ * Handles unordered list elements, converting them to markdown unordered lists
+ */
+export declare class UnorderedListHandler extends NodeHandler {
+    handle(node: Node, visitor: HTMLNodeVisitor): string;
+}
+/**
+ * Handles div elements, converting them to markdown paragraphs
+ */
+export declare class DivHandler extends NodeHandler {
+    handle(node: Node, visitor: HTMLNodeVisitor): string;
+}
+/**
+ * Handles br elements, converting them to markdown newlines
+ */
+export declare class BrHandler extends NodeHandler {
+    handle(node: Node, visitor: HTMLNodeVisitor): string;
+}
+/**
+ * Handles table row elements, converting them to markdown table rows
+ */
+export declare class TableRowHandler extends NodeHandler {
+    handle(node: Node, visitor: HTMLNodeVisitor): string;
+}
+/**
+ * Handles table elements, converting them to markdown tables
+ */
+export declare class TableHandler extends NodeHandler {
+    handle(node: Node, visitor: HTMLNodeVisitor): string;
+}
+/**
+ * Handles image elements, converting them to markdown images
+ */
+export declare class ImageHandler extends NodeHandler {
+    handle(node: Node, visitor: HTMLNodeVisitor): string;
+}