fix(richtext)!: HTML and Markdown parsing for links and edge cases

packages/richtext/package.json

@@ -94,9 +94,32 @@
     "release:dry": "release-it --dry-run"
   },
   "dependencies": {
-    "markdown-it": "^14.1.0",
-    "markdown-it-github": "^0.5.0",
-    "node-html-parser": "^7.0.1"
+    "@tiptap/core": "^3.10.2",
+    "@tiptap/extension-blockquote": "^3.10.2",
+    "@tiptap/extension-bold": "^3.10.2",
+    "@tiptap/extension-code": "^3.10.2",
+    "@tiptap/extension-code-block": "^3.10.2",
+    "@tiptap/extension-details": "^3.10.2",
+    "@tiptap/extension-document": "^3.10.2",
+    "@tiptap/extension-emoji": "^3.10.2",
+    "@tiptap/extension-hard-break": "^3.10.2",
+    "@tiptap/extension-heading": "^3.10.2",
+    "@tiptap/extension-highlight": "^3.10.2",
+    "@tiptap/extension-horizontal-rule": "^3.10.2",
+    "@tiptap/extension-image": "^3.10.2",
+    "@tiptap/extension-italic": "^3.10.2",
+    "@tiptap/extension-link": "^3.10.2",
+    "@tiptap/extension-list": "^3.10.2",
+    "@tiptap/extension-paragraph": "^3.10.2",
+    "@tiptap/extension-strike": "^3.10.2",
+    "@tiptap/extension-subscript": "^3.10.2",
+    "@tiptap/extension-superscript": "^3.10.2",
+    "@tiptap/extension-table": "^3.10.2",
+    "@tiptap/extension-text": "^3.10.2",
+    "@tiptap/extension-text-style": "^3.10.2",
+    "@tiptap/extension-underline": "^3.10.2",
+    "@tiptap/html": "^3.10.2",
+    "markdown-it": "^14.1.0"
   },
   "devDependencies": {
     "@arethetypeswrong/core": "^0.18.2",

packages/richtext/src/html-parser.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, it, vi } from 'vitest';
 import { htmlToStoryblokRichtext } from './html-parser';
