Revert "change textinput to form"

This reverts commit c59fdb649213d55b4ddecbf1a6719ceb06cdc82d.

apps/app/src/components/PageHeader/PagePathHeader.tsx

@@ -1,17 +1,8 @@
 import { FC, useCallback, useState } from 'react';
 
-import nodePath from 'path';
-
 import type { IPagePopulatedToShowRevision } from '@growi/core';
-import { pathUtils } from '@growi/core/dist/utils';
-import { useTranslation } from 'next-i18next';
 
-import { apiv3Put } from '~/client/util/apiv3-client';
-import { toastSuccess, toastError } from '~/client/util/toastr';
 import { usePageSelectModal } from '~/stores/modal';
-import { useSWRMUTxCurrentPage } from '~/stores/page';
-import { mutatePageTree, mutatePageList } from '~/stores/page-listing';
-import { mutateSearching } from '~/stores/search';
 import { EditorMode, useEditorMode } from '~/stores/ui';
 
 import { PagePathNav } from '../Common/PagePathNav';
@@ -31,11 +22,8 @@ export const PagePathHeader: FC<Props> = (props) => {
   const [isRenameInputShown, setRenameInputShown] = useState(false);
   const [isButtonsShown, setButtonShown] = useState(false);
 
-  const { t } = useTranslation();
-
   const { data: editorMode } = useEditorMode();
   const { data: PageSelectModalData, open: openPageSelectModal } = usePageSelectModal();
-  const { trigger: mutateCurrentPage } = useSWRMUTxCurrentPage();
 
   const stateHandler = { isRenameInputShown, setRenameInputShown };
 
@@ -58,50 +46,6 @@ export const PagePathHeader: FC<Props> = (props) => {
     );
   }, [currentPage._id, currentPagePath, isEditorMode]);
 
-  const onRenamed = useCallback((fromPath: string | undefined, toPath: string) => {
-
-    mutatePageTree();
-    mutateSearching();
-    mutatePageList();
-
-    if (currentPagePath === fromPath || currentPagePath === toPath) {
-      mutateCurrentPage();
-    }
-  }, [currentPagePath, mutateCurrentPage]);
-
-  if (currentPage == null) {
-    return <></>;
-  }
-
-  const onPressEnterForRenameHandler = async(inputText: string) => {
-    const parentPath = pathUtils.addTrailingSlash(nodePath.dirname(currentPage.path ?? ''));
-    const newPagePath = nodePath.resolve(parentPath, inputText);
-
-    if (newPagePath === currentPage.path) {
-      setRenameInputShown(false);
-      return;
-    }
-
-    try {
-      setRenameInputShown(false);
-      await apiv3Put('/pages/rename', {
-        pageId: currentPage._id,
-        revisionId: currentPage.revision._id,
-        newPagePath,
-      });
-
-      if (onRenamed != null) {
-        onRenamed(currentPage.path, newPagePath);
-      }
-
-      toastSuccess(t('renamed_pages', { path: currentPage.path }));
-    }
-    catch (err) {
-      setRenameInputShown(true);
-      toastError(err);
-    }
-  };
-
   return (
     <>
       <div className="container">
@@ -110,36 +54,34 @@ export const PagePathHeader: FC<Props> = (props) => {
           onMouseEnter={() => setButtonShown(true)}
           onMouseLeave={() => setButtonShown(false)}
         >
-          <form onSubmit={() => onPressEnterForRenameHandler}>
-            <div className="col-4">
-              <TextInputForPageTitleAndPath
-                currentPagePath={currentPagePath}
-                currentPage={currentPage}
-                stateHandler={stateHandler}
-                inputValue={currentPagePath}
-                CustomComponent={PagePath}
-              />
-            </div>
-            { isButtonsShown
-            && (
-              <>
-                <div className="col-4">
-                  {
-                    isRenameInputShown
-                      ? <button type="submit" onClick={() => setRenameInputShown(false)}>完了ボタン</button>
-                      : <button type="button" onClick={() => setRenameInputShown(true)}>編集ボタン</button>
-                  }
-                </div>
-                <div className="col-4">
-                  <button type="button" onClick={openPageSelectModal}>ページツリーボタン</button>
-                </div>
-              </>
-            )}
-            { isOpened
-            && (
-              <PageSelectModal />
-            )}
-          </form>
+          <div className="col-4">
+            <TextInputForPageTitleAndPath
+              currentPagePath={currentPagePath}
+              currentPage={currentPage}
+              stateHandler={stateHandler}
+              inputValue={currentPagePath}
+              CustomComponent={PagePath}
+            />
+          </div>
+          { isButtonsShown
+          && (
+            <>
+              <div className="col-4">
+                {
+                  isRenameInputShown
+                    ? <button type="button" onClick={() => setRenameInputShown(false)}>完了ボタン</button>
+                    : <button type="button" onClick={() => setRenameInputShown(true)}>編集ボタン</button>
+                }
+              </div>
+              <div className="col-4">
+                <button type="button" onClick={openPageSelectModal}>ページツリーボタン</button>
+              </div>
+            </>
+          )}
+          { isOpened
+          && (
+            <PageSelectModal />
+          )}
         </div>
       </div>
     </>

apps/app/src/components/PageHeader/TextInputForPageTitleAndPath.tsx

@@ -30,9 +30,55 @@ export const TextInputForPageTitleAndPath: FC<Props> = (props) => {
 
   const { t } = useTranslation();
 
+  const { trigger: mutateCurrentPage } = useSWRMUTxCurrentPage();
 
   const { isRenameInputShown, setRenameInputShown } = stateHandler;
 
+  const page = currentPage;
+
+  const onRenamed = useCallback((fromPath: string | undefined, toPath: string) => {
+    mutatePageTree();
+    mutateSearching();
+    mutatePageList();
+
+    if (currentPagePath === fromPath || currentPagePath === toPath) {
+      mutateCurrentPage();
+    }
+  }, [currentPagePath, mutateCurrentPage]);
+
+  if (currentPage == null) {
+    return <></>;
+  }
+
+  const onPressEnterForRenameHandler = async(inputText: string) => {
+    const parentPath = pathUtils.addTrailingSlash(nodePath.dirname(page.path ?? ''));
+    const newPagePath = nodePath.resolve(parentPath, inputText);
+
+    if (newPagePath === page.path) {
+      setRenameInputShown(false);
+      return;
+    }
+
+    try {
+      setRenameInputShown(false);
+      await apiv3Put('/pages/rename', {
+        pageId: page._id,
+        revisionId: page.revision._id,
+        newPagePath,
+      });
+
+      if (onRenamed != null) {
+        onRenamed(page.path, newPagePath);
+      }
+
+      toastSuccess(t('renamed_pages', { path: page.path }));
+    }
+    catch (err) {
+      setRenameInputShown(true);
+      toastError(err);
+    }
+  };
+
   return (
     <>
       {isRenameInputShown ? (
@@ -41,7 +87,7 @@ export const TextInputForPageTitleAndPath: FC<Props> = (props) => {
             value={inputValue}
             placeholder={t('Input page name')}
             onClickOutside={() => { setRenameInputShown(false) }}
-            // onPressEnter={onPressEnterForRenameHandler}
+            onPressEnter={onPressEnterForRenameHandler}
             validationTarget={ValidationTarget.PAGE}
           />
         </div>