Merge branch 'feat/cloud-sync-saika' into feat/poc

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

@@ -22,14 +22,14 @@ export const EditorHeader = () => {
 
   useEffect(() => {
     onPropsUpdated(editor => {
-      setTitle(editor.model?.title || 'Untitled');
+      setTitle(editor.pageBlockModel?.title || 'Untitled');
     });
   }, [onPropsUpdated]);
 
   useEffect(() => {
     setTimeout(() => {
       // If first time in, need to wait for editor to be inserted into DOM
-      setTitle(editor?.model?.title || 'Untitled');
+      setTitle(editor?.pageBlockModel?.title || 'Untitled');
     }, 300);
   }, [editor]);
 

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();
           }

packages/app/src/components/login-modal/LoginOptionButton.tsx

@@ -9,14 +9,14 @@ export const GoogleLoginButton = () => {
   return (
     <StyledGoogleButton
       onClick={() => {
-        getDataCenter()
-          .then(dc => dc.apis.signInWithGoogle?.())
-          .then(() => {
-            triggerLoginModal();
-          })
-          .catch(error => {
-            console.log('sign google error', error);
-          });
+        // getDataCenter()
+        //   .then(dc => dc.apis.signInWithGoogle?.())
+        //   .then(() => {
+        //     triggerLoginModal();
+        //   })
+        //   .catch(error => {
+        //     console.log('sign google error', error);
+        //   });
       }}
     >
       <ButtonWrapper>

packages/app/src/components/workspace-setting/general/leave/leave.tsx

@@ -7,7 +7,7 @@ import {
 } from './style';
 import { ModalCloseButton } from '@/ui/modal';
 import { Button } from '@/ui/button';
-import { getDataCenter } from '@affine/datacenter';
+// import { getDataCenter } from '@affine/datacenter';
 import { useAppState } from '@/providers/app-state-provider';
 
 interface WorkspaceDeleteProps {
@@ -25,10 +25,10 @@ export const WorkspaceLeave = ({
   // const router = useRouter();
   const { refreshWorkspacesMeta } = useAppState();
   const handleLeave = async () => {
-    const dc = await getDataCenter();
-    await dc.apis.leaveWorkspace({ id: workspaceId });
-    // router.push(`/workspace/${nextWorkSpaceId}`);
-    refreshWorkspacesMeta();
+    // const dc = await getDataCenter();
+    // await dc.apis.leaveWorkspace({ id: workspaceId });
+    // // router.push(`/workspace/${nextWorkSpaceId}`);
+    // refreshWorkspacesMeta();
     onClose();
   };
 

packages/app/src/components/workspace-slider-bar/WorkspaceSelector/SelectorPopperContent.tsx

@@ -53,9 +53,9 @@ export const SelectorPopperContent = ({
           if (type === WorkspaceType.Private) {
             return { id, member_count: 1, owner: user };
           } else {
-            const dc = await getDataCenter();
-            const data = await dc.apis.getWorkspaceDetail({ id });
-            return { id, ...data } || { id, member_count: 0, owner: user };
+            // const dc = await getDataCenter();
+            // const data = await dc.apis.getWorkspaceDetail({ id });
+            // return { id, ...data } || { id, member_count: 0, owner: user };
           }
         }
       })

packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceItem/CreateWorkspaceItem/workspace-create/workspace-create.tsx

@@ -52,10 +52,10 @@ export const WorkspaceCreate = ({ open, onClose }: WorkspaceCreateProps) => {
         ctx.fillText(workspaceName[0], 50, 50);
         canvas.toBlob(blob => {
           if (blob) {
-            const blobId = getDataCenter().then(dc =>
-              dc.apis.uploadBlob({ blob })
-            );
-            resolve(blobId);
+            // const blobId = getDataCenter().then(dc =>
+            //   dc.apis.uploadBlob({ blob })
+            // );
+            // resolve(blobId);
           } else {
             reject();
           }
@@ -71,23 +71,23 @@ export const WorkspaceCreate = ({ open, onClose }: WorkspaceCreateProps) => {
       setCreating(false);
     });
     if (blobId) {
-      getDataCenter()
-        .then(dc =>
-          dc.apis.createWorkspace({ name: workspaceName, avatar: blobId })
-        )
-        .then(async data => {
-          await refreshWorkspacesMeta();
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          // @ts-ignore
-          router.push(`/workspace/${data.id}`);
-          onClose();
-        })
-        .catch(err => {
-          console.log(err, 'err');
-        })
-        .finally(() => {
-          setCreating(false);
-        });
+      // getDataCenter()
+      //   .then(dc =>
+      //     dc.apis.createWorkspace({ name: workspaceName, avatar: blobId })
+      //   )
+      //   .then(async data => {
+      //     await refreshWorkspacesMeta();
+      //     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      //     // @ts-ignore
+      //     router.push(`/workspace/${data.id}`);
+      //     onClose();
+      //   })
+      //   .catch(err => {
+      //     console.log(err, 'err');
+      //   })
+      //   .finally(() => {
+      //     setCreating(false);
+      //   });
     }
   };
   return (

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

@@ -4,14 +4,14 @@ import {
   StyledArrowButton,
   StyledLink,
   StyledListItem,
-  StyledListItemForWorkspace,
+  // StyledListItemForWorkspace,
   StyledNewPageButton,
   StyledSliderBar,
   StyledSliderBarWrapper,
   StyledSubListItem,
 } from './style';
 import { Arrow } from './icons';
-import { WorkspaceSelector } from './WorkspaceSelector';
+// import { WorkspaceSelector } from './WorkspaceSelector';
 import Collapse from '@mui/material/Collapse';
 import {
   ArrowDownIcon,
@@ -113,9 +113,9 @@ export const WorkSpaceSliderBar = () => {
         </Tooltip>
 
         <StyledSliderBarWrapper data-testid="sliderBar">
-          <StyledListItemForWorkspace>
+          {/* <StyledListItemForWorkspace>
             <WorkspaceSelector />
-          </StyledListItemForWorkspace>
+          </StyledListItemForWorkspace> */}
           <StyledListItem
             data-testid="sliderBar-quickSearchButton"
             style={{ cursor: 'pointer' }}

packages/app/src/hooks/use-ensure-workspace.ts

@@ -1,8 +1,8 @@
 import { useState, useEffect } from 'react';
 import { useAppState } from '@/providers/app-state-provider';
 import { useRouter } from 'next/router';
-const defaultOutLineWorkspaceId =
-  'local-first-' + '85b4ca0b9081421d903bbc2501ea280f';
+const defaultOutLineWorkspaceId = 'affine';
+// 'local-first-' + '85b4ca0b9081421d903bbc2501ea280f';
 // It is a fully effective hook
 // Cause it not just ensure workspace loaded, but also have router change.
 export const useEnsureWorkspace = () => {

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);
         });
@@ -26,7 +26,7 @@ export const usePropsUpdated: UsePropsUpdated = () => {
 
     return () => {
       callbackQueue.current = [];
-      editor?.model?.propsUpdated.dispose();
+      editor?.pageBlockModel?.propsUpdated?.dispose();
     };
   }, [editor]);
 

packages/app/src/pages/invite/[invite_code].tsx

@@ -24,19 +24,19 @@ export default function DevPage() {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const [inviteData, setInviteData] = useState<any>(null);
   useEffect(() => {
-    getDataCenter()
-      .then(dc =>
-        dc.apis.acceptInviting({
-          invitingCode: router.query.invite_code as string,
-        })
-      )
-      .then(data => {
-        setSuccessInvited(true);
-        setInviteData(data);
-      })
-      .catch(err => {
-        console.log('err: ', err);
-      });
+    // getDataCenter()
+    //   .then(dc =>
+    //     dc.apis.acceptInviting({
+    //       invitingCode: router.query.invite_code as string,
+    //     })
+    //   )
+    //   .then(data => {
+    //     setSuccessInvited(true);
+    //     setInviteData(data);
+    //   })
+    //   .catch(err => {
+    //     console.log('err: ', err);
+    //   });
   }, [router.query.invite_code]);
 
   return (

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/testing-only.tsx

@@ -0,0 +1,18 @@
+import { useEffect } from 'react';
+import { getDataCenter } from '@affine/datacenter';
+/**
+ * testing only when development
+ */
+
+const Page = () => {
+  useEffect(() => {
+    getDataCenter().then(dc => {
+      // @ts-expect-error global variable
+      window.dc = dc;
+    });
+  }, []);
+
+  return <div>Testing only</div>;
+};
+
+export default Page;

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/templates/Welcome-to-AFFiNE-Alpha-v2.0.md

@@ -10,6 +10,11 @@ Let us know what you think of this latest version.
 2. More complete Markdown support and improved keyboard shortcuts;
 3. New features such as dark mode; Switch between view styles using the ☀ and 🌙.
 4. Clean and modern UI/UX design.
+5. You can self-host locally with Docker.
+
+```basic
+docker run -d -v [YOUR_PATH]:/app/data -p 3000:3000 ghcr.io/toeverything/affine-self-hosted:alpha-abbey-wood
+```
 
 **Looking for Markdown syntax or keyboard shortcuts?**
 
@@ -23,15 +28,21 @@ Let us know what you think of this latest version.
 - Copy and paste **images** into your pages, resize them and add captions
 - Add horizontal line dividers to your text with `---` and `***`
 - Changes are saved **locally**, but we still recommend you export your data to avoid data loss
-- Insert code blocks with syntax highlighting support using ```
+- Insert code blocks with syntax highlighting support using `````
 
 ### Playground:
 
 [] Try a horizontal line: `---`
 
-[] What about a code block? ```
+[] What about a code block? `````
 
-        console.log('Hello world');
+```javascript
+console.log('Hello world');
+```
+
+[] Can you resize this image?
+
+![](https://cdn.affine.pro/694fdbab78e0da3ed7922eba7d506dcf12f57308e1904dd694f53eb2.jpg)
 
 **How about page management?**
 

packages/app/src/utils/__tests__/get-is-mobile.spec.ts

@@ -1,4 +1,4 @@
-import { describe, test, expect } from '@jest/globals';
+import { describe, test, expect } from 'vitest';
 import { isMobile } from '../get-is-mobile';
 
 describe('get-is-mobile', () => {