@gravity-ui/markdown-editor 14.4.0 → 14.5.1

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;
+}

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

@@ -0,0 +1,215 @@
+/**
+ * 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 class NodeHandler {
+    constructor() {
+        this.next = null;
+    }
+    /**
+     * Sets up the next handler in the chain
+     */
+    setNext(handler) {
+        this.next = handler;
+        return handler;
+    }
+    /**
+     * Delegates processing to the next handler in the chain
+     */
+    handleNext(node, visitor) {
+        if (this.next) {
+            return this.next.handle(node, visitor);
+        }
+        return '';
+    }
+}
+/**
+ * Handles text nodes, converting them to markdown text
+ */
+export class TextNodeHandler extends NodeHandler {
+    handle(node, visitor) {
+        if (node.nodeType === Node.TEXT_NODE) {
+            return visitor.visitText(node);
+        }
+        return this.handleNext(node, visitor);
+    }
+}
+/**
+ * Handles anchor elements, converting them to markdown links
+ */
+export class LinkHandler extends NodeHandler {
+    handle(node, visitor) {
+        if (node.nodeType === Node.ELEMENT_NODE &&
+            node.tagName.toLowerCase() === 'a') {
+            return visitor.visitLink(node);
+        }
+        return this.handleNext(node, visitor);
+    }
+}
+/**
+ * Handles header elements (h1-h6), converting them to markdown headers
+ */
+export class HeaderHandler extends NodeHandler {
+    handle(node, visitor) {
+        if (node.nodeType !== Node.ELEMENT_NODE) {
+            return this.handleNext(node, visitor);
+        }
+        const tagName = node.tagName.toLowerCase();
+        const headerMatch = tagName.match(/^h([1-6])$/);
+        if (headerMatch) {
+            const headerLevel = parseInt(headerMatch[1], 10);
+            return visitor.visitHeader(node, headerLevel);
+        }
+        return this.handleNext(node, visitor);
+    }
+}
+/**
+ * Handles paragraph elements, converting them to markdown paragraphs
+ */
+export class ParagraphHandler extends NodeHandler {
+    handle(node, visitor) {
+        if (node.nodeType !== Node.ELEMENT_NODE) {
+            return this.handleNext(node, visitor);
+        }
+        if (node.tagName.toLowerCase() === 'p') {
+            return visitor.visitParagraph(node);
+        }
+        return this.handleNext(node, visitor);
+    }
+}
+/**
+ * Handles text formatting elements (b, strong, i, em), converting them to markdown formatting
+ */
+export class FormattingHandler extends NodeHandler {
+    handle(node, visitor) {
+        var _a;
+        if (node.nodeType !== Node.ELEMENT_NODE) {
+            return this.handleNext(node, visitor);
+        }
+        const element = node;
+        const tagName = element.tagName.toLowerCase();
+        const formattingTags = ['b', 'strong', 'i', 'em', 'span'];
+        if (formattingTags.includes(tagName) &&
+            !['a', 'code', 'pre'].includes(((_a = element.parentElement) === null || _a === void 0 ? void 0 : _a.tagName.toLowerCase()) || '')) {
+            return visitor.visitFormatting(element);
+        }
+        return this.handleNext(node, visitor);
+    }
+}
+/**
+ * Handles code elements, converting them to markdown code blocks or inline code
+ */
+export class CodeHandler extends NodeHandler {
+    handle(node, visitor) {
+        if (node.nodeType !== Node.ELEMENT_NODE) {
+            return this.handleNext(node, visitor);
+        }
+        if (node.tagName.toLowerCase() === 'code' ||
+            node.tagName.toLowerCase() === 'pre') {
+            return visitor.visitCode(node);
+        }
+        return this.handleNext(node, visitor);
+    }
+}
+/**
+ * Fallback handler for any HTML elements not handled by other specific handlers
+ */
+export class GenericHandler extends NodeHandler {
+    handle(node, visitor) {
+        return visitor.visitGeneric(node);
+    }
+}
+/**
+ * Handles ordered list elements, converting them to markdown ordered lists
+ */
+export class OrderedListHandler extends NodeHandler {
+    handle(node, visitor) {
+        if (node.nodeType === Node.ELEMENT_NODE &&
+            node.tagName.toLowerCase() === 'ol') {
+            const items = Array.from(node.childNodes)
+                .filter((child) => child.nodeType === Node.ELEMENT_NODE &&
+                child.tagName.toLowerCase() === 'li')
+                .map((item, index) => `${index + 1}. ${visitor.visitGeneric(item)}`)
+                .join('\n');
+            return items + '\n';
+        }
+        return this.handleNext(node, visitor);
+    }
+}
+/**
+ * Handles unordered list elements, converting them to markdown unordered lists
+ */
+export class UnorderedListHandler extends NodeHandler {
+    handle(node, visitor) {
+        if (node.nodeType === Node.ELEMENT_NODE &&
+            node.tagName.toLowerCase() === 'ul') {
+            const items = Array.from(node.childNodes)
+                .filter((child) => child.nodeType === Node.ELEMENT_NODE &&
+                child.tagName.toLowerCase() === 'li')
+                .map((item) => `- ${visitor.visitGeneric(item)}`)
+                .join('\n');
+            return items + '\n';
+        }
+        return this.handleNext(node, visitor);
+    }
+}
+/**
+ * Handles div elements, converting them to markdown paragraphs
+ */
+export class DivHandler extends NodeHandler {
+    handle(node, visitor) {
+        if (node.nodeType === Node.ELEMENT_NODE &&
+            node.tagName.toLowerCase() === 'div') {
+            return visitor.visitDiv(node);
+        }
+        return this.handleNext(node, visitor);
+    }
+}
+/**
+ * Handles br elements, converting them to markdown newlines
+ */
+export class BrHandler extends NodeHandler {
+    handle(node, visitor) {
+        if (node.nodeType === Node.ELEMENT_NODE &&
+            node.tagName.toLowerCase() === 'br') {
+            return visitor.visitBr();
+        }
+        return this.handleNext(node, visitor);
+    }
+}
+/**
+ * Handles table row elements, converting them to markdown table rows
+ */
+export class TableRowHandler extends NodeHandler {
+    handle(node, visitor) {
+        if (node.nodeType === Node.ELEMENT_NODE &&
+            node.tagName.toLowerCase() === 'tr') {
+            return visitor.visitTableRow(node);
+        }
+        return this.handleNext(node, visitor);
+    }
+}
+/**
+ * Handles table elements, converting them to markdown tables
+ */
+export class TableHandler extends NodeHandler {
+    handle(node, visitor) {
+        if (node.nodeType === Node.ELEMENT_NODE &&
+            node.tagName.toLowerCase() === 'table') {
+            return visitor.visitTable(node);
+        }
+        return this.handleNext(node, visitor);
+    }
+}
+/**
+ * Handles image elements, converting them to markdown images
+ */
+export class ImageHandler extends NodeHandler {
+    handle(node, visitor) {
+        if (node.nodeType === Node.ELEMENT_NODE &&
+            node.tagName.toLowerCase() === 'img') {
+            return visitor.visitImage(node);
+        }
+        return this.handleNext(node, visitor);
+    }
+}

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

