change PageTitleHeader to hold inputText

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

@@ -1,4 +1,5 @@
-import { FC, useState, useMemo } from 'react';
+import type { FC } from 'react';
+import { useState, useMemo } from 'react';
 
 import nodePath from 'path';
 
@@ -14,21 +15,33 @@ type Props = {
 
 export const PageTitleHeader: FC<Props> = (props) => {
   const { currentPagePath, currentPage } = props;
+  const pageName = nodePath.basename(currentPagePath ?? '') || '/';
 
   const [isRenameInputShown, setRenameInputShown] = useState(false);
-  const pageName = nodePath.basename(currentPagePath ?? '') || '/';
+  const [inputText, setInputText] = useState(pageName);
+
 
   const stateHandler = { isRenameInputShown, setRenameInputShown };
 
   const PageTitle = useMemo(() => (<div onClick={() => setRenameInputShown(true)}>{pageName}</div>), [pageName]);
 
+  const handleInputChange = (inputText: string) => {
+    if (inputText !== '') {
+      setInputText(inputText);
+    }
+    else {
+      setInputText(pageName);
+    }
+  };
+
   return (
     <div onBlur={() => setRenameInputShown(false)}>
       <TextInputForPageTitleAndPath
         currentPage={currentPage}
         stateHandler={stateHandler}
-        inputValue={pageName}
+        inputValue={inputText}
         CustomComponent={PageTitle}
+        handleInputChange={handleInputChange}
       />
     </div>
   );