chore(web): support plugin block in story panel (#1022)

web/src/beta/components/fields/TimelineField/EditPanel/index.tsx

@@ -3,7 +3,7 @@ import { useMemo } from "react";
 import Button from "@reearth/beta/components/Button";
 import Icon from "@reearth/beta/components/Icon";
 import Modal from "@reearth/beta/components/Modal";
-import { getTimeZone } from "@reearth/beta/features/Visualizer/StoryPanel/utils";
+import { getTimeZone } from "@reearth/beta/features/Visualizer/Crust/StoryPanel/utils";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
 

web/src/beta/features/Editor/Story/PagesPanel/index.tsx

@@ -1,7 +1,7 @@
 import { FC, useEffect, useState } from "react";
 
 import DragAndDropList from "@reearth/beta/components/DragAndDropList";
-import { getFieldValue } from "@reearth/beta/features/Visualizer/StoryPanel/utils";
+import { getFieldValue } from "@reearth/beta/features/Visualizer/Crust/StoryPanel/utils";
 import { Panel, PanelProps } from "@reearth/beta/ui/layout";
 import { isEmptyString } from "@reearth/beta/utils/util";
 import { useT } from "@reearth/services/i18n";

web/src/beta/features/Editor/Visualizer/convert-story.ts

@@ -1,4 +1,8 @@
-import { Story, StoryBlock, StoryPage } from "@reearth/beta/features/Visualizer/StoryPanel/types";
+import {
+  Story,
+  StoryBlock,
+  StoryPage,
+} from "@reearth/beta/features/Visualizer/Crust/StoryPanel/types";
 import { Scene } from "@reearth/services/api/sceneApi";
 import { StoryPage as GqlStoryPage, StoryBlock as GqlStoryBlock } from "@reearth/services/gql";
 

web/src/beta/features/Editor/Visualizer/index.tsx

@@ -5,7 +5,7 @@ import { type InteractionModeType } from "@reearth/beta/features/Visualizer/Crus
 import {
   StoryPanelRef,
   type InstallableStoryBlock,
-} from "@reearth/beta/features/Visualizer/StoryPanel";
+} from "@reearth/beta/features/Visualizer/Crust/StoryPanel";
 import { SketchFeature, SketchType } from "@reearth/core";
 import type { MapRef } from "@reearth/core";
 import type { Story } from "@reearth/services/api/storytellingApi/utils";

web/src/beta/features/Editor/hooks/useStorytelling.ts

@@ -1,6 +1,6 @@
 import { useState, useCallback, useMemo, useRef } from "react";
 
-import { StoryPanelRef } from "@reearth/beta/features/Visualizer/StoryPanel";
+import { StoryPanelRef } from "@reearth/beta/features/Visualizer/Crust/StoryPanel";
 import useStorytellingAPI from "@reearth/services/api/storytellingApi";
 import { useT } from "@reearth/services/i18n";
 

web/src/beta/features/Published/hooks.ts

@@ -7,7 +7,7 @@ import {
   BuiltinWidgets,
   isBuiltinWidget,
 } from "@reearth/beta/features/Visualizer/Crust";
-import { Story } from "@reearth/beta/features/Visualizer/StoryPanel";
+import { Story } from "@reearth/beta/features/Visualizer/Crust/StoryPanel";
 import type { Camera } from "@reearth/beta/utils/value";
 import { MapRef } from "@reearth/core";
 import { config } from "@reearth/services/config";

web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/PropertyList/Content.tsx

@@ -2,8 +2,8 @@ import { memo, useContext, useMemo } from "react";
 import "react18-json-view/src/style.css";
 import "react18-json-view/src/dark.css";
 
+import Template from "@reearth/beta/features/Visualizer/Crust/StoryPanel/Block/Template";
 import { BlockContext } from "@reearth/beta/features/Visualizer/shared/components/BlockWrapper";
