Custom component

[pwujczyk]

Hello,

I am struggling with creating new component type - Title.
I read documentation and search Discussions.

I created Title component

import { PlateRenderElementProps } from "@udecode/plate";

export const TitleElement = ({ attributes, children }: PlateRenderElementProps) => (
  <div {...attributes}>{children}</div>
);

I also added it to the plateTypes

  export interface MyTitleElement extends MyBlockElement {
    type: typeof ELEMENT_TITLE;
    children: MyInlineChildren;
  }

and added to the app to the components

  [ELEMENT_TITLE]: withProps(StyledElement,{
    styles:{
      root:{
        margin: "0 0 0 0",
        fontSize: "45px",
        fontWeight: "1000",
      }
    }
  }),

I have partially succeed as the component shows in the raw json, but it is not rendering as I would like. It just do not have any styles which I defined.

You can check the solution here if you click on H6 then node type is changing to title but it not renders differently. I would expect to have 45px fontsize

I think I am missing something really simple.

[12joan]

The bit you were missing was the plugin. Updated sandbox 🙂

const createTitlePlugin = createPluginFactory({
  key: ELEMENT_TITLE,
  isElement: true,
})

[pwujczyk]

Thank you!
You saved my life!