chore(web): fix story page bugs

web/src/beta/features/Editor/DataSourceManager/Common/index.tsx

@@ -40,15 +40,15 @@ const SelectDataType: React.FC<{ fileFormat: string; setFileFormat: (k: string)
 
 const Asset: React.FC<DataProps> = ({ sceneId, onSubmit, onClose }) => {
   const t = useT();
-  const [sourceType, setSourceType] = useState<SourceType>("local");
+  const [sourceType, setSourceType] = useState<SourceType>("url");
   const [fileFormat, setFileFormat] = useState<FileFormatType>("GeoJSON");
   const [value, setValue] = useState("");
   const [layerName, setLayerName] = useState("");
   const [prioritizePerformance, setPrioritizePerformance] = useState(false);
   const DataSourceOptions: DataSourceOptType = useMemo(
     () => [
-      { label: t("From Assets"), keyValue: "local" },
-      { label: t("From Web"), keyValue: "url" },
+      { label: t("From URL"), keyValue: "url" },
+      { label: t("From Local"), keyValue: "local" },
       { label: t("From Value"), keyValue: "value" },
     ],
     [t],
@@ -98,6 +98,10 @@ const Asset: React.FC<DataProps> = ({ sceneId, onSubmit, onClose }) => {
   return (
     <ColJustifyBetween>
       <AssetWrapper>
+        <SelectDataType
+          fileFormat={fileFormat}
+          setFileFormat={(f: string) => setFileFormat(f as FileFormatType)}
+        />
         <InputGroup
           label={t("Source Type")}
           description={t("Select the type of data source you want to add.")}>
@@ -110,57 +114,39 @@ const Asset: React.FC<DataProps> = ({ sceneId, onSubmit, onClose }) => {
           </SourceTypeWrapper>
         </InputGroup>
         {sourceType == "url" && (
-          <>
-            <SelectDataType
-              fileFormat={fileFormat}
-              setFileFormat={(f: string) => setFileFormat(f as FileFormatType)}
+          <InputGroup
+            label={t("Resource URL")}
+            description={t("URL of the data source you want to add.")}>
+            <Input
+              type="text"
+              placeholder={t("Input Text")}
+              value={value}
+              onChange={e => setValue(e.target.value)}
             />
-            <InputGroup
-              label={t("Resource URL")}
-              description={t("URL of the data source you want to add.")}>
-              <Input
-                type="text"
-                placeholder={t("Input Text")}
-                value={value}
-                onChange={e => setValue(e.target.value)}
-              />
-            </InputGroup>
-          </>
+          </InputGroup>
         )}
         {sourceType == "value" && (
-          <>
-            <SelectDataType
-              fileFormat={fileFormat}
-              setFileFormat={(f: string) => setFileFormat(f as FileFormatType)}
+          <InputGroup
+            label={t("Value")}
+            description={t(
+              "Write syntactically correct data based on the file format you have selected above.",
+            )}>
+            <TextArea
+              placeholder={t("Input data here")}
+              rows={8}
+              value={value}
+              onChange={e => setValue(e.target.value)}
             />
-            <InputGroup
-              label={t("Value")}
-              description={t(
-                "Write syntactically correct data based on the file format you have selected above.",
-              )}>
-              <TextArea
-                placeholder={t("Input data here")}
-                rows={8}
-                value={value}
-                onChange={e => setValue(e.target.value)}
-              />
-            </InputGroup>
-          </>
+          </InputGroup>
         )}
         {sourceType == "local" && (
-          <>
-            <SelectDataType
-              fileFormat={fileFormat}
-              setFileFormat={(f: string) => setFileFormat(f as FileFormatType)}
-            />
-            <URLField
-              fileType="asset"
-              entityType={"file"}
-              name={t("Asset")}
-              value={value}
-              onChange={handleOnChange}
-            />
-          </>
+          <URLField
+            fileType="asset"
+            entityType={"file"}
+            name={t("Asset")}
+            value={value}
+            onChange={handleOnChange}
+          />
         )}
       </AssetWrapper>
 

web/src/beta/features/Editor/tabs/story/LeftPanel/ContentPage/PageItem.tsx

@@ -1,4 +1,4 @@
-import { MouseEvent, useCallback, useState } from "react";
+import { MouseEvent, useCallback, useEffect, useState } from "react";
 
 import TextInput from "@reearth/beta/components/fields/common/TextInput";
 import ListItem from "@reearth/beta/components/ListItem";
@@ -7,14 +7,12 @@ import Text from "@reearth/beta/components/Text";
 import useDoubleClick from "@reearth/classic/util/use-double-click";
 import { ValueType, ValueTypes } from "@reearth/classic/util/value";
 import type { Page } from "@reearth/services/api/storytellingApi/utils";
-import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
 
 type PageItemProps = {
   isSelected?: boolean;
   title?: string;
   isOpenAction?: boolean;
-  hasEmptySpace?: boolean;
   propertyId: string;
   storyPage: Page;
   onItemClick: (e?: MouseEvent<Element>) => void;
@@ -36,7 +34,6 @@ const PageItem = ({
   isSelected,
   isOpenAction,
   title,
-  hasEmptySpace,
   propertyId,
   storyPage,
   onItemClick,
@@ -46,7 +43,6 @@ const PageItem = ({
   onPageDelete,
   onPropertyUpdate,
 }: PageItemProps) => {
-  const t = useT();
   const [isEditing, setIsEditing] = useState(false);
   const [newValue, setNewValue] = useState(title);
 
@@ -55,20 +51,26 @@ const PageItem = ({
     () => setIsEditing(true),
   );
 
-  const handleChange = useCallback((newTitle: string) => setNewValue(newTitle), []);
+  useEffect(() => {
+    setNewValue(title);
+  }, [title]);
 
-  const handleTitleSubmit = useCallback(() => {
-    setIsEditing(false);
-    if (newValue?.trim() !== "") {
-      const schemaGroupId = storyPage.property.items?.[1]?.schemaGroup;
-      onPropertyUpdate?.(propertyId, schemaGroupId, "title", undefined, "string", newValue);
-    }
-  }, [newValue, onPropertyUpdate, propertyId, storyPage.property.items]);
+  const handleTitleSubmit = useCallback(
+    (newTitle: string) => {
+      setIsEditing(false);
+      setNewValue(newTitle);
+      if (newValue?.trim() !== "") {
+        const schemaGroupId = storyPage.property.items?.[1]?.schemaGroup;
+        onPropertyUpdate?.(propertyId, schemaGroupId, "title", undefined, "string", newTitle);
+      }
+    },
+    [newValue, onPropertyUpdate, propertyId, storyPage.property.items],
+  );
 
   const handleEditExit = useCallback(
     (e?: React.KeyboardEvent<HTMLInputElement>) => {
       if (title !== newValue && e?.key !== "Escape") {
-        handleTitleSubmit();
+        newValue && handleTitleSubmit(newValue);
       } else {
         setNewValue(title);
       }
@@ -113,13 +115,13 @@ const PageItem = ({
         <StyledTextInput
           value={newValue}
           autoFocus
-          onChange={handleChange}
+          onChange={handleTitleSubmit}
           onExit={handleEditExit}
           onBlur={handleEditExit}
         />
       ) : (
         <PageTitle size="footnote" onDoubleClick={handleDoubleClick}>
-          {hasEmptySpace || !title ? t("Untitled") : title}
+          {title}
         </PageTitle>
       )}
     </ListItem>

web/src/beta/features/Editor/tabs/story/LeftPanel/ContentPage/index.tsx

@@ -87,7 +87,6 @@ const ContentPage: React.FC<Props> = ({
                     setOpenedPageId(isOpen ? storyPage.id : undefined);
                   }}
                   onPageDelete={() => onPageDelete(storyPage.id)}
-                  hasEmptySpace={hasEmptySpace}
                   title={hasEmptySpace || !title ? t("Untitled") : title}
                   setOpenedPageId={setOpenedPageId}
                   propertyId={storyPage.property.id}

web/src/beta/lib/core/StoryPanel/Page/index.tsx

@@ -142,35 +142,37 @@ const StoryPanel: React.FC<Props> = ({
         ref={containerRef}
         padding={panelSettings?.padding?.value}
         gap={panelSettings?.gap?.value}>
-        {(isEditable || title?.title?.value) && (
-          <StoryBlock
-            block={{
-              id: titleId,
-              pluginId: "reearth",
-              extensionId: "titleStoryBlock",
-              name: t("Title"),
-              propertyId: page?.propertyId ?? "",
-              property: { title },
-            }}
-            isEditable={isEditable}
-            isSelected={selectedStoryBlockId === titleId}
-            onClick={() => onBlockSelect?.(titleId)}
-            onPropertyUpdate={onPropertyUpdate}
-            onPropertyItemAdd={onPropertyItemAdd}
-            onPropertyItemMove={onPropertyItemMove}
-            onPropertyItemDelete={onPropertyItemDelete}
-          />
-        )}
+        <PageTitleWrapper>
+          {(isEditable || title?.title?.value) && (
+            <StoryBlock
+              block={{
+                id: titleId,
+                pluginId: "reearth",
+                extensionId: "titleStoryBlock",
+                name: t("Title"),
+                propertyId: page?.propertyId ?? "",
+                property: { title },
+              }}
+              isEditable={isEditable}
+              isSelected={selectedStoryBlockId === titleId}
+              onClick={() => onBlockSelect?.(titleId)}
+              onPropertyUpdate={onPropertyUpdate}
+              onPropertyItemAdd={onPropertyItemAdd}
+              onPropertyItemMove={onPropertyItemMove}
+              onPropertyItemDelete={onPropertyItemDelete}
+            />
+          )}
+          {isEditable && (
+            <BlockAddBar
+              alwaysShow={storyBlocks && storyBlocks.length < 1}
+              openBlocks={openBlocksIndex === -1}
+              installableStoryBlocks={installableStoryBlocks}
+              onBlockOpen={() => handleBlockOpen(-1)}
+              onBlockAdd={() => handleBlockCreate(0)}
+            />
+          )}
+        </PageTitleWrapper>
 
-        {isEditable && (
-          <BlockAddBar
-            alwaysShow={storyBlocks && storyBlocks.length < 1}
-            openBlocks={openBlocksIndex === -1}
-            installableStoryBlocks={installableStoryBlocks}
-            onBlockOpen={() => handleBlockOpen(-1)}
-            onBlockAdd={handleBlockCreate(0)}
-          />
-        )}
         {storyBlocks && storyBlocks.length > 0 && (
           <DragAndDropList
             uniqueKey="storyPanel"
@@ -235,3 +237,7 @@ const Wrapper = styled.div<{ padding: Spacing; gap?: number }>`
   ${({ padding }) => `padding-right: ${padding.right}px;`}
   box-sizing: border-box;
 `;
+
+const PageTitleWrapper = styled.div`
+  position: relative;
+`;