fix: render children of custom components

Author: danielroe

src/runtime/components/sanity-content.ts

@@ -116,15 +116,12 @@ function renderStyle ({ style, listItem }: Block, serializers: Required<Serializ
 }
 
 function renderInSerializer (item: Block, serializers: Required<Serializers>) {
-  if (item._type !== 'block') return render(serializers, item)
-
   return render(serializers, item, () => (item.children || []).map((child) => {
     if (isSpan(child)) {
       return renderMarks(child.text, child.marks, serializers, item.markDefs)
     }
     return render(serializers, child, () => renderMarks(child.text, child.marks, serializers, item.markDefs))
-  }),
-  )
+  }))
 }
 
 function renderMarks (

test/unit/__snapshots__/sanity-content.test.ts.snap

@@ -17,6 +17,11 @@ exports[`SanityContent > should render blockquote blocks 1`] = `"<blockquote>Bui
 
 exports[`SanityContent > should render customBlockTypes blocks 1`] = `"<p>An example of <i>custom</i> block types.</p>"`;
 
+exports[`SanityContent > should render customComponent blocks 1`] = `
+"<div>propValuetext content</div>
+<div>propValuetext content</div>"
+`;
+
 exports[`SanityContent > should render evenMoreNestedList blocks 1`] = `
 "<ol>
   <li>1. Top level</li>

test/unit/fixture/portable-text/custom-components.ts

@@ -0,0 +1,41 @@
+export const customComponent = [
+  {
+    _key: '1',
+    _type: 'customComponent1',
+    exampleProp: 'propValue',
+    children: [
+      {
+        _key: 'd810da8ac8450',
+        _type: 'span',
+        marks: [],
+        text: 'text content',
+      },
+    ],
+  },
+  {
+    _key: '2',
+    _type: 'customComponent2',
+    exampleProp: 'propValue',
+    children: [
+      {
+        _key: 'd810da8ac8450',
+        _type: 'span',
+        marks: [],
+        text: 'text content',
+      },
+    ],
+  },
+  {
+    _key: '3',
+    _type: 'customComponent3',
+    exampleProp: 'propValue',
+    children: [
+      {
+        _key: 'd810da8ac8450',
+        _type: 'span',
+        marks: [],
+        text: 'text content',
+      },
+    ],
+  },
+]

test/unit/fixture/portable-text/index.ts

@@ -1,5 +1,6 @@
 export * from './adjacent-list'
 export * from './blockquote'
+export * from './custom-components'
 export * from './custom-block-types'
 export * from './list'
 export * from './mark-defs'

test/unit/sanity-content.test.ts

@@ -1,9 +1,20 @@
 import { expect, describe, it } from 'vitest'
 import { mount } from '@vue/test-utils'
+import { defineAsyncComponent, defineComponent, h, markRaw } from 'vue'
 import SanityContent from '../../src/runtime/components/sanity-content'
 
 import * as exampleBlocks from './fixture/portable-text'
 
+const CustomBlockComponent = defineComponent({
+  props: { exampleProp: String },
+  setup: (props, { slots }) => () => h('div', {}, {
+    default: () => [
+      props.exampleProp,
+      slots.default?.(),
+    ],
+  }),
+})
+
 describe('SanityContent', () => {
   it('should render with no props', () => {
     const wrapper = mount(SanityContent)
@@ -15,9 +26,20 @@ describe('SanityContent', () => {
       const wrapper = mount(SanityContent as any, {
         props: {
           blocks: Array.isArray(block) ? block : [block],
-          serializers: {
-            types: { customIcon: 'i' },
-          },
+          serializers: markRaw({
+            types: {
+              customIcon: 'i',
+              // This is how to access a component registered by `@nuxt/components`
+              customComponent1: CustomBlockComponent,
+              // A directly imported component
+              customComponent2: CustomBlockComponent,
+              // Example of a more complex async component
+              customComponent3: defineAsyncComponent({
+                loadingComponent: () => h('div', 'Loading...'),
+                loader: () => Promise.resolve(CustomBlockComponent),
+              }),
+            },
+          }),
         },
       })
       expect(wrapper.html()).toMatchSnapshot()