feat: support custom block types (#216)

nuxt-modules · Aug 3, 2021 · 88330cf · 88330cf
1 parent 6a22420
commit 88330cf
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 1 deletion.
diff --git a/src/components/sanity-content.ts b/src/components/sanity-content.ts
@@ -248,7 +248,9 @@ function renderBlocks (
         block,
         block._type === 'block'
           ? (block.children || []).map(child =>
-              wrapMarks(h, child.text, child.marks, serializers, block.markDefs),
+              child._type !== 'span'
+                ? h(findSerializer(child as CustomBlock, serializers) || 'span', getProps(child), [wrapMarks(h, child.text, child.marks, serializers, block.markDefs)])
+                : wrapMarks(h, child.text, child.marks, serializers, block.markDefs),
             )
           : [],
         serializers,

diff --git a/test/unit/__snapshots__/sanity-content.test.ts.snap b/test/unit/__snapshots__/sanity-content.test.ts.snap
@@ -6,6 +6,12 @@ exports[`SanityContent should render blockquote blocks 1`] = `
 </div>
 `;
 
+exports[`SanityContent should render customBlockTypes blocks 1`] = `
+<div>
+  <p>An example of <i>custom</i> block types.</p>
+</div>
+`;
+
 exports[`SanityContent should render exampleMarkDefs blocks 1`] = `
 <div>
   <ul>

diff --git a/test/unit/sanity-content.test.ts b/test/unit/sanity-content.test.ts
@@ -174,6 +174,32 @@ const exampleBlocks: Record<string, ExampleBlock | ExampleBlock[]> = {
     ],
     style: 'blockquote',
   },
+  customBlockTypes: {
+    _key: 'd810da8ac845',
+    _type: 'block',
+    children: [
+      {
+        _key: 'd810da8ac8450',
+        _type: 'span',
+        marks: [],
+        text: 'An example of ',
+      },
+      {
+        _key: '7dc51c030a2f',
+        _type: 'customIcon',
+        icon: 'cog',
+        text: 'custom',
+      },
+      {
+        _key: '230498a',
+        _type: 'span',
+        marks: [],
+        text: ' block types.',
+      },
+    ],
+    markDefs: [],
+    style: 'normal',
+  },
   strong: {
     _key: 'd810da8ac845',
     _type: 'block',
@@ -281,6 +307,9 @@ describe('SanityContent', () => {
       const wrapper = mount(SanityContent, {
         propsData: {
           blocks: Array.isArray(block) ? block : [block],
+          serializers: {
+            types: { customIcon: 'i' },
+          },
         },
       })
       expect(wrapper.html()).toMatchSnapshot()
-Original file line number
+Diff line change
@@ Expand Up / @@ -6,6 +6,12 @@ exports[`SanityContent should render blockquote blocks 1`] = ` @@
     </div>
     `;
+    exports[`SanityContent should render customBlockTypes blocks 1`] = `
+    <div>
+      <p>An example of <i>custom</i> block types.</p>
+    </div>
+    `;
     exports[`SanityContent should render exampleMarkDefs blocks 1`] = `
     <div>
       <ul>
@@ Expand Down @@