Apply jotai (7.4.x)

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

@@ -1,14 +1,12 @@
 import type { JSX } from 'react';
 
-type Props = {
-  isOpen: boolean;
-  onClose: () => void;
-};
+import { useEditorGuideModalStatus, useEditorGuideModalActions } from '@growi/editor/dist/states/modal/editor-guide';
 
-export const EditorGuideModal = (props: Props): JSX.Element => {
-  const { isOpen, onClose } = props;
+export const EditorGuideModal = (): JSX.Element => {
+  const { isOpened } = useEditorGuideModalStatus();
+  const { close } = useEditorGuideModalActions();
 
-  if (!isOpen) {
+  if (!isOpened) {
     return <></>;
   }
 
@@ -17,7 +15,7 @@ export const EditorGuideModal = (props: Props): JSX.Element => {
       {/* Editor Guide Modal Overlay */}
       <div
         className="position-absolute w-100 h-100 modal-backdrop fade show z-2"
-        onClick={onClose}
+        onClick={close}
       />
 
       {/* Editor Guide Modal */}
@@ -31,7 +29,7 @@ export const EditorGuideModal = (props: Props): JSX.Element => {
               <button
                 type="button"
                 className="btn-close"
-                onClick={onClose}
+                onClick={close}
                 aria-label="Close"
               />
             </div>

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

@@ -11,7 +11,6 @@ import { pathUtils, globalEventTarget } from '@growi/core/dist/utils';
 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 { useEditorGuideModal } from '@growi/editor/dist/client/stores/use-editor-guide-modal';
 import { useRect } from '@growi/ui/dist/utils';
 import detectIndent from 'detect-indent';
 import { useAtomValue } from 'jotai';
@@ -336,15 +335,6 @@ export const PageEditorSubstance = (props: Props): JSX.Element => {
     }
   }, [editorMode, setReservedNextCaretLine]);
 
-  const { close: closeEditorGuideModal } = useEditorGuideModal();
-
-  // close modal if unmount page editor
-  useEffect(() => {
-    return () => {
-      closeEditorGuideModal();
-    };
-  }, [closeEditorGuideModal]);
-
   // TODO: Check the reproduction conditions that made this code necessary and confirm reproduction
   // // when transitioning to a different page, if the initialValue is the same,
   // // UnControlled CodeMirror value does not reset, so explicitly set the value to initialValue

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

@@ -1,6 +1,5 @@
 import type { CSSProperties, JSX } from 'react';
 
-import { useEditorGuideModal } from '@growi/editor/dist/client/stores/use-editor-guide-modal';
 import { useSlidesByFrontmatter } from '@growi/presentation/dist/services';
 
 import RevisionRenderer from '~/components/PageView/RevisionRenderer';
@@ -38,18 +37,13 @@ const Preview = (props: Props): JSX.Element => {
 
   const fluidLayoutClass = expandContentWidth ? 'fluid-layout' : '';
 
-  const { data: editorGuideModalStatus, close: closeEditorGuideModal } = useEditorGuideModal();
-
   return (
     <div
       data-testid="page-editor-preview-body"
       className={`${moduleClass} ${fluidLayoutClass} ${pagePath === '/Sidebar' ? 'preview-sidebar' : ''} position-relative`}
       style={style}
     >
-      <EditorGuideModal
-        isOpen={editorGuideModalStatus?.isOpened ?? false}
-        onClose={closeEditorGuideModal}
-      />
+      <EditorGuideModal />
 
       { markdown != null
         && (

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

@@ -1,9 +1,9 @@
 import { type JSX, useCallback } from 'react';
 
-import { useEditorGuideModal } from '../../../stores/use-editor-guide-modal';
+import { useEditorGuideModalActions } from '../../../../states/modal/editor-guide';
 
 export const EditorGuideButton = (): JSX.Element => {
-  const { open: openEditorGuideModal } = useEditorGuideModal();
+  const { open: openEditorGuideModal } = useEditorGuideModalActions();
 
   const onClickEditorGuideButton = useCallback(() => {
     openEditorGuideModal();

packages/editor/src/client/stores/use-editor-guide-modal.ts

@@ -1,33 +0,0 @@
-import { useSWRStatic } from '@growi/core/dist/swr';
-import type { SWRResponse } from 'swr';
-
-type EditorGuideModalStatus = {
-  isOpened: boolean;
-};
-
-type EditorGuideModalUtils = {
-  open(): void;
-  close(): void;
-};
-
-export const useEditorGuideModal = (): SWRResponse<
-  EditorGuideModalStatus,
-  Error
-> &
-  EditorGuideModalUtils => {
-  const initialStatus: EditorGuideModalStatus = { isOpened: false };
-  const swrResponse = useSWRStatic<EditorGuideModalStatus, Error>(
-    'editorGuideModal',
-    undefined,
-    { fallbackData: initialStatus },
-  );
-
-  return Object.assign(swrResponse, {
-    open: () => {
-      swrResponse.mutate({ isOpened: true });
-    },
-    close: () => {
-      swrResponse.mutate({ isOpened: false });
-    },
-  });
-};

packages/editor/src/states/modal/editor-guide.ts

@@ -0,0 +1,26 @@
+import { atom, useAtomValue, useSetAtom } from 'jotai';
+
+export type EditorGuideModalState = {
+  isOpened: boolean;
+};
+
+const editorGuideModalAtom = atom<EditorGuideModalState>({
+  isOpened: false,
+});
+
+export const useEditorGuideModalStatus = () => {
+  return useAtomValue(editorGuideModalAtom);
+};
+
+export const useEditorGuideModalActions = () => {
+  const setModalState = useSetAtom(editorGuideModalAtom);
+
+  return {
+    open: () => {
+      setModalState({ isOpened: true });
+    },
+    close: () => {
+      setModalState({ isOpened: false });
+    },
+  };
+};