@@ -0,0 +1 @@
+export declare function applyFormatting(text: string, element: HTMLElement): string;

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

@@ -0,0 +1,17 @@
+export function applyFormatting(text, element) {
+    // Check for italic formatting (either through tags or CSS)
+    const hasItalic = element.tagName.toLowerCase() === 'i' ||
+        element.tagName.toLowerCase() === 'em' ||
+        element.style.fontStyle === 'italic';
+    // Check for bold formatting (either through tags or CSS font-weight)
+    const hasBold = element.tagName.toLowerCase() === 'b' ||
+        element.tagName.toLowerCase() === 'strong' ||
+        parseInt(element.style.fontWeight, 10) >= 600;
+    // Apply markdown formatting in specific order
+    let formatted = text;
+    if (hasItalic)
+        formatted = `*${formatted}*`; // Wrap in single asterisks for italic
+    if (hasBold)
+        formatted = `**${formatted}**`; // Wrap in double asterisks for bold
+    return formatted;
+}

package/build/esm/markup/commands/inline.js

@@ -1,4 +1,5 @@
 import { snippet } from '@codemirror/autocomplete';
+import { DirectiveSyntaxFacet } from '../codemirror';
 const defaultLinkSnippet = snippet(`[#{2:link}](#{1:url} "#{3:title}")`);
 export const insertLink = ({ state, dispatch }) => {
     const { from, to, empty } = state.selection.main;
@@ -41,16 +42,25 @@ export function insertImages(images) {
         return true;
     };
 }
