Why my toolbar buttons don't work？

[andrew2558]

export default function PlateDemo() {
  const [editValue, setEditValue] = useState(null);

  const editableProps = {
    placeholder: "type...",
    style: {
      padding: "15px",
      width:"80%",
      margin:"0 auto",
      border:"1px solid #dfdfdf",
      boxShadow: "2px 2px 10px 3px rgb(43 42 42 / 13%)",
    },
  };

  const pluginsBasic = [
    // editor
    createReactPlugin(), // withReact
    createHistoryPlugin(), // withHistory

    // elements
    createParagraphPlugin(), // paragraph element
    createBlockquotePlugin(), // blockquote element
    createCodeBlockPlugin(), // code block element
    createHeadingPlugin(), // heading elements

    // marks
    createBoldPlugin(), // bold mark
    createItalicPlugin(), // italic mark
    createUnderlinePlugin(), // underline mark
    createStrikethroughPlugin(), // strikethrough mark
    createCodePlugin(), // code mark

    createBlockquotePlugin(),
  ];

  const ToolbarButtonsBasicElements = () => {
    const editor = useStoreEditorRef(useEventEditorId("focus"));

    return (
      <>
        <ToolbarElement
          type={getPlatePluginType(editor, ELEMENT_H1)}
          icon={<FcAbout />}
        />
        <ToolbarElement
          type={getPlatePluginType(editor, ELEMENT_H2)}
          icon={<FcApprove />}
        />
        <ToolbarElement
          type={getPlatePluginType(editor, ELEMENT_H3)}
          icon={<FcCapacitor />}
        />
        <ToolbarElement
          type={getPlatePluginType(editor, ELEMENT_H4)}
          icon={<FcChargeBattery />}
        />
        <ToolbarElement
          type={getPlatePluginType(editor, ELEMENT_H5)}
          icon={<FcDam />}
        />
        <ToolbarElement
          type={getPlatePluginType(editor, ELEMENT_H6)}
          icon={<FcDataBackup />}
        />
        <ToolbarElement
          type={getPlatePluginType(editor, ELEMENT_BLOCKQUOTE)}
          icon={<FcDribbble />}
        />
        <ToolbarCodeBlock
          type={getPlatePluginType(editor, ELEMENT_CODE_BLOCK)}
          icon={<FcDislike />}
        />
      </>
    );
  };

  const ToolbarButtons = () => (
    <>
      <ToolbarButtonsBasicElements />
    </>
  );

  return (
    <div>
      <Plate
        id="MyPlate"
        editableProps={editableProps}
        plugins={pluginsBasic}
        onChange={(newValue) => {
          setEditValue(newValue);
        }}
      >
        <HeadingToolbar>
          <ToolbarButtons />
        </HeadingToolbar>
      </Plate>
    </div>
  );
}

I don't know what went wrong

[woojunro]

I think you should also pass components and options props to Plate.

https://platejs.org

const components = createPlateComponents();
const options = createPlateOptions();

return (
    <Plate
      id="MyPlate"
      plugins={pluginsBasic}
      editableProps={editableProps}
      components={components}
      options={options}
    />
  );

[andrew2558]

Thank you very much! @blackstar0223