Paste detection

[szappanka]

I am currently working on a React app where I need to implement paste detection in an MDXEditor component. However, MDXEditor does not provide a native onPaste event, so I tried a workaround.
I subscribed to currentSelection$ to track selection changes inside the editor and used addEventListener("paste", ...) to detect when a paste event occurs anywhere on the page. Inside handlePaste, I checked if the currentSelection was active and called the onPaste callback.
Despite these efforts, currentSelection is always undefined, and the detection isn't working as expected. Since this is my first time using this library, I’m unsure if there's a more efficient way to implement paste detection.
Here is my code:

export interface MarkdownEditorProps {
  onPaste: (event: ClipboardEvent) => void;
}

export const MarkdownEditor: FC<MarkdownEditorProps> = ({
  onPaste,
}) => {
  return (
      <RealmProvider>
        <Editor
          onPaste={onPaste}
        />
      </RealmProvider>
  );
};

const Editor: FC<MarkdownEditorProps> = ({
  onPaste,
}) => {
  const ref = createRef<MDXEditorMethods>();
  const realm = useRealm();
  const [currentSelection, setCurrentSelection] = useState<any>(null);

  realm.sub(currentSelection$, (selection) => {
    console.log("Current selection:", selection);
    setCurrentSelection(selection);
  });

  useEffect(() => {
    const handlePaste = (event: ClipboardEvent) => {
      if (currentSelection) {
        if (onPaste) {
          onPaste(event);
        }
      }
    };

    window.addEventListener("paste", handlePaste);

    return () => {
      window.removeEventListener("paste", handlePaste);
    };
  }, [currentSelection, onPaste]);

  return (
    <MDXEditor
      ref={ref}
      markdown={"Test"}
      plugins={[
        toolbarPlugin({
          toolbarContents: () => {
            return (
              <>
                <UndoRedo />
                <Separator />
                <BoldItalicUnderlineToggles />
              </>
            );
          },
        }),
        listsPlugin(),
        quotePlugin(),
        headingsPlugin(),
      ]}
      onChange={(newText) => {console.log(newText)}}
    />
  );
};