tidy up editor states

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

@@ -1,60 +0,0 @@
-import { PageGrant } from '@growi/core/dist/interfaces';
-import { isServer } from '@growi/core/dist/utils';
-import { atom } from 'jotai';
-
-import type { IPageSelectedGrant } from '~/interfaces/page';
-
-import { EditorMode, EditorModeHash } from './types';
-import { determineEditorModeByHash } from './utils';
-
-// Base atom for editor mode
-const editorModeBaseAtom = atom<EditorMode | null>(null);
-
-// Derived atom with initialization logic
-export const editorModeAtom = atom(
-  (get) => {
-    const baseMode = get(editorModeBaseAtom);
-
-    // If already initialized, return the current mode
-    if (baseMode !== null) {
-      return baseMode;
-    }
-
-    // Initialize from hash on first access
-    return determineEditorModeByHash();
-  },
-  (get, set, newMode: EditorMode) => {
-    // Update URL hash when mode changes (client-side only)
-    if (!isServer()) {
-      const { pathname, search } = window.location;
-      const hash =
-        newMode === EditorMode.Editor
-          ? EditorModeHash.Edit
-          : EditorModeHash.View;
-      window.history.replaceState(null, '', `${pathname}${search}${hash}`);
-    }
-
-    set(editorModeBaseAtom, newMode);
-  },
-);
-
-/**
- * Atom for editing markdown content
- */
-export const editingMarkdownAtom = atom<string>('');
-
-/**
- * Atom for selected grant in page editor
- * Stores temporary grant selection before it's applied to the page
- */
-export const selectedGrantAtom = atom<IPageSelectedGrant | null>({
-  grant: PageGrant.GRANT_PUBLIC,
-});
-
-/**
- * Internal atoms for derived atom usage (special naming convention)
- * These atoms are exposed only for creating derived atoms in other modules
- */
-export const _atomsForDerivedAbilities = {
-  editorModeAtom,
-} as const;

apps/app/src/states/ui/editor/editing-markdown.ts

@@ -0,0 +1,16 @@
+import { atom, useAtomValue, useSetAtom } from 'jotai';
+
+/**
+ * Atom for editing markdown content
+ */
+export const editingMarkdownAtom = atom<string>('');
+
+/**
+ * Hook to get the current markdown being edited
+ */
+export const useEditingMarkdown = () => useAtomValue(editingMarkdownAtom);
+
+/**
+ * Hook to set the markdown being edited
+ */
+export const useSetEditingMarkdown = () => useSetAtom(editingMarkdownAtom);

apps/app/src/states/ui/editor/hooks.ts → apps/app/src/states/ui/editor/editor-mode.ts

@@ -1,13 +1,40 @@
-import { useAtom, useAtomValue, useSetAtom } from 'jotai';
+import { isServer } from '@growi/core/dist/utils';
+import { atom, useAtom } from 'jotai';
 import { useCallback } from 'react';
 import { useIsEditable, usePageNotFound } from '~/states/page';
+import { EditorMode, EditorModeHash, type UseEditorModeReturn } from './types';
+import { determineEditorModeByHash } from './utils';
 
-import {
-  editingMarkdownAtom,
-  editorModeAtom,
-  selectedGrantAtom,
-} from './atoms';
-import { EditorMode, type UseEditorModeReturn } from './types';
+// Base atom for editor mode
+const editorModeBaseAtom = atom<EditorMode | null>(null);
+
+// Derived atom with initialization logic
+export const editorModeAtom = atom(
+  (get) => {
+    const baseMode = get(editorModeBaseAtom);
+
+    // If already initialized, return the current mode
+    if (baseMode !== null) {
+      return baseMode;
+    }
+
+    // Initialize from hash on first access
+    return determineEditorModeByHash();
+  },
+  (_get, set, newMode: EditorMode) => {
+    // Update URL hash when mode changes (client-side only)
+    if (!isServer()) {
+      const { pathname, search } = window.location;
+      const hash =
+        newMode === EditorMode.Editor
+          ? EditorModeHash.Edit
+          : EditorModeHash.View;
+      window.history.replaceState(null, '', `${pathname}${search}${hash}`);
+    }
+
+    set(editorModeBaseAtom, newMode);
+  },
+);
 
 export const useEditorMode = (): UseEditorModeReturn => {
   const isEditable = useIsEditable();
@@ -48,11 +75,10 @@ export const useEditorMode = (): UseEditorModeReturn => {
   };
 };
 
-export const useEditingMarkdown = () => useAtomValue(editingMarkdownAtom);
-export const useSetEditingMarkdown = () => useSetAtom(editingMarkdownAtom);
-
 /**
- * Hook for managing selected grant in page editor
- * Used for temporary grant selection before applying to the page
+ * Internal atoms for derived atom usage (special naming convention)
+ * These atoms are exposed only for creating derived atoms in other modules
  */
-export const useSelectedGrant = () => useAtom(selectedGrantAtom);
+export const _atomsForDerivedAbilities = {
+  editorModeAtom,
+} as const;

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

@@ -1,13 +1,9 @@
 // Export only the essential public API
 
-export { _atomsForDerivedAbilities } from './atoms';
 export * from './current-indent-size';
-export {
-  useEditingMarkdown,
-  useEditorMode,
-  useSelectedGrant,
-  useSetEditingMarkdown,
-} from './hooks';
+export * from './editing-markdown';
+export * from './editor-mode';
+export * from './selected-grant';
 export type { EditorMode as EditorModeType } from './types';
 export { EditorMode } from './types';
 // Export utility functions that might be needed elsewhere

apps/app/src/states/ui/editor/selected-grant.ts

@@ -0,0 +1,17 @@
+import { PageGrant } from '@growi/core/dist/interfaces';
+import { atom, useAtom } from 'jotai';
+import type { IPageSelectedGrant } from '~/interfaces/page';
+
+/**
+ * Atom for selected grant in page editor
+ * Stores temporary grant selection before it's applied to the page
+ */
+const selectedGrantAtom = atom<IPageSelectedGrant | null>({
+  grant: PageGrant.GRANT_PUBLIC,
+});
+
+/**
+ * Hook for managing selected grant in page editor
+ * Used for temporary grant selection before applying to the page
+ */
+export const useSelectedGrant = () => useAtom(selectedGrantAtom);

apps/app/src/states/ui/sidebar/sidebar.ts

@@ -5,7 +5,7 @@ import { scheduleToPut } from '~/client/services/user-ui-settings';
 import { SidebarContentsType, SidebarMode } from '~/interfaces/ui';
 import { isDeviceLargerThanXlAtom } from '../device';
 import { EditorMode } from '../editor';
-import { editorModeAtom } from '../editor/atoms'; // import the atom directly
+import { editorModeAtom } from '../editor/editor-mode'; // import the atom directly
 
 const isDrawerOpenedAtom = atom(false);