fix: list rendering fixes for SanityContent

* render lists correctly when they are first in a portable text array * render nested lists correctly closes #102
nuxt-modules · Apr 11, 2021 · db4408a · db4408a
1 parent 3c522db
commit db4408a
Show file tree

Hide file tree

Showing 3 changed files with 170 additions and 102 deletions.
diff --git a/src/components/sanity-content.ts b/src/components/sanity-content.ts
@@ -199,6 +199,33 @@ function wrapMarks (
   )
 }
 
+function walkList (blocks: Array<CustomBlock | Block | List>, block: CustomBlock | Block | List) {
+  const { length } = blocks
+
+  // Not a list item
+  if (!block.level) {
+    blocks.push(block)
+    return blocks
+  }
+
+  const { _type, children, level } = blocks[length - 1] || {}
+  if (_type === 'list' && children) {
+    if (level === block.level) {
+      children.push(block)
+    } else {
+      walkList(children, block)
+    }
+  } else {
+    blocks.push({
+      _type: 'list',
+      children: [block],
+      level: block.level,
+    } as List)
+  }
+
+  return blocks
+}
+
 function renderBlocks (
   h: CreateElement,
   blocks: Array<CustomBlock | Block | List>,
@@ -207,24 +234,7 @@ function renderBlocks (
 ) {
   const nestedBlocks = nested
     ? blocks
-    : blocks.reduce((blocks, block) => {
-      const { length } = blocks
-
-      if (block.level && length) {
-        const { _type, children } = blocks[length - 1]
-        if (_type === 'list' && children) {
-          children.push(block)
-        } else {
-          blocks.push({
-            _type: 'list',
-            children: [block],
-          } as List)
-        }
-      } else {
-        blocks.push(block)
-      }
-      return blocks
-    }, [] as Array<Block | CustomBlock | List>)
+    : blocks.reduce(walkList, [] as Array<Block | CustomBlock | List>)
 
   return nestedBlocks.map((block) => {
     const node = wrapStyle(

diff --git a/test/unit/__snapshots__/sanity-content.test.ts.snap b/test/unit/__snapshots__/sanity-content.test.ts.snap
@@ -2,9 +2,11 @@
 
 exports[`SanityContent should render exampleMarkDefs blocks 1`] = `
 <div>
-  <li>
-    <strong>Google Analytics</strong>: The Sites use Google Analytics. Further information is available at <a href="https://tools.google.com/dlpage/gaoptout/">https://tools.google.com/dlpage/gaoptout/</a>.
-  </li>
+  <ul>
+    <li>
+      <strong>Google Analytics</strong>: The Sites use Google Analytics. Further information is available at <a href="https://tools.google.com/dlpage/gaoptout/">https://tools.google.com/dlpage/gaoptout/</a>.
+    </li>
+  </ul>
 </div>
 `;
 
@@ -20,6 +22,29 @@ exports[`SanityContent should render link blocks 1`] = `
 </div>
 `;
 
+exports[`SanityContent should render list blocks 1`] = `
+<div>
+  <ol>
+    <li>test</li>
+    <li>thing</li>
+  </ol>
+</div>
+`;
+
+exports[`SanityContent should render nestedList blocks 1`] = `
+<div>
+  <h3>3. Providing your personal data to others</h3>
+  <ol>
+    <li>test</li>
+    <li>thing</li>
+    <ul>
+      <li>nested</li>
+      <li>list</li>
+    </ul>
+  </ol>
+</div>
+`;
+
 exports[`SanityContent should render with no props 1`] = `<div></div>`;
 
 exports[`SanityContent should render with non-standard props 1`] = `<section class="customClass"></section>`;
diff --git a/test/unit/sanity-content.test.ts b/test/unit/sanity-content.test.ts
@@ -23,87 +23,120 @@ const exampleBlocks: Record<string, ExampleBlock | ExampleBlock[]> = {
     markDefs: [],
     style: 'h3',
   },
-  // TODO: test list length generation
-  // list: [
-  //   {
-  //     _key: 'b1905c55df85',
-  //     _type: 'block',
-  //     children: [
-  //       {
-  //         _key: 'b1905c55df850',
-  //         _type: 'span',
-  //         marks: [],
-  //         text: '3. Providing your personal data to others',
-  //       },
-  //     ],
-  //     markDefs: [],
-  //     style: 'h3',
-  //   },
-  //   {
-  //     _type: 'block',
-  //     _key: 'a6cec1a2a738',
-  //     style: 'normal',
-  //     markDefs: [],
-  //     children: [
-  //       {
-  //         _type: 'span',
-  //         _key: 'b39d8ec32f27',
-  //         text: 'test',
-  //         marks: [],
-  //       },
-  //     ],
-  //     level: 1,
-  //     listItem: 'number',
-  //   },
-  //   {
-  //     _type: 'block',
-  //     _key: '5917a3f6485d',
-  //     style: 'normal',
-  //     markDefs: [],
-  //     children: [
-  //       {
-  //         _type: 'span',
-  //         _key: 'aaa0e0ab720a',
-  //         text: 'thing',
-  //         marks: [],
-  //       },
-  //     ],
-  //     level: 1,
-  //     listItem: 'number',
-  //   },
-  //   {
-  //     _type: 'block',
-  //     _key: 'ceaddc3e7d34',
-  //     style: 'normal',
-  //     markDefs: [],
-  //     children: [
-  //       {
-  //         _type: 'span',
-  //         _key: '62d7844aaf8e',
-  //         text: 'nested',
-  //         marks: [],
-  //       },
-  //     ],
-  //     level: 2,
-  //     listItem: 'number',
-  //   },
-  //   {
-  //     _type: 'block',
-  //     _key: '415d8fb2fa1e',
-  //     style: 'normal',
-  //     markDefs: [],
-  //     children: [
-  //       {
-  //         _type: 'span',
-  //         _key: 'a7705718303a',
-  //         text: 'list',
-  //         marks: [],
-  //       },
-  //     ],
-  //     level: 2,
-  //     listItem: 'number',
-  //   },
-  // ],
+  list: [
+    {
+      _type: 'block',
+      _key: 'a6cec1a2a738',
+      style: 'normal',
+      markDefs: [],
+      children: [
+        {
+          _type: 'span',
+          _key: 'b39d8ec32f27',
+          text: 'test',
+          marks: [],
+        },
+      ],
+      level: 1,
+      listItem: 'number',
+    },
+    {
+      _type: 'block',
+      _key: '5917a3f6485d',
+      style: 'normal',
+      markDefs: [],
+      children: [
+        {
+          _type: 'span',
+          _key: 'aaa0e0ab720a',
+          text: 'thing',
+          marks: [],
+        },
+      ],
+      level: 1,
+      listItem: 'number',
+    },
+  ],
+  nestedList: [
+    {
+      _key: 'b1905c55df85',
+      _type: 'block',
+      children: [
+        {
+          _key: 'b1905c55df850',
+          _type: 'span',
+          marks: [],
+          text: '3. Providing your personal data to others',
+        },
+      ],
+      markDefs: [],
+      style: 'h3',
+    },
+    {
+      _type: 'block',
+      _key: 'a6cec1a2a738',
+      style: 'normal',
+      markDefs: [],
+      children: [
+        {
+          _type: 'span',
+          _key: 'b39d8ec32f27',
+          text: 'test',
+          marks: [],
+        },
+      ],
+      level: 1,
+      listItem: 'number',
+    },
+    {
+      _type: 'block',
+      _key: '5917a3f6485d',
+      style: 'normal',
+      markDefs: [],
+      children: [
+        {
+          _type: 'span',
+          _key: 'aaa0e0ab720a',
+          text: 'thing',
+          marks: [],
+        },
+      ],
+      level: 1,
+      listItem: 'number',
+    },
+    {
+      _type: 'block',
+      _key: 'ceaddc3e7d34',
+      style: 'normal',
+      markDefs: [],
+      children: [
+        {
+          _type: 'span',
+          _key: '62d7844aaf8e',
+          text: 'nested',
+          marks: [],
+        },
+      ],
+      level: 2,
+      listItem: 'bullet',
+    },
+    {
+      _type: 'block',
+      _key: '415d8fb2fa1e',
+      style: 'normal',
+      markDefs: [],
+      children: [
+        {
+          _type: 'span',
+          _key: 'a7705718303a',
+          text: 'list',
+          marks: [],
+        },
+      ],
+      level: 2,
+      listItem: 'bullet',
+    },
+  ],
   exampleMarkDefs: {
     _key: '3522a2a863b9',
     _type: 'block',