+const fileToCurlySyntax = (file) => {
+    const attrsStr = Object.entries(file)
+        .map(([key, value]) => `${key}="${value.replace('"', '')}"`)
+        .join(' ');
+    return `{% file ${attrsStr} %}`;
+};
+const fileToDirectiveSyntax = (file) => {
+    const { src, name, type } = file;
+    let markup = `:file[${name}](${src})`;
+    if (type)
+        markup += `{type="${type}"}`;
+    return markup;
+};
 export const insertFiles = (files) => {
     return ({ state, dispatch }) => {
-        const markup = files
-            .map((attrs) => {
-            const attrsStr = Object.entries(attrs)
-                .map(([key, value]) => `${key}="${value.replace('"', '')}"`)
-                .join(' ');
-            return `{% file ${attrsStr} %}`;
-        })
-            .join(' ');
+        const serializer = state.facet(DirectiveSyntaxFacet).shouldInsertDirectiveMarkup('yfmFile')
+            ? fileToDirectiveSyntax
+            : fileToCurlySyntax;
+        const markup = files.map(serializer).join(' ');
         const tr = state.changeByRange((range) => {
             const changes = state.changes({ from: range.from, to: range.to, insert: markup });
             return { changes, range: range.map(changes) };

package/build/esm/utils/clipboard.d.ts

@@ -3,6 +3,7 @@ export declare enum DataTransferType {
     Text = "text/plain",
     Html = "text/html",
     Yfm = "text/yfm",
+    Rtf = "text/rtf",
     UriList = "text/uri-list",
     VSCodeData = "vscode-editor-data",
     Files = "Files"
@@ -10,3 +11,16 @@ export declare enum DataTransferType {
 export declare function isFilesOnly({ types }: DataTransfer): boolean;
 export declare function isFilesFromHtml({ types }: DataTransfer): boolean;
 export declare function isImageFile(file: File): boolean;
+export declare function isVSCode(data: DataTransfer): boolean;
+export declare type VSCodeData = {
+    version: number;
+    isFromEmptySelection: boolean;
+    multicursorText: null | string;
+    mode: string;
+    [key: string]: unknown;
+};
+export declare function tryParseVSCodeData(data: DataTransfer): VSCodeData | undefined;
+/**
+ * Checks if HTML conversion should be skipped based on clipboard contents.
+ */
+export declare function shouldSkipHtmlConversion(clipboardData: DataTransfer): boolean;

package/build/esm/utils/clipboard.js

@@ -4,6 +4,7 @@ export var DataTransferType;
     DataTransferType["Text"] = "text/plain";
     DataTransferType["Html"] = "text/html";
     DataTransferType["Yfm"] = "text/yfm";
+    DataTransferType["Rtf"] = "text/rtf";
     DataTransferType["UriList"] = "text/uri-list";
     DataTransferType["VSCodeData"] = "vscode-editor-data";
     DataTransferType["Files"] = "Files";
@@ -19,3 +20,34 @@ export function isFilesFromHtml({ types }) {
 export function isImageFile(file) {
     return file.type.startsWith('image/');
 }
+export function isVSCode(data) {
+    return data.types.includes(DataTransferType.VSCodeData);
+}
+export function tryParseVSCodeData(data) {
+    try {
+        return JSON.parse(data.getData(DataTransferType.VSCodeData));
+    }
+    catch (e) {
+        console.error(e);
+        return undefined;
+    }
+}
+/**
+ * Checks if HTML conversion should be skipped based on clipboard contents.
+ */
+export function shouldSkipHtmlConversion(clipboardData) {
+    const hasHtml = clipboardData.types.includes(DataTransferType.Html);
+    // If there's no HTML content, skip conversion
+    if (!hasHtml)
+        return true;
+    // Check for standard HTML clipboard (text/plain + text/html)
+    if (clipboardData.types.length === 2)
+        return false;
+    // Check for WebStorm/Safari case (includes RTF)
+    if (clipboardData.types.length === 3) {
+        const rtf = clipboardData.getData(DataTransferType.Rtf);
+        return rtf.indexOf('\fmodern JetBrains') > 0;
+    }
+    // Skip conversion for any other cases
+    return true;
+}

package/build/esm/version.js

@@ -1,2 +1,2 @@
 /** During build process, the current version will be injected here */
-export const VERSION = typeof '14.4.0' !== 'undefined' ? '14.4.0' : 'unknown';
+export const VERSION = typeof '14.5.1' !== 'undefined' ? '14.5.1' : 'unknown';

package/build/styles.css

@@ -455,7 +455,7 @@
   position: absolute;
   inset: var(--g-md-toolbar-sticky-inset, -4px);
   content: "";
-  border: 1px solid var(--g-color-line-generic-solid);
+  border: var(--g-md-toolbar-sticky-border, 1px solid var(--g-color-line-generic-solid));
   border-radius: 4px;
   background-color: var(--g-color-base-background);
 }