refactor: consolidate editor hooks and add reserved next caret line management

apps/app/src/client/components/Page/DisplaySwitcher.tsx

@@ -4,8 +4,7 @@ import dynamic from 'next/dynamic';
 
 import { useHashChangedEffect } from '~/client/services/side-effects/hash-changed';
 import { useIsEditable, useLatestRevision } from '~/states/page';
-import { EditorMode, useEditorMode } from '~/states/ui/editor';
-import { useReservedNextCaretLine } from '~/stores/editor';
+import { EditorMode, useEditorMode, useReservedNextCaretLine } from '~/states/ui/editor';
 
 import { LazyRenderer } from '../Common/LazyRenderer';
 

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

@@ -43,19 +43,16 @@ import {
 import {
   useCurrentIndentSize, useCurrentIndentSizeActions,
   useEditorMode, EditorMode, useEditingMarkdown, useSelectedGrant,
-  useWaitingSaveProcessingActions,
+  useWaitingSaveProcessingActions, useSetReservedNextCaretLine, useReservedNextCaretLineValue,
 } from '~/states/ui/editor';
+import { useEditingClientsActions } from '~/states/ui/editor/editing-clients';
 import { useNextThemes } from '~/stores-universal/use-next-themes';
-import {
-  useReservedNextCaretLine,
-  useEditorSettings,
-} from '~/stores/editor';
+import { useEditorSettings } from '~/stores/editor';
 import {
   useSWRxCurrentGrantData,
 } from '~/stores/page';
 import { mutatePageTree, mutateRecentlyUpdated } from '~/stores/page-listing';
 import { usePreviewOptions } from '~/stores/renderer';
-import { useEditingClientsActions } from '~/states/ui/editor/editing-clients';
 import loggerFactory from '~/utils/logger';
 
 import { EditorNavbar } from './EditorNavbar';
@@ -121,7 +118,8 @@ export const PageEditorSubstance = (props: Props): JSX.Element => {
   const user = useCurrentUser();
   const { mutate: mutateEditingUsers } = useEditingClientsActions();
   const onConflict = useConflictResolver();
-  const { data: reservedNextCaretLine, mutate: mutateReservedNextCaretLine } = useReservedNextCaretLine();
+  const reservedNextCaretLine = useReservedNextCaretLineValue();
+  const setReservedNextCaretLine = useSetReservedNextCaretLine();
   const isEnableUnifiedMergeView = useIsEnableUnifiedMergeView();
 
   const { data: rendererOptions } = usePreviewOptions();
@@ -334,9 +332,9 @@ export const PageEditorSubstance = (props: Props): JSX.Element => {
   // reset caret line if returning to the View.
   useEffect(() => {
     if (editorMode === EditorMode.View) {
-      mutateReservedNextCaretLine(0);
+      setReservedNextCaretLine(0);
     }
-  }, [editorMode, mutateReservedNextCaretLine]);
+  }, [editorMode, setReservedNextCaretLine]);
 
 
   // TODO: Check the reproduction conditions that made this code necessary and confirm reproduction

apps/app/src/states/ui/editor/index.ts

@@ -3,6 +3,7 @@
 export * from './current-indent-size';
 export * from './editing-markdown';
 export * from './editor-mode';
+export * from './reserved-next-caret-line';
 export * from './selected-grant';
 export type { EditorMode as EditorModeType } from './types';
 export { EditorMode } from './types';

apps/app/src/states/ui/editor/reserved-next-caret-line.ts

@@ -0,0 +1,45 @@
+import { useEffect } from 'react';
+import type EventEmitter from 'node:events';
+import { atom, useAtomValue, useSetAtom } from 'jotai';
+
+declare global {
+  // eslint-disable-next-line vars-on-top, no-var
+  var globalEmitter: EventEmitter;
+}
+
+/**
+ * Atom for managing the reserved next caret line number
+ */
+const reservedNextCaretLineAtom = atom<number>(0);
+
+/**
+ * Hook to get and manage the reserved next caret line number
+ * This hook listens to the 'reservedNextCaretLine' event from globalEmitter
+ * @returns The current reserved next caret line number
+ */
+export const useReservedNextCaretLine = (): void => {
+  const setReservedNextCaretLine = useSetAtom(reservedNextCaretLineAtom);
+
+  useEffect(() => {
+    const handler = (lineNumber: number) => {
+      setReservedNextCaretLine(lineNumber);
+    };
+
+    globalEmitter?.on('reservedNextCaretLine', handler);
+
+    return function cleanup() {
+      globalEmitter?.removeListener('reservedNextCaretLine', handler);
+    };
+  }, [setReservedNextCaretLine]);
+};
+
+export const useReservedNextCaretLineValue = (): number =>
+  useAtomValue(reservedNextCaretLineAtom);
+
+/**
+ * Hook to set the reserved next caret line number
+ * @returns Setter function for the reserved next caret line number
+ */
+export const useSetReservedNextCaretLine = () => {
+  return useSetAtom(reservedNextCaretLineAtom);
+};

apps/app/src/stores/editor.tsx

@@ -1,5 +1,3 @@
-import { useEffect } from 'react';
-
 import { type Nullable } from '@growi/core';
 import { withUtils, type SWRResponseWithUtils, useSWRStatic } from '@growi/core/dist/swr';
 import type { EditorSettings } from '@growi/editor';
@@ -78,27 +76,4 @@ export const useIsSlackEnabled = (): SWRResponse<boolean, Error> => {
 
 export type IPageTagsForEditorsOption = {
   sync: (tags?: string[]) => void;
-}
-
-
-export const useReservedNextCaretLine = (initialData?: number): SWRResponse<number> => {
-
-  const swrResponse = useSWRStatic('saveNextCaretLine', initialData, { fallbackData: 0 });
-  const { mutate } = swrResponse;
-
-  useEffect(() => {
-    const handler = (lineNumber: number) => {
-      mutate(lineNumber);
-    };
-
-    globalEmitter.on('reservedNextCaretLine', handler);
-
-    return function cleanup() {
-      globalEmitter.removeListener('reservedNextCaretLine', handler);
-    };
-  }, [mutate]);
-
-  return {
-    ...swrResponse,
-  };
 };