@ckeditor/ckeditor5-markdown-gfm 45.2.1 → 46.0.0-alpha.1

package/src/html2markdown/html2markdown.js

@@ -5,131 +5,93 @@
 /**
  * @module markdown-gfm/html2markdown/html2markdown
  */
-import Turndown from 'turndown';
-// There no avaialble types for 'turndown-plugin-gfm' module and it's not worth to generate them on our own.
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-// @ts-ignore
-import { gfm } from 'turndown-plugin-gfm';
-const autolinkRegex = /* #__PURE__ */ new RegExp(
-// Prefix.
-/\b(?:(?:https?|ftp):\/\/|www\.)/.source +
-    // Domain name.
-    /(?![-_])(?:[-_a-z0-9\u00a1-\uffff]{1,63}\.)+(?:[a-z\u00a1-\uffff]{2,63})/.source +
-    // The rest.
-    /(?:[^\s<>]*)/.source, 'gi');
-class UpdatedTurndown extends Turndown {
-    escape(string) {
-        const originalEscape = super.escape;
-        function escape(string) {
-            string = originalEscape(string);
-            // Escape "<".
-            string = string.replace(/</g, '\\<');
-            return string;
-        }
-        // Urls should not be escaped. Our strategy is using a regex to find them and escape everything
-        // which is out of the matches parts.
-        let escaped = '';
-        let lastLinkEnd = 0;
-        for (const match of this._matchAutolink(string)) {
-            const index = match.index;
-            // Append the substring between the last match and the current one (if anything).
-            if (index > lastLinkEnd) {
-                escaped += escape(string.substring(lastLinkEnd, index));
-            }
-            const matchedURL = match[0];
-            escaped += matchedURL;
-            lastLinkEnd = index + matchedURL.length;
-        }
-        // Add text after the last link or at the string start if no matches.
-        if (lastLinkEnd < string.length) {
-            escaped += escape(string.substring(lastLinkEnd, string.length));
-        }
-        return escaped;
+import { unified } from 'unified';
+import rehypeParse from 'rehype-dom-parse';
+import rehypeRemark from 'rehype-remark';
+import remarkBreaks from 'remark-breaks';
+import remarkGfm from 'remark-gfm';
+import remarkStringify from 'remark-stringify';
+import { visit } from 'unist-util-visit';
+import { h } from 'hastscript';
+import { toHtml } from 'hast-util-to-html';
+export class MarkdownGfmHtmlToMd {
+    _processor;
+    _keepRawTags = [];
+    constructor() {
+        this._buildProcessor();
     }
-    /**
-     * Trimming end of link.
-     * https://github.github.com/gfm/#autolinks-extension-
-     */
-    *_matchAutolink(string) {
-        for (const match of string.matchAll(autolinkRegex)) {
-            const matched = match[0];
-            const length = this._autolinkFindEnd(matched);
-            yield Object.assign([matched.substring(0, length)], { index: match.index });
-            // We could adjust regex.lastIndex but it's not needed because what we skipped is for sure not a valid URL.
-        }
+    keep(tagName) {
+        this._keepRawTags.push(tagName.toLowerCase());
+        this._buildProcessor();
+    }
+    parse(html) {
+        return this._processor
+            .processSync(html)
+            .toString()
+            .trim();
     }
     /**
-     * Returns the new length of the link (after it would trim trailing characters).
+     * Returns handlers for raw HTML tags that should be kept in the Markdown output.
      */
-    _autolinkFindEnd(string) {
-        let length = string.length;
-        while (length > 0) {
-            const char = string[length - 1];
-            if ('?!.,:*_~\'"'.includes(char)) {
-                length--;
-            }
-            else if (char == ')') {
-                let openBrackets = 0;
-                for (let i = 0; i < length; i++) {
-                    if (string[i] == '(') {
-                        openBrackets++;
-                    }
-                    else if (string[i] == ')') {
-                        openBrackets--;
-                    }
-                }
-                // If there is fewer opening brackets then closing ones we should remove a closing bracket.
-                if (openBrackets < 0) {
-                    length--;
-                }
-                else {
-                    break;
-                }
-            }
-            else {
-                break;
-            }
-        }
-        return length;
+    _getRawTagsHandlers() {
+        return this._keepRawTags.reduce((handlers, tagName) => {
+            handlers[tagName] = (state, node) => {
+                const tag = toHtml(h(node.tagName, node.properties), {
+                    allowDangerousHtml: true,
+                    closeSelfClosing: true
+                });
+                const endOfOpeningTagIndex = tag.indexOf('>');
+                const openingTag = tag.slice(0, endOfOpeningTagIndex + 1);
+                const closingTag = tag.slice(endOfOpeningTagIndex + 1);
+                return [
+                    { type: 'html', value: openingTag },
+                    ...state.all(node),
+                    { type: 'html', value: closingTag }
+                ];
+            };
+            return handlers;
+        }, {});
+    }
+    _buildProcessor() {
+        this._processor = unified()
+            // Parse HTML to an abstract syntax tree (AST).
+            .use(rehypeParse)
+            // Removes `<label>` element from TODO lists.
+            .use(removeLabelFromCheckboxes)
+            // Turns HTML syntax tree into Markdown syntax tree.
+            .use(rehypeRemark, {
+            // Keeps allowed HTML tags.
+            handlers: this._getRawTagsHandlers()
+        })
+            // Adds support for GitHub Flavored Markdown (GFM).
+            .use(remarkGfm, {
+            singleTilde: true
+        })
+            // Replaces line breaks with `<br>` tags.
+            .use(remarkBreaks)
+            // Serializes Markdown syntax tree to Markdown string.
+            .use(remarkStringify, {
+            resourceLink: true,
+            emphasis: '_',
+            rule: '-',
+            handlers: {
+                break: () => '\n'
+            },
+            unsafe: [
+                { character: '<' }
+            ]
+        });
     }
 }
 /**
- * This is a helper class used by the {@link module:markdown-gfm/markdown Markdown feature} to convert HTML to Markdown.
+ * Removes `<label>` element from TODO lists, so that `<input>` and `text` are direct children of `<li>`.
  */
-export class HtmlToMarkdown {
-    _parser;
-    constructor() {
-        this._parser = this._createParser();
-    }
-    parse(html) {
-        return this._parser.turndown(html);
-    }
-    keep(elements) {
-        this._parser.keep(elements);
-    }
-    _createParser() {
-        const parser = new UpdatedTurndown({
-            codeBlockStyle: 'fenced',
-            hr: '---',
-            headingStyle: 'atx'
-        });
-        parser.use([
-            gfm,
-            this._todoList
-        ]);
-        return parser;
-    }
-    // This is a copy of the original taskListItems rule from turndown-plugin-gfm, with minor changes.
-    _todoList(turndown) {
-        turndown.addRule('taskListItems', {
-            filter(node) {
-                return node.type === 'checkbox' &&
-                    // Changes here as CKEditor outputs a deeper structure.
-                    (node.parentNode.nodeName === 'LI' || node.parentNode.parentNode.nodeName === 'LI');
-            },
-            replacement(content, node) {
-                return (node.checked ? '[x]' : '[ ]') + ' ';
+function removeLabelFromCheckboxes() {
+    return function (tree) {
+        visit(tree, 'element', (node, index, parent) => {
+            if (index !== null && node.tagName === 'label' && parent.type === 'element' && parent.tagName === 'li') {
+                parent.children.splice(index, 1, ...node.children);
             }
         });
-    }
+    };
 }

package/src/index.d.ts

@@ -5,8 +5,9 @@
 /**
  * @module markdown-gfm
  */
-export { default as Markdown } from './markdown.js';
-export { default as PasteFromMarkdownExperimental } from './pastefrommarkdownexperimental.js';
-export { default as GFMDataProcessor } from './gfmdataprocessor.js';
-export { MarkdownToHtml } from './markdown2html/markdown2html.js';
+export { Markdown } from './markdown.js';
+export { PasteFromMarkdownExperimental } from './pastefrommarkdownexperimental.js';
+export { MarkdownGfmDataProcessor } from './gfmdataprocessor.js';
+export { MarkdownGfmMdToHtml } from './markdown2html/markdown2html.js';
+export { MarkdownGfmHtmlToMd } from './html2markdown/html2markdown.js';
 import './augmentation.js';

package/src/index.js

@@ -5,8 +5,9 @@
 /**
  * @module markdown-gfm
  */
-export { default as Markdown } from './markdown.js';
-export { default as PasteFromMarkdownExperimental } from './pastefrommarkdownexperimental.js';
-export { default as GFMDataProcessor } from './gfmdataprocessor.js';
-export { MarkdownToHtml } from './markdown2html/markdown2html.js';
+export { Markdown } from './markdown.js';
+export { PasteFromMarkdownExperimental } from './pastefrommarkdownexperimental.js';
+export { MarkdownGfmDataProcessor } from './gfmdataprocessor.js';
+export { MarkdownGfmMdToHtml } from './markdown2html/markdown2html.js';
+export { MarkdownGfmHtmlToMd } from './html2markdown/html2markdown.js';
 import './augmentation.js';

package/src/markdown.d.ts

@@ -11,7 +11,7 @@ import { Plugin, type Editor } from 'ckeditor5/src/core.js';
  *
  * For a detailed overview, check the {@glink features/markdown Markdown feature} guide.
  */
-export default class Markdown extends Plugin {
+export declare class Markdown extends Plugin {
     /**
      * @inheritDoc
      */

package/src/markdown.js

@@ -6,19 +6,19 @@
  * @module markdown-gfm/markdown
  */
 import { Plugin } from 'ckeditor5/src/core.js';
-import GFMDataProcessor from './gfmdataprocessor.js';
+import { MarkdownGfmDataProcessor } from './gfmdataprocessor.js';
 /**
  * The GitHub Flavored Markdown (GFM) plugin.
  *
  * For a detailed overview, check the {@glink features/markdown Markdown feature} guide.
  */
-export default class Markdown extends Plugin {
+export class Markdown extends Plugin {
     /**
      * @inheritDoc
      */
     constructor(editor) {
         super(editor);
-        editor.data.processor = new GFMDataProcessor(editor.data.viewDocument);
+        editor.data.processor = new MarkdownGfmDataProcessor(editor.data.viewDocument);
     }
     /**
      * @inheritDoc

package/src/markdown2html/markdown2html.d.ts

@@ -5,9 +5,8 @@
 /**
  * This is a helper class used by the {@link module:markdown-gfm/markdown Markdown feature} to convert Markdown to HTML.
  */
-export declare class MarkdownToHtml {
-    private _parser;
-    private _options;
+export declare class MarkdownGfmMdToHtml {
+    private _processor;
     constructor();
     parse(markdown: string): string;
 }

package/src/markdown2html/markdown2html.js

@@ -5,45 +5,94 @@
 /**
  * @module markdown-gfm/markdown2html/markdown2html
  */
-import { marked } from 'marked';
+import { unified } from 'unified';
+import remarkGfm from 'remark-gfm';
+import remarkParse from 'remark-parse';
+import remarkRehype from 'remark-rehype';
+import remarkBreaks from 'remark-breaks';
+import rehypeStringify from 'rehype-dom-stringify';
+import { visit } from 'unist-util-visit';
+import { toHtml } from 'hast-util-to-html';
+import { fromDom } from 'hast-util-from-dom';
 /**
  * This is a helper class used by the {@link module:markdown-gfm/markdown Markdown feature} to convert Markdown to HTML.
  */
-export class MarkdownToHtml {
-    _parser;
-    _options = {
-        gfm: true,
-        breaks: true,
-        tables: true,
-        xhtml: true,
-        headerIds: false
-    };
+export class MarkdownGfmMdToHtml {
+    _processor;
     constructor() {
-        // Overrides.
-        marked.use({
-            tokenizer: {
-                // Disable the autolink rule in the lexer.
-                autolink: () => null,
-                url: () => null
-            },
-            renderer: {
-                checkbox(...args) {
-                    // Remove bogus space after <input type="checkbox"> because it would be preserved
-                    // by DomConverter as it's next to an inline object.
-                    return Object.getPrototypeOf(this).checkbox.call(this, ...args).trimRight();
-                },
-                code(...args) {
-                    // Since marked v1.2.8, every <code> gets a trailing "\n" whether it originally
-                    // ended with one or not (see https://github.com/markedjs/marked/issues/1884 to learn why).
-                    // This results in a redundant soft break in the model when loaded into the editor, which
-                    // is best prevented at this stage. See https://github.com/ckeditor/ckeditor5/issues/11124.
-                    return Object.getPrototypeOf(this).code.call(this, ...args).replace('\n</code>', '</code>');
-                }
-            }
-        });
-        this._parser = marked;
+        this._processor = unified()
+            // Parses Markdown to an abstract syntax tree (AST).
+            .use(remarkParse)
+            // Adds support for GitHub Flavored Markdown (GFM).
+            .use(remarkGfm, { singleTilde: true })
+            // Replaces line breaks with `<br>` tags.
+            .use(remarkBreaks)
+            // Turns markdown syntax tree to HTML syntax tree, ignoring embedded HTML.
+            .use(remarkRehype, { allowDangerousHtml: true })
+            // Handles HTML embedded in Markdown.
+            .use(rehypeDomRaw)
+            // Removes classes from list elements.
+            .use(deleteClassesFromToDoLists)
+            // Serializes HTML syntax tree to HTML string.
+            .use(rehypeStringify);
     }
     parse(markdown) {
-        return this._parser.parse(markdown, this._options);
+        return this._processor
+            .processSync(markdown)
+            .toString()
+            .replaceAll('\n</code>', '</code>');
     }
 }
+/**
+ * Rehype plugin that improves handling of the To-do lists by removing:
+ *  * default classes added to `<ul>`, `<ol>`, and `<li>` elements.
+ *  * bogus space after <input type="checkbox"> because it would be preserved by ViewDomConverter as it's next to an inline object.
+ */
+function deleteClassesFromToDoLists() {
+    return (tree) => {
+        visit(tree, 'element', (node) => {
+            if (node.tagName === 'ul' || node.tagName === 'ol' || node.tagName === 'li') {
+                node.children = node.children.filter(child => child.type !== 'text' || !!child.value.trim());
+                delete node.properties.className;
+            }
+        });
+    };
+}
+/**
+ * Rehype plugin to parse raw HTML nodes inside Markdown. This plugin is used instead of `rehype-raw` or `rehype-stringify`,
+ * because those plugins rely on `parse5` DOM parser which is heavy and redundant in the browser environment where we can
+ * use the native DOM APIs.
+ *
+ * This plugins finds any node (root or element) whose children include `raw` nodes and reparses them like so:
+ * 1. Serializes its children to an HTML string.
+ * 2. Reparses the HTML string using a `<template>` element.
+ * 3. Converts each parsed DOM node back into HAST nodes.
+ * 4. Replaces the original children with the newly created HAST nodes.
+ */
+function rehypeDomRaw() {
+    return (tree) => {
+        visit(tree, ['root', 'element'], (node) => {
+            /* istanbul ignore next -- @preserve */
+            if (!isNodeRootOrElement(node)) {
+                return;
+            }
+            // Only act on nodes with at least one raw child.
+            if (!node.children.some(child => child.type === 'raw')) {
+                return;
+            }
+            const template = document.createElement('template');
+            // Serialize all children to an HTML fragment.
+            template.innerHTML = toHtml({ type: 'root', children: node.children }, { allowDangerousHtml: true });
+            // Convert each parsed DOM node back into HAST and replace the original children.
+            node.children = Array
+                .from(template.content.childNodes)
+                .map(domNode => fromDom(domNode));
+        });
+    };
+}
+/**
+ * Only needed for the type guard.
+ */
+function isNodeRootOrElement(node) {
+    return (node.type === 'root' || node.type === 'element') && node.children;
+}

package/src/pastefrommarkdownexperimental.d.ts

@@ -12,7 +12,7 @@ import { ClipboardPipeline } from 'ckeditor5/src/clipboard.js';
  *
  * For a detailed overview, check the {@glink features/pasting/paste-markdown Paste Markdown feature} guide.
  */
-export default class PasteFromMarkdownExperimental extends Plugin {
+export declare class PasteFromMarkdownExperimental extends Plugin {
     /**
      * @internal
      */

package/src/pastefrommarkdownexperimental.js

@@ -7,14 +7,14 @@
  */
 import { Plugin } from 'ckeditor5/src/core.js';
 import { ClipboardPipeline } from 'ckeditor5/src/clipboard.js';
-import GFMDataProcessor from './gfmdataprocessor.js';
+import { MarkdownGfmDataProcessor } from './gfmdataprocessor.js';
 const ALLOWED_MARKDOWN_FIRST_LEVEL_TAGS = ['SPAN', 'BR', 'PRE', 'CODE'];
 /**
  * The GitHub Flavored Markdown (GFM) paste plugin.
  *
  * For a detailed overview, check the {@glink features/pasting/paste-markdown Paste Markdown feature} guide.
  */
-export default class PasteFromMarkdownExperimental extends Plugin {
+export class PasteFromMarkdownExperimental extends Plugin {
     /**
      * @internal
      */
@@ -24,7 +24,7 @@ export default class PasteFromMarkdownExperimental extends Plugin {
      */
     constructor(editor) {
         super(editor);
-        this._gfmDataProcessor = new GFMDataProcessor(editor.data.viewDocument);
+        this._gfmDataProcessor = new MarkdownGfmDataProcessor(editor.data.viewDocument);
     }
     /**
      * @inheritDoc