feat: Intra-line double link interaction
This commit is contained in:
@@ -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)) {
|
||||||
|
|||||||
@@ -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);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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',
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user