diff --git a/packages/app/package.json b/packages/app/package.json index bb66467183..a8c7dc3388 100644 --- a/packages/app/package.json +++ b/packages/app/package.json @@ -9,10 +9,10 @@ "lint": "next lint" }, "dependencies": { - "@blocksuite/blocks": "0.3.0-alpha.5", - "@blocksuite/editor": "0.3.0-alpha.5", + "@blocksuite/blocks": "0.3.0-alpha.6", + "@blocksuite/editor": "0.3.0-alpha.6", "@blocksuite/icons": "^1.0.5", - "@blocksuite/store": "0.3.0-alpha.5", + "@blocksuite/store": "0.3.0-alpha.6", "@emotion/css": "^11.10.0", "@emotion/react": "^11.10.4", "@emotion/server": "^11.10.0", diff --git a/packages/app/src/components/contact-modal/index.tsx b/packages/app/src/components/contact-modal/index.tsx index 7ac12c389c..cae11c7e79 100644 --- a/packages/app/src/components/contact-modal/index.tsx +++ b/packages/app/src/components/contact-modal/index.tsx @@ -1,4 +1,4 @@ -import { Modal, ModalCloseButton } from '@/ui/modal'; +import { Modal, ModalCloseButton, ModalWrapper } from '@/ui/modal'; import { LogoIcon, DocIcon, @@ -11,7 +11,6 @@ import { } from './icons'; import logo from './affine-text-logo.png'; import { - StyledModalWrapper, StyledBigLink, StyledSmallLink, StyledSubTitle, @@ -23,6 +22,7 @@ import { StyledModalHeaderLeft, StyledModalFooter, } from './style'; +import bg from '@/components/contact-modal/bg.png'; const linkList = [ { @@ -74,7 +74,11 @@ type TransitionsModalProps = { export const ContactModal = ({ open, onClose }: TransitionsModalProps) => { return ( - + @@ -83,8 +87,6 @@ export const ContactModal = ({ open, onClose }: TransitionsModalProps) => { { onClose(); }} @@ -134,7 +136,7 @@ export const ContactModal = ({ open, onClose }: TransitionsModalProps) => {

Copyright © 2022 Toeverything

- + ); }; diff --git a/packages/app/src/components/contact-modal/style.ts b/packages/app/src/components/contact-modal/style.ts index 25cdfbf9bf..e0954a194d 100644 --- a/packages/app/src/components/contact-modal/style.ts +++ b/packages/app/src/components/contact-modal/style.ts @@ -1,21 +1,4 @@ import { absoluteCenter, displayFlex, styled } from '@/styles'; -import bg from './bg.png'; - -export const StyledModalWrapper = styled('div')(({ theme }) => { - return { - width: '860px', - height: '540px', - backgroundColor: theme.colors.popoverBackground, - backgroundImage: `url(${bg.src})`, - borderRadius: '20px', - position: 'absolute', - left: 0, - right: 0, - top: 0, - bottom: 0, - margin: 'auto', - }; -}); export const StyledBigLink = styled('a')(({ theme }) => { return { diff --git a/packages/app/src/components/editor.tsx b/packages/app/src/components/editor.tsx index 2c37676351..dfb2a924c5 100644 --- a/packages/app/src/components/editor.tsx +++ b/packages/app/src/components/editor.tsx @@ -12,7 +12,7 @@ export const Editor = () => { editorContainer.current?.appendChild(editor); - initDefaultContent(editor); + // initDefaultContent(editor); } }, [editor]); diff --git a/packages/app/src/components/mobile-modal/index.tsx b/packages/app/src/components/mobile-modal/index.tsx index 0656e1ea1a..ff9796359b 100644 --- a/packages/app/src/components/mobile-modal/index.tsx +++ b/packages/app/src/components/mobile-modal/index.tsx @@ -1,12 +1,8 @@ import React, { useState } from 'react'; -import Modal, { ModalCloseButton } from '@/ui/modal'; +import Modal, { ModalCloseButton, ModalWrapper } from '@/ui/modal'; import getIsMobile from '@/utils/get-is-mobile'; -import { - ModalWrapper, - StyledButton, - StyledContent, - StyledTitle, -} from './styles'; +import { StyledButton, StyledContent, StyledTitle } from './styles'; +import bg from './bg.png'; export const MobileModal = () => { const [showModal, setShowModal] = useState(getIsMobile()); return ( @@ -16,7 +12,11 @@ export const MobileModal = () => { setShowModal(false); }} > - + { - return { - width: '348px', - height: '388px', - background: theme.colors.popoverBackground, - borderRadius: '28px', - position: 'relative', - backgroundImage: `url(${bg.src})`, - }; -}); export const StyledTitle = styled.div(({ theme }) => { return { diff --git a/packages/app/src/components/workspace-slider-bar/index.tsx b/packages/app/src/components/workspace-slider-bar/index.tsx index cdbc1ecd99..a1ff2700a0 100644 --- a/packages/app/src/components/workspace-slider-bar/index.tsx +++ b/packages/app/src/components/workspace-slider-bar/index.tsx @@ -1,5 +1,5 @@ import React, { useState } from 'react'; -import Router from 'next/router'; +import { useRouter } from 'next/router'; import { StyledArrowButton, StyledListItem, @@ -8,11 +8,13 @@ import { StyledSubListItem, } from './style'; import { Arrow } from './icons'; -import { useModal } from '@/providers/global-modal-provider'; - +import Link from 'next/link'; +import { useEditor } from '@/providers/editor-provider'; export const WorkSpaceSliderBar = () => { const { triggerQuickSearchModal } = useModal(); const [show, setShow] = useState(false); + const { createPage } = useEditor(); + const router = useRouter(); return ( <> @@ -25,11 +27,19 @@ export const WorkSpaceSliderBar = () => { { - Router.push('/all-page'); + router.push({ + pathname: '/', + query: { + pageId: new Date().getTime().toString(), + }, + }); }} > - All pages + Back to Doc + + All pages + Favourites document 1, this is a paper icondocument 1 @@ -39,7 +49,13 @@ export const WorkSpaceSliderBar = () => { Import Bin - New Page + { + createPage(); + }} + > + New Page + { return { @@ -14,19 +21,87 @@ const StyledTableContainer = styled.div(() => { overflowY: 'auto', }; }); +const StyledTitleWrapper = styled.div(({ theme }) => { + return { + ...displayFlex('flex-start', 'center'), + 'favorite-heart': {}, + }; +}); +const StyledTitleContent = styled.div(({ theme }) => { + return { + maxWidth: '90%', + marginRight: '18px', + ...textEllipsis(1), + }; +}); +const StyledFavoriteButton = styled.button<{ favorite: boolean }>( + ({ theme, favorite }) => { + return { + width: '32px', + height: '32px', + justifyContent: 'center', + alignItems: 'center', + display: 'none', + color: favorite ? theme.colors.primaryColor : theme.colors.iconColor, + '&:hover': { + color: theme.colors.primaryColor, + }, + }; + } +); +const StyledTableRow = styled(TableRow)(({ theme }) => { + return { + '&:hover': { + '.favorite-button': { + display: 'flex', + }, + }, + }; +}); -const OperationMenu = () => { - return ( +const OperationArea = ({ pageMeta }: { pageMeta: PageMeta }) => { + const { id, favorite } = pageMeta; + const { openPage, toggleFavoritePage, toggleDeletePage } = useEditor(); + + const OperationMenu = ( <> - Add to favourites - Open in new tab - Delete + { + toggleFavoritePage(id); + }} + > + {favorite ? 'Remove' : 'Add'} to favourites + + { + openPage(id); + }} + > + Open in new tab + + { + toggleDeletePage(id); + }} + > + Delete + ); + return ( + + + + + + + + ); }; export const AllPage = () => { const { confirm } = useConfirm(); + const { pageList, toggleFavoritePage } = useEditor(); return ( <>
@@ -53,27 +128,35 @@ export const AllPage = () => { - {new Array(100).fill(0).map((_, index) => { + {pageList.map((pageMeta, index) => { return ( - - - This is a long, very long, extremely long, incredibly long, - exceedingly long, very long document title - - 2022-11-02 18:30 - 2022-11-02 18:30 + - } - placement="bottom-end" - disablePortal={true} - > - - - - + + + {pageMeta.title || pageMeta.id} + + { + toggleFavoritePage(pageMeta.id); + }} + > + {pageMeta.favorite ? ( + + ) : ( + + )} + + - + {pageMeta.createDate} + {pageMeta.createDate} + + + + ); })} diff --git a/packages/app/src/pages/index.tsx b/packages/app/src/pages/index.tsx index 8baa7a89eb..8650026334 100644 --- a/packages/app/src/pages/index.tsx +++ b/packages/app/src/pages/index.tsx @@ -6,8 +6,6 @@ import EdgelessToolbar from '@/components/edgeless-toolbar'; import MobileModal from '@/components/mobile-modal'; import Editor from '@/components/editor'; -import '@/components/simple-counter'; - const StyledEditorContainer = styled('div')(({ theme }) => { return { height: 'calc(100vh - 60px)', diff --git a/packages/app/src/providers/editor-provider/editor-provider.tsx b/packages/app/src/providers/editor-provider/editor-provider.tsx index 7618079e22..1690dad88e 100644 --- a/packages/app/src/providers/editor-provider/editor-provider.tsx +++ b/packages/app/src/providers/editor-provider/editor-provider.tsx @@ -1,25 +1,64 @@ import type { EditorContainer } from '@blocksuite/editor'; -import { createContext, useContext, useEffect, useState } from 'react'; +import { createContext, useContext, useEffect, useRef, useState } from 'react'; import type { PropsWithChildren } from 'react'; import dynamic from 'next/dynamic'; import Loading from './loading'; - +import { Page, Workspace } from '@blocksuite/store'; +import { BlockSchema } from '@blocksuite/editor/dist/block-loader'; +import { useRouter } from 'next/router'; +export interface PageMeta { + id: string; + title: string; + favorite: boolean; + trash: boolean; + createDate: number; + trashDate: number | null; +} +// Blocksuite has to be imported dynamically since it has a lot of effects const DynamicEditor = dynamic(() => import('./initial-editor'), { ssr: false, }); type EditorContextValue = { - editor: EditorContainer | null; mode: EditorContainer['mode']; setMode: (mode: EditorContainer['mode']) => void; + currentPage: Page | null; + editor: EditorContainer | null; + pageList: PageMeta[]; +} & EditorHandlers; + +type EditorHandlers = { + createPage: (pageId?: string) => void; + openPage: ( + pageId: string, + query?: { [key: string]: string } + ) => Promise; + deletePage: (pageId: string) => void; + recyclePage: (pageId: string) => void; + toggleDeletePage: (pageId: string) => void; + favoritePage: (pageId: string) => void; + unFavoritePage: (pageId: string) => void; + toggleFavoritePage: (pageId: string) => void; }; type EditorContextProps = PropsWithChildren<{}>; export const EditorContext = createContext({ - editor: null, mode: 'page', setMode: () => {}, + pageList: [], + currentPage: null, + editor: null, + createPage: () => {}, + openPage: async () => { + return false; + }, + deletePage: () => {}, + recyclePage: () => {}, + toggleDeletePage: () => {}, + favoritePage: () => {}, + unFavoritePage: () => {}, + toggleFavoritePage: () => {}, }); export const useEditor = () => useContext(EditorContext); @@ -27,6 +66,11 @@ export const useEditor = () => useContext(EditorContext); export const EditorProvider = ({ children, }: PropsWithChildren) => { + const router = useRouter(); + const blockSchemaRef = useRef(null); + const [workspace, setWorkspace] = useState(null); + const [currentPage, setCurrentPage] = useState(null); + const [pageList, setPageList] = useState([]); const [editor, setEditor] = useState(null); const [mode, setMode] = useState('page'); @@ -35,10 +79,77 @@ export const EditorProvider = ({ window.dispatchEvent(event); }, [mode]); + useEffect(() => { + if (!workspace) { + return; + } + setPageList(workspace.meta.pages as PageMeta[]); + workspace.meta.pagesUpdated.on(res => { + setPageList(workspace.meta.pages as PageMeta[]); + }); + return () => { + // TODO: Does it need to be removed? + workspace.meta.pagesUpdated.dispose(); + }; + }, [workspace]); + + const editorHandler: EditorHandlers = { + createPage: (pageId = new Date().getTime().toString()) => { + blockSchemaRef.current && + workspace?.createPage(pageId).register(blockSchemaRef.current); + }, + openPage: (pageId, query = {}) => { + return router.push({ + pathname: '/', + query: { + pageId, + ...query, + }, + }); + }, + deletePage: pageId => { + workspace?.setPage(pageId, { trash: true }); + }, + recyclePage: pageId => { + workspace?.setPage(pageId, { trash: false }); + }, + toggleDeletePage: pageId => { + const pageMeta = workspace?.meta.pages.find(p => p.id === pageId); + if (pageMeta) { + workspace?.setPage(pageId, { trash: !pageMeta.trash }); + } + }, + favoritePage: pageId => { + workspace?.setPage(pageId, { favorite: true }); + }, + unFavoritePage: pageId => { + workspace?.setPageMeta(pageId, { favorite: true }); + }, + toggleFavoritePage: pageId => { + const pageMeta = workspace?.meta.pages.find(p => p.id === pageId); + if (pageMeta) { + workspace?.setPageMeta(pageId, { favorite: !pageMeta.favorite }); + } + }, + }; + return ( - - - {editor ? children : } + + { + if (!blockSchemaRef.current) { + blockSchemaRef.current = blockSchema; + } + }} + setEditor={setEditor} + setWorkspace={setWorkspace} + setCurrentPage={setCurrentPage} + /> + {workspace && currentPage && editor ? children : } ); }; diff --git a/packages/app/src/providers/editor-provider/initial-editor.tsx b/packages/app/src/providers/editor-provider/initial-editor.tsx index 57f446fd8b..7cff95d876 100644 --- a/packages/app/src/providers/editor-provider/initial-editor.tsx +++ b/packages/app/src/providers/editor-provider/initial-editor.tsx @@ -4,45 +4,103 @@ import type { EditorContainer } from '@blocksuite/editor'; import { BlockSchema, createEditor } from '@blocksuite/editor'; import { useEffect } from 'react'; import pkg from '../../../package.json'; -import { createWebsocketDocProvider, Workspace } from '@blocksuite/store'; +import { + createWebsocketDocProvider, + Workspace, + IndexedDBDocProvider, + Page, +} from '@blocksuite/store'; +import { useRouter } from 'next/router'; const getEditorParams = () => { const providers = []; const params = new URLSearchParams(location.search); - if (params.get('syncModes') === 'websocket') { + const room = params.get('room') ?? 'AFFINE-pathfinder'; + if (params.get('syncMode') === 'websocket') { const WebsocketDocProvider = createWebsocketDocProvider( 'ws://127.0.0.1:3000/collaboration/AFFiNE' ); providers.push(WebsocketDocProvider); } + if (params.get('syncMode') === 'indexeddb') { + providers.push(IndexedDBDocProvider); + } return { + room, providers, }; }; const InitialEditor = ({ + workspace, + currentPage, + setBlockSchema, setEditor, + setWorkspace, + setCurrentPage, }: { + workspace: Workspace | null; + currentPage: Page | null; + setBlockSchema: (blockSchema: typeof BlockSchema) => void; setEditor: (editor: EditorContainer) => void; + setWorkspace: (workspace: Workspace) => void; + setCurrentPage: (Page: Page) => void; }) => { + setBlockSchema(BlockSchema); + + const router = useRouter(); + useEffect(() => { - const store = new Workspace({ + const workspace = new Workspace({ ...getEditorParams(), }); - const page = store.createPage('page0').register(BlockSchema); - const editor = createEditor(page); + //@ts-ignore + window.workspace = workspace; + const indexDBProvider = workspace.providers.find( + p => p instanceof IndexedDBDocProvider + ); + if (indexDBProvider) { + (indexDBProvider as IndexedDBDocProvider)?.on('synced', () => { + setWorkspace(workspace); + }); + } else { + setWorkspace(workspace); + } + }, [setWorkspace]); - setEditor(editor); + useEffect(() => { + if (!workspace) { + return; + } - return () => { - editor.remove(); - }; - }, [setEditor]); + // const initialPageId = + // workspace.meta.pages.find(p => p.id === (router.query.pageId as string)) + // ?.id ?? + // workspace.meta.pages[0]?.id ?? + // 'page0'; + + const initialPageId = + workspace.meta.pages.find(p => p.id === (router.query.pageId as string)) + ?.id ?? 'page0'; + console.log('initialPageId', initialPageId); + + const initialPage = workspace + .createPage(initialPageId) + .register(BlockSchema); + setCurrentPage(initialPage); + }, [workspace, router.query.pageId, setCurrentPage]); + + useEffect(() => { + if (!currentPage) { + return; + } + setEditor(createEditor(currentPage)); + }, [currentPage, setEditor]); useEffect(() => { const version = pkg.dependencies['@blocksuite/editor'].substring(1); - console.log(`BlockSuite live demo ${version}`); + console.log(`BlockSuite version: ${version}`); }, []); return
; diff --git a/packages/app/src/styles/helper.ts b/packages/app/src/styles/helper.ts index ce77863c68..2aa84d4bb7 100644 --- a/packages/app/src/styles/helper.ts +++ b/packages/app/src/styles/helper.ts @@ -17,6 +17,23 @@ export const displayFlex = ( alignContent, }; }; +export const displayInlineFlex = ( + justifyContent: CSSProperties['justifyContent'] = 'unset', + alignItems: CSSProperties['alignContent'] = 'unset', + alignContent: CSSProperties['alignContent'] = 'unset' +): { + display: CSSProperties['display']; + justifyContent: CSSProperties['justifyContent']; + alignItems: CSSProperties['alignContent']; + alignContent: CSSProperties['alignContent']; +} => { + return { + display: 'inline-flex', + justifyContent, + alignItems, + alignContent, + }; +}; export const absoluteCenter = ({ horizontal = false, diff --git a/packages/app/src/ui/button/styles.ts b/packages/app/src/ui/button/styles.ts index 90cd0a8f0a..abf791ada7 100644 --- a/packages/app/src/ui/button/styles.ts +++ b/packages/app/src/ui/button/styles.ts @@ -1,4 +1,4 @@ -import { absoluteCenter, displayFlex, styled } from '@/styles'; +import { absoluteCenter, displayInlineFlex, styled } from '@/styles'; import { CSSProperties } from 'react'; export const StyledIconButton = styled.button<{ @@ -23,7 +23,7 @@ export const StyledIconButton = styled.button<{ width, height, color: theme.colors.iconColor, - ...displayFlex('center', 'center'), + ...displayInlineFlex('center', 'center'), position: 'relative', ...(disabled ? { cursor: 'not-allowed', pointerEvents: 'none' } : {}), transition: 'background .15s', diff --git a/packages/app/src/ui/confirm/styles.ts b/packages/app/src/ui/confirm/styles.ts index d285ecdad7..a0ac9fa87b 100644 --- a/packages/app/src/ui/confirm/styles.ts +++ b/packages/app/src/ui/confirm/styles.ts @@ -1,13 +1,13 @@ import { displayFlex, styled, AffineTheme } from '@/styles'; import { ConfirmProps } from '@/ui/confirm/confirm'; +import { ModalWrapper } from '@/ui/modal'; -export const StyledModalWrapper = styled.div(({ theme }) => { +export const StyledModalWrapper = styled(ModalWrapper)(({ theme }) => { return { width: '460px', height: '240px', padding: '0 60px', background: theme.colors.popoverBackground, - borderRadius: '28px', position: 'relative', }; }); diff --git a/packages/app/src/ui/layout/content.tsx b/packages/app/src/ui/layout/content.tsx new file mode 100644 index 0000000000..e04fe23c59 --- /dev/null +++ b/packages/app/src/ui/layout/content.tsx @@ -0,0 +1,42 @@ +import React, { CSSProperties } from 'react'; +import { styled, textEllipsis } from '@/styles'; + +// This component should be just used to be contained the text content +export type ContentProps = { + width?: CSSProperties['width']; + maxWidth?: CSSProperties['maxWidth']; + color?: CSSProperties['color']; + fontSize?: CSSProperties['fontSize']; + fontWeight?: CSSProperties['fontWeight']; + lineHeight?: CSSProperties['lineHeight']; + ellipsis?: boolean; + lineNum?: number; + children: string; +}; + +export const Content = styled.div( + ({ + theme, + color, + fontSize, + fontWeight, + lineHeight, + ellipsis, + lineNum, + width, + maxWidth, + }) => { + return { + width, + maxWidth, + display: 'inline-block', + color: color ?? theme.colors.textColor, + fontSize: fontSize ?? theme.font.base, + fontWeight: fontWeight ?? 400, + lineHeight: lineHeight ?? 1.5, + ...(ellipsis ? textEllipsis(lineNum) : {}), + }; + } +); + +export default Content; diff --git a/packages/app/src/ui/layout/index.ts b/packages/app/src/ui/layout/index.ts new file mode 100644 index 0000000000..fdca622500 --- /dev/null +++ b/packages/app/src/ui/layout/index.ts @@ -0,0 +1,2 @@ +export * from './wrapper'; +export * from './content'; diff --git a/packages/app/src/ui/layout/wrapper.tsx b/packages/app/src/ui/layout/wrapper.tsx new file mode 100644 index 0000000000..8096b87dc2 --- /dev/null +++ b/packages/app/src/ui/layout/wrapper.tsx @@ -0,0 +1,37 @@ +import type { CSSProperties, HTMLAttributes, PropsWithChildren } from 'react'; +import { styled } from '@/styles'; + +export type WrapperProps = { + display?: CSSProperties['display']; + flexDirection?: CSSProperties['flexDirection']; + justifyContent?: CSSProperties['justifyContent']; + alignItems?: CSSProperties['alignItems']; + flexWrap?: CSSProperties['flexWrap']; + flexShrink?: CSSProperties['flexShrink']; + flexGrow?: CSSProperties['flexGrow']; +}; + +// Sometimes we just want to wrap a component with a div to set flex or other styles, but we don't want to create a new component for it. +export const Wrapper = styled.div( + ({ + display = 'flex', + justifyContent = 'flex-start', + alignItems = 'center', + flexWrap = 'nowrap', + flexDirection = 'row', + flexShrink = '0', + flexGrow = '0', + }) => { + return { + display, + justifyContent, + alignItems, + flexWrap, + flexDirection, + flexShrink, + flexGrow, + }; + } +); + +export default Wrapper; diff --git a/packages/app/src/ui/modal/index.tsx b/packages/app/src/ui/modal/index.tsx index 0052b129f1..54c945cc49 100644 --- a/packages/app/src/ui/modal/index.tsx +++ b/packages/app/src/ui/modal/index.tsx @@ -1,6 +1,7 @@ import Modal from './modal'; export * from './modal-close-button'; +export * from './modal-wrapper'; export * from './modal'; export default Modal; diff --git a/packages/app/src/ui/modal/modal-close-button.tsx b/packages/app/src/ui/modal/modal-close-button.tsx index 4b1d2bad91..ee1dd2747b 100644 --- a/packages/app/src/ui/modal/modal-close-button.tsx +++ b/packages/app/src/ui/modal/modal-close-button.tsx @@ -1,24 +1,28 @@ import { HTMLAttributes } from 'react'; -import { StyledCloseButton } from './style'; import { CloseIcon } from '@blocksuite/icons'; - +import { IconButton, IconButtonProps } from '@/ui/button'; +import { styled } from '@/styles'; export type ModalCloseButtonProps = { top?: number; right?: number; - triggerSize?: [number, number]; - size?: [number, number]; - iconSize?: [number, number]; -} & HTMLAttributes; +} & Omit & + HTMLAttributes; -export const ModalCloseButton = ({ - iconSize = [24, 24], - ...props -}: ModalCloseButtonProps) => { - const [iconWidth, iconHeight] = iconSize; +const StyledIconButton = styled(IconButton)< + Pick +>(({ top, right }) => { + return { + position: 'absolute', + top: top ?? 6, + right: right ?? 6, + }; +}); + +export const ModalCloseButton = ({ ...props }: ModalCloseButtonProps) => { return ( - - - + + + ); }; diff --git a/packages/app/src/ui/modal/modal-wrapper.tsx b/packages/app/src/ui/modal/modal-wrapper.tsx new file mode 100644 index 0000000000..70ace8e9f2 --- /dev/null +++ b/packages/app/src/ui/modal/modal-wrapper.tsx @@ -0,0 +1,17 @@ +import React, { CSSProperties, HTMLAttributes, PropsWithChildren } from 'react'; +import { styled } from '@/styles'; + +export const ModalWrapper = styled.div<{ + width?: CSSProperties['width']; + height?: CSSProperties['height']; +}>(({ theme, width, height }) => { + return { + width, + height, + backgroundColor: theme.colors.popoverBackground, + borderRadius: '12px', + position: 'relative', + }; +}); + +export default ModalWrapper; diff --git a/packages/app/src/ui/modal/modal.tsx b/packages/app/src/ui/modal/modal.tsx index 42a9b373e1..31eb785761 100644 --- a/packages/app/src/ui/modal/modal.tsx +++ b/packages/app/src/ui/modal/modal.tsx @@ -1,5 +1,5 @@ import Fade from '@mui/material/Fade'; -import { StyledModal, StyledBackdrop } from './style'; +import { StyledModal, StyledBackdrop } from './styles'; import { ModalUnstyledOwnProps } from '@mui/base/ModalUnstyled'; const Backdrop = ({ @@ -21,11 +21,9 @@ export type ModalProps = ModalUnstyledOwnProps; export const Modal = (props: ModalProps) => { const { components, open, children, ...otherProps } = props; return ( -
- - {children} - -
+ + {children} + ); }; diff --git a/packages/app/src/ui/modal/style.ts b/packages/app/src/ui/modal/style.ts deleted file mode 100644 index 999f254030..0000000000 --- a/packages/app/src/ui/modal/style.ts +++ /dev/null @@ -1,68 +0,0 @@ -import { absoluteCenter, displayFlex, fixedCenter, styled } from '@/styles'; -import ModalUnstyled from '@mui/base/ModalUnstyled'; -import { ModalCloseButtonProps } from '@/ui/modal/modal-close-button'; - -export const StyledBackdrop = styled.div<{ open?: boolean }>(({ open }) => { - return { - zIndex: '-1', - position: 'fixed', - right: '0', - bottom: '0', - top: '0', - left: '0', - backgroundColor: 'rgba(58, 76, 92, 0.2)', - }; -}); - -export const StyledModal = styled(ModalUnstyled)(({ theme }) => { - return { - width: '100vw', - height: '100vh', - position: 'fixed', - left: '0', - top: '0', - zIndex: theme.zIndex.modal, - ...displayFlex('center', 'center'), - '*': { - WebkitTapHighlightColor: 'transparent', - outline: 'none', - }, - }; -}); - -export const StyledCloseButton = styled.button< - Pick ->(({ theme, triggerSize = [], size = [32, 32], top, right }) => { - const [triggerWidth, triggerHeight] = triggerSize; - const [width, height] = size; - - return { - width: triggerWidth ?? width * 2, - height: triggerHeight ?? height * 2, - color: theme.colors.iconColor, - cursor: 'pointer', - ...displayFlex('center', 'center'), - position: 'absolute', - top: top ?? 0, - right: right ?? 0, - - // TODO: we need to add @emotion/babel-plugin - '::after': { - content: '""', - width, - height, - borderRadius: '6px', - ...absoluteCenter({ horizontal: true, vertical: true }), - }, - ':hover': { - color: theme.colors.primaryColor, - '::after': { - background: theme.colors.hoverBackground, - }, - }, - svg: { - position: 'relative', - zIndex: 1, - }, - }; -}); diff --git a/packages/app/src/ui/modal/styles.ts b/packages/app/src/ui/modal/styles.ts new file mode 100644 index 0000000000..304886768a --- /dev/null +++ b/packages/app/src/ui/modal/styles.ts @@ -0,0 +1,32 @@ +import { absoluteCenter, displayFlex, fixedCenter, styled } from '@/styles'; +import ModalUnstyled from '@mui/base/ModalUnstyled'; +import { ModalCloseButtonProps } from '@/ui/modal/modal-close-button'; + +export const StyledBackdrop = styled.div<{ open?: boolean }>(({ open }) => { + return { + zIndex: '-1', + position: 'fixed', + right: '0', + bottom: '0', + top: '0', + left: '0', + backgroundColor: 'rgba(58, 76, 92, 0.2)', + }; +}); + +export const StyledModal = styled(ModalUnstyled)(({ theme }) => { + return { + width: '100vw', + height: '100vh', + position: 'fixed', + left: '0', + top: '0', + zIndex: theme.zIndex.modal, + ...displayFlex('center', 'center'), + '*': { + WebkitTapHighlightColor: 'transparent', + outline: 'none', + }, + }; +}); + diff --git a/packages/app/src/ui/table/styles.ts b/packages/app/src/ui/table/styles.ts index 5c14236737..c954e1b424 100644 --- a/packages/app/src/ui/table/styles.ts +++ b/packages/app/src/ui/table/styles.ts @@ -26,11 +26,12 @@ export const StyledTableCell = styled.td< const width = proportion ? `${proportion * 100}%` : 'auto'; return { width, - height: '54px', - lineHeight: '54px', + height: '52px', + lineHeight: '52px', padding: '0 30px', boxSizing: 'border-box', textAlign: align, + verticalAlign: 'middle', ...(ellipsis ? textEllipsis(1) : {}), overflowWrap: 'break-word', }; diff --git a/packages/app/src/ui/table/table-body.tsx b/packages/app/src/ui/table/table-body.tsx index 2954415bf7..8780f48b2f 100644 --- a/packages/app/src/ui/table/table-body.tsx +++ b/packages/app/src/ui/table/table-body.tsx @@ -1,8 +1,11 @@ -import { PropsWithChildren } from 'react'; +import { HTMLAttributes, PropsWithChildren } from 'react'; import { StyledTableBody } from '@/ui/table/styles'; -export const TableBody = ({ children }: PropsWithChildren<{}>) => { - return {children}; +export const TableBody = ({ + children, + ...props +}: PropsWithChildren>) => { + return {children}; }; export default TableBody; diff --git a/packages/app/src/ui/table/table-cell.tsx b/packages/app/src/ui/table/table-cell.tsx index 5dfe025a5c..3514d2fb23 100644 --- a/packages/app/src/ui/table/table-cell.tsx +++ b/packages/app/src/ui/table/table-cell.tsx @@ -1,11 +1,14 @@ -import { PropsWithChildren, useLayoutEffect } from 'react'; +import { HTMLAttributes, PropsWithChildren } from 'react'; import { TableCellProps } from './interface'; import { StyledTableCell } from './styles'; export const TableCell = ({ children, + ellipsis, ...props -}: PropsWithChildren) => { +}: PropsWithChildren< + TableCellProps & HTMLAttributes +>) => { return {children}; }; diff --git a/packages/app/src/ui/table/table-head.tsx b/packages/app/src/ui/table/table-head.tsx index 33e95ce6e3..d1b993af30 100644 --- a/packages/app/src/ui/table/table-head.tsx +++ b/packages/app/src/ui/table/table-head.tsx @@ -1,8 +1,11 @@ -import { PropsWithChildren } from 'react'; +import { HTMLAttributes, PropsWithChildren } from 'react'; import { StyledTableHead } from './styles'; -export const TableHead = ({ children }: PropsWithChildren<{}>) => { - return {children}; +export const TableHead = ({ + children, + ...props +}: PropsWithChildren>) => { + return {children}; }; export default TableHead; diff --git a/packages/app/src/ui/table/table-row.tsx b/packages/app/src/ui/table/table-row.tsx index c421f81868..b60ba1bf13 100644 --- a/packages/app/src/ui/table/table-row.tsx +++ b/packages/app/src/ui/table/table-row.tsx @@ -1,8 +1,11 @@ -import { PropsWithChildren } from 'react'; +import { HTMLAttributes, PropsWithChildren } from 'react'; import { StyledTableRow } from './styles'; -export const TableRow = ({ children }: PropsWithChildren<{}>) => { - return {children}; +export const TableRow = ({ + children, + ...props +}: PropsWithChildren>) => { + return {children}; }; export default TableRow; diff --git a/packages/app/src/ui/table/table.tsx b/packages/app/src/ui/table/table.tsx index 47bea8362e..fba647619d 100644 --- a/packages/app/src/ui/table/table.tsx +++ b/packages/app/src/ui/table/table.tsx @@ -1,4 +1,4 @@ -import { PropsWithChildren, Children, ReactNode } from 'react'; +import { PropsWithChildren, Children, ReactNode, HTMLAttributes } from 'react'; import { StyledTable } from './styles'; const childrenHasEllipsis = (children: ReactNode | ReactNode[]): boolean => { @@ -14,10 +14,17 @@ const childrenHasEllipsis = (children: ReactNode | ReactNode[]): boolean => { }); }; -export const Table = ({ children }: PropsWithChildren<{}>) => { +export const Table = ({ + children, + ...props +}: PropsWithChildren>) => { const tableLayout = childrenHasEllipsis(children) ? 'fixed' : 'auto'; - return {children}; + return ( + + {children} + + ); }; export default Table; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 804e7981ef..00d0ab795f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -22,10 +22,10 @@ importers: packages/app: specifiers: - '@blocksuite/blocks': 0.3.0-alpha.5 - '@blocksuite/editor': 0.3.0-alpha.5 + '@blocksuite/blocks': 0.3.0-alpha.6 + '@blocksuite/editor': 0.3.0-alpha.6 '@blocksuite/icons': ^1.0.5 - '@blocksuite/store': 0.3.0-alpha.5 + '@blocksuite/store': 0.3.0-alpha.6 '@emotion/css': ^11.10.0 '@emotion/react': ^11.10.4 '@emotion/server': ^11.10.0 @@ -53,10 +53,10 @@ importers: react-dom: 18.2.0 typescript: 4.8.3 dependencies: - '@blocksuite/blocks': 0.3.0-alpha.5 - '@blocksuite/editor': 0.3.0-alpha.5 + '@blocksuite/blocks': 0.3.0-alpha.6 + '@blocksuite/editor': 0.3.0-alpha.6 '@blocksuite/icons': 1.0.5_w5j4k42lgipnm43s3brx6h3c34 - '@blocksuite/store': 0.3.0-alpha.5 + '@blocksuite/store': 0.3.0-alpha.6 '@emotion/css': 11.10.0 '@emotion/react': 11.10.4_w5j4k42lgipnm43s3brx6h3c34 '@emotion/server': 11.10.0_@emotion+css@11.10.0 @@ -172,10 +172,10 @@ packages: to-fast-properties: 2.0.0 dev: false - /@blocksuite/blocks/0.3.0-alpha.5: - resolution: {integrity: sha512-jZy1mXaC2s/b227Yf/wNPRwMAFGa1USH/Q0OJ6KAcmY8YQdeGXKAoNTz4p7K5rMJgtE1t17/Mzwo5+exCRbIkg==} + /@blocksuite/blocks/0.3.0-alpha.6: + resolution: {integrity: sha512-pa8wP0hRIDlufae+ABAQFLW8TNOGsfh8AqyTKF/+LVYFCGr+9tlW55X3OlWtU51vFxawst1Wd3FnjCAW6XiaKQ==} dependencies: - '@blocksuite/store': 0.3.0-alpha.5 + '@blocksuite/store': 0.3.0-alpha.6 hotkeys-js: 3.10.0 lit: 2.4.0 quill: 1.3.7 @@ -186,11 +186,11 @@ packages: - utf-8-validate dev: false - /@blocksuite/editor/0.3.0-alpha.5: - resolution: {integrity: sha512-H7RZkG3ptyzLs0+6YgwQnp6H8hByfWRSjDi388ZIz3/exgliyBz2QkQwY4Tj2nlAYSq/U5/8hdDMjw4a092Ivw==} + /@blocksuite/editor/0.3.0-alpha.6: + resolution: {integrity: sha512-2wFkOlCKqC4BrfCIzuxjUyVnE/mmGOyUnqVTQNmHrToDS81RLIq0r+lj1IrzLv+LZQCfTyhoAlJyaxUNrUw3sw==} dependencies: - '@blocksuite/blocks': 0.3.0-alpha.5 - '@blocksuite/store': 0.3.0-alpha.5 + '@blocksuite/blocks': 0.3.0-alpha.6 + '@blocksuite/store': 0.3.0-alpha.6 lit: 2.4.0 marked: 4.1.1 turndown: 7.1.1 @@ -210,8 +210,8 @@ packages: react: 18.2.0 dev: false - /@blocksuite/store/0.3.0-alpha.5: - resolution: {integrity: sha512-pkbSrwB7KTfW56iH4ZFPkrS6shIU8QpmJlZmKVY95Gp5QSISW2ffKUsFrrHVHT+GoOV7+RPZQrphUnC57grPNg==} + /@blocksuite/store/0.3.0-alpha.6: + resolution: {integrity: sha512-rI7cUVSqoMh1bsNLwL8MAgyaUq0Ix+SRBqweYwVjeDoqFIbHjnRSwkVw48K/FgxN6ekN96HLSf3Sj/HK1ivPpw==} dependencies: buffer: 6.0.3 flexsearch: 0.7.21