mirror of
https://github.com/toeverything/AFFiNE.git
synced 2024-12-23 00:01:40 +03:00
feat: Intra-line double link interaction
This commit is contained in:
parent
a58825dd2f
commit
438d814d49
@ -1,5 +1,4 @@
|
||||
/* eslint-disable max-lines */
|
||||
import { SearchIcon } from '@toeverything/components/icons';
|
||||
import { ErrorBoundary, isEqual } from '@toeverything/utils';
|
||||
import isHotkey from 'is-hotkey';
|
||||
import isUrl from 'is-url';
|
||||
@ -844,8 +843,7 @@ const EditorLeaf = ({ attributes, children, leaf }: any) => {
|
||||
|
||||
if (leaf.doubleLinkSearch) {
|
||||
customChildren = (
|
||||
<span style={{ backgroundColor: '#eee' }}>
|
||||
<SearchIcon style={{ width: '16px', height: '16px' }} />
|
||||
<span style={{ backgroundColor: '#eee', borderRadius: '4px' }}>
|
||||
{customChildren}
|
||||
</span>
|
||||
);
|
||||
|
@ -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);
|
||||
|
Loading…
Reference in New Issue
Block a user