From 449b08c9c207e76edb23c4bbbd0bea81bab97e18 Mon Sep 17 00:00:00 2001
From: Yifeng Wang <doodlewind@toeverything.info>
Date: Fri, 6 Jan 2023 13:26:10 +0800
Subject: [PATCH] feat: compat with surface block structure

---
 packages/app/src/components/import/index.tsx             | 5 +++--
 packages/app/src/hooks/use-props-updated.ts              | 2 +-
 packages/app/src/pages/playground/templates.tsx          | 5 +++--
 .../app/src/pages/workspace/[workspaceId]/[pageId].tsx   | 9 +++++----
 4 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/packages/app/src/components/import/index.tsx b/packages/app/src/components/import/index.tsx
index 7387cb5de6..96a383dad2 100644
--- a/packages/app/src/components/import/index.tsx
+++ b/packages/app/src/components/import/index.tsx
@@ -31,9 +31,10 @@ export const ImportModal = ({ open, onClose }: ImportModalProps) => {
         setTimeout(() => {
           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}`);
+            editor.clipboard.importMarkdown(template.source, `${frameId}`);
             page.resetHistory();
             editor.requestUpdate();
           }
diff --git a/packages/app/src/hooks/use-props-updated.ts b/packages/app/src/hooks/use-props-updated.ts
index d76ada43d2..ad6fc2525a 100644
--- a/packages/app/src/hooks/use-props-updated.ts
+++ b/packages/app/src/hooks/use-props-updated.ts
@@ -17,7 +17,7 @@ export const usePropsUpdated: UsePropsUpdated = () => {
       return;
     }
     setTimeout(() => {
-      editor.model?.propsUpdated.on(() => {
+      editor.pageBlockModel?.propsUpdated.on(() => {
         callbackQueue.current.forEach(callback => {
           callback(editor);
         });
diff --git a/packages/app/src/pages/playground/templates.tsx b/packages/app/src/pages/playground/templates.tsx
index 0517498878..d32cbaa3f5 100644
--- a/packages/app/src/pages/playground/templates.tsx
+++ b/packages/app/src/pages/playground/templates.tsx
@@ -46,9 +46,10 @@ const All = () => {
         setTimeout(() => {
           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}`);
+            editor.clipboard.importMarkdown(template.source, `${frameId}`);
             page.resetHistory();
             editor.requestUpdate();
           }
diff --git a/packages/app/src/pages/workspace/[workspaceId]/[pageId].tsx b/packages/app/src/pages/workspace/[workspaceId]/[pageId].tsx
index 619f8e037e..998ec29941 100644
--- a/packages/app/src/pages/workspace/[workspaceId]/[pageId].tsx
+++ b/packages/app/src/pages/workspace/[workspaceId]/[pageId].tsx
@@ -55,14 +55,15 @@ 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}`);
+          editor.clipboard.importMarkdown(exampleMarkdown, `${frameId}`);
           currentWorkspace!.setPageMeta(currentPage!.id, { title });
         }
         currentPage!.resetHistory();