feat: Intra-line double link interaction

This commit is contained in:
xiaodong zuo
2022-08-19 11:13:15 +08:00
parent dd1b160ef4
commit 2406f9556f
3 changed files with 57 additions and 55 deletions

View File

@@ -597,10 +597,11 @@ class SlateUtils {
const fragmentChildren = firstFragment.children; const fragmentChildren = firstFragment.children;
const textChildren: Text[] = []; const textChildren = [];
for (const child of fragmentChildren) { for (let i = 0; i < fragmentChildren.length; i++) {
if ((child as any).type === 'link') { const child = fragmentChildren[i];
textChildren.push(child as Text); if ('type' in child && child.type === 'link') {
i !== fragmentChildren.length - 1 && textChildren.push(child);
continue; continue;
} }
if (!('text' in child)) { if (!('text' in child)) {

View File

@@ -508,21 +508,19 @@ export class AsyncBlock {
id: item.blockId, id: item.blockId,
}); });
if (linkBlock) { let children = linkBlock?.getProperties().text?.value || [];
let children = linkBlock.getProperties().text?.value || []; if (children.length === 1 && !children[0].text) {
if (children.length === 1 && !children[0].text) { children = [{ text: 'Untitled' }];
children = [{ text: 'Untitled' }]; }
} if (
if ( children.map(v => v.text).join('') !==
children.map(v => v.text).join('') !== (item.children || []).map((v: any) => v.text).join('')
(item.children || []).map((v: any) => v.text).join('') ) {
) { const newItem = {
const newItem = { ...item,
...item, children: children,
children: children, };
}; values.splice(i, 1, newItem);
values.splice(i, 1, newItem);
}
} }
} }
} }

View File

@@ -135,6 +135,44 @@ export const DoubleLinkMenu = ({
editor.scrollManager.unLock(); editor.scrollManager.unLock();
}, [curBlockId, editor]); }, [curBlockId, editor]);
const resetState = useCallback(
(preNodeId: string, nextNodeId: string) => {
editor.blockHelper.removeDoubleLinkSearchSlash(preNodeId);
setCurBlockId(nextNodeId);
setSearchText('');
setIsOpen(true);
editor.scrollManager.lock();
const clientRect =
editor.selection.currentSelectInfo?.browserSelection
?.getRangeAt(0)
?.getBoundingClientRect();
if (clientRect) {
const rectTop = clientRect.top;
const { top, left } = editor.container.getBoundingClientRect();
setDoubleLinkMenuStyle({
top: rectTop - top,
left: clientRect.left - left,
height: clientRect.height,
});
setAnchorEl(dialogRef.current);
}
setTimeout(() => {
const textSelection = editor.blockHelper.selectionToSlateRange(
nextNodeId,
editor.selection.currentSelectInfo.browserSelection
);
if (textSelection) {
const { anchor } = textSelection;
editor.blockHelper.setDoubleLinkSearchSlash(
nextNodeId,
anchor
);
}
});
},
[editor]
);
const searchChange = useCallback( const searchChange = useCallback(
async (event: React.KeyboardEvent<HTMLDivElement>) => { async (event: React.KeyboardEvent<HTMLDivElement>) => {
if (ARRAY_CODES.includes(event.code)) { if (ARRAY_CODES.includes(event.code)) {
@@ -162,41 +200,7 @@ export const DoubleLinkMenu = ({
anchorNode.id anchorNode.id
); );
if (text.endsWith('[[')) { if (text.endsWith('[[')) {
editor.blockHelper.removeDoubleLinkSearchSlash(curBlockId); resetState(curBlockId, anchorNode.id);
setCurBlockId(anchorNode.id);
setSearchText('');
setIsOpen(true);
editor.scrollManager.lock();
const clientRect =
editor.selection.currentSelectInfo?.browserSelection
?.getRangeAt(0)
?.getBoundingClientRect();
if (clientRect) {
const rectTop = clientRect.top;
const { top, left } =
editor.container.getBoundingClientRect();
setDoubleLinkMenuStyle({
top: rectTop - top,
left: clientRect.left - left,
height: clientRect.height,
});
setAnchorEl(dialogRef.current);
}
setTimeout(() => {
const textSelection =
editor.blockHelper.selectionToSlateRange(
anchorNode.id,
editor.selection.currentSelectInfo
.browserSelection
);
if (textSelection) {
const { anchor } = textSelection;
editor.blockHelper.setDoubleLinkSearchSlash(
anchorNode.id,
anchor
);
}
});
} }
} }
if (isOpen) { if (isOpen) {
@@ -372,7 +376,6 @@ export const DoubleLinkMenu = ({
</div> </div>
); );
}; };
const NewPageSearchContainer = styled('div')({ const NewPageSearchContainer = styled('div')({
padding: '8px 8px 0px 8px', padding: '8px 8px 0px 8px',
}); });