clean useResolvedTheme

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

@@ -4,7 +4,7 @@ import React, {
   useMemo,
 } from 'react';
 
-import { GlobalCodeMirrorEditorKey, useResolvedThemeActions } from '@growi/editor';
+import { GlobalCodeMirrorEditorKey, useSetResolvedTheme } from '@growi/editor';
 import { CodeMirrorEditorComment } from '@growi/editor/dist/client/components/CodeMirrorEditorComment';
 import { useCodeMirrorEditorIsolated } from '@growi/editor/dist/client/stores/codemirror-editor';
 import { UserPicture } from '@growi/ui/dist/components';
@@ -84,9 +84,12 @@ export const CommentEditor = (props: CommentEditorProps): JSX.Element => {
   const isSlackConfigured = useAtomValue(isSlackConfiguredAtom);
   const { data: editorSettings } = useEditorSettings();
   const { markDirty, markClean } = useCommentEditorsDirtyMap();
-  const { mutateResolvedTheme } = useResolvedThemeActions();
+
+  const setResolvedTheme = useSetResolvedTheme();
   const { resolvedTheme } = useNextThemes();
-  mutateResolvedTheme(resolvedTheme);
+  useEffect(() => {
+    setResolvedTheme(resolvedTheme);
+  }, [resolvedTheme, setResolvedTheme]);
 
   const editorKey = useMemo(() => {
     if (replyTo != null) {
@@ -314,9 +317,11 @@ export const CommentEditorPre = (props: CommentEditorProps): JSX.Element => {
   const { onCommented, onCanceled, ...rest } = props;
 
   const currentUser = useCurrentUser();
-  const { mutateResolvedTheme } = useResolvedThemeActions();
+  const setResolvedTheme = useSetResolvedTheme();
   const { resolvedTheme } = useNextThemes();
-  mutateResolvedTheme(resolvedTheme);
+  useEffect(() => {
+    setResolvedTheme(resolvedTheme);
+  }, [resolvedTheme, setResolvedTheme]);
 
   const [isReadyToUse, setIsReadyToUse] = useState(false);
 

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

@@ -9,7 +9,7 @@ import nodePath from 'path';
 import { Origin } from '@growi/core';
 import type { IPageHasId } from '@growi/core/dist/interfaces';
 import { pathUtils } from '@growi/core/dist/utils';
-import { GlobalCodeMirrorEditorKey, useResolvedThemeActions } from '@growi/editor';
+import { GlobalCodeMirrorEditorKey, useSetResolvedTheme } from '@growi/editor';
 import { CodeMirrorEditorMain } from '@growi/editor/dist/client/components/CodeMirrorEditorMain';
 import { useCodeMirrorEditorIsolated } from '@growi/editor/dist/client/stores/codemirror-editor';
 import { useRect } from '@growi/ui/dist/utils';
@@ -124,8 +124,6 @@ export const PageEditorSubstance = (props: Props): JSX.Element => {
 
   const { data: rendererOptions } = usePreviewOptions();
 
-  const { mutateResolvedTheme } = useResolvedThemeActions();
-
   const shouldExpandContent = useShouldExpandContent(currentPage);
 
   const updatePage = useUpdatePage();
@@ -133,8 +131,11 @@ export const PageEditorSubstance = (props: Props): JSX.Element => {
 
   useConflictEffect();
 
+  const setResolvedTheme = useSetResolvedTheme();
   const { resolvedTheme } = useNextThemes();
-  mutateResolvedTheme(resolvedTheme);
+  useEffect(() => {
+    setResolvedTheme(resolvedTheme);
+  }, [resolvedTheme, setResolvedTheme]);
 
   const currentRevisionId = currentPage?.revision?._id;
   const isRevisionIdRequiredForPageUpdate = currentPage?.revision?.origin === undefined;

packages/editor/src/client/components-internal/CodeMirrorEditor/Toolbar/EmojiButton.tsx

@@ -80,7 +80,7 @@ export const EmojiButton = (props: Props): JSX.Element => {
             <span style={setStyle()}>
               <Picker
                 onEmojiSelect={selectEmoji}
-                theme={resolvedTheme?.themeData}
+                theme={resolvedTheme}
                 data={emojiData}
                 // TODO: https://redmine.weseek.co.jp/issues/133681
                 // i18n={}

packages/editor/src/states/modal/drawio-for-editor.ts

@@ -10,9 +10,7 @@ const drawioModalForEditorAtom = atom<DrawioModalForEditorState>({
   editorKey: undefined,
 });
 
-export const useDrawioModalForEditorStatus = () => {
-  return useAtomValue(drawioModalForEditorAtom);
-};
+export const useDrawioModalForEditorStatus = () => useAtomValue(drawioModalForEditorAtom);
 
 export const useDrawioModalForEditorActions = () => {
   const setModalState = useSetAtom(drawioModalForEditorAtom);
@@ -25,4 +23,4 @@ export const useDrawioModalForEditorActions = () => {
       setModalState({ isOpened: false, editorKey: undefined });
     },
   };
-};
+};

packages/editor/src/states/modal/handsontable.ts

@@ -12,9 +12,7 @@ const handsontableModalAtom = atom<HandsontableModalState>({
   editor: undefined,
 });
 
-export const useHandsontableModalForEditorStatus = () => {
-  return useAtomValue(handsontableModalAtom);
-};
+export const useHandsontableModalForEditorStatus = () => useAtomValue(handsontableModalAtom);
 
 export const useHandsontableModalForEditorActions = () => {
   const setModalState = useSetAtom(handsontableModalAtom);

packages/editor/src/states/modal/link-edit.ts

@@ -14,9 +14,7 @@ const linkEditModalAtom = atom<LinkEditModalState>({
   onSave: undefined,
 });
 
-export const useLinkEditModalStatus = () => {
-  return useAtomValue(linkEditModalAtom);
-};
+export const useLinkEditModalStatus = () => useAtomValue(linkEditModalAtom);
 
 export const useLinkEditModalActions = () => {
   const setModalState = useSetAtom(linkEditModalAtom);

packages/editor/src/states/modal/template.ts

@@ -15,9 +15,7 @@ const templateModalAtom = atom<TemplateModalState>({
   onSubmit: undefined,
 });
 
-export const useTemplateModalStatus = () => {
-  return useAtomValue(templateModalAtom);
-};
+export const useTemplateModalStatus = () => useAtomValue(templateModalAtom);
 
 export const useTemplateModalActions = () => {
   const setModalState = useSetAtom(templateModalAtom);

packages/editor/src/states/ui/resolved-theme.ts

@@ -1,26 +1,9 @@
 import type { ColorScheme } from '@growi/core';
-import { atom, useAtom, useSetAtom } from 'jotai';
+import { atom, useAtomValue, useSetAtom } from 'jotai';
 
 
-type ResolvedThemeState = {
-  themeData?: ColorScheme;
-};
+const resolvedThemeAtom = atom<ColorScheme>();
 
-const resolvedThemeAtom = atom<ResolvedThemeState>({
-  themeData: undefined,
-});
+export const useResolvedTheme = () => useAtomValue(resolvedThemeAtom);
 
-export const useResolvedTheme = () => {
-  const [state] = useAtom(resolvedThemeAtom);
-  return state;
-};
-
-export const useResolvedThemeActions = () => {
-  const setState = useSetAtom(resolvedThemeAtom);
-
-  return {
-    mutateResolvedTheme: (resolvedTheme: ColorScheme) => {
-      setState({ themeData: resolvedTheme });
-    },
-  };
-};
+export const useSetResolvedTheme = () => useSetAtom(resolvedThemeAtom);