From 05f763651eadedacf833cafe7f6c6950201c75bb Mon Sep 17 00:00:00 2001 From: QiShaoXuan Date: Thu, 15 Sep 2022 16:45:28 +0800 Subject: [PATCH 1/3] fix: can not convert url text to link after paste --- .../src/editor/clipboard/clipboardUtils.ts | 12 +++++++- .../editor-core/src/editor/clipboard/utils.ts | 28 +++++++++++++++++++ 2 files changed, 39 insertions(+), 1 deletion(-) diff --git a/libs/components/editor-core/src/editor/clipboard/clipboardUtils.ts b/libs/components/editor-core/src/editor/clipboard/clipboardUtils.ts index 2b93912d67..6682dfc80f 100644 --- a/libs/components/editor-core/src/editor/clipboard/clipboardUtils.ts +++ b/libs/components/editor-core/src/editor/clipboard/clipboardUtils.ts @@ -3,7 +3,12 @@ import { SelectBlock, SelectInfo } from '../selection'; import { AsyncBlock } from '../block'; import { ClipBlockInfo, OFFICE_CLIPBOARD_MIMETYPE } from './types'; import { Clip } from './clip'; -import { commonHTML2Block, commonHTML2Text } from './utils'; +import { + commonHTML2Block, + commonHTML2Text, + getIsTextLink, + linkText2Block, +} from './utils'; export class ClipboardUtils { private _editor: Editor; @@ -197,6 +202,11 @@ export class ClipboardUtils { textToBlock(clipData = ''): ClipBlockInfo[] { return clipData.split('\n').map((str: string) => { + const isLink = getIsTextLink(str); + if (isLink) { + return linkText2Block(clipData); + } + return { type: 'text', properties: { diff --git a/libs/components/editor-core/src/editor/clipboard/utils.ts b/libs/components/editor-core/src/editor/clipboard/utils.ts index 2478a5d722..e40d1484c6 100644 --- a/libs/components/editor-core/src/editor/clipboard/utils.ts +++ b/libs/components/editor-core/src/editor/clipboard/utils.ts @@ -5,6 +5,34 @@ import { ClipBlockInfo } from './types'; const getIsLink = (htmlElement: HTMLElement) => { return ['A', 'IMG'].includes(htmlElement.tagName); }; +export const getIsTextLink = (str: string) => { + const regex = new RegExp( + /https?:\/\/(www\.)?[-a-zA-Z\d@:%._+~#=]{1,256}\.[a-zA-Z\d()]{1,6}\b([-a-zA-Z\d()@:%_+.~#?&//=]*)/gi + ); + return regex.test(str); +}; +export const linkText2Block = (url: string) => { + return { + type: 'text', + properties: { + text: { + value: [ + { + children: [ + { + text: url, + }, + ], + type: 'link', + url: url, + id: getRandomString('link'), + }, + ], + }, + }, + children: [], + } as unknown as ClipBlockInfo; +}; const getTextStyle = (htmlElement: HTMLElement) => { const tagName = htmlElement.tagName; const textStyle: { [key: string]: any } = {}; From 3ab05642721247b4ea15c92b9494f1e3b7588160 Mon Sep 17 00:00:00 2001 From: QiShaoXuan Date: Thu, 15 Sep 2022 16:57:48 +0800 Subject: [PATCH 2/3] fix: double link icon size error --- .../common/src/lib/text/plugins/DoubleLink.tsx | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/libs/components/common/src/lib/text/plugins/DoubleLink.tsx b/libs/components/common/src/lib/text/plugins/DoubleLink.tsx index 42f50740f3..aa823feb36 100644 --- a/libs/components/common/src/lib/text/plugins/DoubleLink.tsx +++ b/libs/components/common/src/lib/text/plugins/DoubleLink.tsx @@ -3,6 +3,7 @@ import React, { useCallback } from 'react'; import { useNavigate } from 'react-router-dom'; import { Descendant } from 'slate'; import { RenderElementProps } from 'slate-react'; +import { styled } from '@toeverything/components/ui'; export type DoubleLinkElement = { type: 'link'; @@ -13,6 +14,10 @@ export type DoubleLinkElement = { id: string; }; +const StyledLink = styled('a')({ + cursor: 'pointer', +}); + export const DoubleLinkComponent = (props: RenderElementProps) => { const { attributes, children, element } = props; const doubleLinkElement = element as DoubleLinkElement; @@ -32,15 +37,20 @@ export const DoubleLinkComponent = (props: RenderElementProps) => { return ( - + {children} {displayValue} - + ); }; From b7b79b549432871cbfad1db07f72b55e171d479b Mon Sep 17 00:00:00 2001 From: QiShaoXuan Date: Fri, 16 Sep 2022 15:28:04 +0800 Subject: [PATCH 3/3] fix: lang select in code block is insanity --- .../src/blocks/code/CodeView.tsx | 27 ++++++++++++++++--- libs/components/ui/src/select/Select.tsx | 20 +++++++++----- 2 files changed, 38 insertions(+), 9 deletions(-) diff --git a/libs/components/editor-blocks/src/blocks/code/CodeView.tsx b/libs/components/editor-blocks/src/blocks/code/CodeView.tsx index a6a47e261c..b0bef4c731 100644 --- a/libs/components/editor-blocks/src/blocks/code/CodeView.tsx +++ b/libs/components/editor-blocks/src/blocks/code/CodeView.tsx @@ -116,7 +116,7 @@ const CodeBlock = styled('div')(({ theme }) => ({ flexWrap: 'wrap', justifyContent: 'space-between', opacity: 0, - transition: 'opacity 1.5s', + transition: 'opacity .15s', }, '.copy-block': { padding: '0px 10px', @@ -139,10 +139,21 @@ const CodeBlock = styled('div')(({ theme }) => ({ outline: 'none !important', }, })); +const StyledOperationalPanel = styled('div')<{ show: boolean }>(({ show }) => { + return { + display: 'flex', + flexWrap: 'wrap', + justifyContent: 'space-between', + opacity: show ? 1 : 0, + transition: 'opacity .15s', + }; +}); export const CodeView = ({ block, editor }: CreateCodeView) => { const initValue: string = block.getProperty('text')?.value?.[0]?.text; const langType: string = block.getProperty('lang'); const [extensions, setExtensions] = useState(); + const [showOperationPanel, setShowOperationPanel] = useState(false); + const isSelecting = useRef(false); const codeMirror = useRef(); const focusCode = () => { if (codeMirror.current) { @@ -181,8 +192,15 @@ export const CodeView = ({ block, editor }: CreateCodeView) => { onKeyDown={e => { e.stopPropagation(); }} + onMouseEnter={() => { + isSelecting.current = false; + setShowOperationPanel(true); + }} + onMouseLeave={() => { + !isSelecting.current && setShowOperationPanel(false); + }} > -
+