Merge remote-tracking branch 'origin' into feat/cloud-sync-saika

packages/app/src/pages/_app.tsx

@@ -18,6 +18,7 @@ import { useEffect } from 'react';
 import { useAppState } from '@/providers/app-state-provider';
 import { PageLoading } from '@/components/loading';
 import Head from 'next/head';
+import '@/libs/i18n';
 
 const ThemeProvider = dynamic(() => import('@/providers/themeProvider'), {
   ssr: false,

packages/app/src/pages/playground/templates.tsx

@@ -43,12 +43,16 @@ const All = () => {
     if (page) {
       currentWorkspace?.setPageMeta(page.id, { title });
       if (page && page.root === null) {
-        setTimeout(() => {
+        setTimeout(async () => {
           const editor = document.querySelector('editor-container');
           if (editor) {
-            const groupId = page.addBlock({ flavour: 'affine:group' }, pageId);
+            page.addBlock({ flavour: 'affine:surface' }, null);
+            const frameId = page.addBlock({ flavour: 'affine:frame' }, pageId);
             // TODO blocksuite should offer a method to import markdown from store
-            editor.clipboard.importMarkdown(template.source, `${groupId}`);
+            await editor.clipboard.importMarkdown(
+              template.source,
+              `${frameId}`
+            );
             page.resetHistory();
             editor.requestUpdate();
           }

packages/app/src/pages/workspace/[workspaceId]/[pageId].tsx

@@ -1,10 +1,10 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 import {
-  useRef,
-  useEffect,
-  useState,
-  ReactElement,
   PropsWithChildren,
+  ReactElement,
+  useEffect,
+  useRef,
+  useState,
 } from 'react';
 import { styled } from '@/styles';
 import { EditorHeader } from '@/components/header';
@@ -16,9 +16,11 @@ import type { NextPageWithLayout } from '../..//_app';
 import WorkspaceLayout from '@/components/workspace-layout';
 import { useRouter } from 'next/router';
 import { usePageHelper } from '@/hooks/use-page-helper';
+
 const StyledEditorContainer = styled('div')(() => {
   return {
     height: 'calc(100vh - 60px)',
+    padding: '0 32px',
   };
 });
 
@@ -54,15 +56,20 @@ const Page: NextPageWithLayout = () => {
           flavour: 'affine:page',
           title,
         });
-        const groupId = currentPage!.addBlock(
-          { flavour: 'affine:group' },
+        currentPage!.addBlock({ flavour: 'affine:surface' }, null);
+        const frameId = currentPage!.addBlock(
+          { flavour: 'affine:frame' },
           pageId
         );
-        currentPage!.addBlock({ flavour: 'affine:group' }, pageId);
+        currentPage!.addBlock({ flavour: 'affine:frame' }, pageId);
         // If this is a first page in workspace, init an introduction markdown
         if (isFirstPage) {
-          editor.clipboard.importMarkdown(exampleMarkdown, `${groupId}`);
-          currentWorkspace!.setPageMeta(currentPage!.id, { title });
+          editor.clipboard
+            .importMarkdown(exampleMarkdown, `${frameId}`)
+            .then(() => {
+              currentWorkspace!.setPageMeta(currentPage!.id, { title });
+              currentPage!.resetHistory();
+            });
         }
         currentPage!.resetHistory();
       }

packages/app/src/pages/workspace/[workspaceId]/all.tsx

@@ -4,13 +4,13 @@ import usePageMetaList from '@/hooks/use-page-meta-list';
 import { PageListHeader } from '@/components/header';
 import { ReactElement } from 'react';
 import WorkspaceLayout from '@/components/workspace-layout';
-
+import { useTranslation } from 'react-i18next';
 const All = () => {
   const pageMetaList = usePageMetaList();
-
+  const { t } = useTranslation();
   return (
     <>
-      <PageListHeader icon={<AllPagesIcon />}>All Page</PageListHeader>
+      <PageListHeader icon={<AllPagesIcon />}>{t('All pages')}</PageListHeader>
       <PageList
         pageList={pageMetaList.filter(p => !p.trash)}
         showFavoriteTag={true}

packages/app/src/pages/workspace/[workspaceId]/favorite.tsx

@@ -4,12 +4,15 @@ import { FavouritesIcon } from '@blocksuite/icons';
 import usePageMetaList from '@/hooks/use-page-meta-list';
 import { ReactElement } from 'react';
 import WorkspaceLayout from '@/components/workspace-layout';
-
+import { useTranslation } from 'react-i18next';
 export const Favorite = () => {
   const pageMetaList = usePageMetaList();
+  const { t } = useTranslation();
   return (
     <>
-      <PageListHeader icon={<FavouritesIcon />}>Favourites</PageListHeader>
+      <PageListHeader icon={<FavouritesIcon />}>
+        {t('Favourites')}
+      </PageListHeader>
       <PageList pageList={pageMetaList.filter(p => p.favorite && !p.trash)} />
     </>
   );

packages/app/src/pages/workspace/[workspaceId]/trash.tsx

@@ -4,12 +4,13 @@ import { TrashIcon } from '@blocksuite/icons';
 import usePageMetaList from '@/hooks/use-page-meta-list';
 import { ReactElement } from 'react';
 import WorkspaceLayout from '@/components/workspace-layout';
-
+import { useTranslation } from 'react-i18next';
 export const Trash = () => {
   const pageMetaList = usePageMetaList();
+  const { t } = useTranslation();
   return (
     <>
-      <PageListHeader icon={<TrashIcon />}>Trash</PageListHeader>
+      <PageListHeader icon={<TrashIcon />}>{t('Trash')}</PageListHeader>
       <PageList pageList={pageMetaList.filter(p => p.trash)} isTrash={true} />
     </>
   );