From 300ec613c7162fabc0b62ef1c732108097190cbf Mon Sep 17 00:00:00 2001 From: QiShaoXuan Date: Tue, 13 Dec 2022 17:05:36 +0800 Subject: [PATCH 1/6] feat: add icons in where they need --- packages/app/src/components/header/index.tsx | 1 + .../app/src/components/page-list/index.tsx | 2 +- .../components/workspace-slider-bar/index.tsx | 29 ++++++++++++------- .../components/workspace-slider-bar/style.ts | 20 +++++++++++++ packages/app/src/pages/page-list/all.tsx | 9 +++++- packages/app/src/pages/page-list/favorite.tsx | 9 +++++- packages/app/src/pages/page-list/styles.ts | 13 +++++++++ packages/app/src/pages/page-list/trash.tsx | 10 +++++-- 8 files changed, 77 insertions(+), 16 deletions(-) create mode 100644 packages/app/src/pages/page-list/styles.ts diff --git a/packages/app/src/components/header/index.tsx b/packages/app/src/components/header/index.tsx index 9ecc82e6c6..3f74014b0c 100644 --- a/packages/app/src/components/header/index.tsx +++ b/packages/app/src/components/header/index.tsx @@ -1,2 +1,3 @@ export * from './header'; export * from './page-header'; +export { StyledTitle as HeaderWrapper } from './styles'; diff --git a/packages/app/src/components/page-list/index.tsx b/packages/app/src/components/page-list/index.tsx index 3259f77e83..623d4dbaaf 100644 --- a/packages/app/src/components/page-list/index.tsx +++ b/packages/app/src/components/page-list/index.tsx @@ -71,7 +71,7 @@ export const PageList = ({ {pageMeta.createDate} {pageMeta.createDate} - + {isTrash ? ( ) : ( diff --git a/packages/app/src/components/workspace-slider-bar/index.tsx b/packages/app/src/components/workspace-slider-bar/index.tsx index 8bd2c4529c..7fffa5b3f7 100644 --- a/packages/app/src/components/workspace-slider-bar/index.tsx +++ b/packages/app/src/components/workspace-slider-bar/index.tsx @@ -2,6 +2,7 @@ import React, { useState } from 'react'; import { useRouter } from 'next/router'; import { StyledArrowButton, + StyledLink, StyledListItem, StyledNewPageButton, StyledSliderBar, @@ -9,7 +10,15 @@ import { } from './style'; import { Arrow } from './icons'; import Collapse from '@mui/material/Collapse'; -import { ArrowDownIcon } from '@blocksuite/icons'; +import { + ArrowDownIcon, + SearchIcon, + AllPagesIcon, + FavouritesIcon, + ImportIcon, + TrashIcon, + AddIcon, +} from '@blocksuite/icons'; import Link from 'next/link'; import { useEditor } from '@/providers/editor-provider'; import { useModal } from '@/providers/global-modal-provider'; @@ -61,20 +70,18 @@ export const WorkSpaceSliderBar = () => { triggerQuickSearchModal(); }} > - Quick search + Quick search - All pages + All pages - + + Favourites - + { @@ -95,12 +102,12 @@ export const WorkSpaceSliderBar = () => { triggerImportModal(); }} > - Import + Import - Trash + Trash { pageMeta && openPage(pageMeta.id); }} > - New Page + New Page ( ({ theme, show }) => { @@ -54,6 +55,10 @@ export const StyledListItem = styled.button<{ active?: boolean }>( paddingLeft: '12px', borderRadius: '5px', ...displayFlex('flex-start', 'center'), + '>svg': { + fontSize: '20px', + marginRight: '12px', + }, ':hover': { color: theme.colors.primaryColor, backgroundColor: theme.colors.hoverBackground, @@ -62,6 +67,21 @@ export const StyledListItem = styled.button<{ active?: boolean }>( } ); +export const StyledLink = styled(Link)(({ theme }) => { + return { + flexGrow: 1, + textAlign: 'left', + color: 'inherit', + ...displayFlex('flex-start', 'center'), + ':visited': { + color: 'inherit', + }, + '>svg': { + fontSize: '20px', + marginRight: '12px', + }, + }; +}); export const StyledNewPageButton = styled(StyledListItem)(({ theme }) => { return { position: 'absolute', diff --git a/packages/app/src/pages/page-list/all.tsx b/packages/app/src/pages/page-list/all.tsx index fa80c8b56b..f08afb0a7d 100644 --- a/packages/app/src/pages/page-list/all.tsx +++ b/packages/app/src/pages/page-list/all.tsx @@ -1,12 +1,19 @@ import { Header } from '@/components/header'; import { useEditor } from '@/providers/editor-provider'; import { PageList } from '@/components/page-list'; +import { StyledWrapper } from '@/pages/page-list/styles'; +import { AllPagesIcon } from '@blocksuite/icons'; export const All = () => { const { pageList: allPageList } = useEditor(); return ( <> -
+
+ + + All Pages + +
!p.trash)} showFavoriteTag={true} diff --git a/packages/app/src/pages/page-list/favorite.tsx b/packages/app/src/pages/page-list/favorite.tsx index 5d5c0c542d..0024baf005 100644 --- a/packages/app/src/pages/page-list/favorite.tsx +++ b/packages/app/src/pages/page-list/favorite.tsx @@ -1,12 +1,19 @@ import { Header } from '@/components/header'; import { useEditor } from '@/providers/editor-provider'; import { PageList } from '@/components/page-list'; +import { StyledWrapper } from '@/pages/page-list/styles'; +import { FavouritesIcon } from '@blocksuite/icons'; export const Favorite = () => { const { pageList: allPageList } = useEditor(); return ( <> -
+
+ + + Favorites + +
p.favorite && !p.trash)} /> ); diff --git a/packages/app/src/pages/page-list/styles.ts b/packages/app/src/pages/page-list/styles.ts new file mode 100644 index 0000000000..b5f9bf79b6 --- /dev/null +++ b/packages/app/src/pages/page-list/styles.ts @@ -0,0 +1,13 @@ +import { HeaderWrapper } from '@/components/header'; +import { styled } from '@/styles'; + +export const StyledWrapper = styled(HeaderWrapper)(({ theme }) => { + return { + fontSize: theme.font.sm, + color: theme.colors.textColor, + '>svg': { + fontSize: '20px', + marginRight: '12px', + }, + }; +}); diff --git a/packages/app/src/pages/page-list/trash.tsx b/packages/app/src/pages/page-list/trash.tsx index 4a139e1c76..af55a5d47d 100644 --- a/packages/app/src/pages/page-list/trash.tsx +++ b/packages/app/src/pages/page-list/trash.tsx @@ -1,12 +1,18 @@ import { Header } from '@/components/header'; import { useEditor } from '@/providers/editor-provider'; import { PageList } from '@/components/page-list'; - +import { StyledWrapper } from './styles'; +import { TrashIcon } from '@blocksuite/icons'; export const Trash = () => { const { pageList: allPageList } = useEditor(); return ( <> -
+
+ + + Trash + +
p.trash)} isTrash={true} /> ); From 6cb552d62f93ada27a76178cab8fe7b57ada9d75 Mon Sep 17 00:00:00 2001 From: QiShaoXuan Date: Tue, 13 Dec 2022 17:16:52 +0800 Subject: [PATCH 2/6] feat: modify import modal --- packages/app/src/components/import/index.tsx | 20 +++++++++++++------- packages/app/src/ui/layout/content.tsx | 9 ++++++--- packages/app/src/ui/layout/wrapper.tsx | 10 +++++----- packages/app/src/ui/modal/modal-wrapper.tsx | 4 +++- 4 files changed, 27 insertions(+), 16 deletions(-) diff --git a/packages/app/src/components/import/index.tsx b/packages/app/src/components/import/index.tsx index 5c3d4fb364..812d0b4995 100644 --- a/packages/app/src/components/import/index.tsx +++ b/packages/app/src/components/import/index.tsx @@ -1,7 +1,7 @@ import { Modal, ModalWrapper, ModalCloseButton } from '@/ui/modal'; import { StyledButtonWrapper, StyledTitle } from './styles'; import { Button } from '@/ui/button'; -import { Wrapper } from '@/ui/layout'; +import { Wrapper, Content } from '@/ui/layout'; import { Loading } from '@/components/loading'; import { useEffect, useState } from 'react'; type ImportModalProps = { @@ -9,21 +9,19 @@ type ImportModalProps = { onClose: () => void; }; export const ImportModal = ({ open, onClose }: ImportModalProps) => { - const [status, setStatus] = useState<'unImported' | 'importing'>( - 'unImported' - ); + const [status, setStatus] = useState<'unImported' | 'importing'>('importing'); useEffect(() => { if (status === 'importing') { setTimeout(() => { setStatus('unImported'); - }, 3000); + }, 1500); } }, [status]); return ( - + Import @@ -47,8 +45,16 @@ export const ImportModal = ({ open, onClose }: ImportModalProps) => { )} {status === 'importing' && ( - + + + OOOOPS! Sorry forgot to remind you that we are working on the + import function + )} diff --git a/packages/app/src/ui/layout/content.tsx b/packages/app/src/ui/layout/content.tsx index e04fe23c59..42db310df9 100644 --- a/packages/app/src/ui/layout/content.tsx +++ b/packages/app/src/ui/layout/content.tsx @@ -5,9 +5,10 @@ import { styled, textEllipsis } from '@/styles'; export type ContentProps = { width?: CSSProperties['width']; maxWidth?: CSSProperties['maxWidth']; + align?: CSSProperties['textAlign']; color?: CSSProperties['color']; fontSize?: CSSProperties['fontSize']; - fontWeight?: CSSProperties['fontWeight']; + weight?: CSSProperties['fontWeight']; lineHeight?: CSSProperties['lineHeight']; ellipsis?: boolean; lineNum?: number; @@ -19,20 +20,22 @@ export const Content = styled.div( theme, color, fontSize, - fontWeight, + weight, lineHeight, ellipsis, lineNum, width, maxWidth, + align, }) => { return { width, maxWidth, + textAlign: align, display: 'inline-block', color: color ?? theme.colors.textColor, fontSize: fontSize ?? theme.font.base, - fontWeight: fontWeight ?? 400, + fontWeight: weight ?? 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 index ee61aa4f64..bf92d4c774 100644 --- a/packages/app/src/ui/layout/wrapper.tsx +++ b/packages/app/src/ui/layout/wrapper.tsx @@ -6,19 +6,19 @@ export type WrapperProps = { flexDirection?: CSSProperties['flexDirection']; justifyContent?: CSSProperties['justifyContent']; alignItems?: CSSProperties['alignItems']; - flexWrap?: CSSProperties['flexWrap']; + wrap?: boolean; 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('button', { +export const Wrapper = styled('div', { shouldForwardProp: prop => { return ![ 'display', 'justifyContent', 'alignItems', - 'flexWrap', + 'wrap', 'flexDirection', 'flexShrink', 'flexGrow', @@ -29,7 +29,7 @@ export const Wrapper = styled('button', { display = 'flex', justifyContent = 'flex-start', alignItems = 'center', - flexWrap = 'nowrap', + wrap = false, flexDirection = 'row', flexShrink = '0', flexGrow = '0', @@ -38,7 +38,7 @@ export const Wrapper = styled('button', { display, justifyContent, alignItems, - flexWrap, + flexWrap: wrap ? 'wrap' : 'nowrap', flexDirection, flexShrink, flexGrow, diff --git a/packages/app/src/ui/modal/modal-wrapper.tsx b/packages/app/src/ui/modal/modal-wrapper.tsx index 70ace8e9f2..331930448e 100644 --- a/packages/app/src/ui/modal/modal-wrapper.tsx +++ b/packages/app/src/ui/modal/modal-wrapper.tsx @@ -4,10 +4,12 @@ import { styled } from '@/styles'; export const ModalWrapper = styled.div<{ width?: CSSProperties['width']; height?: CSSProperties['height']; -}>(({ theme, width, height }) => { + minHeight?: CSSProperties['minHeight']; +}>(({ theme, width, height, minHeight }) => { return { width, height, + minHeight, backgroundColor: theme.colors.popoverBackground, borderRadius: '12px', position: 'relative', From 378fe52aecafaf9970e1f31e5956b83a57b08a11 Mon Sep 17 00:00:00 2001 From: QiShaoXuan Date: Tue, 13 Dec 2022 17:40:31 +0800 Subject: [PATCH 3/6] feat: convert date in page list --- packages/app/package.json | 1 + .../src/components/page-list/date-cell.tsx | 24 +++++++++++++++++++ .../app/src/components/page-list/index.tsx | 11 ++++++--- .../components/page-list/operation-cell.tsx | 13 +++++++++- .../components/workspace-slider-bar/index.tsx | 2 +- .../providers/editor-provider/interface.ts | 2 -- .../editor-provider/useEditorHandler.ts | 7 +----- pnpm-lock.yaml | 10 ++++++-- 8 files changed, 55 insertions(+), 15 deletions(-) create mode 100644 packages/app/src/components/page-list/date-cell.tsx diff --git a/packages/app/package.json b/packages/app/package.json index 4d911419ad..792cc18994 100644 --- a/packages/app/package.json +++ b/packages/app/package.json @@ -25,6 +25,7 @@ "@toeverything/pathfinder-logger": "workspace:@pathfinder/logger@*", "cmdk": "^0.1.20", "css-spring": "^4.1.0", + "dayjs": "^1.11.7", "lit": "^2.3.1", "next": "13.0.1", "prettier": "^2.7.1", diff --git a/packages/app/src/components/page-list/date-cell.tsx b/packages/app/src/components/page-list/date-cell.tsx new file mode 100644 index 0000000000..3b01a8bea8 --- /dev/null +++ b/packages/app/src/components/page-list/date-cell.tsx @@ -0,0 +1,24 @@ +import localizedFormat from 'dayjs/plugin/localizedFormat'; +import dayjs from 'dayjs'; +import { PageMeta } from '@/providers/editor-provider'; +import { TableCell } from '@/ui/table'; +import React from 'react'; + +dayjs.extend(localizedFormat); + +export const DateCell = ({ + pageMeta, + dateKey, +}: { + pageMeta: PageMeta; + dateKey: keyof PageMeta; +}) => { + // dayjs().format('L LT'); + return ( + + {dayjs(pageMeta[dateKey] as string).format('YYYY-MM-DD HH:MM')} + + ); +}; + +export default DateCell; diff --git a/packages/app/src/components/page-list/index.tsx b/packages/app/src/components/page-list/index.tsx index 623d4dbaaf..20030c06bc 100644 --- a/packages/app/src/components/page-list/index.tsx +++ b/packages/app/src/components/page-list/index.tsx @@ -12,6 +12,7 @@ import { OperationCell, TrashOperationCell } from './operation-cell'; import Empty from './empty'; import Link from 'next/link'; import React from 'react'; +import DateCell from '@/components/page-list/date-cell'; const FavoriteTag = ({ pageMeta }: { pageMeta: PageMeta }) => { const { toggleFavoritePage } = useEditor(); @@ -40,6 +41,7 @@ export const PageList = ({ if (pageList.length === 0) { return ; } + return ( @@ -48,7 +50,7 @@ export const PageList = ({ DocumentsCreated - {isTrash ? 'Uploaded' : 'Moved to Trash'} + {isTrash ? 'Moved to Trash' : 'Uploaded'} @@ -69,8 +71,11 @@ export const PageList = ({ {showFavoriteTag && } - {pageMeta.createDate} - {pageMeta.createDate} + + {isTrash ? ( diff --git a/packages/app/src/components/page-list/operation-cell.tsx b/packages/app/src/components/page-list/operation-cell.tsx index 4599b2d5ff..b487a68df4 100644 --- a/packages/app/src/components/page-list/operation-cell.tsx +++ b/packages/app/src/components/page-list/operation-cell.tsx @@ -3,7 +3,15 @@ import { useConfirm } from '@/providers/confirm-provider'; import { Menu, MenuItem } from '@/ui/menu'; import { Wrapper } from '@/ui/layout'; import { IconButton } from '@/ui/button'; -import { MoreVerticalIcon, RestoreIcon, DeleteIcon } from '@blocksuite/icons'; +import { + MoreVerticalIcon, + RestoreIcon, + DeleteIcon, + FavouritesIcon, + FavouritedIcon, + OpenInNewIcon, + TrashIcon, +} from '@blocksuite/icons'; import React from 'react'; export const OperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => { @@ -17,6 +25,7 @@ export const OperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => { onClick={() => { toggleFavoritePage(id); }} + icon={favorite ? : } > {favorite ? 'Remove' : 'Add'} to favourites @@ -24,6 +33,7 @@ export const OperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => { onClick={() => { openPage(id); }} + icon={} > Open in new tab @@ -39,6 +49,7 @@ export const OperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => { confirm && toggleDeletePage(id); }); }} + icon={} > Delete diff --git a/packages/app/src/components/workspace-slider-bar/index.tsx b/packages/app/src/components/workspace-slider-bar/index.tsx index 7fffa5b3f7..b90da9808c 100644 --- a/packages/app/src/components/workspace-slider-bar/index.tsx +++ b/packages/app/src/components/workspace-slider-bar/index.tsx @@ -29,7 +29,7 @@ const FavoriteList = ({ showList }: { showList: boolean }) => { const { pageList, openPage } = useEditor(); const router = useRouter(); - const favoriteList = pageList.filter(p => p.favorite); + const favoriteList = pageList.filter(p => p.favorite && !p.trash); return ( {favoriteList.map((pageMeta, index) => { diff --git a/packages/app/src/providers/editor-provider/interface.ts b/packages/app/src/providers/editor-provider/interface.ts index 3b5a2290ce..11201c11f8 100644 --- a/packages/app/src/providers/editor-provider/interface.ts +++ b/packages/app/src/providers/editor-provider/interface.ts @@ -17,8 +17,6 @@ export type EditorHandlers = { query?: { [key: string]: string } ) => Promise; getPageMeta: (pageId: string) => PageMeta | void; - deletePage: (pageId: string) => void; - recyclePage: (pageId: string) => void; toggleDeletePage: (pageId: string) => void; favoritePage: (pageId: string) => void; unFavoritePage: (pageId: string) => void; diff --git a/packages/app/src/providers/editor-provider/useEditorHandler.ts b/packages/app/src/providers/editor-provider/useEditorHandler.ts index b5cf1f114a..3341ddbd52 100644 --- a/packages/app/src/providers/editor-provider/useEditorHandler.ts +++ b/packages/app/src/providers/editor-provider/useEditorHandler.ts @@ -26,15 +26,10 @@ export const useEditorHandler = (workspace?: Workspace): EditorHandlers => { }, }); }, - deletePage: pageId => { - workspace!.setPageMeta(pageId, { trash: true }); - }, - recyclePage: pageId => { - workspace!.setPageMeta(pageId, { trash: false }); - }, toggleDeletePage: pageId => { const pageMeta = workspace!.meta.pageMetas.find(p => p.id === pageId); if (pageMeta) { + workspace!.meta.setPage(pageId, { trashDate: new Date().getTime() }); workspace!.setPageMeta(pageId, { trash: !pageMeta.trash }); } }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index dbc65832e8..3a9be78460 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -41,6 +41,7 @@ importers: '@types/react-dom': 18.0.6 cmdk: ^0.1.20 css-spring: ^4.1.0 + dayjs: ^1.11.7 eslint: 8.22.0 eslint-config-next: 12.3.1 eslint-config-prettier: ^8.5.0 @@ -70,6 +71,7 @@ importers: '@toeverything/pathfinder-logger': link:../logger cmdk: 0.1.20_7ey2zzynotv32rpkwno45fsx4e css-spring: 4.1.0 + dayjs: 1.11.7 lit: 2.4.0 next: 13.0.1_biqbaboplfbrettd7655fr4n2y prettier: 2.7.1 @@ -1579,6 +1581,10 @@ packages: resolution: {integrity: sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==} dev: true + /dayjs/1.11.7: + resolution: {integrity: sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ==} + dev: false + /debug/2.6.9: resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==} peerDependencies: @@ -1877,7 +1883,7 @@ packages: eslint-import-resolver-webpack: optional: true dependencies: - '@typescript-eslint/parser': 5.38.0_eslint@8.22.0 + '@typescript-eslint/parser': 5.38.0_76twfck5d7crjqrmw4yltga7zm debug: 3.2.7 eslint: 8.22.0 eslint-import-resolver-node: 0.3.6 @@ -1896,7 +1902,7 @@ packages: '@typescript-eslint/parser': optional: true dependencies: - '@typescript-eslint/parser': 5.38.0_eslint@8.22.0 + '@typescript-eslint/parser': 5.38.0_76twfck5d7crjqrmw4yltga7zm array-includes: 3.1.5 array.prototype.flat: 1.3.0 debug: 2.6.9 From d4a8189ced3a4af5709b13a58539f56fc35233b1 Mon Sep 17 00:00:00 2001 From: QiShaoXuan Date: Tue, 13 Dec 2022 17:47:41 +0800 Subject: [PATCH 4/6] fix: lint error --- packages/app/src/components/import/styles.ts | 5 ----- .../quick-search/content/searchResult/NotFound.tsx | 2 ++ packages/app/src/components/quick-search/index.tsx | 8 ++++---- 3 files changed, 6 insertions(+), 9 deletions(-) diff --git a/packages/app/src/components/import/styles.ts b/packages/app/src/components/import/styles.ts index 2211d01f70..580d8a1535 100644 --- a/packages/app/src/components/import/styles.ts +++ b/packages/app/src/components/import/styles.ts @@ -23,8 +23,3 @@ export const StyledButtonWrapper = styled.div(() => { }, }; }); - -export const StyledLoadingWrapper = styled.div(() => { - return { - } -}) diff --git a/packages/app/src/components/quick-search/content/searchResult/NotFound.tsx b/packages/app/src/components/quick-search/content/searchResult/NotFound.tsx index 98554a3ead..d44a891b4d 100644 --- a/packages/app/src/components/quick-search/content/searchResult/NotFound.tsx +++ b/packages/app/src/components/quick-search/content/searchResult/NotFound.tsx @@ -2,7 +2,9 @@ import React from 'react'; import { Command, useCommandState } from 'cmdk'; const noResult = () => { + // eslint-disable-next-line react-hooks/rules-of-hooks const search = useCommandState(state => state.search); + // eslint-disable-next-line react/no-unescaped-entities return No results found for "{search}".; }; diff --git a/packages/app/src/components/quick-search/index.tsx b/packages/app/src/components/quick-search/index.tsx index 4355c9ecf8..1c0fc5e0a4 100644 --- a/packages/app/src/components/quick-search/index.tsx +++ b/packages/app/src/components/quick-search/index.tsx @@ -26,9 +26,9 @@ export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => { const [result, setResult] = useState({}); const { pageList } = useEditor(); const { triggerQuickSearchModal } = useModal(); - useEffect(() => { - setResult(search(query, { enrich: true })); - }, [query]); + // useEffect(() => { + // setResult(search(query, { enrich: true })); + // }, [query]); useEffect(() => { const down = (e: KeyboardEvent) => { if (e.key === 'k' && e.metaKey) { @@ -44,7 +44,7 @@ export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => { }; document.addEventListener('keydown', down); return () => document.removeEventListener('keydown', down); - }, [open]); + }, [open, triggerQuickSearchModal]); return ( Date: Tue, 13 Dec 2022 17:57:05 +0800 Subject: [PATCH 5/6] fix: fit new version of blocksuite --- .../src/components/edgeless-toolbar/index.tsx | 20 ++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/packages/app/src/components/edgeless-toolbar/index.tsx b/packages/app/src/components/edgeless-toolbar/index.tsx index 1625f44398..e5f0db27d9 100644 --- a/packages/app/src/components/edgeless-toolbar/index.tsx +++ b/packages/app/src/components/edgeless-toolbar/index.tsx @@ -75,16 +75,18 @@ const toolbarList2 = [ const UndoRedo = () => { const [canUndo, setCanUndo] = useState(false); const [canRedo, setCanRedo] = useState(false); - const { editor } = useEditor(); + const { currentPage } = useEditor(); useEffect(() => { - if (!editor) return; - const { space } = editor; + if (!currentPage) return; - space.signals.historyUpdated.on(() => { - setCanUndo(space.canUndo); - setCanRedo(space.canRedo); + currentPage.signals.historyUpdated.on(() => { + setCanUndo(currentPage.canUndo); + setCanRedo(currentPage.canRedo); }); - }, [editor]); + return () => { + currentPage.signals.historyUpdated.dispose(); + }; + }, [currentPage]); return ( @@ -92,7 +94,7 @@ const UndoRedo = () => { { - editor?.space?.undo(); + currentPage?.undo(); }} > @@ -102,7 +104,7 @@ const UndoRedo = () => { { - editor?.space?.redo(); + currentPage?.redo(); }} > From 447c6b869ee94930baa2be019ac8a961c355d7e5 Mon Sep 17 00:00:00 2001 From: QiShaoXuan Date: Tue, 13 Dec 2022 17:47:41 +0800 Subject: [PATCH 6/6] fix: lint error --- packages/app/src/components/import/styles.ts | 5 ----- .../quick-search/content/searchResult/NotFound.tsx | 2 ++ packages/app/src/components/quick-search/index.tsx | 8 ++++---- 3 files changed, 6 insertions(+), 9 deletions(-) diff --git a/packages/app/src/components/import/styles.ts b/packages/app/src/components/import/styles.ts index 2211d01f70..580d8a1535 100644 --- a/packages/app/src/components/import/styles.ts +++ b/packages/app/src/components/import/styles.ts @@ -23,8 +23,3 @@ export const StyledButtonWrapper = styled.div(() => { }, }; }); - -export const StyledLoadingWrapper = styled.div(() => { - return { - } -}) diff --git a/packages/app/src/components/quick-search/content/searchResult/NotFound.tsx b/packages/app/src/components/quick-search/content/searchResult/NotFound.tsx index 98554a3ead..d44a891b4d 100644 --- a/packages/app/src/components/quick-search/content/searchResult/NotFound.tsx +++ b/packages/app/src/components/quick-search/content/searchResult/NotFound.tsx @@ -2,7 +2,9 @@ import React from 'react'; import { Command, useCommandState } from 'cmdk'; const noResult = () => { + // eslint-disable-next-line react-hooks/rules-of-hooks const search = useCommandState(state => state.search); + // eslint-disable-next-line react/no-unescaped-entities return No results found for "{search}".; }; diff --git a/packages/app/src/components/quick-search/index.tsx b/packages/app/src/components/quick-search/index.tsx index 4355c9ecf8..1c0fc5e0a4 100644 --- a/packages/app/src/components/quick-search/index.tsx +++ b/packages/app/src/components/quick-search/index.tsx @@ -26,9 +26,9 @@ export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => { const [result, setResult] = useState({}); const { pageList } = useEditor(); const { triggerQuickSearchModal } = useModal(); - useEffect(() => { - setResult(search(query, { enrich: true })); - }, [query]); + // useEffect(() => { + // setResult(search(query, { enrich: true })); + // }, [query]); useEffect(() => { const down = (e: KeyboardEvent) => { if (e.key === 'k' && e.metaKey) { @@ -44,7 +44,7 @@ export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => { }; document.addEventListener('keydown', down); return () => document.removeEventListener('keydown', down); - }, [open]); + }, [open, triggerQuickSearchModal]); return (