fix: getPageMeta

packages/app/src/components/editor-mode-switch/index.tsx

@@ -14,6 +14,7 @@ import type {
 import { useTheme } from '@/providers/themeProvider';
 import { EdgelessIcon, PaperIcon } from './icons';
 import { useEditor } from '@/providers/editor-provider';
+import { useAppState } from '@/providers/app-state-provider/context';
 
 const PaperItem = ({ active }: { active?: boolean }) => {
   const {
@@ -66,8 +67,9 @@ export const EditorModeSwitch = ({
   style = {},
 }: AnimateRadioProps) => {
   const { mode: themeMode } = useTheme();
-  const { mode, setMode, getPageMeta } = useEditor();
-  const pageMeta = getPageMeta();
+  const { getPageMeta, currentPage } = useAppState();
+  const { mode, setMode } = useEditor();
+  const pageMeta = currentPage?.pageId ? getPageMeta(currentPage.pageId) : null;
 
   const modifyRadioItemStatus = (): RadioItemStatus => {
     return {

packages/app/src/components/editor.tsx

@@ -1,22 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-import { useEditor } from '@/providers/editor-provider';
-
-export const Editor = () => {
-  const editorContainer = useRef<HTMLDivElement>(null);
-  const { editor, onHistoryUpdated } = useEditor();
-  const ref = useRef<any>();
-  useEffect(() => {
-    if (editor && ref.current?.page.id !== editor?.page.id) {
-      ref.current?.remove();
-      ref.current = editor;
-
-      editorContainer.current?.appendChild(editor);
-    }
-  }, [editor]);
-
-  return (
-    <div id="editor" style={{ height: '100%' }} ref={editorContainer}></div>
-  );
-};
-
-export default Editor;

packages/app/src/components/header/editor-header.tsx

@@ -7,6 +7,7 @@ import {
 } from './styles';
 import { Content } from '@/ui/layout';
 import { useEditor } from '@/providers/editor-provider';
+import { useAppState } from '@/providers/app-state-provider/context';
 import EditorModeSwitch from '@/components/editor-mode-switch';
 import QuickSearchButton from './quick-search-button';
 import Header from './header';
@@ -14,8 +15,9 @@ import Header from './header';
 export const EditorHeader = () => {
   const [title, setTitle] = useState('');
   const [isHover, setIsHover] = useState(false);
+  const { getPageMeta, currentPage, editor } = useAppState();
 
-  const { editor, onPropsUpdated, getPageMeta } = useEditor();
+  const { onPropsUpdated } = useEditor();
 
   useEffect(() => {
     onPropsUpdated(editor => {
@@ -30,7 +32,7 @@ export const EditorHeader = () => {
     }, 300);
   }, [editor]);
 
-  const pageMeta = getPageMeta();
+  const pageMeta = currentPage?.pageId ? getPageMeta(currentPage.pageId) : null;
 
   return (
     <Header>

packages/app/src/components/header/header.tsx

@@ -18,6 +18,7 @@ import {
   TrashIcon,
 } from '@blocksuite/icons';
 import { useEditor } from '@/providers/editor-provider';
+import { useAppState } from '@/providers/app-state-provider/context';
 import ThemeModeSwitch from '@/components/theme-mode-switch';
 import { IconButton, Button } from '@/ui/button';
 import CloseIcon from '@mui/icons-material/Close';
@@ -29,18 +30,13 @@ import { SyncIcon } from './sync-icon';
 import { toast } from '@/components/toast';
 
 const PopoverContent = () => {
-  const {
-    editor,
-    mode,
-    setMode,
-    getPageMeta,
-    page,
-    toggleFavoritePage,
-    toggleDeletePage,
-  } = useEditor();
+  const { getPageMeta, editor, currentPage } = useAppState();
+  const { mode, setMode, toggleFavoritePage, toggleDeletePage } = useEditor();
   const { confirm } = useConfirm();
 
-  const { id, favorite, title } = getPageMeta(page?.id) ?? {
+  const { id, favorite, title } = (currentPage?.id
+    ? getPageMeta(currentPage.id)
+    : null) ?? {
     id: '',
     favorite: false,
     title: '',

packages/app/src/components/page-list/operation-cell.tsx

@@ -1,5 +1,8 @@
+import { useRouter } from 'next/router';
 import { PageMeta, useEditor } from '@/providers/editor-provider';
 import { useConfirm } from '@/providers/confirm-provider';
+import { useAppState } from '@/providers/app-state-provider/context';
+import { useGoToPage } from '@/providers/app-state-provider/hooks';
 import { Menu, MenuItem } from '@/ui/menu';
 import { Wrapper } from '@/ui/layout';
 import { IconButton } from '@/ui/button';
@@ -16,7 +19,8 @@ import { toast } from '@/components/toast';
 
 export const OperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => {
   const { id, favorite } = pageMeta;
-  const { openPage, toggleFavoritePage, toggleDeletePage } = useEditor();
+  const goToPage = useGoToPage();
+  const { toggleFavoritePage, toggleDeletePage } = useEditor();
   const { confirm } = useConfirm();
 
   const OperationMenu = (
@@ -31,7 +35,7 @@ export const OperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => {
       </MenuItem>
       <MenuItem
         onClick={() => {
-          openPage(id);
+          goToPage(id);
         }}
         icon={<OpenInNewIcon />}
       >
@@ -68,8 +72,9 @@ export const OperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => {
 
 export const TrashOperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => {
   const { id } = pageMeta;
-  const { permanentlyDeletePage, toggleDeletePage, openPage, getPageMeta } =
-    useEditor();
+  const goToPage = useGoToPage();
+  const { getPageMeta } = useAppState();
+  const { permanentlyDeletePage, toggleDeletePage } = useEditor();
   const { confirm } = useConfirm();
 
   return (
@@ -80,7 +85,7 @@ export const TrashOperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => {
         onClick={() => {
           toggleDeletePage(id);
           toast(`${getPageMeta(id)?.title || 'Untitled'} restored`);
-          openPage(id);
+          goToPage(id);
         }}
       >
         <RestoreIcon />

packages/app/src/components/workspace-slider-bar/index.tsx

@@ -25,6 +25,7 @@ import Link from 'next/link';
 import { Tooltip } from '@/ui/tooltip';
 import { useEditor } from '@/providers/editor-provider';
 import { useModal } from '@/providers/global-modal-provider';
+import { useGoToPage } from '@/providers/app-state-provider/hooks';
 
 import { IconButton } from '@/ui/button';
 import { WorkspaceSelector } from './WorkspaceSelector';
@@ -63,7 +64,8 @@ const FavoriteList = ({ showList }: { showList: boolean }) => {
 export const WorkSpaceSliderBar = () => {
   const { triggerQuickSearchModal, triggerImportModal } = useModal();
   const [showSubFavorite, setShowSubFavorite] = useState(true);
-  const { createPage, getPageMeta, openPage } = useEditor();
+  const { createPage } = useEditor();
+  const goToPage = useGoToPage();
   const router = useRouter();
 
   const [showTip, setShowTip] = useState(false);
@@ -127,7 +129,7 @@ export const WorkSpaceSliderBar = () => {
         <StyledNewPageButton
           onClick={async () => {
             const page = await createPage();
-            openPage(page.id);
+            goToPage(page.pageId);
           }}
         >
           <AddIcon /> New Page