ReactRenderer for React.FunctionComponent with ref

[zofiag]

Is your feature request related to a problem? Please describe.
I couldn't find a way to run a method from the function component, which is wrapped into RectRenderer. From what I can see RectRenderer pass a ref as a prop only for class components

if (isClassComponent(Component)) {
  props.ref = (ref: React.Component) => {
    this.ref = ref
  }
}

Describe the solution you’d like
A way to be able to run methods from the function components wrapped into ReactRenderer.

Example:
For the Mention extension import Mention from "@tiptap/extension-mention"; I'd like to be able to configure it with my own MentionList component. MentionList is a function component with forwardRef and useImperativeHandle hook.

export const MentionList = forwardRef<HTMLDivElement, SuggestionProps>(
  ({ command, items }, ref) => {

    useImperativeHandle(ref, () => ({
      onKeyDown: ({ event }: { event: KeyboardEvent }) => {
        if (event.key === "ArrowUp") {
          upHandler();
          return true;
        }

        if (event.key === "ArrowDown") {
          downHandler();
          return true;
        }

        if (event.key === "Enter") {
          enterHandler();
          return true;
        }

        return false;
      },
    }));

...
});

then I'd expect to able to call reactRenderer.ref?.current.onKeyDown(props) in onKeyDown(props) of Mention.configure under suggestion key.

Please let me know if there's already a way to make it work with function components, that I'm not aware of! If not, would love to hear your thoughts on the suggested approach.

[philippkuehn]

Hey, I have to admit that I have limited experience with React. I haven’t found a way to communicate from the suggestion extension with a function component, so currently it's only possible with a class component.

Maybe it’s an option to use a class component just to communicate with your functional component? SuggestionExtension -> SomeClassComponent -> MentionList

But I also have to admit that I don’t find the current solution optimal and I’m open to improvements!

[aizaiz]

how do I fix this
create a custom ReactRenderer.tsx and remove this if condition and it should work with function component
if (isClassComponent(Component)) {

or maybe making an extension of ReactRenderer would be easier

[softmarshmallow]

Need better react support!

[philippkuehn]

always happy for some react contributions!

[philippkuehn]

functional components are now supported. I also migrated the mention demo. source: https://github.com/ueberdosis/tiptap/blob/b95507797d2fbf9147396de7f753e45e83736687/demos/src/Examples/Community/React/MentionList.jsx