-import Template from "@reearth/beta/features/Visualizer/StoryPanel/Block/Template";
 import { coreContext } from "@reearth/core";
 import { styled } from "@reearth/services/theme";
 

web/src/beta/features/Visualizer/Crust/Infobox/Block/builtin/PropertyList/CustomFields/index.tsx

@@ -1,4 +1,4 @@
-import Template from "@reearth/beta/features/Visualizer/StoryPanel/Block/Template";
+import Template from "@reearth/beta/features/Visualizer/Crust/StoryPanel/Block/Template";
 
 import { PropertyListItem } from "../ListEditor";
 import ListItem from "../ListItem";

web/src/beta/features/Visualizer/Crust/Infobox/Block/index.tsx

@@ -1,10 +1,10 @@
 import { useCallback, type ComponentType, type ReactNode, memo } from "react";
 
+import BlockWrapper from "@reearth/beta/features/Visualizer/shared/components/BlockWrapper";
 import type { CommonBlockProps, BlockProps } from "@reearth/beta/features/Visualizer/shared/types";
 import type { Layer } from "@reearth/core";
 // import { styled } from "@reearth/services/theme";
 
-import BlockWrapper from "../../../shared/components/BlockWrapper";
 import { InfoboxBlock } from "../types";
 
 import builtin, { isBuiltinInfoboxBlock } from "./builtin";

web/src/beta/features/Visualizer/Crust/Infobox/index.tsx

@@ -3,12 +3,11 @@ import { Fragment, ReactNode, memo } from "react";
 import DragAndDropList from "@reearth/beta/components/DragAndDropList";
 import BlockAddBar from "@reearth/beta/features/Visualizer/shared/components/BlockAddBar";
 import { EditModeProvider } from "@reearth/beta/features/Visualizer/shared/contexts/editModeContext";
+import { InstallableBlock } from "@reearth/beta/features/Visualizer/shared/types";
 import { ValueType, ValueTypes } from "@reearth/beta/utils/value";
 import { Spacing } from "@reearth/core";
 import { styled } from "@reearth/services/theme";
 
-import { InstallableBlock } from "../../shared/types";
-
 import InfoboxBlockComponent from "./Block";
 import {
   GAP_DEFAULT_VALUE,

web/src/beta/features/Visualizer/Crust/Plugins/hooks.ts

@@ -60,6 +60,7 @@ export default function ({
   floatingWidgets,
   interactionMode,
   timelineManagerRef,
+  selectedStory,
   overrideInteractionMode,
   overrideSceneProperty,
   onLayerEdit,
@@ -82,6 +83,7 @@ export default function ({
     alignSystem,
     floatingWidgets,
     blocks: selectedLayer?.layer?.infobox?.blocks,
+    storyBlocks: selectedStory?.pages.flatMap(p => p.blocks),
   });
   const clientStorage = useClientStorage();
 

web/src/beta/features/Visualizer/Crust/Plugins/types.ts

@@ -15,6 +15,7 @@ import type {
 } from "@reearth/core";
 import { SketchEventCallback, SketchType, TimelineManagerRef } from "@reearth/core";
 
+import { Story } from "../StoryPanel";
 import type { MapRef, InteractionModeType } from "../types";
 import type { InternalWidget, WidgetAlignSystem } from "../Widgets";
 
@@ -36,6 +37,7 @@ export type Props = PropsWithChildren<{
   alignSystem?: WidgetAlignSystem;
   floatingWidgets?: InternalWidget[];
   timelineManagerRef?: TimelineManagerRef;
+  selectedStory?: Story;
   overrideSceneProperty?: (id: string, property: any) => void;
   interactionMode: InteractionModeType;
   overrideInteractionMode?: (mode: InteractionModeType) => void;

web/src/beta/features/Visualizer/Crust/Plugins/usePluginInstances.ts

@@ -1,6 +1,7 @@
 import { useEffect, useRef, useMemo, type MutableRefObject } from "react";
 
 import type { InfoboxBlock as Block } from "../Infobox/types";
+import { StoryBlock } from "../StoryPanel/types";
 import type { WidgetAlignSystem } from "../Widgets";
 import type { InternalWidget, WidgetSection, WidgetZone } from "../Widgets/WidgetAlignSystem";
 
@@ -10,6 +11,7 @@ export type Props = {
   alignSystem?: WidgetAlignSystem;
   floatingWidgets?: InternalWidget[];
   blocks?: Block[];
+  storyBlocks?: StoryBlock[];
 };
 
 export type PluginInstances = {
@@ -26,7 +28,7 @@ export type PluginInstances = {
   };
 };
 
-export default ({ alignSystem, floatingWidgets, blocks }: Props) => {
+export default ({ alignSystem, floatingWidgets, blocks, storyBlocks }: Props) => {
   const pluginInstancesMeta = useRef<PluginExtensionInstance[]>([]);
 
   const runTimesCache = useMemo<Map<string, number>>(() => new Map(), []);
@@ -104,8 +106,23 @@ export default ({ alignSystem, floatingWidgets, blocks }: Props) => {
       });
     }
 
+    if (storyBlocks) {
+      storyBlocks.forEach(block => {
+        instances.push({
+          id: block.id,
+          pluginId: block.pluginId ?? "",
+          name: getExtensionInstanceName(block.pluginId ?? ""),
+          extensionId: block.extensionId ?? "",
+          extensionType: "storyBlock",
+          get runTimes() {
+            return runTimesCacheHandler.get(block.id);
+          },
+        });
+      });
+    }
+
     pluginInstancesMeta.current = instances;
-  }, [alignSystem, floatingWidgets, blocks, runTimesCacheHandler]);
+  }, [alignSystem, floatingWidgets, blocks, storyBlocks, runTimesCacheHandler]);
 
   const pluginMessageSenders = useRef<Map<string, (msg: any) => void>>(new Map());
 

