feat: Intra-line double link interaction

This commit is contained in:
xiaodong zuo
2022-08-19 06:17:30 +08:00
parent a58825dd2f
commit 438d814d49
4 changed files with 38 additions and 17 deletions
@@ -166,7 +166,6 @@ export const DoubleLinkMenuContainer = ({
const RootContainer = styled('div')(({ theme }) => ({
zIndex: 1,
maxHeight: '525px',
borderRadius: '10px',
boxShadow: theme.affine.shadows.shadow1,
backgroundColor: '#fff',
@@ -176,5 +175,5 @@ const RootContainer = styled('div')(({ theme }) => ({
const ContentContainer = styled('div')(({ theme }) => ({
display: 'flex',
overflow: 'hidden',
maxHeight: '493px',
maxHeight: '300px',
}));
@@ -56,7 +56,7 @@ export const DoubleLinkMenu = ({
});
const [curBlockId, setCurBlockId] = useState<string>();
const [searchText, setSearchText] = useState<string>('');
const [searchText, setSearchText] = useState<string>();
const [inAddNewPage, setInAddNewPage] = useState(false);
const [filterText, setFilterText] = useState<string>('');
const [searchResultBlocks, setSearchResultBlocks] = useState<QueryResult>(
@@ -85,7 +85,13 @@ export const DoubleLinkMenu = ({
});
items.push(
...(searchResultBlocks?.map(
block => ({ block } as CommonListItem)
block =>
({
block: {
...block,
content: block.content || 'Untitled',
},
} as CommonListItem)
) || [])
);
}
@@ -199,11 +205,32 @@ export const DoubleLinkMenu = ({
const handleKeyDown = useCallback(
(event: React.KeyboardEvent<HTMLDivElement>) => {
if (!isOpen) {
return;
}
if (event.code === 'Escape') {
hideMenu();
}
const { type, anchorNode } = editor.selection.currentSelectInfo;
if (
type === 'Range' &&
anchorNode &&
editor.blockHelper.isSelectionCollapsed(anchorNode.id)
) {
const text = editor.blockHelper.getBlockTextBeforeSelection(
anchorNode.id
);
if (text.endsWith('[[')) {
if (event.key === 'Backspace') {
event.preventDefault();
event.stopPropagation();
hideMenu();
return;
}
}
}
},
[hideMenu]
[hideMenu, editor, isOpen]
);
useEffect(() => {
@@ -1,16 +1,15 @@
import { useCallback, useEffect, useState } from 'react';
import { useNavigate, useParams } from 'react-router';
import style9 from 'style9';
import { BlockPreview } from '@toeverything/components/common';
import {
TransitionsModal,
MuiBox as Box,
MuiBox,
styled,
TransitionsModal,
} from '@toeverything/components/ui';
import { Virgo, BlockEditor } from '@toeverything/framework/virgo';
import { BlockEditor, Virgo } from '@toeverything/framework/virgo';
import { throttle } from '@toeverything/utils';
import { useCallback, useEffect, useState } from 'react';
import { useNavigate, useParams } from 'react-router';
import style9 from 'style9';
const styles = style9.create({
wrapper: {
@@ -37,9 +36,7 @@ const query_blocks = (
search: string,
callback: (result: QueryResult) => void
) => {
(editor as BlockEditor)
.search(search)
.then(pages => callback(pages.filter(b => !!b.content)));
(editor as BlockEditor).search(search).then(pages => callback(pages));
};
export const QueryBlocks = throttle(query_blocks, 500);