From bab9b19a92dab96796bf161340cbc0732a8c350d Mon Sep 17 00:00:00 2001
From: Steven Thompson <44806974+thompsonsj@users.noreply.github.com>
Date: Mon, 4 Nov 2024 23:47:54 +0000
Subject: [PATCH 1/2] test(react): add test to demonstrate #175

---
 .../react/src/lib/__tests__/#175.spec.tsx     | 254 +++++++++++++
 .../fixtures/payload/comprehensive.ts         | 339 ++++++++++++++++++
 2 files changed, 593 insertions(+)
 create mode 100644 packages/react/src/lib/__tests__/#175.spec.tsx
 create mode 100644 packages/react/src/lib/__tests__/fixtures/payload/comprehensive.ts

diff --git a/packages/react/src/lib/__tests__/#175.spec.tsx b/packages/react/src/lib/__tests__/#175.spec.tsx
new file mode 100644
index 0000000..24ef60c
--- /dev/null
+++ b/packages/react/src/lib/__tests__/#175.spec.tsx
@@ -0,0 +1,254 @@
+import renderer from 'react-test-renderer';
+// eslint-disable-next-line @nx/enforce-module-boundaries
+import {
+  SlateToReact,
+  payloadSlateToReactConfig,
+  SlateToReactConfig,
+} from '@slate-serializers/react';
+
+import { comprehensiveExampleSlate } from './fixtures/payload/comprehensive';
+
+describe('Issue 175', () => {
+  test('convert fixture with Payload config', async () => {
+    const tree = renderer
+      .create(<SlateToReact node={comprehensiveExampleSlate} />)
+      .toJSON();
+    expect(tree).toMatchInlineSnapshot(`
+      [
+        <h1>
+          Heading 1: Payload CMS Slate Example Content
+        </h1>,
+        <h2>
+          Heading 2: Text formatting
+        </h2>,
+        "Some ",
+        <strong>
+          bold text
+        </strong>,
+        " in a sentence.",
+        <u>
+          Underlined text
+        </u>,
+        " and ",
+        <i>
+          italic text
+        </i>,
+        ".",
+        <h3>
+          Heading 3: Formatting combinations
+        </h3>,
+        "Combine ",
+        <strong>
+          all three
+        </strong>,
+        " of the aforementioned tags. Throw a ",
+        <s>
+          strikethrough
+        </s>,
+        " in there too.",
+        <h4>
+          Heading 4: Code
+        </h4>,
+        <pre>
+          2 &gt; 1 but is &lt; 3 &amp; it can break HTML
+        </pre>,
+        <h5>
+          Heading 5: Text indent
+        </h5>,
+        "Indented text.",
+        "Indented text in indented text.",
+        <h6>
+          Heading 6: More combinations
+        </h6>,
+        <strong />,
+        <a
+          href="https://github.com/thompsonsj"
+        >
+          <strong>
+            A link in bold
+          </strong>
+        </a>,
+        ". ",
+        <a
+          href="https://github.com/thompsonsj"
+          target="_blank"
+        >
+          A link with a new tab
+        </a>,
+        ".",
+        <h2>
+          Lists
+        </h2>,
+        <ul>
+          <li>
+            Unordered List Item 1
+          </li>
+          <li>
+            Unordered List Item 2
+          </li>
+        </ul>,
+        <ol>
+          <li>
+            Ordered list item 1
+          </li>
+          <li>
+            Ordered list item 2
+          </li>
+          <li>
+            Ordered list item 3
+          </li>
+        </ol>,
+      ]
+    `);
+  });
+
+  it('convert fixture with config based on #175', () => {
+    const config: SlateToReactConfig = {
+      react: {
+        ...payloadSlateToReactConfig.react,
+        elementTransforms: {
+          ...payloadSlateToReactConfig.react.elementTransforms,
+          upload: ({ node, attribs, children }) => {
+            if (node.value?.mimeType && node.value?.url) {
+              if (node.value?.mimeType.match(/^image/)) {
+                return (
+                  <img
+                    src={node.value.url}
+                    alt={node.value.alt || node.value.filename}
+                    className={'w-full border-2'}
+                  />
+                );
+              }
+            }
+            return;
+          },
+        },
+      },
+      dom: {
+        ...payloadSlateToReactConfig.dom,
+        defaultTag: 'p',
+        markMap: {
+          ...payloadSlateToReactConfig.dom.markMap,
+          strikethrough: ['s'],
+          bold: ['strong'],
+          underline: ['u'],
+          italic: ['i'],
+          code: ['code'],
+        },
+        alwaysEncodeBreakingEntities: false,
+      },
+    };
+
+    const tree = renderer
+      .create(<SlateToReact node={comprehensiveExampleSlate} config={config} />)
+      .toJSON();
+    expect(tree).toMatchInlineSnapshot(`
+      [
+        <h1>
+          Heading 1: Payload CMS Slate Example Content
+        </h1>,
+        <h2>
+          Heading 2: Text formatting
+        </h2>,
+        <p>
+          Some 
+          <strong>
+            bold text
+          </strong>
+           in a sentence.
+        </p>,
+        <p>
+          <u>
+            Underlined text
+          </u>
+           and 
+          <i>
+            italic text
+          </i>
+          .
+        </p>,
+        <h3>
+          Heading 3: Formatting combinations
+        </h3>,
+        <p>
+          Combine 
+          <strong>
+            all three
+          </strong>
+           of the aforementioned tags. Throw a 
+          <s>
+            strikethrough
+          </s>
+           in there too.
+        </p>,
+        <h4>
+          Heading 4: Code
+        </h4>,
+        <p>
+          <code>
+            2 &gt; 1 but is &lt; 3 & it can break HTML
+          </code>
+        </p>,
+        <h5>
+          Heading 5: Text indent
+        </h5>,
+        <p>
+          Indented text.
+        </p>,
+        <p>
+          Indented text in indented text.
+        </p>,
+        <h6>
+          Heading 6: More combinations
+        </h6>,
+        <p>
+          <strong />
+          <a
+            data-link-type="custom"
+            href="https://github.com/thompsonsj"
+          >
+            <strong>
+              A link in bold
+            </strong>
+          </a>
+          . 
+          <a
+            data-link-type="custom"
+            href="https://github.com/thompsonsj"
+            target="_blank"
+          >
+            A link with a new tab
+          </a>
+          .
+        </p>,
+        <h2>
+          Lists
+        </h2>,
+        <ul>
+          <li>
+            Unordered List Item 1
+          </li>
+          <li>
+            Unordered List Item 2
+          </li>
+        </ul>,
+        <ol>
+          <li>
+            Ordered list item 1
+          </li>
+          <li>
+            Ordered list item 2
+          </li>
+          <li>
+            Ordered list item 3
+          </li>
+        </ol>,
+        <img
+          alt="31.png"
+          className="w-full border-2"
+          src="/images/31.png"
+        />,
+      ]
+    `);
+  });
+});
diff --git a/packages/react/src/lib/__tests__/fixtures/payload/comprehensive.ts b/packages/react/src/lib/__tests__/fixtures/payload/comprehensive.ts
new file mode 100644
index 0000000..d517722
--- /dev/null
+++ b/packages/react/src/lib/__tests__/fixtures/payload/comprehensive.ts
@@ -0,0 +1,339 @@
+export const comprehensiveExampleSlate = [
+  {
+      "children": [
+          {
+              "text": "Heading 1: Payload CMS Slate Example Content"
+          }
+      ],
+      "type": "h1"
+  },
+  {
+      "type": "h2",
+      "children": [
+          {
+              "text": "Heading 2: Text formatting"
+          }
+      ]
+  },
+  {
+      "children": [
+          {
+              "text": "Some "
+          },
+          {
+              "text": "bold text",
+              "bold": true
+          },
+          {
+              "text": " in a sentence."
+          }
+      ]
+  },
+  {
+      "children": [
+          {
+              "text": "Underlined text",
+              "underline": true
+          },
+          {
+              "text": " and "
+          },
+          {
+              "text": "italic text",
+              "italic": true
+          },
+          {
+              "text": "."
+          }
+      ]
+  },
+  {
+      "children": [
+          {
+              "text": "Heading 3: Formatting combinations"
+          }
+      ],
+      "type": "h3"
+  },
+  {
+      "children": [
+          {
+              "text": "Combine "
+          },
+          {
+              "text": "all three",
+              "bold": true,
+              "italic": true,
+              "underline": true
+          },
+          {
+              "text": " of the aforementioned tags. Throw a "
+          },
+          {
+              "text": "strikethrough",
+              "strikethrough": true
+          },
+          {
+              "text": " in there too."
+          }
+      ]
+  },
+  {
+      "children": [
+          {
+              "text": "Heading 4: Code"
+          }
+      ],
+      "type": "h4"
+  },
+  {
+      "children": [
+          {
+              "text": "2 > 1 but is < 3 & it can break HTML",
+              "code": true
+          }
+      ]
+  },
+  {
+      "children": [
+          {
+              "text": "Heading 5: Text indent"
+          }
+      ],
+      "type": "h5"
+  },
+  {
+      "type": "indent",
+      "children": [
+          {
+              "children": [
+                  {
+                      "text": "Indented text."
+                  }
+              ]
+          },
+          {
+              "children": [
+                  {
+                      "children": [
+                          {
+                              "text": "Indented text in indented text."
+                          }
+                      ]
+                  }
+              ],
+              "type": "indent"
+          }
+      ]
+  },
+  {
+      "children": [
+          {
+              "text": "Heading 6: More combinations"
+          }
+      ],
+      "type": "h6"
+  },
+  {
+      "children": [
+          {
+              "text": "",
+              "bold": true
+          },
+          {
+              "children": [
+                  {
+                      "text": "A link in bold",
+                      "bold": true
+                  }
+              ],
+              "linkType": "custom",
+              "type": "link",
+              "url": "https://github.com/thompsonsj"
+          },
+          {
+              "text": ". "
+          },
+          {
+              "children": [
+                  {
+                      "text": "A link with a new tab"
+                  }
+              ],
+              "linkType": "custom",
+              "newTab": true,
+              "type": "link",
+              "url": "https://github.com/thompsonsj"
+          },
+          {
+              "text": "."
+          }
+      ]
+  },
+  {
+      "children": [
+          {
+              "text": "Lists"
+          }
+      ],
+      "type": "h2"
+  },
+  {
+      "type": "ul",
+      "children": [
+          {
+              "children": [
+                  {
+                      "text": "Unordered List Item 1"
+                  }
+              ],
+              "type": "li"
+          },
+          {
+              "children": [
+                  {
+                      "text": "Unordered List Item 2"
+                  }
+              ],
+              "type": "li"
+          }
+      ]
+  },
+  {
+      "children": [
+          {
+              "children": [
+                  {
+                      "text": "Ordered list item 1"
+                  }
+              ],
+              "type": "li"
+          },
+          {
+              "children": [
+                  {
+                      "text": "Ordered list item 2"
+                  }
+              ],
+              "type": "li"
+          },
+          {
+              "children": [
+                  {
+                      "text": "Ordered list item 3"
+                  }
+              ],
+              "type": "li"
+          }
+      ],
+      "type": "ol"
+  },
+  {
+      "children": [
+          {
+              "text": ""
+          }
+      ],
+      "relationTo": "images",
+      "type": "upload",
+      "value": {
+          "id": "671a3ba6d67ea175ada76456",
+          "originalFileName": "31 Bottles on a Wall",
+          "filename": "31.png",
+          "mimeType": "image/png",
+          "filesize": 8965070,
+          "width": 2400,
+          "height": 1600,
+          "focalX": 50,
+          "focalY": 50,
+          "sizes": {
+              "thumbnail": {
+                  "width": 400,
+                  "height": 300,
+                  "mimeType": "image/png",
+                  "filesize": 298073,
+                  "filename": "31-400x300.png",
+                  "url": "/images/31-400x300.png"
+              },
+              "small": {
+                  "width": 640,
+                  "height": 427,
+                  "mimeType": "image/png",
+                  "filesize": 651050,
+                  "filename": "31-640x427.png",
+                  "url": "/images/31-640x427.png"
+              },
+              "mediumAvif": {
+                  "width": 1200,
+                  "height": 800,
+                  "mimeType": "image/avif",
+                  "filesize": 235740,
+                  "filename": "31-1200x800.avif",
+                  "url": "/images/31-1200x800.avif"
+              },
+              "medium": {
+                  "width": 1200,
+                  "height": 800,
+                  "mimeType": "image/png",
+                  "filesize": 2298396,
+                  "filename": "31-1200x800.png",
+                  "url": "/images/31-1200x800.png"
+              },
+              "large": {
+                  "width": 2048,
+                  "height": 1365,
+                  "mimeType": "image/png",
+                  "filesize": 6724053,
+                  "filename": "31-2048x1365.png",
+                  "url": "/images/31-2048x1365.png"
+              },
+              "share": {
+                  "width": 1200,
+                  "height": 630,
+                  "mimeType": "image/png",
+                  "filesize": 1908917,
+                  "filename": "31-1200x630.png",
+                  "url": "/images/31-1200x630.png"
+              }
+          },
+          "createdAt": "2024-10-24T12:20:54.642Z",
+          "updatedAt": "2024-10-24T12:20:54.642Z",
+          "url": "/images/31.png"
+      }
+  },
+  {
+      "children": [
+          {
+              "text": ""
+          }
+      ],
+      "relationTo": "youtube-videos",
+      "type": "relationship",
+      "value": {
+          "id": "671a9003910b067fc9bafa92",
+          "videoId": "jNQXAC9IVRw",
+          "title": "Me at the zoo",
+          "aspectRatio": 1.3333333333333333,
+          "width": 200,
+          "height": 150,
+          "thumbnailUrl": "https://i.ytimg.com/vi/jNQXAC9IVRw/hqdefault.jpg",
+          "oembed": {
+              "title": "Me at the zoo",
+              "author_name": "jawed",
+              "author_url": "https://www.youtube.com/@jawed",
+              "type": "video",
+              "height": 150,
+              "width": 200,
+              "version": "1.0",
+              "provider_name": "YouTube",
+              "provider_url": "https://www.youtube.com/",
+              "thumbnail_height": 360,
+              "thumbnail_width": 480,
+              "thumbnail_url": "https://i.ytimg.com/vi/jNQXAC9IVRw/hqdefault.jpg",
+              "html": "<iframe width=\"200\" height=\"150\" src=\"https://www.youtube.com/embed/jNQXAC9IVRw?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen title=\"Me at the zoo\"></iframe>"
+          },
+          "createdAt": "2024-10-24T18:20:51.757Z",
+          "updatedAt": "2024-10-24T18:20:51.757Z"
+      }
+  },
+]

