Add support for title on links (#33)

croct-tech · Sep 25, 2024 · e179ed1 · e179ed1
1 parent 2e7dab2
commit e179ed1
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 1 deletion.
diff --git a/src/ast.ts b/src/ast.ts
@@ -16,6 +16,7 @@ type MarkdownNodeMap = {
     },
     link: {
         href: string,
+        title?: string,
         children: MarkdownNode,
     },
     image: {

diff --git a/src/parsing.ts b/src/parsing.ts
@@ -290,13 +290,14 @@ class MarkdownParser {
 
                 this.match('](');
 
-                const href = this.parseText(')');
+                const [href, titleWithEndQuote] = this.parseText(')').split(/\s+"/);
 
                 this.match(')');
 
                 return {
                     type: 'link',
                     href: href,
+                    title: titleWithEndQuote?.slice(0, -1) /* remove quote character at the end */,
                     children: label,
                     source: this.getSlice(startIndex, this.index),
                 };

diff --git a/src/rendering.ts b/src/rendering.ts
@@ -19,6 +19,7 @@ type VisitedMarkdownNodeMap<C> = {
     },
     link: {
         href: string,
+        title?: string,
         children: C,
     },
     image: {
@@ -92,6 +93,7 @@ function visit<T>(node: MarkdownNode, visitor: MarkdownRenderer<T>): T {
             return visitor.link({
                 type: node.type,
                 href: node.href,
+                title: node.title,
                 children: visit(node.children, visitor),
                 source: node.source,
             });

diff --git a/test/parsing.test.ts b/test/parsing.test.ts
@@ -1119,6 +1119,36 @@ describe('A Markdown parser function', () => {
                 ],
             },
         },
+        'link with title': {
+            input: 'Hello, [world](image.png "The world")!',
+            output: {
+                type: 'fragment',
+                source: 'Hello, [world](image.png "The world")!',
+                children: [
+                    {
+                        type: 'text',
+                        source: 'Hello, ',
+                        content: 'Hello, ',
+                    },
+                    {
+                        type: 'link',
+                        source: '[world](image.png "The world")',
+                        href: 'image.png',
+                        title: 'The world',
+                        children: {
+                            type: 'text',
+                            source: 'world',
+                            content: 'world',
+                        },
+                    },
+                    {
+                        type: 'text',
+                        source: '!',
+                        content: '!',
+                    },
+                ],
+            },
+        },
         image: {
             input: 'Hello, ![world](image.png)!',
             output: {

diff --git a/test/rendering.test.ts b/test/rendering.test.ts
@@ -65,6 +65,7 @@ describe('A Markdown render function', () => {
                 type: 'link',
                 source: node.source,
                 href: node.href,
+                title: node.title,
                 children: node.children,
             };
         }
@@ -86,6 +87,7 @@ describe('A Markdown render function', () => {
         '`Code`',
         '![Image](https://example.com/image.png)',
         '[Link](https://example.com)',
+        '[Link with title](https://example.com "Link title")',
     ].join('\n\n');
 
     const tree: MarkdownNode = {
@@ -195,6 +197,23 @@ describe('A Markdown render function', () => {
                     },
                 ],
             },
+            {
+                type: 'paragraph',
+                source: '[Link with title](https://example.com "Link title")',
+                children: [
+                    {
+                        type: 'link',
+                        source: '[Link with title](https://example.com "Link title")',
+                        href: 'https://example.com',
+                        title: 'Link title',
+                        children: {
+                            type: 'text',
+                            source: 'Link with title',
+                            content: 'Link with title',
+                        },
+                    },
+                ],
+            },
         ],
     };