chore: fix page title empty string (#762)

Co-authored-by: nina992 <[email protected]>
reearth · Oct 30, 2023 · 44e573f · 44e573f
1 parent 3df69f8
commit 44e573f
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 3 deletions.
diff --git a/web/src/beta/features/Editor/tabs/story/LeftPanel/ContentPage/index.tsx b/web/src/beta/features/Editor/tabs/story/LeftPanel/ContentPage/index.tsx
@@ -6,6 +6,7 @@ import PopoverMenuContent from "@reearth/beta/components/PopoverMenuContent";
 import Action from "@reearth/beta/features/Editor/tabs/story/LeftPanel/Action";
 import PageItemWrapper from "@reearth/beta/features/Editor/tabs/story/LeftPanel/PageItemWrapper";
 import { getFieldValue } from "@reearth/beta/lib/core/StoryPanel/utils";
+import { isEmptyString } from "@reearth/beta/utils/util";
 import type { Page } from "@reearth/services/api/storytellingApi/utils";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
@@ -60,6 +61,7 @@ const ContentPage: React.FC<Props> = ({
           renderItem={(storyPage, i) => {
             const title = (getFieldValue(storyPage.property.items ?? [], "title", "title") ??
               t("Untitled")) as string;
+            const hasEmptySpace = isEmptyString(title);
             return (
               <PageItemWrapper
                 key={storyPage.id}
@@ -99,7 +101,7 @@ const ContentPage: React.FC<Props> = ({
                       ]}
                     />
                   }>
-                  {title}
+                  {hasEmptySpace || !title ? t("Untitled") : title}
                 </ListItem>
               </PageItemWrapper>
             );

diff --git a/web/src/beta/lib/core/StoryPanel/Block/builtin/Title/index.tsx b/web/src/beta/lib/core/StoryPanel/Block/builtin/Title/index.tsx
@@ -1,6 +1,7 @@
 import { useMemo } from "react";
 
 import Text from "@reearth/beta/components/Text";
+import { isEmptyString } from "@reearth/beta/utils/util";
 import { ValueTypes } from "@reearth/beta/utils/value";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
@@ -24,6 +25,7 @@ const TitleBlock: React.FC<Props> = ({ block, isSelected, ...props }) => {
     () => property?.title?.color?.value as ValueTypes["string"],
     [property?.title?.color?.value],
   );
+  const hasEmptySpace = isEmptyString(title);
 
   return (
     <BlockWrapper
@@ -34,8 +36,8 @@ const TitleBlock: React.FC<Props> = ({ block, isSelected, ...props }) => {
       property={property}
       dndEnabled={false}
       {...props}>
-      <Title size="h2" hasText={!!title} color={color} customColor>
-        {title ?? t("Untitled")}
+      <Title size="h2" hasText={!!title && !hasEmptySpace} color={color} customColor>
+        {hasEmptySpace || !title ? t("Untitled") : title}
       </Title>
     </BlockWrapper>
   );

diff --git a/web/src/beta/utils/util.ts b/web/src/beta/utils/util.ts
@@ -65,3 +65,7 @@ export function checkIfFileType(url: string, fileTypes: string) {
 
   return regex.test(url);
 }
+
+export const isEmptyString = function (text: string): boolean {
+  return text === null || /^ *$/.test(text);
+};