web/src/beta/features/Visualizer/StoryPanel/Block/builtin/Camera/Content.tsx → web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Camera/Content.tsx

@@ -1,12 +1,11 @@
 import { useCallback, useContext, useMemo, useState } from "react";
 
 import Button from "@reearth/beta/components/Button";
+import { BlockContext } from "@reearth/beta/features/Visualizer/shared/components/BlockWrapper";
 import { useVisualizer } from "@reearth/core";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
 
-import { BlockContext } from "../../../../shared/components/BlockWrapper";
-
 import CameraEditor, { type CameraBlock as CameraBlockType } from "./Editor";
 
 type Props = {

web/src/beta/features/Visualizer/StoryPanel/Block/builtin/Camera/index.tsx → web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Camera/index.tsx

@@ -1,7 +1,8 @@
 import { useEffect, useMemo } from "react";
 
-import BlockWrapper from "../../../../shared/components/BlockWrapper";
-import type { CommonBlockProps as BlockProps } from "../../../../shared/types";
+import BlockWrapper from "@reearth/beta/features/Visualizer/shared/components/BlockWrapper";
+import type { CommonBlockProps as BlockProps } from "@reearth/beta/features/Visualizer/shared/types";
+
 import { StoryBlock } from "../../../types";
 
 import Content from "./Content";

web/src/beta/features/Visualizer/StoryPanel/Block/builtin/Layer/Content.tsx → web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Layer/Content.tsx

@@ -1,12 +1,11 @@
 import { useCallback, useContext, useState } from "react";
 
 import Button from "@reearth/beta/components/Button";
+import { BlockContext } from "@reearth/beta/features/Visualizer/shared/components/BlockWrapper";
 import { useBlockContext } from "@reearth/beta/features/Visualizer/shared/contexts/blockContext";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
 
-import { BlockContext } from "../../../../shared/components/BlockWrapper";
-
 import LayerEditor, { type LayerBlock as LayerBlockType } from "./Editor";
 
 type Props = {

web/src/beta/features/Visualizer/StoryPanel/Block/builtin/Layer/index.tsx → web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Layer/index.tsx

@@ -1,7 +1,8 @@
 import { useMemo, useEffect } from "react";
 
-import BlockWrapper from "../../../../shared/components/BlockWrapper";
-import type { CommonBlockProps as BlockProps } from "../../../../shared/types";
+import BlockWrapper from "@reearth/beta/features/Visualizer/shared/components/BlockWrapper";
+import type { CommonBlockProps as BlockProps } from "@reearth/beta/features/Visualizer/shared/types";
+
 import { StoryBlock } from "../../../types";
 
 import Content from "./Content";

web/src/beta/features/Visualizer/StoryPanel/Block/builtin/Markdown/Editor.tsx → web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Markdown/Editor.tsx

@@ -2,11 +2,10 @@ import { debounce } from "lodash-es";
 import { useContext, useCallback, useLayoutEffect, useRef, useMemo, useState } from "react";
 
 import Markdown from "@reearth/beta/components/Markdown";
+import { BlockContext } from "@reearth/beta/features/Visualizer/shared/components/BlockWrapper";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
 
-import { BlockContext } from "../../../../shared/components/BlockWrapper";
-
 export type Props = {
   text: string;
   onUpdate: (text: string) => void;

web/src/beta/features/Visualizer/StoryPanel/Block/builtin/Markdown/index.tsx → web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Markdown/index.tsx

@@ -1,9 +1,9 @@
 import { useCallback, useMemo } from "react";
 
+import BlockWrapper from "@reearth/beta/features/Visualizer/shared/components/BlockWrapper";
+import { CommonBlockProps as BlockProps } from "@reearth/beta/features/Visualizer/shared/types";
 import { ValueTypes } from "@reearth/beta/utils/value";
 
-import BlockWrapper from "../../../../shared/components/BlockWrapper";
-import { CommonBlockProps as BlockProps } from "../../../../shared/types";
 import { StoryBlock } from "../../../types";
 
 import MdEditor from "./Editor";

web/src/beta/features/Visualizer/StoryPanel/Block/builtin/Text/Editor.tsx → web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Text/Editor.tsx

@@ -1,10 +1,9 @@
 import { debounce } from "lodash-es";
 import { useMemo, useContext, useCallback } from "react";
 
+import { BlockContext } from "@reearth/beta/features/Visualizer/shared/components/BlockWrapper";
 import RichTextEditor from "@reearth/beta/lib/lexical/RichTextEditor";
 
-import { BlockContext } from "../../../../shared/components/BlockWrapper";
-
 export type Props = {
   text?: string;
   propertyId?: string;

web/src/beta/features/Visualizer/StoryPanel/Block/builtin/Text/index.tsx → web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Text/index.tsx

@@ -1,10 +1,10 @@
 import { useMemo } from "react";
 
+import BlockWrapper from "@reearth/beta/features/Visualizer/shared/components/BlockWrapper";
+import { CommonBlockProps as BlockProps } from "@reearth/beta/features/Visualizer/shared/types";
 import RichText from "@reearth/beta/lib/lexical/RichTextEditor";
 import { ValueTypes } from "@reearth/beta/utils/value";
 
-import BlockWrapper from "../../../../shared/components/BlockWrapper";
-import { CommonBlockProps as BlockProps } from "../../../../shared/types";
 import { StoryBlock } from "../../../types";
 
 import TextBlockEditor from "./Editor";

web/src/beta/features/Visualizer/StoryPanel/Block/builtin/Timeline/Editor.tsx → web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Timeline/Editor.tsx

@@ -1,7 +1,7 @@
 import Icon from "@reearth/beta/components/Icon";
 import * as Popover from "@reearth/beta/components/Popover";
+import useHooks from "@reearth/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Timeline/hook";
 import useTimelineBlock from "@reearth/beta/features/Visualizer/shared/hooks/useTimelineBlock";
-import useHooks from "@reearth/beta/features/Visualizer/StoryPanel/Block/builtin/Timeline/hook";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
 

web/src/beta/features/Visualizer/StoryPanel/Block/builtin/Timeline/hook.ts → web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Timeline/hook.ts

@@ -14,12 +14,11 @@ import {
   formatDateForSliderTimeline,
   formatDateForTimeline,
   formatRangeDateAndTime,
-} from "@reearth/beta/features/Visualizer/StoryPanel/utils";
+} from "@reearth/beta/features/Visualizer/Crust/StoryPanel/utils";
+import { DEFAULT_BLOCK_PADDING } from "@reearth/beta/features/Visualizer/shared/components/BlockWrapper/hooks";
+import { getNewDate } from "@reearth/beta/features/Visualizer/shared/hooks/useTimelineBlock";
 import { TickEventCallback, TimelineCommitter } from "@reearth/core";
 
-import { DEFAULT_BLOCK_PADDING } from "../../../../shared/components/BlockWrapper/hooks";
-import { getNewDate } from "../../../../shared/hooks/useTimelineBlock";
-
 import { PaddingProp } from "./Editor";
 
 import { TimelineValues } from ".";

web/src/beta/features/Visualizer/StoryPanel/Block/builtin/Title/index.tsx → web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Title/index.tsx

@@ -1,13 +1,13 @@
 import { useMemo } from "react";
 
 import Text from "@reearth/beta/components/Text";
+import BlockWrapper from "@reearth/beta/features/Visualizer/shared/components/BlockWrapper";
+import { CommonBlockProps as BlockProps } from "@reearth/beta/features/Visualizer/shared/types";
 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";
 
-import BlockWrapper from "../../../../shared/components/BlockWrapper";
-import { CommonBlockProps as BlockProps } from "../../../../shared/types";
 import { StoryBlock } from "../../../types";
 
 const TitleBlock: React.FC<BlockProps<StoryBlock>> = ({ block, isSelected, ...props }) => {

web/src/beta/features/Visualizer/StoryPanel/Block/builtin/Video/index.tsx → web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Video/index.tsx

@@ -1,8 +1,8 @@
 import { useMemo } from "react";
 
+import VideoPlayer from "@reearth/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Video/VideoPlayer";
 import BlockWrapper from "@reearth/beta/features/Visualizer/shared/components/BlockWrapper";
 import type { CommonBlockProps as BlockProps } from "@reearth/beta/features/Visualizer/shared/types";
-import VideoPlayer from "@reearth/beta/features/Visualizer/StoryPanel/Block/builtin/Video/VideoPlayer";
 import type { ValueTypes } from "@reearth/beta/utils/value";
 
 import { StoryBlock } from "../../../types";

web/src/beta/features/Visualizer/StoryPanel/Block/index.tsx → web/src/beta/features/Visualizer/Crust/StoryPanel/Block/index.tsx

@@ -1,9 +1,9 @@
 import { useCallback, type ComponentType, type ReactNode } from "react";
 
+import type { CommonBlockProps, BlockProps } from "@reearth/beta/features/Visualizer/shared/types";
 import type { Layer } from "@reearth/core";
 import { styled } from "@reearth/services/theme";
 
-import type { CommonBlockProps, BlockProps } from "../../shared/types";
 import { StoryBlock } from "../types";
 
 import builtin, { isBuiltinStoryBlock } from "./builtin";

web/src/beta/features/Visualizer/StoryPanel/Page/hooks.ts → web/src/beta/features/Visualizer/Crust/StoryPanel/Page/hooks.ts

@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
 
-import { useEditModeContext } from "../../shared/contexts/editModeContext";
+import { useEditModeContext } from "@reearth/beta/features/Visualizer/shared/contexts/editModeContext";
+
 import { DEFAULT_STORY_PAGE_GAP, DEFAULT_STORY_PAGE_PADDING } from "../constants";
 import { StoryPage } from "../types";
 import { calculatePaddingValue } from "../utils";