diff --git a/packages/app/package.json b/packages/app/package.json index 3a77c6b193..339274a5d1 100644 --- a/packages/app/package.json +++ b/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", diff --git a/packages/app/src/components/contact-modal/index.tsx b/packages/app/src/components/contact-modal/index.tsx index d504db88f7..7ac12c389c 100644 --- a/packages/app/src/components/contact-modal/index.tsx +++ b/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) => { Alpha - { onClose(); }} - > - - + /> diff --git a/packages/app/src/components/contact-modal/style.ts b/packages/app/src/components/contact-modal/style.ts index 13a00d438e..25cdfbf9bf 100644 --- a/packages/app/src/components/contact-modal/style.ts +++ b/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', diff --git a/packages/app/src/components/editor-provider/initial-editor.tsx b/packages/app/src/components/editor-provider/initial-editor.tsx deleted file mode 100644 index 1b1d6d8fb9..0000000000 --- a/packages/app/src/components/editor-provider/initial-editor.tsx +++ /dev/null @@ -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
111
; -}; - -export default InitialEditor; diff --git a/packages/app/src/components/editor.tsx b/packages/app/src/components/editor.tsx index a8b1885526..549b699150 100644 --- a/packages/app/src/components/editor.tsx +++ b/packages/app/src/components/editor.tsx @@ -15,7 +15,10 @@ export const Editor = () => { initDefaultContent(editor); } }, [editor]); - return
; + + return ( +
+ ); }; export default Editor; diff --git a/packages/app/src/components/mobile-modal/index.tsx b/packages/app/src/components/mobile-modal/index.tsx index 4c44359368..0656e1ea1a 100644 --- a/packages/app/src/components/mobile-modal/index.tsx +++ b/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 = () => { }} > - { setShowModal(false); }} - > - - + /> Ooops! diff --git a/packages/app/src/components/mobile-modal/styles.ts b/packages/app/src/components/mobile-modal/styles.ts index 14347f7375..22e7f9d8dd 100644 --- a/packages/app/src/components/mobile-modal/styles.ts +++ b/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'), diff --git a/packages/app/src/components/provider-composer.ts b/packages/app/src/components/provider-composer.ts new file mode 100644 index 0000000000..188d0b76fb --- /dev/null +++ b/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; diff --git a/packages/app/src/components/shortcuts-modal/index.tsx b/packages/app/src/components/shortcuts-modal/index.tsx index 752746ef28..e665053ca4 100644 --- a/packages/app/src/components/shortcuts-modal/index.tsx +++ b/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 - { onClose(); }} - > - - + /> Keyboard Shortcuts diff --git a/packages/app/src/components/shortcuts-modal/style.ts b/packages/app/src/components/shortcuts-modal/style.ts index a38e9da25d..7021c46825 100644 --- a/packages/app/src/components/shortcuts-modal/style.ts +++ b/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, - }, - }; -}); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 51b8bd8d2b..eafdfac302 100644 --- a/pnpm-lock.yaml +++ b/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: