introduce useResolvedTheme

apps/app/src/components/Layout/BasicLayout.tsx

@@ -3,7 +3,6 @@ import React, { ReactNode } from 'react';
 import dynamic from 'next/dynamic';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
-import { mutate } from 'swr';
 
 import { Sidebar } from '../Sidebar';
 

apps/app/src/components/PageComment/CommentEditor.tsx

@@ -2,6 +2,7 @@ import React, {
   useCallback, useState, useRef, useEffect,
 } from 'react';
 
+import { useResolvedTheme } from '@growi/editor/src/stores/use-resolved-theme';
 import { UserPicture } from '@growi/ui/dist/components';
 import dynamic from 'next/dynamic';
 import { useRouter } from 'next/router';
@@ -19,6 +20,7 @@ import {
 } from '~/stores/context';
 import { useSWRxSlackChannels, useIsSlackEnabled, useIsEnabledUnsavedWarning } from '~/stores/editor';
 import { useCurrentPagePath } from '~/stores/page';
+import { useNextThemes } from '~/stores/use-next-themes';
 
 import { CustomNavTab } from '../CustomNavigation/CustomNav';
 import { NotAvailableForGuest } from '../NotAvailableForGuest';
@@ -76,6 +78,10 @@ export const CommentEditor = (props: CommentEditorProps): JSX.Element => {
     increment: incrementEditingCommentsNum,
     decrement: decrementEditingCommentsNum,
   } = useSWRxEditingCommentsNum();
+  const { mutate: mutateResolvedTheme } = useResolvedTheme();
+
+  const { resolvedTheme } = useNextThemes();
+  mutateResolvedTheme(resolvedTheme);
 
   const [isReadyToUse, setIsReadyToUse] = useState(!isForNewComment);
   const [comment, setComment] = useState(commentBody ?? '');

apps/app/src/components/PageEditor/PageEditor.tsx

@@ -8,6 +8,7 @@ import nodePath from 'path';
 import type { IPageHasId } from '@growi/core';
 import { pathUtils } from '@growi/core/dist/utils';
 import { CodeMirrorEditorMain, GlobalCodeMirrorEditorKey, useCodeMirrorEditorIsolated } from '@growi/editor';
+import { useResolvedTheme } from '@growi/editor/src/stores/use-resolved-theme';
 import detectIndent from 'detect-indent';
 import { useTranslation } from 'next-i18next';
 import { useRouter } from 'next/router';
@@ -46,6 +47,7 @@ import {
   EditorMode,
   useEditorMode, useSelectedGrant,
 } from '~/stores/ui';
+import { useNextThemes } from '~/stores/use-next-themes';
 import { useGlobalSocket } from '~/stores/websocket';
 import loggerFactory from '~/utils/logger';
 
@@ -120,9 +122,13 @@ export const PageEditor = React.memo((props: Props): JSX.Element => {
   const { mutate: mutateIsEnabledUnsavedWarning } = useIsEnabledUnsavedWarning();
   const { mutate: mutateIsConflict } = useIsConflict();
 
+  const { mutate: mutateResolvedTheme } = useResolvedTheme();
+
   const saveOrUpdate = useSaveOrUpdate();
   const updateStateAfterSave = useUpdateStateAfterSave(pageId, { supressEditingMarkdownMutation: true });
 
+  const { resolvedTheme } = useNextThemes();
+  mutateResolvedTheme(resolvedTheme);
 
   // TODO: remove workaround
   // for https://redmine.weseek.co.jp/issues/125923

apps/app/src/pages/_app.page.tsx

@@ -5,7 +5,7 @@ import { appWithTranslation } from 'next-i18next';
 import { AppProps } from 'next/app';
 import { Lato } from 'next/font/google';
 import localFont from 'next/font/local';
-import { SWRConfig, mutate } from 'swr';
+import { SWRConfig } from 'swr';
 
 import * as nextI18nConfig from '^/config/next-i18next.config';
 
@@ -13,7 +13,6 @@ import { useI18nextHMR } from '~/services/i18next-hmr';
 import {
   useAppTitle, useConfidential, useGrowiVersion, useSiteUrl, useIsDefaultLogo, useForcedColorScheme,
 } from '~/stores/context';
-import { useNextThemes } from '~/stores/use-next-themes';
 import { swrGlobalConfiguration } from '~/utils/swr-utils';
 
 import { CommonProps } from './utils/commons';
@@ -55,12 +54,6 @@ type GrowiAppProps = AppProps & {
 registerTransformerForObjectId();
 
 function GrowiApp({ Component, pageProps }: GrowiAppProps): JSX.Element {
-  const { resolvedTheme } = useNextThemes();
-
-  console.log(resolvedTheme);
-
-  mutate('resolvedTheme', resolvedTheme);
-
   useI18nextHMR(isDev);
 
   useEffect(() => {

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

@@ -67,9 +67,9 @@ const getEmojiTranslation = (): Translation => {
 export const EmojiButton: FC<Props> = (props) => {
   const [isOpen, setIsOpen] = useState(false);
 
-  const { data } = useResolvedTheme();
+  const { data: resolvedTheme } = useResolvedTheme();
 
-  console.dir(data);
+  console.dir(resolvedTheme);
 
   const { codeMirrorEditor } = props;
   const view = codeMirrorEditor?.view;
@@ -139,7 +139,7 @@ export const EmojiButton: FC<Props> = (props) => {
             title={translation.title}
             emojiTooltip
             style={setStyle()}
-            // theme={resolvedTheme}
+            theme={resolvedTheme}
           />
         </Modal>
       </div>

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

@@ -12,7 +12,7 @@ type ResolvedThemeUtils = {
 }
 
 export const useResolvedTheme = (): SWRResponse<ResolvedThemeStatus, Error> & ResolvedThemeUtils => {
-  const swrResponse = useSWRStatic('resolvedTheme');
+  const swrResponse = useSWRStatic<ResolvedThemeStatus, Error>('resolvedTheme');
 
   const mutateResolvedTheme = (resolvedTheme: ColorScheme) => {
     mutate({ themeData: resolvedTheme });