Rules for developing a button with custom functionality ? In need of advice !

[aarcoraci]

Hello ! first I need to apologize if the questions I'm asking are dumb or basic. As it may happened to more than one I got an urgent requirement to develop a Plate plugin and I'm not very familiar with it.

I've wen over the Plugin Basics page a couple of times but it's not very clear to me what the propose is or in other works, if it's required in order to achieve what I need.

Ive been asked to integrate a speech to text API to plate/slate. The internals of the SDK/API are not very important but the overall idea is when it produces output the contents gets inserted as text into the editor or some commands may apply some transformations (such as select last word, delete paragraph, full stop, etc.).

The way I'm facing the challenge is using a react function component strongly based on the ToolbarImage code.

I have done some testing and it's indeed working fine on the small project Ive prepared. My question is if what I'm doing is somewhat valid and I'm not doing some kind of anti-pattern since I'm not relying any plugin related methods from the documentation. (ie: createPluginFactory). I'm just creating a button with some custom functionality that in the end will call Transforms.insertText(editor, transcription);

Here is an oversimplified version of the code:

export const ToolbarSpeechToTextExample = ({
  accountCode,
  accessKey,
  userTag,
  deviceId,
  sourceApp,
  lmId,
  ...props
}: MyCustomProps & ToolbarButtonProps) => {
  const editor = useEditorRef();

  const onFinalResult = useCallback(
    (finalText: Partial<Recipe>) => {
      insertText(editor, finalText);
    },
    [editor]
  );

  const config = useMemo<STTConfig>(() => {
    return {
      onFinalResult: onFinalResult
    };
  }, [editor]);

  const speechToTextManager = useMemo<SpeechSDKManager>(
    () => new SpeechSDKManager(config),
    []
  );

  return (
    <ToolbarButton
      onMouseDown={(event) => {
        event.preventDefault();

        // when text arrives will fire the example callback "onFinalResult"
        speechToTextManager.toggleListening();
      }}
      {...props}
    />
  );
};

when the SDK returns values these get inserted into the editor via the "insertText" function.

To use this button I just add it as a child of

Could anyone please provide guidance or any tips ? in order for this to work as an exportable component (basically exporting the button with the custom functionality) am I required to do something with the Plugin methods ?

Thanks A LOT in advance