Merge pull request #8536 from weseek/imprv/136128-hide-title-of-untitled-page

imprv: 136128 hide title of untitled page

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

@@ -273,11 +273,6 @@ export const PageEditor = React.memo((props: Props): JSX.Element => {
 
   }, [codeMirrorEditor, pageId]);
 
-  // initial caret line
-  useEffect(() => {
-    codeMirrorEditor?.setCaretLine();
-  }, [codeMirrorEditor]);
-
   // set handler to save and return to View
   useEffect(() => {
     globalEmitter.on('saveAndReturnToView', saveAndReturnToViewHandler);
@@ -287,6 +282,20 @@ export const PageEditor = React.memo((props: Props): JSX.Element => {
     };
   }, [saveAndReturnToViewHandler]);
 
+
+  // TODO: https://redmine.weseek.co.jp/issues/142729
+  // https://regex101.com/r/Wg2Hh6/1
+  // initial caret line
+  useEffect(() => {
+    const untitledPageRegex = /^Untitled-\d+$/;
+    const isNewlyCreatedPage = (
+      currentPage?.wip && currentPage?.latestRevision == null && untitledPageRegex.test(nodePath.basename(currentPage?.path ?? ''))
+    ) ?? false;
+    if (!isNewlyCreatedPage) {
+      codeMirrorEditor?.setCaretLine();
+    }
+  }, [codeMirrorEditor, currentPage]);
+
   // set handler to focus
   useLayoutEffect(() => {
     if (editorMode === EditorMode.Editor) {

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

@@ -1,5 +1,5 @@
 import type { FC } from 'react';
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useEffect } from 'react';
 
 import nodePath from 'path';
 
@@ -15,6 +15,7 @@ import ClosableTextInput from '../Common/ClosableTextInput';
 import { CopyDropdown } from '../Common/CopyDropdown';
 import { usePagePathRenameHandler } from '../PageEditor/page-path-rename-utils';
 
+
 import styles from './PageTitleHeader.module.scss';
 
 const moduleClass = styles['page-title-header'] ?? '';
@@ -43,6 +44,12 @@ export const PageTitleHeader: FC<Props> = (props) => {
 
   const editedPageTitle = nodePath.basename(editedPagePath);
 
+  // TODO: https://redmine.weseek.co.jp/issues/142729
+  // https://regex101.com/r/Wg2Hh6/1
+  const untitledPageRegex = /^Untitled-\d+$/;
+
+  const isNewlyCreatedPage = (currentPage.wip && currentPage.latestRevision == null && untitledPageRegex.test(editedPageTitle)) ?? false;
+
   const onRenameFinish = useCallback(() => {
     setRenameInputShown(false);
   }, []);
@@ -52,8 +59,9 @@ export const PageTitleHeader: FC<Props> = (props) => {
   }, []);
 
   const onInputChange = useCallback((inputText: string) => {
+    const newPageTitle = pathUtils.removeHeadingSlash(inputText);
     const parentPagePath = pathUtils.addTrailingSlash(nodePath.dirname(currentPage.path));
-    const newPagePath = nodePath.resolve(parentPagePath, inputText);
+    const newPagePath = nodePath.resolve(parentPagePath, newPageTitle);
 
     setEditedPagePath(newPagePath);
   }, [currentPage?.path, setEditedPagePath]);
@@ -76,6 +84,11 @@ export const PageTitleHeader: FC<Props> = (props) => {
     setRenameInputShown(true);
   }, [currentPagePath, isMovable]);
 
+  useEffect(() => {
+    if (isNewlyCreatedPage) {
+      setRenameInputShown(true);
+    }
+  }, [currentPage._id, isNewlyCreatedPage]);
 
   return (
     <div className={`d-flex ${moduleClass} ${props.className ?? ''} position-relative`}>
@@ -83,13 +96,13 @@ export const PageTitleHeader: FC<Props> = (props) => {
         { isRenameInputShown && (
           <div className="position-absolute w-100">
             <ClosableTextInput
-              value={editedPageTitle}
+              value={isNewlyCreatedPage ? '' : editedPageTitle}
               placeholder={t('Input page name')}
               inputClassName="fs-4"
               onPressEnter={onPressEnter}
               onPressEscape={onPressEscape}
               onChange={onInputChange}
-              onClickOutside={() => setRenameInputShown(false)}
+              onClickOutside={() => { setRenameInputShown(false) }}
               validationTarget={ValidationTarget.PAGE}
             />
           </div>

apps/app/src/server/routes/apiv3/page/create-page.ts

@@ -43,7 +43,7 @@ async function generateUntitledPath(parentPath: string, basePathname: string, in
 }
 
 async function determinePath(_parentPath?: string, _path?: string, optionalParentPath?: string): Promise<string> {
-  // TODO: i18n
+  // TODO: https://redmine.weseek.co.jp/issues/142729
   const basePathname = 'Untitled';
 
   if (_path != null) {