Guide to get custom components integrated into Plate?

[ctevans]

I apologize for the question, I've been trying for many hours now and unfortunately I'm not able to get custom components in.

Say something as silly as a component that returns

I hope this can be put into the code

I just want it to like directly splat a component into there, currently I have custom toolbar buttons and they can insert other things but it's like my custom component just doesn't even exist. >_<

I figured it would be something like

let components = createPlateUI({
  [ELEMENT_EXCALIDRAW]: ExcalidrawElement,
  [ELEMENT_CODE_BLOCK]: StyledElement,
  // customize your components by plugin key
  [ELEMENT_TRIVIAL_COMPONENT]: TrivialComponent
})

And the component

import React from 'react'

type Props = {}

const TrivialComponent = (props: Props): JSX.Element => {
    return (
        <div>Trivial Component Return</div>
    )
}

export default TrivialComponent;

What would be absolutely fantastic and amazing would be if there was a like ELI5 on how to set up a custom component like this that accepts props and how to add a button to the toolbar that puts it there.

import React from 'react'

type Props = {
text: string;
}

const TrivialComponentThatTakesInText = (props: Props): JSX.Element => {
   const {text} = props;
    return (
        <div>{text}</div>
    )
}

export default TrivialComponent;

Actually another fantastic thing would be how we should actually insert a node from a custom toolbar component, right now it's very very much got me confused >_<

[dgl9]

@ctevans did you ever figure this out?

[ctevans]

Unfortunately no :(

I'm still using plate and REALLY REALLY want custom components integrated into it but I didn't figure it out sadly. I'd be so happy if anyone could help-- I apologize for my lack of understanding. >_<

[rks9800]

@ctevans

hi you can check the example of Editable voids, if you want to simply integrate react components,

ping me if you need any example

[fbolcic]

We are using custom components in our implementation, you can find a small example in this discussion thread.
Basically, we are specifying the component via the plugin component attribute. The plugin is then added to the editor, in the same way as the docs show.

Unfortunately, we are also having trouble with rendering some of the components - or I should say with supporting more advanced behaviour (also discussed in the thread).

[zbeyens]

Here is the new guide: https://platejs.org/docs/plugin