fix

packages/editor/package.json

@@ -38,6 +38,7 @@
     "react-toastify": "^9.1.3",
     "reactstrap": "^9.2.0",
     "swr": "^2.2.2",
-    "ts-deepmerge": "^6.2.0"
+    "ts-deepmerge": "^6.2.0",
+    "emoji-mart": "npm:panta82-emoji-mart@^3.0.1"
   }
 }

packages/editor/src/@types/declaration.d.ts

@@ -1,5 +1,2 @@
 // prevent TS2307: Cannot find module './xxx.module.scss' or its corresponding type declarations.
 declare module '*.scss';
-
-// prevent TS7016: Could not find a declaration file for module 'emoji-mart'.
-declare module 'emoji-mart';

packages/editor/src/components/CodeMirrorEditor/Toolbar/EmojiButton.tsx

@@ -95,11 +95,11 @@ export const EmojiButton: FC<Props> = (props) => {
     toggle();
   }, [cursorIndex, view]);
 
-  if (view == null || cursorIndex == null) {
-    return <></>;
-  }
+  const setStyle = useCallback((): CSSProperties => {
+    if (view == null || cursorIndex == null) {
+      return {};
+    }
 
-  const setStyle = (): CSSProperties => {
     const offset = 20;
     const emojiPickerHeight = 420;
     const cursorRect = view.coordsAtPos(cursorIndex);
@@ -122,7 +122,7 @@ export const EmojiButton: FC<Props> = (props) => {
       left: cursorRect.left + offset,
       position: 'fixed',
     };
-  };
+  }, [cursorIndex, view]);
 
   return (
     <>
@@ -134,7 +134,7 @@ export const EmojiButton: FC<Props> = (props) => {
         <div className="mb-2 d-none d-md-block">
           <Modal isOpen={isOpen} toggle={toggle} backdropClassName="emoji-picker-modal" fade={false}>
             <Picker
-              onSelect={(emoji: any) => selectEmoji(emoji)}
+              onSelect={selectEmoji}
               i18n={translation}
               title={translation.title}
               emojiTooltip

packages/editor/src/stores/use-resolved-theme.ts

@@ -1,3 +1,5 @@
+import { useCallback } from 'react';
+
 import { ColorScheme } from '@growi/core';
 import { useSWRStatic } from '@growi/core/dist/swr';
 import type { SWRResponse } from 'swr';
@@ -14,9 +16,9 @@ type ResolvedThemeUtils = {
 export const useResolvedThemeForEditor = (): SWRResponse<ResolvedThemeStatus, Error> & ResolvedThemeUtils => {
   const swrResponse = useSWRStatic<ResolvedThemeStatus, Error>('resolvedTheme');
 
-  const mutateResolvedThemeForEditor = (resolvedTheme: ColorScheme) => {
-    mutate({ themeData: resolvedTheme });
-  };
+  const mutateResolvedThemeForEditor = useCallback((resolvedTheme: ColorScheme) => {
+    mutate('resolvedTheme', { themeData: resolvedTheme });
+  }, []);
 
   return {
     ...swrResponse,