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} - + ); }; diff --git a/libs/components/editor-blocks/src/blocks/code/CodeView.tsx b/libs/components/editor-blocks/src/blocks/code/CodeView.tsx index 68fb528f41..97f3c3bd83 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); + }} > -
+