Looking to create plugin to wrap root nodes with a context menu

[reinvanimschoot]

Hi guys

I'm currently working on a more block-based editor where we have the following way of adding content:

A bar that shows a dropdown of possible elements to add.

Now, we are converting our editor from Slate to Plate to make use of all the benefits and currently I'm implementing the ContextMenu as follows:

export const createParagraphPlugin = createPluginFactory({
  key: NodeType.Paragraph,
  type: NodeType.Paragraph,
  isElement: true,
  component: Paragraph,
});

function Paragraph(props: PlateRenderElementProps) {
  const { attributes, children, element } = props;

  return (
    <ContextMenuWrapper element={element}>
      <p className="text-green-500" {...attributes}>
        {children}
      </p>
    </ContextMenuWrapper>
  );
}

In other words, I'm wrapping al my components with a ContextMenuWrapper component.

I was wondering if there was a better/more best practice way to do this.

Any help would be greatly appreciated!

Regards
Rein