[portable-text] Allow customization of user-defined styles

[thomax]

When defining your own styles, e.g.

{
  title: 'Block',
  type: 'block',
  styles: [
    {title: 'Normal', value: 'normal'},
    {title: 'H1', value: 'h1'},
    {title: 'Protip', value: 'protip'}
  ]
}

The dropdown will render the Proptip choice, but you have no control over:

1. What your choice in the dropdown meny looks like
2. How Slate applies styling to your block. At the moment, there is no visual cue at all in the editable text that a custom style has been applied.

I'm not sure what the best solution would be. Maybe custom styles could accept custom components for rendering?

For example:

{
  title: 'Block',
  type: 'block',
  styles: [
    {title: 'Normal', value: 'normal'},
    {title: 'H1', value: 'h1'},
    {
      title: 'Protip',
      value: 'protip',
      preview: {
        menuComponent: myReactComponent,
        editorComponent: myOtherReactComponent,        
      } 
  ]
}

[ghost]

Offering a separate menu and editor preview override would be a great addition for scenarios where the style is very large. Would be great to create a smaller version of a style so the dropdown menu doesn't get too crazy. On a related note, I created a separate feature request for the separation of the HTML element from the style itself: https://github.com/sanity-io/sanity/issues/1929.

[dwkns]

Is this going to make it into V3?

[kmelve]

I believe this is solved with the component property. Closing this for now.

[troymcginnis]

@kmelve This is still an issue for me on v3 using the component property.

Can you verify?

[essejmclean]

Hi - I highly recommend that this issue be opened again as previewing text block styles in the BlockStyleSelect.tsx does not appear to work or be supported in Sanity v3 with the component method.

The documentation says it works (https://www.sanity.io/docs/customizing-the-portable-text-editor#14d3f8b767ae) though the code appears to say otherwise.