Plate Custom Plugin : Impossible to understand

[Melvynx]

Hey,

I’ve been trying to add a Link with the key "button" and a popover to edit this button for a week now, but I keep running into issues.

In the documentation, I found this example:

import { Button } from "@/components/ui/button";
import type { PlateElementProps } from "@udecode/plate/react";
import { createPlatePlugin, PlateElement } from "@udecode/plate/react";

export function ButtonElement({
  className,
  children,
  ...props
}: PlateElementProps) {
  return (
    <PlateElement asChild className={className} {...props}>
      <Button
        onClick={() => {
          console.log(props);
          console.log("option", props.getOptions());
        }}
      >
        {children}
      </Button>
    </PlateElement>
  );
}

export const ButtonPlugin = createPlatePlugin({
  options: {
    url: "https://www.x.com",
  },

  api: {
    test: () => {
      console.log("test");
    },
  },
  key: "button",
  node: {
    isElement: true,
    component: ButtonElement,
  },
});

However, there doesn’t seem to be much documentation on how to customize plugins—no clear way to add props, parameters, or extend functionality. I feel like this is where Plate could really shine, as customization is a key part of building unique editors.

A lot of people (myself included!) are looking to create specialized editors for specific use cases, rather than just cloning Notion. Having more guidance on extending components and integrating custom behaviors would be super valuable for the community.

I’m a YouTuber and would love to create content around Plate—tutorials, deep dives, and more—but right now, it’s quite challenging without clear customization docs.

Would it be possible to add a step-by-step guide on creating a custom plugin with configurable options? I think it would help a lot of developers get the most out of Plate!

Thanks a lot for the awesome work on the library! 😊

[johnnyoshika]

I'm having trouble finding documentation on how to build custom plugins as well. I agree that it would be extremely valuable for the community.

[johnnyoshika]

Note: I asked on Discord whether there's documentation on how to build custom plugins: https://discord.com/channels/1026227597115396188/1026256206915965078/1341927778232045659

[Melvynx]

Thanks, I try in Discord but its' not they priority

[arun-mani-j]

Hii. I'm new to Plate and its documentation is maze... I wish we had a well structured introduction page that guides how to create an editor from scratch. Especially with Plugin vs Components.

I tried reading the editor in the playground repo but it is only confusing more.

My use case is, I need to add a button, this button when clicked should add a new bold element in the editor. After reading Slate docs, I found the following code works but I'm not sure if I'm doing right:

function onButtonClicked() {
editor.transforms.insertNode({
        type: "h1",
        children: [{ text: "Foo", bold: true }],
      })
}

Can someone help me if this is right?

[Melvynx]

Yes, I read the source code of Plate for hours and didn't find out how to make it work too. It's seems good what you are showing

[arun-mani-j]

Thanks, hopefully we get a Plate cookbook or something similar soon :)