chore: adjust file

packages/app/package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@blocksuite/blocks": "0.3.0-alpha.3",
     "@blocksuite/editor": "0.3.0-alpha.3",
+    "@blocksuite/icons": "^1.0.3",
     "@blocksuite/store": "0.3.0-alpha.3",
     "@emotion/css": "^11.10.0",
     "@emotion/react": "^11.10.4",

packages/app/src/components/contact-modal/index.tsx

@@ -1,5 +1,4 @@
-import Modal from '@/ui/modal';
-import CloseIcon from '@mui/icons-material/Close';
+import { Modal, ModalCloseButton } from '@/ui/modal';
 import {
   LogoIcon,
   DocIcon,
@@ -22,7 +21,6 @@ import {
   StyledLogo,
   StyledModalHeader,
   StyledModalHeaderLeft,
-  StyledCloseButton,
   StyledModalFooter,
 } from './style';
 
@@ -82,13 +80,15 @@ export const ContactModal = ({ open, onClose }: TransitionsModalProps) => {
             <StyledLogo src={logo.src} alt="" />
             <span>Alpha</span>
           </StyledModalHeaderLeft>
-          <StyledCloseButton
+          <ModalCloseButton
+            top={6}
+            right={6}
+            size={[30, 30]}
+            iconSize={[20, 20]}
             onClick={() => {
               onClose();
             }}
-          >
-            <CloseIcon width={12} height={12} />
-          </StyledCloseButton>
+          />
         </StyledModalHeader>
 
         <StyledContent>

packages/app/src/components/contact-modal/style.ts

@@ -162,40 +162,6 @@ export const StyledModalHeaderLeft = styled('div')(({ theme }) => {
   };
 });
 
-export const StyledCloseButton = styled('div')(({ theme }) => {
-  return {
-    width: '60px',
-    height: '60px',
-    color: theme.colors.iconColor,
-    cursor: 'pointer',
-    ...displayFlex('center', 'center'),
-    position: 'absolute',
-    right: '0',
-    top: '0',
-
-    // TODO: we need to add @emotion/babel-plugin
-    '::after': {
-      content: '""',
-      width: '30px',
-      height: '30px',
-      borderRadius: '6px',
-      ...absoluteCenter({ horizontal: true, vertical: true }),
-    },
-    ':hover': {
-      color: theme.colors.primaryColor,
-      '::after': {
-        background: theme.colors.hoverBackground,
-      },
-    },
-    svg: {
-      width: '20px',
-      height: '20px',
-      position: 'relative',
-      zIndex: 1,
-    },
-  };
-});
-
 export const StyledModalFooter = styled('div')(({ theme }) => {
   return {
     fontSize: '14px',

packages/app/src/components/editor-provider/initial-editor.tsx

@@ -1,39 +0,0 @@
-import type { EditorContainer } from '@blocksuite/editor';
-import { createContext, useContext, useEffect, useState } from 'react';
-import type { PropsWithChildren } from 'react';
-import { createWebsocketDocProvider, Store } from '@blocksuite/store';
-import { BlockSchema, createEditor } from '@blocksuite/editor';
-import '@blocksuite/blocks';
-
-const getEditorParams = () => {
-  const providers = [];
-  const params = new URLSearchParams(location.search);
-  if (params.get('syncModes') === 'websocket') {
-    const WebsocketDocProvider = createWebsocketDocProvider(
-      'ws://127.0.0.1:3000/collaboration/AFFiNE'
-    );
-    providers.push(WebsocketDocProvider);
-  }
-
-  return {
-    providers,
-  };
-};
-
-export const InitialEditor = ({
-  setEditor,
-}: {
-  setEditor: (editor: EditorContainer) => void;
-}) => {
-  useEffect(() => {
-    const store = new Store({
-      // ...getEditorParams(),
-    });
-    const space = store.createSpace('page0').register(BlockSchema);
-    const editor = createEditor(space);
-    setEditor(editor);
-  }, [setEditor]);
-  return <div>111</div>;
-};
-
-export default InitialEditor;

packages/app/src/components/editor.tsx

@@ -15,7 +15,10 @@ export const Editor = () => {
       initDefaultContent(editor);
     }
   }, [editor]);
-  return <div id="editor" ref={editorContainer}></div>;
+
+  return (
+    <div id="editor" style={{ height: '100%' }} ref={editorContainer}></div>
+  );
 };
 
 export default Editor;

packages/app/src/components/mobile-modal/index.tsx

@@ -1,14 +1,12 @@
 import React, { useState } from 'react';
-import Modal from '@/ui/modal';
+import Modal, { ModalCloseButton } from '@/ui/modal';
 import getIsMobile from '@/utils/get-is-mobile';
 import {
   ModalWrapper,
   StyledButton,
-  StyledCloseButton,
   StyledContent,
   StyledTitle,
 } from './styles';
-import CloseIcon from '@mui/icons-material/Close';
 export const MobileModal = () => {
   const [showModal, setShowModal] = useState(getIsMobile());
   return (
@@ -19,13 +17,13 @@ export const MobileModal = () => {
       }}
     >
       <ModalWrapper>
-        <StyledCloseButton
+        <ModalCloseButton
+          size={[30, 30]}
+          iconSize={[20, 20]}
           onClick={() => {
             setShowModal(false);
           }}
-        >
-          <CloseIcon />
-        </StyledCloseButton>
+        />
 
         <StyledTitle>Ooops!</StyledTitle>
         <StyledContent>

packages/app/src/components/mobile-modal/styles.ts

@@ -12,26 +12,6 @@ export const ModalWrapper = styled.div(({ theme }) => {
   };
 });
 
-export const StyledCloseButton = styled.div(({ theme }) => {
-  return {
-    width: '66px',
-    height: '66px',
-    color: theme.colors.iconColor,
-    cursor: 'pointer',
-    ...displayFlex('center', 'center'),
-    position: 'absolute',
-    right: '0',
-    top: '0',
-
-    svg: {
-      width: '15px',
-      height: '15px',
-      position: 'relative',
-      zIndex: 1,
-    },
-  };
-});
-
 export const StyledTitle = styled.div(({ theme }) => {
   return {
     ...displayFlex('center', 'center'),

packages/app/src/components/provider-composer.ts

@@ -0,0 +1,16 @@
+import { cloneElement, FC, PropsWithChildren, ReactNode } from 'react';
+
+export const ProviderComposer: FC<
+  PropsWithChildren<{
+    contexts: any;
+  }>
+> = ({ contexts, children }) =>
+  contexts.reduceRight(
+    (kids: ReactNode, parent: any) =>
+      cloneElement(parent, {
+        children: kids,
+      }),
+    children
+  );
+
+export default ProviderComposer;

packages/app/src/components/shortcuts-modal/index.tsx

@@ -6,7 +6,6 @@ import {
   StyledShortcutsModal,
   StyledSubTitle,
   StyledTitle,
-  CloseButton,
 } from './style';
 import {
   macKeyboardShortcuts,
@@ -16,6 +15,7 @@ import {
 } from '@/components/shortcuts-modal/config';
 import CloseIcon from '@mui/icons-material/Close';
 import Slide from '@mui/material/Slide';
+import { ModalCloseButton } from '@/ui/modal';
 type ModalProps = {
   open: boolean;
   onClose: () => void;
@@ -42,13 +42,15 @@ export const ShortcutsModal = ({ open, onClose }: ModalProps) => {
               Shortcuts
             </StyledTitle>
 
-            <CloseButton
+            <ModalCloseButton
+              top={6}
+              right={6}
+              size={[24, 24]}
+              iconSize={[15, 15]}
               onClick={() => {
                 onClose();
               }}
-            >
-              <CloseIcon />
-            </CloseButton>
+            />
           </StyledModalHeader>
           <StyledSubTitle style={{ marginTop: 0 }}>
             Keyboard Shortcuts

packages/app/src/components/shortcuts-modal/style.ts

@@ -57,22 +57,3 @@ export const StyledListItem = styled.div(({ theme }) => ({
   fontSize: theme.font.sm,
   padding: '0 16px',
 }));
-
-export const CloseButton = styled('div')(({ theme }) => {
-  return {
-    width: '24px',
-    height: '24px',
-    borderRadius: '5px',
-    color: theme.colors.iconColor,
-    cursor: 'pointer',
-    ...displayFlex('center', 'center'),
-    svg: {
-      width: '15px',
-      height: '15px',
-    },
-    ':hover': {
-      background: theme.colors.hoverBackground,
-      color: theme.colors.primaryColor,
-    },
-  };
-});

pnpm-lock.yaml

@@ -24,6 +24,7 @@ importers:
     specifiers:
       '@blocksuite/blocks': 0.3.0-alpha.3
       '@blocksuite/editor': 0.3.0-alpha.3
+      '@blocksuite/icons': ^1.0.3
       '@blocksuite/store': 0.3.0-alpha.3
       '@emotion/css': ^11.10.0
       '@emotion/react': ^11.10.4
@@ -54,6 +55,7 @@ importers:
     dependencies:
       '@blocksuite/blocks': 0.3.0-alpha.3
       '@blocksuite/editor': 0.3.0-alpha.3
+      '@blocksuite/icons': 1.0.3_w5j4k42lgipnm43s3brx6h3c34
       '@blocksuite/store': 0.3.0-alpha.3
       '@emotion/css': 11.10.0
       '@emotion/react': 11.10.4_w5j4k42lgipnm43s3brx6h3c34
@@ -198,6 +200,16 @@ packages:
       - utf-8-validate
     dev: false
 
+  /@blocksuite/icons/1.0.3_w5j4k42lgipnm43s3brx6h3c34:
+    resolution: {integrity: sha512-wcptCjIaL3M6bSVLLTVEfqlIGTrRR7qJBp9Oacr947TR9ACIACEd1E1FRu0yyDhcouw2BcY2A0Wi6LF0xpe6mw==}
+    peerDependencies:
+      '@types/react': ^18.0.25
+      react: ^18.2.0
+    dependencies:
+      '@types/react': 18.0.20
+      react: 18.2.0
+    dev: false
+
   /@blocksuite/store/0.3.0-alpha.3:
     resolution: {integrity: sha512-XIe2FROwq+zJV3dWYXwcmiEqGF08ywkgAgKSnCn6iD1N2x+wWZEvGxowKPi7871DAd2QvCOaSM2vv9QTggXXag==}
     dependencies: