diff --git a/apps/core/package.json b/apps/core/package.json
index 8669d99283..0c84ea6801 100644
--- a/apps/core/package.json
+++ b/apps/core/package.json
@@ -22,7 +22,7 @@
"@blocksuite/blocks": "0.0.0-20230807164933-9f6fb698-nightly",
"@blocksuite/editor": "0.0.0-20230807164933-9f6fb698-nightly",
"@blocksuite/global": "0.0.0-20230807164933-9f6fb698-nightly",
- "@blocksuite/icons": "^2.1.29",
+ "@blocksuite/icons": "^2.1.30",
"@blocksuite/lit": "0.0.0-20230807164933-9f6fb698-nightly",
"@blocksuite/store": "0.0.0-20230807164933-9f6fb698-nightly",
"@dnd-kit/core": "^6.0.8",
@@ -33,7 +33,7 @@
"@emotion/styled": "^11.11.0",
"@mui/material": "^5.14.2",
"@react-hookz/web": "^23.1.0",
- "@toeverything/components": "^0.0.8",
+ "@toeverything/components": "^0.0.10",
"async-call-rpc": "^6.3.1",
"cmdk": "^0.2.0",
"css-spring": "^4.1.0",
diff --git a/apps/core/src/components/blocksuite/workspace-header/header-right-items/editor-option-menu.tsx b/apps/core/src/components/blocksuite/workspace-header/header-right-items/editor-option-menu.tsx
index 1fe67dc139..04d0e7640f 100644
--- a/apps/core/src/components/blocksuite/workspace-header/header-right-items/editor-option-menu.tsx
+++ b/apps/core/src/components/blocksuite/workspace-header/header-right-items/editor-option-menu.tsx
@@ -5,12 +5,15 @@ import { useAFFiNEI18N } from '@affine/i18n/hooks';
import { assertExists } from '@blocksuite/global/utils';
import {
EdgelessIcon,
+ EditIcon,
FavoritedIcon,
FavoriteIcon,
+ ImportIcon,
MoreVerticalIcon,
PageIcon,
} from '@blocksuite/icons';
import { IconButton } from '@toeverything/components/button';
+import { Divider } from '@toeverything/components/divider';
import {
useBlockSuitePageMeta,
usePageMetaHelper,
@@ -24,6 +27,8 @@ import { pageSettingFamily } from '../../../../atoms';
import { useBlockSuiteMetaHelper } from '../../../../hooks/affine/use-block-suite-meta-helper';
import { useCurrentWorkspace } from '../../../../hooks/current/use-current-workspace';
import { toast } from '../../../../utils';
+import { HeaderDropDownButton } from '../../../pure/header-drop-down-button';
+import { usePageHelper } from '../../block-suite-page-list/utils';
import { LanguageMenu } from './language-menu';
import { MenuThemeModeSwitch } from './theme-mode-switch';
const CommonMenu = () => {
@@ -52,7 +57,12 @@ const CommonMenu = () => {
);
};
-const PageMenu = () => {
+
+type PageMenuProps = {
+ rename?: () => void;
+};
+
+export const PageMenu = ({ rename }: PageMenuProps) => {
const t = useAFFiNEI18N();
// fixme(himself65): remove these hooks ASAP
const [workspace] = useCurrentWorkspace();
@@ -71,6 +81,7 @@ const PageMenu = () => {
const { setPageMeta } = usePageMetaHelper(blockSuiteWorkspace);
const [openConfirm, setOpenConfirm] = useState(false);
const { removeToTrash } = useBlockSuiteMetaHelper(blockSuiteWorkspace);
+ const { importFile } = usePageHelper(blockSuiteWorkspace);
const handleFavorite = useCallback(() => {
setPageMeta(pageId, { favorite: !favorite });
toast(favorite ? t['Removed from Favorites']() : t['Added to Favorites']());
@@ -90,12 +101,32 @@ const PageMenu = () => {
toast(t['Moved to Trash']());
setOpenConfirm(false);
}, [pageMeta.id, removeToTrash, t]);
-
+ const menuItemStyle = {
+ padding: '4px 12px',
+ };
const EditMenu = (
<>
+ }
+ data-testid="editor-option-menu-rename"
+ onClick={rename}
+ style={menuItemStyle}
+ >
+ {t['Rename']()}
+
+ : }
+ data-testid="editor-option-menu-edgeless"
+ onClick={handleSwitchMode}
+ style={menuItemStyle}
+ >
+ {t['Convert to ']()}
+ {mode === 'page' ? t['Edgeless']() : t['Page']()}
+
@@ -106,15 +137,34 @@ const PageMenu = () => {
>
{favorite ? t['Remove from favorites']() : t['Add to Favorites']()}
- : }
- data-testid="editor-option-menu-edgeless"
- onClick={handleSwitchMode}
+ {/* {TODO: add tag and duplicate function support} */}
+ {/* }
+ data-testid="editor-option-menu-add-tag"
+ onClick={() => {}}
+ style={menuItemStyle}
>
- {t['Convert to ']()}
- {mode === 'page' ? t['Edgeless']() : t['Page']()}
+ {t['com.affine.header.option.add-tag']()}
+ */}
+
+ {/* }
+ data-testid="editor-option-menu-duplicate"
+ onClick={() => {}}
+ style={menuItemStyle}
+ >
+ {t['com.affine.header.option.duplicate']()}
+ */}
+ }
+ data-testid="editor-option-menu-import"
+ onClick={importFile}
+ style={menuItemStyle}
+ >
+ {t['Import']()}
+
{
@@ -132,10 +182,15 @@ const PageMenu = () => {
placement="bottom-end"
disablePortal={true}
trigger="click"
+ menuStyles={{
+ borderRadius: '8px',
+ padding: '8px',
+ background: 'var(--affine-background-overlay-panel-color)',
+ }}
>
-
-
-
+
+
+
= {
[HeaderRightItemName.EditorOptionMenu]: {
Component: EditorOptionMenu,
- availableWhen: (_, currentPage, { isPublic }) => {
- return (
- !isPublic && currentPage?.meta.trash !== true && currentPage !== null
- );
+ availableWhen: () => {
+ return false;
},
},
};
diff --git a/apps/core/src/components/blocksuite/workspace-header/index.tsx b/apps/core/src/components/blocksuite/workspace-header/index.tsx
index e33b4d5d92..e5a2d2df5d 100644
--- a/apps/core/src/components/blocksuite/workspace-header/index.tsx
+++ b/apps/core/src/components/blocksuite/workspace-header/index.tsx
@@ -1,18 +1,15 @@
import { assertExists } from '@blocksuite/global/utils';
-import { Button } from '@toeverything/components/button';
import {
useBlockSuitePageMeta,
usePageMetaHelper,
} from '@toeverything/hooks/use-block-suite-page-meta';
-import { useSetAtom } from 'jotai';
import type { HTMLAttributes, ReactElement, ReactNode } from 'react';
import { useCallback, useRef, useState } from 'react';
-import { openQuickSearchModalAtom } from '../../../atoms';
-import { QuickSearchButton } from '../../pure/quick-search-button';
import { EditorModeSwitch } from './editor-mode-switch';
import type { BaseHeaderProps } from './header';
import { Header } from './header';
+import { PageMenu } from './header-right-items/editor-option-menu';
import * as styles from './styles.css';
export interface WorkspaceHeaderProps
@@ -26,14 +23,12 @@ export const BlockSuiteEditorHeader = (
): ReactElement => {
const { workspace, currentPage, children, isPublic } = props;
// fixme(himself65): remove this atom and move it to props
- const setOpenQuickSearch = useSetAtom(openQuickSearchModalAtom);
const pageMeta = useBlockSuitePageMeta(workspace.blockSuiteWorkspace).find(
meta => meta.id === currentPage?.id
);
const pageTitleMeta = usePageMetaHelper(workspace.blockSuiteWorkspace);
const [isEditable, setIsEditable] = useState(false);
const inputRef = useRef(null);
-
const handleClick = useCallback(() => {
if (isEditable) {
setIsEditable(!isEditable);
@@ -45,7 +40,14 @@ export const BlockSuiteEditorHeader = (
setIsEditable(!isEditable);
}
}, [currentPage, isEditable, pageMeta?.title, pageTitleMeta]);
-
+ const handleKeyDown = useCallback(
+ (e: React.KeyboardEvent) => {
+ if (e.key === 'Enter' || e.key === 'Escape') {
+ handleClick();
+ }
+ },
+ [handleClick]
+ );
const headerRef = useRef(null);
assertExists(pageMeta);
const title = pageMeta?.title;
@@ -76,16 +78,8 @@ export const BlockSuiteEditorHeader = (
defaultValue={pageMeta?.title}
onBlur={handleClick}
ref={inputRef}
+ onKeyDown={handleKeyDown}
/>
-
) : (
@@ -94,11 +88,7 @@ export const BlockSuiteEditorHeader = (
)}
-
{
- setOpenQuickSearch(true);
- }}
- />
+
-
{icon}
- {children}
-
{
- setOpenQuickSearch(true);
- }}
- />
-