fix: Add support for literal autolinks (GFM based) (Doist#303)

package.json

@@ -140,7 +140,9 @@
         "emoji-regex": "^10.2.1",
         "hast-util-is-element": "^2.1.0",
         "lodash-es": "^4.17.21",
+        "mdast-util-gfm-autolink-literal": "^1.0.0",
         "mdast-util-gfm-strikethrough": "^1.0.0",
+        "micromark-extension-gfm-autolink-literal": "^1.0.0",
         "micromark-extension-gfm-strikethrough": "^1.0.0",
         "react": "^17.0.0 || ^18.0.0",
         "react-dom": "^17.0.0 || ^18.0.0",

src/serializers/html/html.test.ts

@@ -216,10 +216,13 @@ _________________
 ---`
 
 const MARKDOWN_INPUT_LINKS = `My favorite search engine is [Duck Duck Go](https://duckduckgo.com).
-My favorite search engine is [Duck Duck Go](https://duckduckgo.com "The best search engine for privacy").`
+My favorite search engine is [Duck Duck Go](https://duckduckgo.com "The best search engine for privacy").
+My favorite search engine is https://duckduckgo.com.`
 
 const MARKDOWN_INPUT_STYLED_LINKS = `I love supporting the **[EFF](https://eff.org)**.
+I love supporting the **https://eff.org**.
 This is the *[Markdown Guide](https://www.markdownguide.org)*.
+This is the *https://www.markdownguide.org*.
 See the section on [\`code\`](#code).`
 
 describe('HTML Serializer', () => {
@@ -337,13 +340,13 @@ describe('HTML Serializer', () => {
 
             test('links syntax is preserved', () => {
                 expect(htmlSerializer.serialize(MARKDOWN_INPUT_LINKS)).toBe(
-                    '<p>My favorite search engine is [Duck Duck Go](https://duckduckgo.com).</p><p>My favorite search engine is [Duck Duck Go](https://duckduckgo.com &quot;The best search engine for privacy&quot;).</p>',
+                    '<p>My favorite search engine is [Duck Duck Go](https://duckduckgo.com).</p><p>My favorite search engine is [Duck Duck Go](https://duckduckgo.com &quot;The best search engine for privacy&quot;).</p><p>My favorite search engine is https://duckduckgo.com.</p>',
                 )
             })
 
             test('styled links syntax is preserved', () => {
                 expect(htmlSerializer.serialize(MARKDOWN_INPUT_STYLED_LINKS)).toBe(
-                    '<p>I love supporting the **[EFF](https://eff.org)**.</p><p>This is the *[Markdown Guide](https://www.markdownguide.org)*.</p><p>See the section on [`code`](#code).</p>',
+                    '<p>I love supporting the **[EFF](https://eff.org)**.</p><p>I love supporting the **https://eff.org**.</p><p>This is the *[Markdown Guide](https://www.markdownguide.org)*.</p><p>This is the *https://www.markdownguide.org*.</p><p>See the section on [`code`](#code).</p>',
                 )
             })
         })
@@ -491,13 +494,13 @@ Answer: [Doist Frontend](channel://190200)`),
 
             test('links HTML output is correct', () => {
                 expect(htmlSerializer.serialize(MARKDOWN_INPUT_LINKS)).toBe(
-                    '<p>My favorite search engine is <a href="https://duckduckgo.com">Duck Duck Go</a>.<br>My favorite search engine is <a href="https://duckduckgo.com" title="The best search engine for privacy">Duck Duck Go</a>.</p>',
+                    '<p>My favorite search engine is <a href="https://duckduckgo.com">Duck Duck Go</a>.<br>My favorite search engine is <a href="https://duckduckgo.com" title="The best search engine for privacy">Duck Duck Go</a>.<br>My favorite search engine is <a href="https://duckduckgo.com">https://duckduckgo.com</a>.</p>',
                 )
             })
 
             test('styled links HTML output is correct', () => {
                 expect(htmlSerializer.serialize(MARKDOWN_INPUT_STYLED_LINKS)).toBe(
-                    '<p>I love supporting the <strong><a href="https://eff.org">EFF</a></strong>.<br>This is the <em><a href="https://www.markdownguide.org">Markdown Guide</a></em>.<br>See the section on <a href="#code"><code>code</code></a>.</p>',
+                    '<p>I love supporting the <strong><a href="https://eff.org">EFF</a></strong>.<br>I love supporting the <strong><a href="https://eff.org">https://eff.org</a></strong>.<br>This is the <em><a href="https://www.markdownguide.org">Markdown Guide</a></em>.<br>This is the <em><a href="https://www.markdownguide.org">https://www.markdownguide.org</a></em>.<br>See the section on <a href="#code"><code>code</code></a>.</p>',
                 )
             })
         })
@@ -669,13 +672,16 @@ I need to add another paragraph below the second list item.
             test('links HTML output is preserved', () => {
                 expect(htmlSerializer.serialize(MARKDOWN_INPUT_LINKS))
                     .toBe(`<p>My favorite search engine is [Duck Duck Go](https://duckduckgo.com).
-My favorite search engine is [Duck Duck Go](https://duckduckgo.com "The best search engine for privacy").</p>`)
+My favorite search engine is [Duck Duck Go](https://duckduckgo.com "The best search engine for privacy").
+My favorite search engine is https://duckduckgo.com.</p>`)
             })
 
             test('styled links HTML output is preserved', () => {
                 expect(htmlSerializer.serialize(MARKDOWN_INPUT_STYLED_LINKS))
                     .toBe(`<p>I love supporting the **[EFF](https://eff.org)**.
+I love supporting the **https://eff.org**.
 This is the *[Markdown Guide](https://www.markdownguide.org)*.
+This is the *https://www.markdownguide.org*.
 See the section on [\`code\`](#code).</p>`)
             })
         })

src/serializers/html/html.ts

@@ -12,6 +12,7 @@ import { rehypeCodeBlock } from './plugins/rehype-code-block'
 import { rehypeImage } from './plugins/rehype-image'
 import { rehypeSuggestions } from './plugins/rehype-suggestions'
 import { rehypeTaskList } from './plugins/rehype-task-list'
+import { remarkAutolinkLiteral } from './plugins/remark-autolink-literal'
 import { remarkDisableConstructs } from './plugins/remark-disable-constructs'
 import { remarkStrikethrough } from './plugins/remark-strikethrough'
 
@@ -106,6 +107,12 @@ function createHTMLSerializer(schema: Schema): HTMLSerializerReturnType {
         unifiedProcessor.use(remarkStrikethrough)
     }
 
+    // Configure the unified processor to use a custom plugin to add support for the autolink
+    // literals extension from the GitHub Flavored Markdown (GFM) specification
+    if (schema.marks.link) {
+        unifiedProcessor.use(remarkAutolinkLiteral)
+    }
+
     // Configure the unified processor with an official plugin to convert Markdown into HTML to
     // support rehype (a tool that transforms HTML with plugins), followed by another official
     // plugin to minify whitespace between tags (prevents line feeds from appearing as blank)

src/serializers/html/plugins/remark-autolink-literal.ts

@@ -0,0 +1,36 @@
+import {
+    gfmAutolinkLiteralFromMarkdown,
+    gfmAutolinkLiteralToMarkdown,
+} from 'mdast-util-gfm-autolink-literal'
+import { gfmAutolinkLiteral } from 'micromark-extension-gfm-autolink-literal'
+
+import type { Processor } from 'unified'
+
+/**
+ * A remark plugin to add support for the autolink literals extension extension from the GitHub
+ * Flavored Markdown (GFM) specification.
+ *
+ * This is an standalone plugin which makes use of both the `mdast-util-gfm-autolink-literal` and
+ * `micromark-extension-gfm-autolink-literal` packages, and the implementation is inspired by the
+ * third-party `remark-gfm` plugin.
+ *
+ * The reason why we don't use `remark-gfm` directly is because we don't want to support all other
+ * GFM features (footnotes, tables, tagfilter, and tasklists).
+ *
+ * @param options Configuration options for the plugin.
+ */
+function remarkAutolinkLiteral(this: Processor) {
+    const data = this.data()
+
+    function add(field: string, value: unknown) {
+        const list = (data[field] ? data[field] : (data[field] = [])) as unknown[]
+
+        list.push(value)
+    }
+
+    add('micromarkExtensions', gfmAutolinkLiteral)
+    add('fromMarkdownExtensions', gfmAutolinkLiteralFromMarkdown)
+    add('toMarkdownExtensions', gfmAutolinkLiteralToMarkdown)
+}
+
+export { remarkAutolinkLiteral }

src/serializers/html/plugins/remark-strikethrough.ts

@@ -16,7 +16,7 @@ import type { Processor } from 'unified'
  * third-party `remark-gfm` plugin.
  *
  * The reason why we don't use `remark-gfm` directly is because we don't want to support all other
- * GFM features (autolink literals, footnotes, tables, and tasklists).
+ * GFM features (footnotes, tables, tagfilter, and tasklists).
  *
  * @param options Configuration options for the plugin.
  */