feat(serializers): support more HTML tags (#2)

* docs(readme.md): add references, compatible environments and implementation details * feat(serializers): support more HTML tags * feat(htmltoslate): support text tags inside a sentence * style(*tags.ts): add EOL * build(package.json): remove dependency as not required
cloudbeds · Nov 24, 2022 · 84a09a8 · 84a09a8
1 parent b0cde46
commit 84a09a8
Show file tree

Hide file tree

Showing 7 changed files with 402 additions and 157 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # slate-serializers
 
-A collection of serializers to convert Slate JSON objects to various formats and vice versa.
+A collection of serializers to convert [Slate](https://www.npmjs.com/package/slate) JSON objects to various formats and vice versa. Designed to work in both Node.js and browser environments.
 
 Serializers included so far:
 
@@ -47,6 +47,22 @@ const serializedToHtml = slateToHtml(slate)
 const serializedToSlate = htmlToSlate(serializedToHtml)
 ```
 
+## Details
+
+### slateToHtml
+
+Based on logic in [Deserializing | Serializing | Slate](https://docs.slatejs.org/concepts/10-serializing#deserializing).
+
+[htmlparser2](https://www.npmjs.com/package/htmlparser2) is used to parse HTML instead of the `DOMHandler` object. Rationale:
+
+- Works in all environments, including Node.js.
+- Speed - `htmlparser2` is the fastest HTML parser.
+- Forgiving regarding HTML spec compliance.
+
+### htmlToSlate
+
+Based on logic in [HTML | Serializing | Slate](https://docs.slatejs.org/concepts/10-serializing#html).
+
 ## Development
 
 ### Commits

diff --git a/src/__tests__/fixtures/elementTags.ts b/src/__tests__/fixtures/elementTags.ts
@@ -0,0 +1,208 @@
+interface Ifixture {
+  name: string
+  html: string
+  slate: object[]
+}
+
+export const fixtures: Ifixture[] = [
+  {
+    name: "blockquote",
+    html: "<blockquote>Blockquote</blockquote>",
+    slate: [
+      {
+        children: [
+          {
+            text: 'Blockquote',
+          },
+        ],
+        type: 'blockquote',
+      },
+    ]
+  },
+  {
+    name: "headings",
+    html: "<h1>Heading 1</h1><h2>Heading 2</h2><h3>Heading 3</h3><h4>Heading 4</h4><h5>Heading 5</h5><h6>Heading 6</h6>",
+    slate: [
+      {
+        children: [
+          {
+            text: 'Heading 1',
+          },
+        ],
+        type: 'h1',
+      },
+      {
+        children: [
+          {
+            text: 'Heading 2',
+          },
+        ],
+        type: 'h2',
+      },
+      {
+        children: [
+          {
+            text: 'Heading 3',
+          },
+        ],
+        type: 'h3',
+      },
+      {
+        children: [
+          {
+            text: 'Heading 4',
+          },
+        ],
+        type: 'h4',
+      },
+      {
+        children: [
+          {
+            text: 'Heading 5',
+          },
+        ],
+        type: 'h5',
+      },
+      {
+        children: [
+          {
+            text: 'Heading 6',
+          },
+        ],
+        type: 'h6',
+      },
+    ]
+  },
+  {
+    name: "paragraph",
+    html: "<p>Paragraph 1</p>",
+    slate: [
+      {
+        children: [
+          {
+            text: 'Paragraph 1',
+          },
+        ],
+        type: 'p',
+      },
+    ]
+  },
+  {
+    name: "link",
+    html: '<a href="https://github.com/thompsonsj/slate-serializers">Slate Serializers | GitHub</a>',
+    slate: [
+      {
+        children: [
+          {
+            text: 'Slate Serializers | GitHub',
+          },
+        ],
+        newTab: false,
+        type: 'link',
+        url: 'https://github.com/thompsonsj/slate-serializers',
+      },
+    ]
+  },
+  {
+    name: "unordered list",
+    html: '<ul><li>Item 1</li><li>Item 2</li></ul>',
+    slate: [
+      {
+        children: [
+          {
+            children: [
+              {
+                text: 'Item 1',
+              },
+            ],
+            type: 'li',
+          },
+          {
+            children: [
+              {
+                text: 'Item 2',
+              },
+            ],
+            type: 'li',
+          },
+        ],
+        type: 'ul',
+      },
+    ]
+  },
+  {
+    name: "nested unordered list",
+    html: '<ul><li>Item 1<ul><li>Nested item 1</li><li>Nested item 2</li></ul></li><li>Item 2</li></ul>',
+    slate: [
+      {
+        children: [
+          {
+            children: [
+              {
+                text: 'Item 1',
+              },
+              {
+                children: [
+                  {
+                    children: [
+                      {
+                        text: 'Nested item 1',
+                      },
+                    ],
+                    type: "li"
+                  },
+                  {
+                    children: [
+                      {
+                        text: 'Nested item 2',
+                      },
+                    ],
+                    type: "li"
+                  }
+                ],
+                type: 'ul'
+              },
+            ],
+            type: 'li',
+          },
+          {
+            children: [
+              {
+                text: 'Item 2',
+              },
+            ],
+            type: 'li',
+          },
+        ],
+        type: 'ul',
+      },
+    ]
+  },
+  {
+    name: "ordered list",
+    html: '<ol><li>Item 1</li><li>Item 2</li></ol>',
+    slate: [
+      {
+        children: [
+          {
+            children: [
+              {
+                text: 'Item 1',
+              },
+            ],
+            type: 'li',
+          },
+          {
+            children: [
+              {
+                text: 'Item 2',
+              },
+            ],
+            type: 'li',
+          },
+        ],
+        type: 'ol',
+      },
+    ]
+  },
+]
diff --git a/src/__tests__/fixtures/textTags.ts b/src/__tests__/fixtures/textTags.ts
@@ -0,0 +1,92 @@
+interface Ifixture {
+  name: string
+  html: string
+  slate: object[]
+}
+
+export const fixtures: Ifixture[] = [
+  {
+    name: "strong",
+    html: "<strong>Bold</strong>",
+    slate: [
+      {
+        children: [
+          {
+            bold: true,
+            text: "Bold"
+          }
+        ],
+      },
+    ],
+  },
+  {
+    name: "strong in paragraph",
+    html: "<p><strong>Bold</strong></p>",
+    slate: [
+      {
+        children: [
+          {
+            bold: true,
+            text: "Bold"
+          },
+        ],
+        type: 'p',
+      },
+    ],
+  },
+  {
+    name: "strong mid-sentence",
+    html: "Some <strong>bold text</strong> in a sentence.",
+    /*
+    Expected but not received:
+    {
+        "text": "Some "
+    },
+    {
+        "text": "bold text",
+        "bold": true
+    },
+    {
+        "text": " in a sentence."
+    }
+    */
+    slate: [
+      {
+        "children": [
+          {
+            "text": "Some ",
+          },
+        ],
+      },
+      {
+        "children": [
+          {
+            "bold": true,
+            "text": "bold text",
+          },
+        ],
+      },
+      {
+        "children": [
+          {
+            "text": " in a sentence.",
+          },
+        ],
+      }
+    ]
+  },
+  {
+    name: "pre",
+    html: "<pre><code>Pre</code></pre>",
+    slate: [
+      {
+        children: [
+          {
+            code: true,
+            text: "Pre",
+          },
+        ],
+      },
+    ],
+  },
+]