Jayden/AFFiNE-Mirror
0
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-07-12 15:46:29 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: Inlinemenu double link interaction

Browse Source
This commit is contained in:
xiaodong zuo
2022-08-23 10:37:14 +08:00
parent 7b4999225a
commit 7d35303395
6 changed files with 73 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
libs/components/editor-plugins/src/menu/double-link-menu/DoubleLinkMenu.tsx
+59 -42
View File
@@ -137,7 +137,8 @@ export const DoubleLinkMenu = ({
const resetState = useCallback(
(preNodeId: string, nextNodeId: string) => {
editor.blockHelper.removeDoubleLinkSearchSlash(preNodeId);
preNodeId &&
editor.blockHelper.removeDoubleLinkSearchSlash(preNodeId);
setCurBlockId(nextNodeId);
setSearchText('');
setIsOpen(true);
@@ -206,7 +207,7 @@ export const DoubleLinkMenu = ({
}
}
},
[editor, isOpen, curBlockId, hideMenu]
[editor, isOpen, curBlockId, hideMenu, resetState]
);
const handleKeyup = useCallback(
@@ -251,6 +252,20 @@ export const DoubleLinkMenu = ({
};
}, [handleKeyup, handleKeyDown, hooks]);
useEffect(() => {
const showDoubleLink = () => {
const { anchorNode } = editor.selection.currentSelectInfo;
editor.blockHelper.insertNodes(anchorNode.id, [{ text: '[[' }], {
select: true,
});
setTimeout(() => {
resetState('', anchorNode.id);
}, 0);
};
editor.plugins.observe('showDoubleLink', showDoubleLink);
return () => editor.plugins.unobserve('showDoubleLink', showDoubleLink);
}, [editor, resetState]);
const insertDoubleLink = useCallback(
async (pageId: string) => {
editor.blockHelper.setSelectDoubleLinkSearchSlash(curBlockId);
@@ -328,46 +343,48 @@ export const DoubleLinkMenu = ({
...doubleLinkMenuStyle,
}}
>
<MuiClickAwayListener onClickAway={() => hideMenu()}>
<Popper
open={isOpen}
anchorEl={anchorEl}
transition
placement="bottom-start"
>
{({ TransitionProps }) => (
<Grow
{...TransitionProps}
style={{
transformOrigin: 'left bottom',
}}
>
<Paper>
{inAddNewPage && (
<NewPageSearchContainer>
<Input
ref={newPageSearchRef}
value={filterText}
onChange={handleFilterChange}
placeholder="Search page to add to..."
/>
</NewPageSearchContainer>
)}
<DoubleLinkMenuContainer
editor={editor}
hooks={hooks}
style={style}
blockId={curBlockId}
onSelected={handleSelected}
onClose={hideMenu}
items={menuItems}
types={menuTypes}
/>
</Paper>
</Grow>
)}
</Popper>
</MuiClickAwayListener>
{isOpen && (
<MuiClickAwayListener onClickAway={() => hideMenu()}>
<Popper
open={isOpen}
anchorEl={anchorEl}
transition
placement="bottom-start"
>
{({ TransitionProps }) => (
<Grow
{...TransitionProps}
style={{
transformOrigin: 'left bottom',
}}
>
<Paper>
{inAddNewPage && (
<NewPageSearchContainer>
<Input
ref={newPageSearchRef}
value={filterText}
onChange={handleFilterChange}
placeholder="Search page to add to..."
/>
</NewPageSearchContainer>
)}
<DoubleLinkMenuContainer
editor={editor}
hooks={hooks}
style={style}
blockId={curBlockId}
onSelected={handleSelected}
onClose={hideMenu}
items={menuItems}
types={menuTypes}
/>
</Paper>
</Grow>
)}
</Popper>
</MuiClickAwayListener>
)}
</div>
);
};
libs/components/editor-plugins/src/menu/inline-menu/menu-item/IconItem.tsx
+4 -3
View File
@@ -1,9 +1,9 @@
import { Tooltip } from '@toeverything/components/ui';
import React, { useCallback } from 'react';
import style9 from 'style9';
import type { IconItemType, WithEditorSelectionType } from '../types';
import { inlineMenuNamesKeys, inlineMenuShortcuts } from '../config';
import { Tooltip } from '@toeverything/components/ui';
import type { IconItemType, WithEditorSelectionType } from '../types';
type MenuIconItemProps = IconItemType & WithEditorSelectionType;
export const MenuIconItem = ({
@@ -22,6 +22,7 @@ export const MenuIconItem = ({
editor,
type: nameKey,
anchorNodeId: selectionInfo?.anchorNode?.id,
setShow,
});
}
if ([inlineMenuNamesKeys.comment].includes(nameKey)) {
libs/components/editor-plugins/src/menu/inline-menu/types.ts
+3 -1
View File
@@ -1,5 +1,5 @@
import type { SvgIconProps } from '@toeverything/components/ui';
import type { Virgo, SelectionInfo } from '@toeverything/framework/virgo';
import type { SelectionInfo, Virgo } from '@toeverything/framework/virgo';
import { inlineMenuNames, INLINE_MENU_UI_TYPES } from './config';
export type WithEditorSelectionType = {
@@ -14,10 +14,12 @@ export type ClickItemHandler = ({
type,
editor,
anchorNodeId,
setShow,
}: {
type: InlineMenuNamesType;
editor: Virgo;
anchorNodeId: string;
setShow?: React.Dispatch<React.SetStateAction<boolean>>;
}) => void;
export type IconItemType = {
libs/components/editor-plugins/src/menu/inline-menu/utils.ts
+5
View File
@@ -107,6 +107,7 @@ const common_handler_for_inline_menu: ClickItemHandler = ({
editor,
anchorNodeId,
type,
setShow,
}) => {
switch (type) {
case inlineMenuNamesKeys.text:
@@ -438,6 +439,10 @@ const common_handler_for_inline_menu: ClickItemHandler = ({
blockType: Protocol.Block.Type.file,
});
break;
case inlineMenuNamesKeys.backlinks:
editor.plugins.emit('showDoubleLink');
setShow(false);
break;
default: // do nothing
}
};