Title element

[davevilela]

Hello!
I'm trying to achieve the following feature:

I want to force the document to have an H1 title as the first Element, but I also want to display a custom element that has some buttons like the image below:

Example:

Proof of concept

I tried implementing a custom element, but with this approach I would allow the user to copy and paste this same element, and that's not the behaviour I expect.

I ended up creating a HOC that will only render for the first Node of my document, combined with withStyledPlaceHolders to enforce layout on my page.

basicNodes: createPlugins([...basicElements, ...basicMarks], {
    components: withDocumentHeader(withStyledPlaceHolders(createPlateUI()), [
      {
        key: ELEMENT_H1,
      },
    ]),
  }),

And for the hoc:

export interface DocumentHeaderProps<V extends Value> extends StyledElementProps<V> {}

export const DocumentHeader = <V extends Value>(props: DocumentHeaderProps<V>) => {
  const { children, element, editor } = props;

  const path = useMemo(() => findNodePath(editor, element), [editor, element]);

  const isValid = useMemo(() => path && path[path.length - 1] === 0, []);

  if (isValid) {
    return (
      <div>
        {children}

        <Group mt={5} contentEditable={false}>
          <Button color="gray" compact variant="default">
            members
          </Button>
          <Button color="gray" compact variant="default">
            categories
          </Button>
          <Button leftIcon={<MoodSmile size={15} />} color="gray" compact variant="default">
            add emoji
          </Button>
        </Group>
        <Divider my="sm" />
      </div>
    );
  }

  return children;
};

export const withDocumentHeader = createNodesHOC(DocumentHeader);

I'm not certain that this is the best way to implement this feature, though...

Can anyone tell me if you've implemented something like this?