Adding SlateJS plugins

[frederico-taramaschi]

How would someone go about adding a plugin (https://github.com/nlulic/slate-table) to the slateJS implementation in Payload (v2)? This does not appear to work the normal way.

[tyteen4a03]

Not an answer to your question but Slate is deprecated. Is there a reason you can't switch to Lexical?

[frederico-taramaschi]

The Payload CMS docs still point to Slate as being the go to editor rather than Lexical.

Payload's Lexical rich text editor is currently in beta. It's stable enough to use as you build on Payload, so if you're up for helping us fine-tune it, you should use it. But if you're looking for stability, use Slate instead.

And switching over at a point where the project is 90% finished would be a significant pain.

[tyteen4a03]

The Payload CMS docs still point to Slate as being the go to editor rather than Lexical.

Payload's Lexical rich text editor is currently in beta. It's stable enough to use as you build on Payload, so if you're up for helping us fine-tune it, you should use it. But if you're looking for stability, use Slate instead.

And switching over at a point where the project is 90% finished would be a significant pain.

@AlessioGr might want to fix this!

[frederico-taramaschi]

How is something so fundamentally basic not covered or this hard to answer? Boggles the mind honestly.

[denolfe]

The 'Building Custom Elements and Leaves' section of the docs would be the best resource for doing this.

Largely, this is getting your hands dirty with Slate itself and passing those into Payload's rich text field via elements and leaves appropriately.

[frederico-taramaschi]

Getting an instance of Slate working with the extra plugin on its own is easy enough and so is adding an Element to the Slate editor in Payload. However the plugins property doesn't seem like it can handle a plugin meant to work like the one I wish to use. Unless I am missing something, which is definitely possible but in any case to way you would "normally" do it doesn't seem feasible?

[mvdve]

We have a project which is already in production for more then a year so i can't switch the rich text editor to Lexical so i dived a bit into the documentation of the SlateJS editor. Something like this should work (haven't tested is as i am building a translation button for the editor):

import {withTable} from "slate-table";

const richTextElements: RichTextElement[] = [
    "h2",
    "h3",
    "h4",
    "h5",
    "h6",
    "link",
    "ol",
    "ul",
    "indent",
    "blockquote",
    {
        name: "instagramPost",
        Button: InstagramPostButton,
        Element: InstagramPostElement,
    },
    {
        name: "table",
        Button: // this is mandatory, so maybe just a dummy component....,
        Element: // this is mandatory, so maybe just a dummy component....,
        plugins: [(editor) => withTable(editor)],
    },
];

I did not find a global plugin option in the slateJS config.

[frederico-taramaschi]

plugins: [(editor) => withTable(editor)]
That is what I expected as well but it is not the case it seems.

For the plugins part anyway the Button component does need something more than just a dummy component seeing how the table plugin works specifically.

[mvdve]

Hmm running in to the same issue. The plugin function does not seem to do anything..

[frederico-taramaschi]

It's not that it doesn't do anything because I can change/update the editor instance in the plugins property but it doesn't seem to behave like you would expect and seems like it doesn't handle plugins like the table plugin very well but I could be wrong.

[mvdve]

Looking at the RichText component itself, it looks like there is no option to initialize with custom plugins. You could copy the full component into a new one and add your plugin there. Then override the field component:

admin: {
    components: {
        Field: RichTextWithPlugin,
    },
},