Skip to content
Get help on SlackWatch Sanity demo

Tips for localizing the rich text editor in Sanity.io using a custom localeBlock type.

6 replies
Last updated: May 14, 2020
Looking into localization and sanity. Been using this guide: https://www.sanity.io/docs/localization which works ok for strings. But I need to localize the rich text editor as well (array of block). Any tips on how to create a new localeBlock type?
May 14, 2020, 10:02 AM
we’ve done it exactly the same way
May 14, 2020, 10:16 AM
just change 
string
to 
blockContent
in that example
May 14, 2020, 10:16 AM
I tried, but seems block does not like "fieldset"
May 14, 2020, 10:17 AM
Hey
user E
, the example below is a contentype with tabs to switch between the different locales:
import Tabs from 'sanity-plugin-tabs'
import { languages } from '../../supportedLanguages'

export default {
  name: 'localeBlock',
  type: 'object',
  inputComponent: Tabs,
  fieldsets: languages.map(lang => ({
    title: lang.title,
    name: lang.id
  })),

  options: {
    layout: 'object'
  },

  fields: languages.map(lang => ({
    title: ' ',
    name: lang.id,
    type: 'array',
    of: [
      {
        type: 'block',
        styles: [{ title: 'Normal', value: 'normal' }],
        lists: [],
        marks: {
          decorators: [
            { title: 'Strong', value: 'strong' },
            { title: 'Emphasis', value: 'em' }
          ]
        }
      }
    ],
    fieldset: lang.id
  })),

  preview: {
    select: {
      title: 'title'
      // media: 'logo',
    }
  }
}
May 14, 2020, 10:17 AM
const supportedLanguages = [    
    {id: 'nb', title: 'Norwegian', isDefault: true},
    {id: 'en', title: 'English'}
  ]
  
  export default {
    name: 'localeBlock',
    type: 'object',
    fieldsets: [
      {
        title: 'Oversettelser',
        name: 'translations',
        options: {collapsible: true}
      }
    ],
    fields: supportedLanguages.map(lang => (
      {
        title: lang.title,
        name: lang.id,
        type: 'block',
        //fieldset: lang.isDefault ? null : 'translations'
      }
    ))
  }
As long as I comment out fieldset it works, but now I don't get the collapsible area for translations like I do from strings.
May 14, 2020, 10:17 AM
ooh nice I didn’t know about that way of doing tabs
May 14, 2020, 1:14 PM

Sanity– build remarkable experiences at scale

The Sanity Composable Content Cloud is the headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Get startedWatch demo

Was this answer helpful?

Categorized in