refactor(view): migrate to new view api

libs/components/editor-blocks/src/blocks/group/GroupView.tsx

@@ -17,7 +17,6 @@ const SceneMap: Record<RecastScene, ComponentType<CreateView>> = {
     page: ScenePage,
     table: SceneTable,
     kanban: SceneKanban,
-    whiteboard: ScenePage,
 } as const;
 
 const GroupBox = styled('div')(({ theme }) => {

libs/components/editor-blocks/src/blocks/group/config.ts

@@ -1,3 +1,5 @@
+import { RecastScene } from '@toeverything/components/editor-core';
+
 export const PANEL_CONFIG = {
     FILTER: 'filter',
     SORTER: 'sorter',
@@ -5,9 +7,11 @@ export const PANEL_CONFIG = {
     GROUP_BY: 'group_by',
 } as const;
 
-export const SCENE_CONFIG = {
+/**
+ * See {@link RecastScene}
+ */
+export const SCENE_CONFIG: Record<Uppercase<RecastScene>, string> = {
     PAGE: 'page',
     KANBAN: 'kanban',
     TABLE: 'table',
-    REFLINK: 'reflink',
 } as const;

libs/components/editor-blocks/src/blocks/image/ImageView.tsx

@@ -1,18 +1,16 @@
-import { FC, useState, useEffect, useRef } from 'react';
-import { CreateView } from '@toeverything/framework/virgo';
-import { Upload } from '../../components/upload/upload';
-import { services } from '@toeverything/datasource/db-service';
-import { styled } from '@toeverything/components/ui';
-import DeleteSweepOutlinedIcon from '@mui/icons-material/DeleteSweepOutlined';
-import DownloadIcon from '@mui/icons-material/Download';
-import { Image as SourceView } from '../../components/ImageView';
 import {
+    useCurrentView,
     useOnSelect,
-    useRecastBlockScene,
     WrapperWithPendantAndDragDrop,
 } from '@toeverything/components/editor-core';
-import './styles.css';
+import { styled } from '@toeverything/components/ui';
+import { services } from '@toeverything/datasource/db-service';
+import { CreateView } from '@toeverything/framework/virgo';
+import { FC, useEffect, useRef, useState } from 'react';
+import { Image as SourceView } from '../../components/ImageView';
+import { Upload } from '../../components/upload/upload';
 import { SCENE_CONFIG } from '../group/config';
+import './styles.css';
 const MESSAGES = {
     ADD_AN_IMAGE: 'Add an image',
 };
@@ -62,14 +60,14 @@ export const ImageView: FC<ImageView> = ({ block, editor }) => {
     const [imgWidth, setImgWidth] = useState<number>(0);
     const [ratio, set_ratio] = useState<number>(0);
     const resize_box = useRef(null);
-    const { scene } = useRecastBlockScene();
+    const [currentView] = useCurrentView();
     const [isSelect, setIsSelect] = useState<boolean>();
     useOnSelect(block.id, (isSelect: boolean) => {
         setIsSelect(isSelect);
     });
 
     const img_load = (url: string) => {
-        let boxWidth = resize_box.current.offsetWidth;
+        const boxWidth = resize_box.current.offsetWidth;
 
         const imageStyle = block.getProperty('image_style');
         if (imageStyle?.width) {
@@ -171,7 +169,7 @@ export const ImageView: FC<ImageView> = ({ block, editor }) => {
                                 e.stopPropagation();
                             }}
                         >
-                            {scene === SCENE_CONFIG.PAGE ? (
+                            {currentView.type === SCENE_CONFIG.PAGE ? (
                                 <SourceView
                                     block={block}
                                     viewStyle={{

libs/components/editor-blocks/src/utils/WithTreeViewChildren.tsx

@@ -1,10 +1,11 @@
 import {
+    CreateView,
     RenderBlock,
+    useCurrentView,
     useOnSelect,
-    useRecastBlockScene,
     WrapperWithPendantAndDragDrop,
 } from '@toeverything/components/editor-core';
-import { CreateView } from '@toeverything/framework/virgo';
+import { styled } from '@toeverything/components/ui';
 import type {
     ComponentPropsWithoutRef,
     ComponentPropsWithRef,
@@ -13,10 +14,8 @@ import type {
 } from 'react';
 import { forwardRef, useState } from 'react';
 import style9 from 'style9';
-
-import { BlockContainer } from '../components/BlockContainer';
-import { styled } from '@toeverything/components/ui';
 import { SCENE_CONFIG } from '../blocks/group/config';
+import { BlockContainer } from '../components/BlockContainer';
 
 type WithChildrenConfig = {
     indent: CSSProperties['marginLeft'];
@@ -68,8 +67,8 @@ const ChildrenView = ({
     handleCollapse,
     indent,
 }: ChildrenViewProp) => {
-    const { scene } = useRecastBlockScene();
-    const isKanbanScene = scene === SCENE_CONFIG.KANBAN;
+    const [currentView] = useCurrentView();
+    const isKanbanScene = currentView.type === SCENE_CONFIG.KANBAN;
 
     return (
         <div
@@ -130,9 +129,9 @@ export const withTreeViewChildren = (
         const childrenIds = block.childrenIds;
         const showChildren = !collapsed && childrenIds.length > 0;
 
-        const [isSelect, setIsSelect] = useState<boolean>();
-        useOnSelect(block.id, (is_select: boolean) => {
-            setIsSelect(is_select);
+        const [isSelect, setIsSelect] = useState<boolean>(false);
+        useOnSelect(block.id, (isSelect: boolean) => {
+            setIsSelect(isSelect);
         });
         const handleCollapse = () => {
             block.setProperty('collapsed', { value: true });

libs/components/editor-core/src/recast-block/Scene.tsx

@@ -7,6 +7,7 @@ import { RecastScene } from './types';
  *
  * 获取/设置多维区块场景
  * @public
+ * @deprecated Use the `useRecastView` or `useCurrentView` API
  */
 export const useRecastBlockScene = () => {
     const groupBlock = useRecastBlock();

libs/components/editor-core/src/recast-block/types/view.ts

@@ -7,7 +7,7 @@ export enum RecastScene {
     Page = 'page',
     Kanban = 'kanban',
     Table = 'table',
-    Whiteboard = 'whiteboard',
+    // Whiteboard = 'whiteboard',
 }
 
 export type RecastViewId = string & {