From 3570aab4e807e3ff895ed19c96026bc2e080c8bb Mon Sep 17 00:00:00 2001 From: xiaodong zuo Date: Fri, 19 Aug 2022 18:22:57 +0800 Subject: [PATCH] feat: Intra-line double link interaction --- .../src/lib/text/plugins/DoubleLink.tsx | 13 ++--- .../src/editor/block/async-block.ts | 1 - .../src/menu/double-link-menu/Container.tsx | 50 +------------------ .../menu/double-link-menu/DoubleLinkMenu.tsx | 21 +++----- 4 files changed, 16 insertions(+), 69 deletions(-) diff --git a/libs/components/common/src/lib/text/plugins/DoubleLink.tsx b/libs/components/common/src/lib/text/plugins/DoubleLink.tsx index 3bacd92f5f..e4bcb9bec2 100644 --- a/libs/components/common/src/lib/text/plugins/DoubleLink.tsx +++ b/libs/components/common/src/lib/text/plugins/DoubleLink.tsx @@ -2,6 +2,7 @@ import { PagesIcon } from '@toeverything/components/icons'; import React, { useCallback } from 'react'; import { useNavigate } from 'react-router-dom'; import { Descendant } from 'slate'; +import { RenderElementProps } from 'slate-react'; export type DoubleLinkElement = { type: 'link'; @@ -11,17 +12,17 @@ export type DoubleLinkElement = { id: string; }; -export const DoubleLinkComponent = ({ attributes, children, element }: any) => { +export const DoubleLinkComponent = (props: RenderElementProps) => { + const { attributes, children, element } = props; + const doubleLinkElement = element as DoubleLinkElement; const navigate = useNavigate(); const handleClickLinkText = useCallback( (event: React.MouseEvent) => { - event.preventDefault(); - event.stopPropagation(); - const { workspaceId, blockId } = element; + const { workspaceId, blockId } = doubleLinkElement; navigate(`/${workspaceId}/${blockId}`); }, - [element, navigate] + [doubleLinkElement, navigate] ); return ( @@ -30,7 +31,7 @@ export const DoubleLinkComponent = ({ attributes, children, element }: any) => { {children} diff --git a/libs/components/editor-core/src/editor/block/async-block.ts b/libs/components/editor-core/src/editor/block/async-block.ts index 73db5de087..52dbae6ec8 100644 --- a/libs/components/editor-core/src/editor/block/async-block.ts +++ b/libs/components/editor-core/src/editor/block/async-block.ts @@ -162,7 +162,6 @@ export class AsyncBlock { const oldData = this.raw_data; this.raw_data = blockData; this.raw_data = await this.filterPageInvalidChildren(blockData); - this.raw_data = await this.updateDoubleLinkBlock(this.raw_data); this.emit('update', { block: this, oldData }); } ); diff --git a/libs/components/editor-plugins/src/menu/double-link-menu/Container.tsx b/libs/components/editor-plugins/src/menu/double-link-menu/Container.tsx index 147f154129..ec5f52be08 100644 --- a/libs/components/editor-plugins/src/menu/double-link-menu/Container.tsx +++ b/libs/components/editor-plugins/src/menu/double-link-menu/Container.tsx @@ -1,11 +1,6 @@ -import { - CommonList, - commonListContainer, - CommonListItem, -} from '@toeverything/components/common'; +import { CommonList, CommonListItem } from '@toeverything/components/common'; import { styled } from '@toeverything/components/ui'; import { HookType, PluginHooks, Virgo } from '@toeverything/framework/virgo'; -import { domToRect } from '@toeverything/utils'; import React, { useCallback, useEffect, useRef, useState } from 'react'; export type DoubleLinkMenuContainerProps = { @@ -25,35 +20,6 @@ export const DoubleLinkMenuContainer = ( const { hooks, onSelected, onClose, types, style, items } = props; const menuRef = useRef(null); const [currentItem, setCurrentItem] = useState(); - const [needCheckIntoView, setNeedCheckIntoView] = useState(false); - - useEffect(() => { - if (needCheckIntoView) { - if (currentItem && menuRef.current) { - const itemElement = - menuRef.current.querySelector( - `.item-${currentItem}` - ); - const scrollElement = - menuRef.current.querySelector( - `.${commonListContainer}` - ); - if (itemElement) { - const itemRect = domToRect(itemElement); - const scrollRect = domToRect(scrollElement); - if ( - itemRect.top < scrollRect.top || - itemRect.bottom > scrollRect.bottom - ) { - itemElement.scrollIntoView({ - block: 'nearest', - }); - } - } - } - setNeedCheckIntoView(false); - } - }, [needCheckIntoView, currentItem]); useEffect(() => { if (types && !currentItem) { @@ -61,19 +27,6 @@ export const DoubleLinkMenuContainer = ( } }, [currentItem, onClose, types]); - useEffect(() => { - if (types) { - if (!types.includes(currentItem)) { - setNeedCheckIntoView(true); - if (types.length) { - setCurrentItem(types[0]); - } else { - setCurrentItem(undefined); - } - } - } - }, [types, currentItem]); - const handleUpDownKey = useCallback( (event: React.KeyboardEvent) => { if (types && ['ArrowUp', 'ArrowDown'].includes(event.code)) { @@ -85,7 +38,6 @@ export const DoubleLinkMenuContainer = ( if (currentItem) { const idx = types.indexOf(currentItem); if (isUpkey ? idx > 0 : idx < types.length - 1) { - setNeedCheckIntoView(true); setCurrentItem(types[isUpkey ? idx - 1 : idx + 1]); } } diff --git a/libs/components/editor-plugins/src/menu/double-link-menu/DoubleLinkMenu.tsx b/libs/components/editor-plugins/src/menu/double-link-menu/DoubleLinkMenu.tsx index eae70b40f4..a81e8b3122 100644 --- a/libs/components/editor-plugins/src/menu/double-link-menu/DoubleLinkMenu.tsx +++ b/libs/components/editor-plugins/src/menu/double-link-menu/DoubleLinkMenu.tsx @@ -156,19 +156,14 @@ export const DoubleLinkMenu = ({ }); setAnchorEl(dialogRef.current); } - setTimeout(() => { - const textSelection = editor.blockHelper.selectionToSlateRange( - nextNodeId, - editor.selection.currentSelectInfo.browserSelection - ); - if (textSelection) { - const { anchor } = textSelection; - editor.blockHelper.setDoubleLinkSearchSlash( - nextNodeId, - anchor - ); - } - }); + const textSelection = editor.blockHelper.selectionToSlateRange( + nextNodeId, + editor.selection.currentSelectInfo?.browserSelection + ); + if (textSelection) { + const { anchor } = textSelection; + editor.blockHelper.setDoubleLinkSearchSlash(nextNodeId, anchor); + } }, [editor] );