refactor for useEditingMarkdown

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

@@ -37,7 +37,7 @@ import {
   useIsEnabledAttachTitleHeader,
   useIsIndentSizeForced,
 } from '~/states/server-configurations';
-import { useEditorMode, EditorMode } from '~/states/ui/editor';
+import { useEditorMode, EditorMode, useEditingMarkdown } from '~/states/ui/editor';
 import {
   useAcceptedUploadFileType, useIsEnableUnifiedMergeView,
 } from '~/stores-universal/context';
@@ -46,7 +46,6 @@ import {
   useReservedNextCaretLine,
   useEditorSettings,
   useCurrentIndentSize,
-  useEditingMarkdown,
   useWaitingSaveProcessing,
 } from '~/stores/editor';
 import {
@@ -104,7 +103,7 @@ export const PageEditorSubstance = (props: Props): JSX.Element => {
   const [currentPathname] = useCurrentPathname();
   const [currentPage] = useCurrentPageData();
   const { data: selectedGrant } = useSelectedGrant();
-  const { data: editingMarkdown } = useEditingMarkdown();
+  const [editingMarkdown] = useEditingMarkdown();
   const [isEnabledAttachTitleHeader] = useIsEnabledAttachTitleHeader();
   const [templateBody] = useTemplateBody();
   const [isEditable] = useIsEditable();

apps/app/src/client/services/page-operation.ts

@@ -7,7 +7,8 @@ import urljoin from 'url-join';
 import type { SyncLatestRevisionBody } from '~/interfaces/yjs';
 import { useIsGuestUser } from '~/states/context';
 import { useCurrentPageId, useFetchCurrentPage } from '~/states/page';
-import { useEditingMarkdown, usePageTagsForEditors } from '~/stores/editor';
+import { useEditingMarkdown } from '~/states/ui/editor';
+import { usePageTagsForEditors } from '~/stores/editor';
 import {
   useSWRxApplicableGrant, useSWRxTagsInfo,
   useSWRxCurrentGrantData,
@@ -104,7 +105,7 @@ export const useUpdateStateAfterSave = (pageId: string|undefined|null, opts?: Up
   const { setRemoteLatestPageData } = useSetRemoteLatestPageData();
   const { mutate: mutateTagsInfo } = useSWRxTagsInfo(pageId);
   const { sync: syncTagsInfoForEditor } = usePageTagsForEditors(pageId);
-  const { mutate: mutateEditingMarkdown } = useEditingMarkdown();
+  const [, setEditingMarkdown] = useEditingMarkdown();
   const [isGuestUser] = useIsGuestUser();
   const { mutate: mutateCurrentGrantData } = useSWRxCurrentGrantData(isGuestUser ? null : pageId);
   const { mutate: mutateApplicableGrant } = useSWRxApplicableGrant(isGuestUser ? null : pageId);
@@ -127,7 +128,7 @@ export const useUpdateStateAfterSave = (pageId: string|undefined|null, opts?: Up
     // and see: https://github.com/weseek/growi/pull/7118
     const supressEditingMarkdownMutation = opts?.supressEditingMarkdownMutation ?? false;
     if (!supressEditingMarkdownMutation) {
-      mutateEditingMarkdown(updatedPage.revision.body);
+      setEditingMarkdown(updatedPage.revision.body);
     }
 
     mutateCurrentGrantData();
@@ -143,7 +144,7 @@ export const useUpdateStateAfterSave = (pageId: string|undefined|null, opts?: Up
     setRemoteLatestPageData(remoterevisionData);
   },
   // eslint-disable-next-line max-len
-  [pageId, mutateTagsInfo, syncTagsInfoForEditor, setCurrentPageId, fetchCurrentPage, opts?.supressEditingMarkdownMutation, mutateCurrentGrantData, mutateApplicableGrant, setRemoteLatestPageData, mutateEditingMarkdown]);
+  [pageId, mutateTagsInfo, syncTagsInfoForEditor, setCurrentPageId, fetchCurrentPage, opts?.supressEditingMarkdownMutation, mutateCurrentGrantData, mutateApplicableGrant, setRemoteLatestPageData, setEditingMarkdown]);
 };
 
 export const unlink = async(path: string): Promise<void> => {

apps/app/src/pages/[[...path]]/use-same-route-navigation.spec.tsx

@@ -6,7 +6,7 @@ import { vi } from 'vitest';
 import { mock } from 'vitest-mock-extended';
 
 import { useFetchCurrentPage } from '~/states/page';
-import { useEditingMarkdown } from '~/stores/editor';
+import { useEditingMarkdown } from '~/states/ui/editor';
 
 import { useSameRouteNavigation } from './use-same-route-navigation';
 
@@ -15,11 +15,11 @@ vi.mock('next/router', () => ({
   useRouter: vi.fn(),
 }));
 vi.mock('~/states/page');
-vi.mock('~/stores/editor');
+vi.mock('~/states/ui/editor');
 
 // Define stable mock functions outside of describe/beforeEach
 const mockFetchCurrentPage = vi.fn();
-const mockMutateEditingMarkdown = vi.fn();
+const mockSetEditingMarkdown = vi.fn();
 
 const pageDataMock = mock<IPagePopulatedToShowRevision>({
   revision: {
@@ -47,9 +47,7 @@ describe('useSameRouteNavigation', () => {
       fetchCurrentPage: mockFetchCurrentPage,
     });
 
-    (useEditingMarkdown as ReturnType<typeof vi.fn>).mockReturnValue({
-      mutate: mockMutateEditingMarkdown,
-    });
+    (useEditingMarkdown as ReturnType<typeof vi.fn>).mockReturnValue(['', mockSetEditingMarkdown]);
 
     mockFetchCurrentPage.mockResolvedValue(pageDataMock);
   });
@@ -69,7 +67,7 @@ describe('useSameRouteNavigation', () => {
       expect(mockFetchCurrentPage).toHaveBeenCalledWith({ path: '/new-path' });
 
       // 2. mutateEditingMarkdown is called with the content from the fetched page
-      expect(mockMutateEditingMarkdown).toHaveBeenCalledWith(pageDataMock.revision?.body);
+      expect(mockSetEditingMarkdown).toHaveBeenCalledWith(pageDataMock.revision?.body);
     });
   });
 
@@ -80,7 +78,7 @@ describe('useSameRouteNavigation', () => {
     // call on initial render
     await waitFor(() => {
       expect(mockFetchCurrentPage).toHaveBeenCalledTimes(1);
-      expect(mockMutateEditingMarkdown).toHaveBeenCalledTimes(1);
+      expect(mockSetEditingMarkdown).toHaveBeenCalledTimes(1);
     });
 
     // Act: Rerender with the same path
@@ -90,7 +88,7 @@ describe('useSameRouteNavigation', () => {
     // A short delay to ensure no async operations are triggered
     await new Promise(resolve => setTimeout(resolve, 100));
     expect(mockFetchCurrentPage).toHaveBeenCalledTimes(1); // Should not be called again
-    expect(mockMutateEditingMarkdown).toHaveBeenCalledTimes(1);
+    expect(mockSetEditingMarkdown).toHaveBeenCalledTimes(1);
   });
 
   it('should not call mutateEditingMarkdown if pageData or revision is null', async() => {
@@ -99,7 +97,7 @@ describe('useSameRouteNavigation', () => {
     const { rerender } = renderHook(() => useSameRouteNavigation());
     await waitFor(() => {
       expect(mockFetchCurrentPage).toHaveBeenCalledTimes(1);
-      expect(mockMutateEditingMarkdown).toHaveBeenCalledTimes(1);
+      expect(mockSetEditingMarkdown).toHaveBeenCalledTimes(1);
     });
 
     // Arrange: next, fetch fails (returns null)
@@ -114,7 +112,7 @@ describe('useSameRouteNavigation', () => {
       // fetch should be called again
       expect(mockFetchCurrentPage).toHaveBeenCalledWith({ path: '/path-with-no-data' });
       // but mutate should not be called again
-      expect(mockMutateEditingMarkdown).toHaveBeenCalledTimes(1);
+      expect(mockSetEditingMarkdown).toHaveBeenCalledTimes(1);
     });
   });
 });

apps/app/src/pages/[[...path]]/use-same-route-navigation.ts

@@ -3,7 +3,7 @@ import { useEffect } from 'react';
 import { useRouter } from 'next/router';
 
 import { useFetchCurrentPage } from '~/states/page';
-import { useEditingMarkdown } from '~/stores/editor';
+import { useEditingMarkdown } from '~/states/ui/editor';
 
 /**
  * This hook is a trigger to fetch page data on client-side navigation.
@@ -14,16 +14,16 @@ import { useEditingMarkdown } from '~/stores/editor';
 export const useSameRouteNavigation = (): void => {
   const router = useRouter();
   const { fetchCurrentPage } = useFetchCurrentPage();
-  const { mutate: mutateEditingMarkdown } = useEditingMarkdown();
+  const [, setEditingMarkdown] = useEditingMarkdown();
 
   // useEffect to trigger data fetching when the path changes
   useEffect(() => {
     const fetch = async() => {
       const pageData = await fetchCurrentPage({ path: router.asPath });
       if (pageData?.revision?.body != null) {
-        mutateEditingMarkdown(pageData.revision.body);
+        setEditingMarkdown(pageData.revision.body);
       }
     };
     fetch();
-  }, [router.asPath, fetchCurrentPage, mutateEditingMarkdown]);
+  }, [router.asPath, fetchCurrentPage, setEditingMarkdown]);
 };

apps/app/src/stores/editor.tsx

@@ -21,11 +21,6 @@ export const useWaitingSaveProcessing = (): SWRResponse<boolean, Error> => {
 };
 
 
-export const useEditingMarkdown = (initialData?: string): SWRResponse<string, Error> => {
-  return useSWRStatic('editingMarkdown', initialData);
-};
-
-
 type EditorSettingsOperation = {
   update: (updateData: Partial<EditorSettings>) => Promise<void>,
 }