RenderElements Documentation

[travrob1]

Hi. I have been trying to use with the renderElement prop... and there is some serious documentation gaps.. because i can not get it to work at all.

First off, since EditablePlugins wraps slate's Editable i assumed that i could use my existing function, something simple found on slates docs.

const renderElement = useCallback(props => {
    switch (props.element.type) {
      case 'code':
        return <CodeElement {...props} />
      default:
        return <DefaultElement {...props} />
    }
  }, [])



<EditablePlugins renderElement={renderElement} plugins={plugins}/>

Something like that... Ok well that broke and then i realized i needed an array. so i wrapped this in an array...

<EditablePlugins renderElement={[renderElement]} plugins={plugins} />
still broke. Then i tried simplifying , and only returning one element, and did exactly what are in your storybook docs.

export const renderElementParagraph = () => ({
  attributes,
  ...props
}: RenderElementProps) => {
  if (props.element.type === ELEMENT_PARAGRAPH) {
    return <p {...attributes} {...props} className="slate-p" />;
  }
}

<EditableProps renderElement={[renderElementParagraph]} plugins={plugins}/>

Long story short is i can not use renderElement along with plugins... if i exclude plugins prop... then it works... but that kind of defeats the point.
Thanks

[zbeyens]

See the docs in storybook

Note: renderElement should return undefined by default so EditablePlugins can run the next one.

You should not return a default element,EditablePlugins will take care of that