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

package/dist/index.js

@@ -4,174 +4,183 @@
  */
 import { Plugin } from '@ckeditor/ckeditor5-core/dist/index.js';
 import { HtmlDataProcessor } from '@ckeditor/ckeditor5-engine/dist/index.js';
-import { marked } from 'marked';
-import Turndown from 'turndown';
-import { gfm } from 'turndown-plugin-gfm';
+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';
+import rehypeParse from 'rehype-dom-parse';
+import rehypeRemark from 'rehype-remark';
+import remarkStringify from 'remark-stringify';
+import { h } from 'hastscript';
 import { ClipboardPipeline } from '@ckeditor/ckeditor5-clipboard/dist/index.js';
 
 /**
  * This is a helper class used by the {@link module:markdown-gfm/markdown Markdown feature} to convert Markdown to HTML.
- */ class MarkdownToHtml {
-    _parser;
-    _options = {
-        gfm: true,
-        breaks: true,
-        tables: true,
-        xhtml: true,
-        headerIds: false
-    };
+ */ 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>');
     }
 }
-
-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));
+/**
+ * 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;
             }
-            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;
-    }
-    /**
-	 * 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.
-        }
-    }
-    /**
-	 * Returns the new length of the link (after it would trim trailing characters).
-	 */ _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;
+        });
+    };
+}
+/**
+ * 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;
             }
-        }
-        return length;
-    }
+            // 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));
+        });
+    };
 }
 /**
- * This is a helper class used by the {@link module:markdown-gfm/markdown Markdown feature} to convert HTML to Markdown.
- */ class HtmlToMarkdown {
-    _parser;
+ * Only needed for the type guard.
+ */ function isNodeRootOrElement(node) {
+    return (node.type === 'root' || node.type === 'element') && node.children;
+}
+
+class MarkdownGfmHtmlToMd {
+    _processor;
+    _keepRawTags = [];
     constructor(){
-        this._parser = this._createParser();
+        this._buildProcessor();
+    }
+    keep(tagName) {
+        this._keepRawTags.push(tagName.toLowerCase());
+        this._buildProcessor();
     }
     parse(html) {
-        return this._parser.turndown(html);
+        return this._processor.processSync(html).toString().trim();
     }
-    keep(elements) {
-        this._parser.keep(elements);
+    /**
+	 * Returns handlers for raw HTML tags that should be kept in the Markdown output.
+	 */ _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;
+        }, {});
     }
-    _createParser() {
-        const parser = new UpdatedTurndown({
-            codeBlockStyle: 'fenced',
-            hr: '---',
-            headingStyle: 'atx'
+    _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: '<'
+                }
+            ]
         });
-        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]' : '[ ]') + ' ';
+}
+/**
+ * Removes `<label>` element from TODO lists, so that `<input>` and `text` are direct children of `<li>`.
+ */ 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);
             }
         });
-    }
+    };
 }
 
 /**
  * This data processor implementation uses GitHub Flavored Markdown as input/output data.
  *
  * See the {@glink features/markdown Markdown output} guide to learn more on how to enable it.
- */ class GFMDataProcessor {
+ */ class MarkdownGfmDataProcessor {
     /**
 	 * HTML data processor used to process HTML produced by the Markdown-to-HTML converter and the other way.
 	 */ _htmlDP;
@@ -185,8 +194,8 @@ class UpdatedTurndown extends Turndown {
 	 * Creates a new instance of the Markdown data processor class.
 	 */ constructor(document){
         this._htmlDP = new HtmlDataProcessor(document);
-        this._markdown2html = new MarkdownToHtml();
-        this._html2markdown = new HtmlToMarkdown();
+        this._markdown2html = new MarkdownGfmMdToHtml();
+        this._html2markdown = new MarkdownGfmHtmlToMd();
     }
     /**
 	 * Keeps the specified element in the output as HTML. This is useful if the editor contains
@@ -196,9 +205,7 @@ class UpdatedTurndown extends Turndown {
 	 *
 	 * @param element The element name to be kept.
 	 */ keepHtml(element) {
-        this._html2markdown.keep([
-            element
-        ]);
+        this._html2markdown.keep(element);
     }
     /**
 	 * Converts the provided Markdown string to a view tree.
@@ -210,7 +217,7 @@ class UpdatedTurndown extends Turndown {
         return this._htmlDP.toView(html);
     }
     /**
-	 * Converts the provided {@link module:engine/view/documentfragment~DocumentFragment} to data format &ndash; in this
+	 * Converts the provided {@link module:engine/view/documentfragment~ViewDocumentFragment} to data format &ndash; in this
 	 * case to a Markdown string.
 	 *
 	 * @returns Markdown string.
@@ -223,7 +230,7 @@ class UpdatedTurndown extends Turndown {
 	 * and not processed during the conversion from Markdown to view elements.
 	 *
 	 * The raw data can be later accessed by a
-	 * {@link module:engine/view/element~Element#getCustomProperty custom property of a view element} called `"$rawContent"`.
+	 * {@link module:engine/view/element~ViewElement#getCustomProperty custom property of a view element} called `"$rawContent"`.
 	 *
 	 * @param pattern The pattern matching all view elements whose content should
 	 * be treated as raw data.
@@ -245,7 +252,7 @@ class UpdatedTurndown extends Turndown {
 	 * @inheritDoc
 	 */ constructor(editor){
         super(editor);
-        editor.data.processor = new GFMDataProcessor(editor.data.viewDocument);
+        editor.data.processor = new MarkdownGfmDataProcessor(editor.data.viewDocument);
     }
     /**
 	 * @inheritDoc
@@ -277,7 +284,7 @@ const ALLOWED_MARKDOWN_FIRST_LEVEL_TAGS = [
 	 * @inheritDoc
 	 */ constructor(editor){
         super(editor);
-        this._gfmDataProcessor = new GFMDataProcessor(editor.data.viewDocument);
+        this._gfmDataProcessor = new MarkdownGfmDataProcessor(editor.data.viewDocument);
     }
     /**
 	 * @inheritDoc
@@ -398,5 +405,5 @@ const ALLOWED_MARKDOWN_FIRST_LEVEL_TAGS = [
     }
 }
 
-export { GFMDataProcessor, Markdown, MarkdownToHtml, PasteFromMarkdownExperimental };
+export { Markdown, MarkdownGfmDataProcessor, MarkdownGfmHtmlToMd, MarkdownGfmMdToHtml, PasteFromMarkdownExperimental };
 //# sourceMappingURL=index.js.map