Refactor useTreeItemHandlers to provide completeRenamingHotkey

apps/app/src/features/page-tree/components/ItemsTree.tsx

@@ -1,6 +1,5 @@
 import type { FC } from 'react';
 import { useCallback, useEffect, useMemo } from 'react';
-import type { CustomHotkeysConfig } from '@headless-tree/core';
 import { useTree } from '@headless-tree/react';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { useTranslation } from 'next-i18next';
@@ -79,7 +78,7 @@ export const ItemsTree: FC<Props> = (props: Props) => {
   const dataLoader = useDataLoader(rootPageId, allPagesCount);
 
   // Tree item handlers (rename, create, etc.) with stable callbacks for headless-tree
-  const { getItemName, isItemFolder, handleRename, creatingParentId } =
+  const { getItemName, isItemFolder, handleRename, creatingParentId, completeRenamingHotkey } =
     useTreeItemHandlers(triggerTreeRebuild);
 
   // Configure tree features and get checkbox state and D&D handlers
@@ -118,24 +117,6 @@ export const ItemsTree: FC<Props> = (props: Props) => {
     [enableCheckboxes],
   );
 
-  const hotkeys = useMemo<CustomHotkeysConfig<IPageForTreeItem>>(
-    () => ({
-      completeRenaming: {
-        hotkey: 'Enter',
-        allowWhenInputFocused: true,
-        isEnabled: (tree) => tree.isRenamingItem(),
-        handler: (e, tree) => {
-          // Disable rename during IME composition
-          if (e.isComposing) {
-            return;
-          }
-          tree.completeRenaming();
-        },
-      },
-    }),
-    [],
-  );
-
   const tree = useTree<IPageForTreeItem>({
     rootItemId: ROOT_PAGE_VIRTUAL_ID,
     getItemName,
@@ -156,7 +137,9 @@ export const ItemsTree: FC<Props> = (props: Props) => {
       onDrop: handleDrop,
       canDropInbetween: false,
     }),
-    hotkeys,
+    hotkeys: {
+      completeRenaming: completeRenamingHotkey
+    }
   });
 
   // Notify parent when checked items change

apps/app/src/features/page-tree/hooks/_inner/use-tree-item-handlers.tsx

@@ -1,5 +1,9 @@
-import { useCallback, useRef } from 'react';
-import type { ItemInstance, TreeConfig } from '@headless-tree/core';
+import { useCallback, useMemo, useRef } from 'react';
+import type {
+  CustomHotkeysConfig,
+  ItemInstance,
+  TreeConfig,
+} from '@headless-tree/core';
 
 import type { IPageForTreeItem } from '~/interfaces/page';
 
@@ -7,6 +11,9 @@ import { useCreatingParentId } from '../../states/_inner';
 import { usePageCreate } from '../use-page-create';
 import { usePageRename } from '../use-page-rename';
 
+type completeRenamingHotkey = CustomHotkeysConfig<IPageForTreeItem>['completeRenaming'];
+
+
 type UseTreeItemHandlersReturn = {
   /**
    * Stable callback for headless-tree getItemName config
@@ -28,6 +35,13 @@ type UseTreeItemHandlersReturn = {
    * Current creating parent ID (for tree expansion logic)
    */
   creatingParentId: string | null;
+
+  /**
+   * Hotkeys config to complete renaming
+   */
+  completeRenamingHotkey: completeRenamingHotkey;
+
+
 };
 
 /**
@@ -116,10 +130,25 @@ export const useTreeItemHandlers = (
     [],
   );
 
+  const completeRenamingHotkey: completeRenamingHotkey = useMemo(() => ({
+    hotkey: 'Enter',
+    allowWhenInputFocused: true,
+    isEnabled: (tree) => tree.isRenamingItem(),
+    handler: (e, tree) => {
+      // Disable rename during IME composition
+      if (e.isComposing) {
+        return;
+      }
+
+      tree.completeRenaming();
+    },
+  }), []);
+
   return {
     getItemName,
     isItemFolder,
     handleRename,
     creatingParentId,
+    completeRenamingHotkey,
   };
 };