-import { BlockTypes } from './types';
+import Heading from '@tiptap/extension-heading';
 
 describe('htmlToStoryblokRichtext', () => {
   it('parses headings', () => {
@@ -62,10 +62,10 @@
       type: 'doc',
       content: [
         {
-          type: 'bullet_list',
+          type: 'bulletList',
           content: [
             {
-              type: 'list_item',
+              type: 'listItem',
               content: [
                 {
                   type: 'paragraph',
@@ -76,7 +76,7 @@
               ],
             },
             {
-              type: 'list_item',
+              type: 'listItem',
               content: [
                 {
                   type: 'paragraph',
@@ -99,10 +99,10 @@
       type: 'doc',
       content: [
         {
-          type: 'ordered_list',
+          type: 'orderedList',
           content: [
             {
-              type: 'list_item',
+              type: 'listItem',
               content: [
                 {
                   type: 'paragraph',
@@ -113,7 +113,7 @@
               ],
             },
             {
-              type: 'list_item',
+              type: 'listItem',
               content: [
                 {
                   type: 'paragraph',
@@ -183,7 +183,7 @@
       type: 'doc',
       content: [
         {
-          type: 'code_block',
+          type: 'codeBlock',
           attrs: { language: 'js' },
           content: [
             { type: 'text', text: 'const foo = "bar";\nconsole.log(foo);\n' },
@@ -206,7 +206,7 @@
               type: 'tableRow',
               content: [
                 {
-                  type: 'tableCell',
+                  type: 'tableHeader',
                   content: [
                     {
                       type: 'paragraph',
@@ -216,7 +216,7 @@
                   attrs: { colspan: 1, rowspan: 1, colwidth: null },
                 },
                 {
-                  type: 'tableCell',
+                  type: 'tableHeader',
                   content: [
                     {
                       type: 'paragraph',
@@ -226,7 +226,7 @@
                   attrs: { colspan: 1, rowspan: 1, colwidth: null },
                 },
                 {
-                  type: 'tableCell',
+                  type: 'tableHeader',
                   content: [
                     {
                       type: 'paragraph',
@@ -389,43 +389,6 @@
     });
   });
 
-  it('distinguishes between anchor and link', () => {
-    const result = htmlToStoryblokRichtext(
-      '<a id="some-id">Anchor</a><a href="/home">Link</a>',
-    );
-    expect(result).toEqual({
-      type: 'doc',
-      content: [
-        {
-          text: 'Anchor',
-          type: 'text',
-          marks: [
-            {
-              type: 'anchor',
-              attrs: {
-                anchor: 'some-id',
-              },
-              content: [],
-            },
-          ],
-        },
-        {
-          text: 'Link',
-          type: 'text',
-          marks: [
-            {
-              type: 'link',
-              attrs: {
-                href: '/home',
-              },
-              content: [],
-            },
-          ],
-        },
-      ],
-    });
-  });
-
   it('parses strikethrough (delete, s) marks', () => {
     const html = '<p>This is <del>deleted text</del> <s>deleted text</s>.</p>';
     const result = htmlToStoryblokRichtext(html);
@@ -495,7 +458,7 @@
           ],
         },
         {
-          type: 'horizontal_rule',
+          type: 'horizontalRule',
         },
         {
           type: 'paragraph',
@@ -517,7 +480,7 @@
           type: 'paragraph',
           content: [
             { type: 'text', text: 'Line with a hard break here.' },
-            { type: 'hard_break' },
+            { type: 'hardBreak' },
             { type: 'text', text: 'Next line after break.' },
           ],
         },
@@ -548,8 +511,8 @@
               type: 'text',
               text: 'bold and italic',
               marks: [
-                { type: 'italic' },
                 { type: 'bold' },
+                { type: 'italic' },
               ],
             },
           ],
@@ -566,8 +529,8 @@
               type: 'text',
               text: 'italic',
               marks: [
-                { type: 'italic' },
                 { type: 'bold' },
+                { type: 'italic' },
               ],
             },
           ],
@@ -658,10 +621,10 @@
                   },
                 },
                 {
-                  type: 'italic',
+                  type: 'bold',
                 },
                 {
-                  type: 'bold',
+                  type: 'italic',
                 },
               ],
               text: 'bold and italic link',
@@ -758,7 +721,7 @@
     const resultDefault = htmlToStoryblokRichtext(
       '<p class="unsupported">Hello <a data-unsupported-custom-attribute="whatever" target="_blank" href="/home">world!</a></p>',
     );
     expect(resultDefault).toEqual({
       type: 'doc',
       content: [
         {
@@ -775,10 +738,11 @@
                 {
                   type: 'link',
                   attrs: {
+                    class: null,
                     href: '/home',
+                    rel: 'noopener noreferrer',
                     target: '_blank',
                   },
-                  content: [],
                 },
               ],
             },
@@ -795,7 +759,7 @@
         allowCustomAttributes: true,
       },
     );
     expect(resultAllowCustomAttributes).toEqual({
       type: 'doc',
       content: [
         {
@@ -812,13 +776,14 @@
                 {
                   type: 'link',
                   attrs: {
+                    class: null,
                     custom: {
                       'data-supported-custom-attribute': 'whatever',
                     },
                     href: '/home',
+                    rel: 'noopener noreferrer',
                     target: '_blank',
                   },
-                  content: [],
                 },
               ],
             },
@@ -830,7 +795,7 @@
 
   it('preserves styleOptions on inline elements', () => {
     const resultStyleOptions = htmlToStoryblokRichtext(
-      '<p>foo <span class="style-1 invalid-style">bar</span></p><p>baz <span class="style-2">qux</span></p><p>corge <span class="style-3">grault</span> <a href="/home" class="style-1">Home</a></p>',
+      '<p>foo <span class="style-1 invalid-style">bar</span></p><p>baz <span class="style-2">qux</span></p><p>corge <span class="style-3">grault</span> <a href="/home" class="style-1 invalid-style">Home</a></p>',
       {
         styleOptions: [
           { name: 'Style1', value: 'style-1' },
@@ -838,7 +803,7 @@
         ],
       },
     );
     expect(resultStyleOptions).toEqual({
       type: 'doc',
       content: [
         {
@@ -856,7 +821,6 @@
                   attrs: {
                     class: 'style-1',
                   },
-                  content: [],
                 },
               ],
               text: 'bar',
@@ -878,7 +842,6 @@
                   attrs: {
                     class: 'style-2',
                   },
-                  content: [],
                 },
               ],
               text: 'qux',
@@ -890,33 +853,20 @@
           content: [
             {
               type: 'text',
-              text: 'corge ',
-            },
-            {
-              type: 'text',
-              text: 'grault',
-            },
-            {
-              type: 'text',
-              text: ' ',
+              text: 'corge grault ',
             },
             {
               text: 'Home',
               type: 'text',
               marks: [
                 {
                   type: 'link',
-                  attrs: {
-                    href: '/home',
-                  },
-                  content: [],
-                },
-                {
-                  type: 'styled',
                   attrs: {
                     class: 'style-1',
+                    href: '/home',
+                    rel: null,
+                    target: null,
                   },
-                  content: [],
                 },
               ],
             },
@@ -945,36 +895,21 @@
     expect(warn).toHaveBeenCalledWith(expect.stringContaining('[StoryblokRichText] - `class` "unsupported" on `<span>` can not be transformed to rich text.'));
   });
 
-  it('throws an error when transformation is not supported', () => {
-    const unsupportedElements = [
-      '<div>Hello world!</div>',
-      '<iframe src="https://example.com"></iframe>',
-      '<script>alert("test")</script>',
-    ];
-    for (const element of unsupportedElements) {
-      expect(() => htmlToStoryblokRichtext(element))
-        .toThrowError(/No resolver specified for tag "(div|iframe|script)"!/);
-    }
-  });
-
-  it('throws an error when the source HTML is invalid', () => {
-    const html = '<ul><li>Not closed!<p></ul>';
-    expect(() => htmlToStoryblokRichtext(html))
-      .toThrowError('Invalid HTML: The provided string could not be parsed. Common causes include unclosed or mismatched tags!');
-  });
-
-  it('allows using custom resolvers', () => {
-    const html = '<h2>Custom Heading</h2><div>Custom Div</div>';
+  it('allows using custom Tiptap extensions', () => {
+    const html = '<h2>Custom Heading</h2>';
     const result = htmlToStoryblokRichtext(html, {
-      resolvers: {
-        h2: (_, content) => ({
-          type: BlockTypes.HEADING,
-          attrs: { level: 99 },
-          content,
-        }),
-        div: (_, content) => ({
-          type: BlockTypes.PARAGRAPH,
-          content,
+      tiptapExtensions: {
+        heading: Heading.extend({
+          addAttributes() {
+            return {
+              ...this.parent?.(),
+              level: {
+                parseHTML: () => {
+                  return 99;
+                },
+              },
+            };
+          },
         }),
       },
     });
@@ -988,10 +923,6 @@
             { type: 'text', text: 'Custom Heading' },
           ],
         },
-        {
-          type: 'paragraph',
-          content: [{ type: 'text', text: 'Custom Div' }],
-        },
       ],
     });
   });
@@ -1024,10 +955,10 @@
           ],
         },
         {
-          type: 'horizontal_rule',
+          type: 'horizontalRule',
         },
         {
-          type: 'code_block',
+          type: 'codeBlock',
           attrs: {},
           content: [{ type: 'text', text: 'Hello\nworld' }],
         },