Providing serializer for custom blocks

[dmgawel]

When trying to fetch content with custom block type (e.g. copiable_snippet), sourcebit fails with a following error:

> sourcebit fetch
✖ An error occurred when processing the plugins: Unknown block type "copiable_snippet", please specify a serializer for it in the `serializers.types` prop.
Error: Unknown block type "copiable_snippet", please specify a serializer for it in the `serializers.types` prop
    at BlockSerializer (/Users/dawid/Projects/sanity/node_modules/@sanity/block-content-to-hyperscript/lib/serializers.js:23:13)
    at renderNode (/Users/dawid/Projects/sanity/node_modules/@sanity/block-content-to-hyperscript/lib/index.js:17:12)
    at serializeBlock (/Users/dawid/Projects/sanity/node_modules/@sanity/block-content-to-hyperscript/lib/blocksToNodes.js:88:12)
    at serializeNode (/Users/dawid/Projects/sanity/node_modules/@sanity/block-content-to-hyperscript/lib/blocksToNodes.js:55:12)
    at Array.map (<anonymous>)
    at blocksToNodes (/Users/dawid/Projects/sanity/node_modules/@sanity/block-content-to-hyperscript/lib/blocksToNodes.js:119:22)
    at blockContentToHyperscript (/Users/dawid/Projects/sanity/node_modules/@sanity/block-content-to-hyperscript/lib/index.js:34:10)
    at blocksToHtml (/Users/dawid/Projects/sanity/node_modules/@sanity/block-content-to-html/lib/blocksToHtml.js:7:18)
    at convertBlockToHTML (/Users/dawid/Projects/sanity/node_modules/sourcebit-source-sanity/lib/sanity-util.js:20:12)
    at normalizeValue (/Users/dawid/Projects/sanity/node_modules/sourcebit-source-sanity/lib/sanity-util.js:167:24)

Currently, it's not possible to provide serializer for custom blocks. Would it be possible to add support for such a case, for example as a plugin option?

[smnh]

Currently sourcebit-source-sanity can only transform basic rich-text stuff.
What is the copiable_snippet, is it a custom rich-text block plugin?

[dmgawel]

Yes, exactly.

Here's an excerpt from my schema:

{
  title: "Content",
  name: "content",
  type: "array",
  of: [
    {
      type: 'block'
    },
    {
      type: 'image',
      fields: [
        {
          type: 'text',
          name: 'alt',
          title: 'Alternative text',
          options: {
            isHighlighted: true
          }
        }
      ]
    },
    {
      name: "copiable_snippet",
      type: "object",
      title: "Copiable Snippet",
      fields: [
        {
          name: "text",
          type: "text",
          title: "Text"
        }
      ]
    }
  ]
}

What's your opinion on providing support for custom blocks in sourcebit-source-sanity? From my perspective, being able to pass custom serializer as a plugin option would be the best scenario. Could be something like that:

module.exports = {
  plugins: [
    {
      module: require("sourcebit-source-sanity"),
      options: {
        dataset: "production",
        projectId: "123456",
        richTextOutputFormat: 'html',
        serializers: {
          html: {
            copiable_snippet: ({ node }) => {
              return `<div class="snippet">${node.text}</div>`
            }
          },
          markdown: {
            copiable_snippet: ({ node }) => {
              return `{{< snippet >}}${node.text}{{< /snippet >}}`
            }
          }
        }
      }
    }
  ]
}

[smnh]

@dmgawel yep, passing serializers like this makes sense.
Unfortunately currently we don't have someone to take over this. If you would like, you can create a PR with such an option.
By the way, a simpler solution without changing the plugin's code would be passing none to the richTextOutputFormat option. This way, the plugin would return objects with the original rich-text data, and then, next plugin could manipulate the data to achieve the result:

module.exports = {
    plugins: [
        {
            module: require('sourcebit-source-sanity'),
            options: {
                accessToken: process.env['SANITY_ACCESS_TOKEN'],
                spaceId: '...',
                dataset: 'production',
                richTextOutputFormat: 'none'
            }
        },
        (data) => {
          updatedData = manipulateRichText(data);
          return {
            data: updatedData
          }
        }
    ]
};