From dec83774a1e1a7eaadfca30a4a6d452abaa8f7b5 Mon Sep 17 00:00:00 2001 From: QiShaoXuan Date: Wed, 7 Dec 2022 15:50:05 +0800 Subject: [PATCH 1/7] feat: update editor provider --- .../components/workspace-slider-bar/index.tsx | 19 ++++- packages/app/src/pages/index.tsx | 2 - .../editor-provider/editor-provider.tsx | 78 +++++++++++++++++-- .../editor-provider/initial-editor.tsx | 73 ++++++++++++++--- 4 files changed, 150 insertions(+), 22 deletions(-) diff --git a/packages/app/src/components/workspace-slider-bar/index.tsx b/packages/app/src/components/workspace-slider-bar/index.tsx index 4cd6065462..c2a43673b5 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,18 +8,31 @@ import { StyledSubListItem, } from './style'; import { Arrow } from './icons'; +import Link from 'next/link'; export const WorkSpaceSliderBar = () => { const [show, setShow] = useState(false); + const router = useRouter(); return ( <> Quick search + { - Router.push('/all-page'); + router.push({ + pathname: '/', + query: { + pageId: new Date().getTime().toString(), + }, + }); }} > - All pages + Back to Doc + + + + All pages + Favourites 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..ea57ac736e 100644 --- a/packages/app/src/providers/editor-provider/editor-provider.tsx +++ b/packages/app/src/providers/editor-provider/editor-provider.tsx @@ -1,25 +1,39 @@ 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'; +// 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; }; +// type EditorHandlers = { +// createPage: (props: { pageId?: string; title?: '' }) => void; +// openPage: (props: { +// pageId: string; +// query?: { [key: string]: string }; +// }) => Promise; +// }; + type EditorContextProps = PropsWithChildren<{}>; export const EditorContext = createContext({ - editor: null, mode: 'page', setMode: () => {}, + currentPage: null, + editor: null, }); export const useEditor = () => useContext(EditorContext); @@ -27,6 +41,10 @@ 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 [editor, setEditor] = useState(null); const [mode, setMode] = useState('page'); @@ -35,10 +53,58 @@ export const EditorProvider = ({ window.dispatchEvent(event); }, [mode]); + const editorHandler = { + createPage: ({ + pageId = new Date().getTime().toString(), + title, + }: { + pageId?: string; + title?: ''; + }) => { + blockSchemaRef.current && + workspace?.createPage(pageId, title).register(blockSchemaRef.current); + }, + openPage: (pageId: string, query: { [key: string]: string } = {}) => { + return router.push({ + pathname: '/', + query: { + pageId, + ...query, + }, + }); + }, + getPageList: () => { + return workspace?.meta.pages; + }, + deletePage: (pageId: string) => { + workspace?.setPage(pageId, { trash: true }); + }, + recyclePage: (pageId: string) => { + workspace?.setPage(pageId, { trash: false }); + }, + favoritePage: (pageId: string) => { + workspace?.setPage(pageId, { favorite: true }); + }, + unFavoritePage: (pageId: string) => { + workspace?.setPage(pageId, { favorite: true }); + }, + }; + 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..743e84daec 100644 --- a/packages/app/src/providers/editor-provider/initial-editor.tsx +++ b/packages/app/src/providers/editor-provider/initial-editor.tsx @@ -4,45 +4,96 @@ 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; + } + let initialPage = + workspace.pages.get(`space:${router.query.pageId}`) ?? + [...workspace.pages.values()][0]; - return () => { - editor.remove(); - }; - }, [setEditor]); + if (!initialPage) { + const pageId = `${router.query.pageId}` ?? 'page0'; + initialPage = workspace.createPage(pageId).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
; From 679cfc979f6faa2a5f01a16b9fd3ccbb1489bcdc Mon Sep 17 00:00:00 2001 From: QiShaoXuan Date: Thu, 8 Dec 2022 21:15:52 +0800 Subject: [PATCH 2/7] feat: modify style of contact modal --- packages/app/src/components/contact-modal/style.ts | 6 ------ 1 file changed, 6 deletions(-) diff --git a/packages/app/src/components/contact-modal/style.ts b/packages/app/src/components/contact-modal/style.ts index 25cdfbf9bf..0037f61ba9 100644 --- a/packages/app/src/components/contact-modal/style.ts +++ b/packages/app/src/components/contact-modal/style.ts @@ -8,12 +8,6 @@ export const StyledModalWrapper = styled('div')(({ theme }) => { backgroundColor: theme.colors.popoverBackground, backgroundImage: `url(${bg.src})`, borderRadius: '20px', - position: 'absolute', - left: 0, - right: 0, - top: 0, - bottom: 0, - margin: 'auto', }; }); From d3224f983b5c47ac251e207952b54e966cfa757b Mon Sep 17 00:00:00 2001 From: QiShaoXuan Date: Fri, 9 Dec 2022 01:35:36 +0800 Subject: [PATCH 3/7] feat: modify style of modal --- .../src/components/contact-modal/index.tsx | 14 ++-- .../app/src/components/contact-modal/style.ts | 11 --- .../app/src/components/mobile-modal/index.tsx | 16 ++--- .../app/src/components/mobile-modal/styles.ts | 12 ---- .../src/components/shortcuts-modal/index.tsx | 1 - packages/app/src/styles/helper.ts | 17 +++++ packages/app/src/ui/button/styles.ts | 4 +- packages/app/src/ui/confirm/styles.ts | 4 +- packages/app/src/ui/modal/index.tsx | 1 + .../app/src/ui/modal/modal-close-button.tsx | 32 +++++---- packages/app/src/ui/modal/modal-wrapper.tsx | 17 +++++ packages/app/src/ui/modal/modal.tsx | 10 ++- packages/app/src/ui/modal/style.ts | 68 ------------------- packages/app/src/ui/modal/styles.ts | 32 +++++++++ 14 files changed, 109 insertions(+), 130 deletions(-) create mode 100644 packages/app/src/ui/modal/modal-wrapper.tsx delete mode 100644 packages/app/src/ui/modal/style.ts create mode 100644 packages/app/src/ui/modal/styles.ts 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 0037f61ba9..e0954a194d 100644 --- a/packages/app/src/components/contact-modal/style.ts +++ b/packages/app/src/components/contact-modal/style.ts @@ -1,15 +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', - }; -}); export const StyledBigLink = styled('a')(({ theme }) => { return { 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/shortcuts-modal/index.tsx b/packages/app/src/components/shortcuts-modal/index.tsx index e665053ca4..2da577921e 100644 --- a/packages/app/src/components/shortcuts-modal/index.tsx +++ b/packages/app/src/components/shortcuts-modal/index.tsx @@ -13,7 +13,6 @@ import { windowsKeyboardShortcuts, winMarkdownShortcuts, } 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 = { 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/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', + }, + }; +}); + From 312d898b54f92f839d0b4cfb9c99ab0feadd8306 Mon Sep 17 00:00:00 2001 From: QiShaoXuan Date: Fri, 9 Dec 2022 01:36:33 +0800 Subject: [PATCH 4/7] feat: modify component table --- packages/app/src/ui/table/styles.ts | 5 +++-- packages/app/src/ui/table/table-body.tsx | 9 ++++++--- packages/app/src/ui/table/table-cell.tsx | 7 +++++-- packages/app/src/ui/table/table-head.tsx | 9 ++++++--- packages/app/src/ui/table/table-row.tsx | 9 ++++++--- packages/app/src/ui/table/table.tsx | 13 ++++++++++--- 6 files changed, 36 insertions(+), 16 deletions(-) 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; From 8885cd0ba25af5cd758ade5f026580ad088d42ea Mon Sep 17 00:00:00 2001 From: QiShaoXuan Date: Fri, 9 Dec 2022 01:36:57 +0800 Subject: [PATCH 5/7] feat: add layout component --- packages/app/src/ui/Layout/content.tsx | 23 ++++++++++++ packages/app/src/ui/Layout/index.ts | 2 ++ packages/app/src/ui/Layout/styles.ts | 50 ++++++++++++++++++++++++++ packages/app/src/ui/Layout/wrapper.tsx | 42 ++++++++++++++++++++++ 4 files changed, 117 insertions(+) create mode 100644 packages/app/src/ui/Layout/content.tsx create mode 100644 packages/app/src/ui/Layout/index.ts create mode 100644 packages/app/src/ui/Layout/styles.ts create mode 100644 packages/app/src/ui/Layout/wrapper.tsx diff --git a/packages/app/src/ui/Layout/content.tsx b/packages/app/src/ui/Layout/content.tsx new file mode 100644 index 0000000000..ed0ccf1ec0 --- /dev/null +++ b/packages/app/src/ui/Layout/content.tsx @@ -0,0 +1,23 @@ +import React, { CSSProperties, HTMLAttributes, PropsWithChildren } from 'react'; +import { StyledContent } from '@/ui/Layout/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 = ({ + children, + ...props +}: ContentProps & HTMLAttributes) => { + return {children}; +}; + +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/styles.ts b/packages/app/src/ui/Layout/styles.ts new file mode 100644 index 0000000000..e4043f6831 --- /dev/null +++ b/packages/app/src/ui/Layout/styles.ts @@ -0,0 +1,50 @@ +import { styled, textEllipsis } from '@/styles'; +import { WrapperProps } from './wrapper'; +import { ContentProps } from '@/ui/Layout/content'; + +export const StyledWrapper = styled.div( + ({ + display, + justifyContent, + alignItems, + flexWrap, + flexDirection, + flexShrink, + flexGrow, + }) => { + return { + display, + justifyContent, + alignItems, + flexWrap, + flexDirection, + flexShrink, + flexGrow, + }; + } +); + +export const StyledContent = 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) : {}), + }; + } +); diff --git a/packages/app/src/ui/Layout/wrapper.tsx b/packages/app/src/ui/Layout/wrapper.tsx new file mode 100644 index 0000000000..ea16ab7027 --- /dev/null +++ b/packages/app/src/ui/Layout/wrapper.tsx @@ -0,0 +1,42 @@ +import type { CSSProperties, HTMLAttributes, PropsWithChildren } from 'react'; +import { StyledWrapper } from './styles'; + +// 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 type WrapperProps = { + display?: CSSProperties['display']; + flexDirection?: CSSProperties['flexDirection']; + justifyContent?: CSSProperties['justifyContent']; + alignItems?: CSSProperties['alignItems']; + flexWrap?: CSSProperties['flexWrap']; + flexShrink?: CSSProperties['flexShrink']; + flexGrow?: CSSProperties['flexGrow']; +}; + +export const Wrapper = ({ + children, + display = 'flex', + justifyContent = 'flex-start', + alignItems = 'center', + flexWrap = 'nowrap', + flexDirection = 'row', + flexShrink = '0', + flexGrow = '0', + ...props +}: PropsWithChildren>) => { + return ( + + {children} + + ); +}; + +export default Wrapper; From 6e327900f1d01798b8cdb6bea5c246486915c7fd Mon Sep 17 00:00:00 2001 From: QiShaoXuan Date: Fri, 9 Dec 2022 01:37:32 +0800 Subject: [PATCH 6/7] feat: modify blocksuite --- packages/app/package.json | 6 +- packages/app/src/components/editor.tsx | 2 +- .../components/workspace-slider-bar/index.tsx | 18 ++- packages/app/src/pages/all-page.tsx | 131 ++++++++++++++---- .../editor-provider/editor-provider.tsx | 101 ++++++++++---- .../editor-provider/initial-editor.tsx | 21 ++- pnpm-lock.yaml | 30 ++-- 7 files changed, 225 insertions(+), 84 deletions(-) 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/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/workspace-slider-bar/index.tsx b/packages/app/src/components/workspace-slider-bar/index.tsx index c2a43673b5..f4236be9f6 100644 --- a/packages/app/src/components/workspace-slider-bar/index.tsx +++ b/packages/app/src/components/workspace-slider-bar/index.tsx @@ -9,8 +9,10 @@ import { } from './style'; import { Arrow } from './icons'; import Link from 'next/link'; +import { useEditor } from '@/providers/editor-provider'; export const WorkSpaceSliderBar = () => { const [show, setShow] = useState(false); + const { createPage } = useEditor(); const router = useRouter(); return ( <> @@ -29,11 +31,9 @@ export const WorkSpaceSliderBar = () => { > Back to Doc - - - All pages - - + + All pages + Favourites document 1, this is a paper icondocument 1 @@ -43,7 +43,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/providers/editor-provider/editor-provider.tsx b/packages/app/src/providers/editor-provider/editor-provider.tsx index ea57ac736e..1690dad88e 100644 --- a/packages/app/src/providers/editor-provider/editor-provider.tsx +++ b/packages/app/src/providers/editor-provider/editor-provider.tsx @@ -6,7 +6,14 @@ 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, @@ -17,23 +24,41 @@ type EditorContextValue = { setMode: (mode: EditorContainer['mode']) => void; currentPage: Page | null; editor: EditorContainer | null; -}; + pageList: PageMeta[]; +} & EditorHandlers; -// type EditorHandlers = { -// createPage: (props: { pageId?: string; title?: '' }) => void; -// openPage: (props: { -// pageId: string; -// query?: { [key: string]: string }; -// }) => Promise; -// }; +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({ mode: 'page', setMode: () => {}, + pageList: [], currentPage: null, editor: null, + createPage: () => {}, + openPage: async () => { + return false; + }, + deletePage: () => {}, + recyclePage: () => {}, + toggleDeletePage: () => {}, + favoritePage: () => {}, + unFavoritePage: () => {}, + toggleFavoritePage: () => {}, }); export const useEditor = () => useContext(EditorContext); @@ -45,6 +70,7 @@ export const EditorProvider = ({ 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'); @@ -53,18 +79,26 @@ export const EditorProvider = ({ window.dispatchEvent(event); }, [mode]); - const editorHandler = { - createPage: ({ - pageId = new Date().getTime().toString(), - title, - }: { - pageId?: string; - title?: ''; - }) => { + 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, title).register(blockSchemaRef.current); + workspace?.createPage(pageId).register(blockSchemaRef.current); }, - openPage: (pageId: string, query: { [key: string]: string } = {}) => { + openPage: (pageId, query = {}) => { return router.push({ pathname: '/', query: { @@ -73,25 +107,36 @@ export const EditorProvider = ({ }, }); }, - getPageList: () => { - return workspace?.meta.pages; - }, - deletePage: (pageId: string) => { + deletePage: pageId => { workspace?.setPage(pageId, { trash: true }); }, - recyclePage: (pageId: string) => { + recyclePage: pageId => { workspace?.setPage(pageId, { trash: false }); }, - favoritePage: (pageId: string) => { + 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: string) => { - 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 ( - + 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]); 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 From ff0d386f737c40a2b22036ebc51ddbd2c78e062b Mon Sep 17 00:00:00 2001 From: QiShaoXuan Date: Fri, 9 Dec 2022 01:47:14 +0800 Subject: [PATCH 7/7] feat: refactor layout component --- packages/app/src/pages/all-page.tsx | 2 +- packages/app/src/ui/Layout/content.tsx | 23 --------- packages/app/src/ui/Layout/styles.ts | 50 ------------------- packages/app/src/ui/Layout/wrapper.tsx | 42 ---------------- packages/app/src/ui/layout/content.tsx | 42 ++++++++++++++++ .../app/src/ui/{Layout => layout}/index.ts | 0 packages/app/src/ui/layout/wrapper.tsx | 37 ++++++++++++++ 7 files changed, 80 insertions(+), 116 deletions(-) delete mode 100644 packages/app/src/ui/Layout/content.tsx delete mode 100644 packages/app/src/ui/Layout/styles.ts delete mode 100644 packages/app/src/ui/Layout/wrapper.tsx create mode 100644 packages/app/src/ui/layout/content.tsx rename packages/app/src/ui/{Layout => layout}/index.ts (100%) create mode 100644 packages/app/src/ui/layout/wrapper.tsx diff --git a/packages/app/src/pages/all-page.tsx b/packages/app/src/pages/all-page.tsx index 94a82375cc..2cef69aa69 100644 --- a/packages/app/src/pages/all-page.tsx +++ b/packages/app/src/pages/all-page.tsx @@ -7,7 +7,7 @@ import { IconButton } from '@/ui/button'; import { MoreVertical_24pxIcon } from '@blocksuite/icons'; import { Menu, MenuItem } from '@/ui/menu'; import { PageMeta, useEditor } from '@/providers/editor-provider'; -import { Wrapper } from '@/ui/Layout'; +import { Wrapper } from '@/ui/layout'; import { MiddleFavouritesIcon, diff --git a/packages/app/src/ui/Layout/content.tsx b/packages/app/src/ui/Layout/content.tsx deleted file mode 100644 index ed0ccf1ec0..0000000000 --- a/packages/app/src/ui/Layout/content.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import React, { CSSProperties, HTMLAttributes, PropsWithChildren } from 'react'; -import { StyledContent } from '@/ui/Layout/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 = ({ - children, - ...props -}: ContentProps & HTMLAttributes) => { - return {children}; -}; - -export default Content; diff --git a/packages/app/src/ui/Layout/styles.ts b/packages/app/src/ui/Layout/styles.ts deleted file mode 100644 index e4043f6831..0000000000 --- a/packages/app/src/ui/Layout/styles.ts +++ /dev/null @@ -1,50 +0,0 @@ -import { styled, textEllipsis } from '@/styles'; -import { WrapperProps } from './wrapper'; -import { ContentProps } from '@/ui/Layout/content'; - -export const StyledWrapper = styled.div( - ({ - display, - justifyContent, - alignItems, - flexWrap, - flexDirection, - flexShrink, - flexGrow, - }) => { - return { - display, - justifyContent, - alignItems, - flexWrap, - flexDirection, - flexShrink, - flexGrow, - }; - } -); - -export const StyledContent = 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) : {}), - }; - } -); diff --git a/packages/app/src/ui/Layout/wrapper.tsx b/packages/app/src/ui/Layout/wrapper.tsx deleted file mode 100644 index ea16ab7027..0000000000 --- a/packages/app/src/ui/Layout/wrapper.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import type { CSSProperties, HTMLAttributes, PropsWithChildren } from 'react'; -import { StyledWrapper } from './styles'; - -// 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 type WrapperProps = { - display?: CSSProperties['display']; - flexDirection?: CSSProperties['flexDirection']; - justifyContent?: CSSProperties['justifyContent']; - alignItems?: CSSProperties['alignItems']; - flexWrap?: CSSProperties['flexWrap']; - flexShrink?: CSSProperties['flexShrink']; - flexGrow?: CSSProperties['flexGrow']; -}; - -export const Wrapper = ({ - children, - display = 'flex', - justifyContent = 'flex-start', - alignItems = 'center', - flexWrap = 'nowrap', - flexDirection = 'row', - flexShrink = '0', - flexGrow = '0', - ...props -}: PropsWithChildren>) => { - return ( - - {children} - - ); -}; - -export default Wrapper; 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 similarity index 100% rename from packages/app/src/ui/Layout/index.ts rename to packages/app/src/ui/layout/index.ts 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;