From 669b275c47da5b47ea9a9c8804141542ec515b00 Mon Sep 17 00:00:00 2001
From: Steven Thompson <44806974+thompsonsj@users.noreply.github.com>
Date: Mon, 4 Nov 2024 23:54:12 +0000
Subject: [PATCH 2/2] style(__tests__): more descriptive test labels

---
 packages/react/src/lib/__tests__/#175.spec.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/lib/__tests__/#175.spec.tsx b/packages/react/src/lib/__tests__/#175.spec.tsx
index 24ef60c..4444257 100644
--- a/packages/react/src/lib/__tests__/#175.spec.tsx
+++ b/packages/react/src/lib/__tests__/#175.spec.tsx
@@ -9,7 +9,7 @@ import {
 import { comprehensiveExampleSlate } from './fixtures/payload/comprehensive';
 
 describe('Issue 175', () => {
-  test('convert fixture with Payload config', async () => {
+  test('convert fixture with default config', async () => {
     const tree = renderer
       .create(<SlateToReact node={comprehensiveExampleSlate} />)
       .toJSON();
@@ -102,7 +102,7 @@ describe('Issue 175', () => {
     `);
   });
 
-  it('convert fixture with config based on #175', () => {
+  it('convert fixture with Payload config with customisations based on #175', () => {
     const config: SlateToReactConfig = {
       react: {
         ...payloadSlateToReactConfig.react,