gobi-sanity-test

gobi-sanity

gobi

Install

yarn add gobi-sanity

Setup Guide

Step 1

Install needed dependencie to your sanity project running the following command:

$ yarn add gobi-sanity

Step 2

Now lets create a new schema type called gobi, for this create a new file inside the schemas/ folder with the name gobi.js that should look like

import {gobiSchema} from 'gobi-sanity'
import PatchEvent, {set, unset} from 'part:@sanity/form-builder/patch-event'

export default gobiSchema({PatchEvent, set, unset})

Step 3

Now we need to tell Sanity to consider the gobi schema that we just created for this open the file studio/schemas/schema.js and import the gobi object that we created and also include the schema in the concat section like shown below:

import gobi from './objects/gobi'

// ...

export default createSchema({
  name: 'blog',
  types: schemaTypes
    .concat([
      // ...
      gobi,
      // ...
    ])
})

Step 4

Now that we have our schema type created and we've already configured how it should look like we need to create the serializer that will basically translate the schema into a component on your website, for that open the file web/components/serializers.js and include the following:

import {GobiSerializer} from "gobi-sanity";

// ...

const serializers = {
  types: {
    gobi: ({ node }) => (
      <GobiSerializer node={node} />
    ),
    // ...
};

// ...

Step 5

Now all we need is to add the type to a text editor that you already use, in this case I will give an example on how to add to the bodyPortableText.js or blockContext.js depending on your version od Sanity, for that open the file studio/schemas/objects/bodyPortableText.js and add the following type:

{
  type: 'gobi'
}

An example of how the export default would look like:

export default {
  name: 'bodyPortableText',
  type: 'array',
  title: 'Post body',
  of: [
    {
      type: 'block',
      title: 'Block',
      styles: [
        { title: 'Normal', value: 'normal' },
        { title: 'H1', value: 'h1' },
        { title: 'H2', value: 'h2' },
        { title: 'H3', value: 'h3' },
        { title: 'H4', value: 'h4' },
        { title: 'Quote', value: 'blockquote' }
      ],
      lists: [
        { title: 'Bullet', value: 'bullet' },
        { title: 'Number', value: 'number' }
      ],
      marks: {
        decorators: [
          { title: 'Strong', value: 'strong' },
          { title: 'Emphasis', value: 'em' },
          { title: 'Code', value: 'code' },
          {
            title: 'Highlight',
            value: 'highlight',
            blockEditor: {
              icon: highlightIcon,
              render: highlightRender
            }
          }
        annotations: [
          {
            name: 'link',
            type: 'object',
            title: 'URL',
            fields: [
              {
                title: 'URL',
                name: 'href',
                type: 'url'
              }
            ]
          }
        ]
      },
      of: [
        { type: 'authorReference' },
        { type: 'math', icon: mathInlineIcon, title: 'Inline math' }
      ]
    },
    // ADD THIS PIECE HERE
    {
      type: 'gobi'
    }
  ]
}

License

MIT © gobi