refactor: remove @emoji-mart/react dependency (#1484)

Author: matthewlipski

package-lock.json

@@ -54,11 +54,11 @@
   "dependencies": {
     "@blocknote/core": "^0.24.2",
     "@emoji-mart/data": "^1.2.1",
-    "@emoji-mart/react": "^1.1.1",
     "@floating-ui/react": "^0.26.4",
     "@tiptap/core": "^2.7.1",
     "@tiptap/react": "^2.7.1",
     "@tiptap/pm": "^2.7.1",
+    "emoji-mart": "^5.6.0",
     "lodash.merge": "^4.6.2",
     "react-icons": "^5.2.1"
   },

packages/react/package.json

@@ -0,0 +1,23 @@
+// From https://github.com/missive/emoji-mart/blob/main/packages/emoji-mart-react/react.tsx
+import React, { useEffect, useRef } from "react";
+import { Picker } from "emoji-mart";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export default function EmojiPicker(props: any) {
+  const ref = useRef(null);
+  const instance = useRef(null) as any;
+
+  if (instance.current) {
+    instance.current.update(props);
+  }
+
+  useEffect(() => {
+    instance.current = new Picker({ ...props, ref });
+
+    return () => {
+      instance.current = null;
+    };
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return React.createElement("div", { ref });
+}

packages/react/src/components/Comments/EmojiMartPicker.tsx

@@ -1,8 +1,8 @@
-import Picker from "@emoji-mart/react";
 import { ReactNode, useState } from "react";
 
 import { useComponentsContext } from "../../editor/ComponentsContext.js";
 import { useBlockNoteContext } from "../../editor/BlockNoteContext.js";
+import Picker from "./EmojiMartPicker.js";
 
 export const EmojiPicker = (props: {
   onEmojiSelect: (emoji: { native: string }) => void;