Просмотр исходного кода

create useIsUntitledPage hooks

kosei-n 1 год назад
Родитель
Сommit
ac17744517

+ 8 - 2
apps/app/src/components/PageEditor/PageEditor.tsx

@@ -48,6 +48,8 @@ import { useEditingUsers } from '~/stores/use-editing-users';
 import { useNextThemes } from '~/stores/use-next-themes';
 import loggerFactory from '~/utils/logger';
 
+import { useIsUntitledPage } from '../PageHeader/untitled-page-utils';
+
 import { EditorNavbar } from './EditorNavbar';
 import EditorNavbarBottom from './EditorNavbarBottom';
 import Preview from './Preview';
@@ -126,6 +128,10 @@ export const PageEditor = React.memo((props: Props): JSX.Element => {
   const currentRevisionId = currentPage?.revision?._id;
   const isRevisionIdRequiredForPageUpdate = currentPage?.revision?.origin === undefined;
 
+  const currentPageTitle = currentPagePath != null ? nodePath.basename(currentPagePath) : undefined;
+
+  const isNewlyCreatedPage = useIsUntitledPage(currentPage, currentPageTitle);
+
   const initialValueRef = useRef('');
   const initialValue = useMemo(() => {
     if (!isNotFound) {
@@ -275,10 +281,10 @@ export const PageEditor = React.memo((props: Props): JSX.Element => {
 
   // set handler to focus
   useLayoutEffect(() => {
-    if (editorMode === EditorMode.Editor) {
+    if (editorMode === EditorMode.Editor && !isNewlyCreatedPage) {
       codeMirrorEditor?.focus();
     }
-  }, [codeMirrorEditor, currentPage, editorMode]);
+  }, [codeMirrorEditor, editorMode, isNewlyCreatedPage]);
 
   // Detect indent size from contents (only when users are allowed to change it)
   useEffect(() => {

+ 4 - 13
apps/app/src/components/PageHeader/PageTitleHeader.tsx

@@ -17,6 +17,8 @@ import { AutosizeSubmittableInput, getAdjustedMaxWidthForAutosizeInput } from '.
 import { usePagePathRenameHandler } from '../PageEditor/page-path-rename-utils';
 
 
+import { useIsUntitledPage } from './untitled-page-utils';
+
 import styles from './PageTitleHeader.module.scss';
 
 const moduleClass = styles['page-title-header'] ?? '';
@@ -49,13 +51,7 @@ export const PageTitleHeader = (props: Props): JSX.Element => {
 
   const editedPageTitle = nodePath.basename(editedPagePath);
 
-  // TODO: https://redmine.weseek.co.jp/issues/142729
-  // https://regex101.com/r/Wg2Hh6/1
-  const untitledPageTitle = t('create_page.untitled');
-  const untitledPageRegex = new RegExp(`^${untitledPageTitle}-\\d+$`);
-
-  const isNewlyCreatedPage = (currentPage.wip && currentPage.latestRevision == null && untitledPageRegex.test(editedPageTitle)) ?? false;
-
+  const isNewlyCreatedPage = useIsUntitledPage(currentPage, editedPageTitle);
 
   const changeHandler = useCallback(async(e: ChangeEvent<HTMLInputElement>) => {
     const newPageTitle = pathUtils.removeHeadingSlash(e.target.value);
@@ -100,15 +96,10 @@ export const PageTitleHeader = (props: Props): JSX.Element => {
   // https://redmine.weseek.co.jp/issues/136128
   useEffect(() => {
     setEditedPagePath(currentPagePath);
-    console.log(currentPage.wip);
-    console.log(currentPage.latestRevision == null);
-    console.log(untitledPageRegex.test(editedPageTitle));
-    console.log(isNewlyCreatedPage);
-    console.log(editedPageTitle);
     if (isNewlyCreatedPage) {
       setRenameInputShown(true);
     }
-  }, [currentPage._id, isNewlyCreatedPage]);
+  }, [currentPage._id, currentPagePath, isNewlyCreatedPage]);
 
   const isInvalid = validationResult != null;
 

+ 21 - 0
apps/app/src/components/PageHeader/untitled-page-utils.ts

@@ -0,0 +1,21 @@
+import type { IPagePopulatedToShowRevision } from '@growi/core';
+import { useTranslation } from 'next-i18next';
+
+
+export const useIsUntitledPage = (currentPage?: IPagePopulatedToShowRevision | null, editedPageTitle?: string): boolean => {
+
+  const { t } = useTranslation();
+
+  if (currentPage == null || editedPageTitle == null) {
+    return false;
+  }
+
+  // https://regex101.com/r/Wg2Hh6/1
+  const untitledPageTitle = t('create_page.untitled');
+  const untitledPageRegex = new RegExp(`^${untitledPageTitle}-\\d+$`);
+
+  const isNewlyCreatedPage = (currentPage.wip && currentPage.latestRevision == null && untitledPageRegex.test(editedPageTitle)) ?? false;
+
+  return isNewlyCreatedPage;
+
+};