diff --git a/frontend/appflowy_web_app/src/components/editor/components/blocks/image/ImageBlock.tsx b/frontend/appflowy_web_app/src/components/editor/components/blocks/image/ImageBlock.tsx
index fe4bbb3317..a021a9ddc9 100644
--- a/frontend/appflowy_web_app/src/components/editor/components/blocks/image/ImageBlock.tsx
+++ b/frontend/appflowy_web_app/src/components/editor/components/blocks/image/ImageBlock.tsx
@@ -1,8 +1,9 @@
import { AlignType } from '@/application/collab.type';
import { notify } from '@/components/_shared/notify';
+import RightTopActionsToolbar from '@/components/editor/components/block-actions/RightTopActionsToolbar';
import { EditorElementProps, ImageBlockNode } from '@/components/editor/editor.type';
import { copyTextToClipboard } from '@/utils/copy';
-import React, { forwardRef, memo, useCallback, useMemo, useRef } from 'react';
+import React, { forwardRef, memo, useCallback, useMemo, useRef, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { ReactEditor, useSelected, useSlateStatic } from 'slate-react';
import ImageEmpty from './ImageEmpty';
@@ -28,21 +29,18 @@ export const ImageBlock = memo(
}, [align]);
const { t } = useTranslation();
+ const [showToolbar, setShowToolbar] = useState(false);
return (
{
+ onMouseEnter={() => {
if (!url) return;
- try {
- await copyTextToClipboard(url);
- notify.success(t('document.plugins.image.copiedToPasteBoard'));
- } catch (_) {
- // do nothing
- }
+ setShowToolbar(true);
}}
- className={`${className || ''} image-block relative w-full py-1 ${url ? 'cursor-pointer' : 'cursor-default'}`}
+ onMouseLeave={() => setShowToolbar(false)}
+ className={`${className || ''} image-block cursor-default} relative w-full py-1`}
>
{children}
@@ -54,6 +52,19 @@ export const ImageBlock = memo(
)}
+ {showToolbar && (
+
{
+ if (!url) return;
+ try {
+ await copyTextToClipboard(url);
+ notify.success(t('publish.copy.imageBlock'));
+ } catch (_) {
+ // do nothing
+ }
+ }}
+ />
+ )}
);
})
diff --git a/frontend/appflowy_web_app/src/components/editor/components/blocks/math-equation/MathEquation.tsx b/frontend/appflowy_web_app/src/components/editor/components/blocks/math-equation/MathEquation.tsx
index 5580f76fdc..824bf33a4c 100644
--- a/frontend/appflowy_web_app/src/components/editor/components/blocks/math-equation/MathEquation.tsx
+++ b/frontend/appflowy_web_app/src/components/editor/components/blocks/math-equation/MathEquation.tsx
@@ -1,9 +1,10 @@
import KatexMath from '@/components/_shared/katex-math/KatexMath';
import { notify } from '@/components/_shared/notify';
+import RightTopActionsToolbar from '@/components/editor/components/block-actions/RightTopActionsToolbar';
import { EditorElementProps, MathEquationNode } from '@/components/editor/editor.type';
import { copyTextToClipboard } from '@/utils/copy';
import { FunctionsOutlined } from '@mui/icons-material';
-import { forwardRef, memo, useRef } from 'react';
+import React, { forwardRef, memo, useRef, useState } from 'react';
import { useTranslation } from 'react-i18next';
export const MathEquation = memo(
@@ -12,41 +13,47 @@ export const MathEquation = memo(
const formula = node.data.formula;
const { t } = useTranslation();
const containerRef = useRef
(null);
+ const [showToolbar, setShowToolbar] = useState(false);
return (
<>
{
+ contentEditable={false}
+ onMouseEnter={() => {
if (!formula) return;
- try {
- await copyTextToClipboard(formula);
- notify.success(t('document.plugins.math.copiedToPasteBoard'));
- } catch (_) {
- // do nothing
- }
+ setShowToolbar(true);
}}
+ onMouseLeave={() => setShowToolbar(false)}
className={`${className} math-equation-block relative w-full ${
formula ? 'cursor-pointer' : 'cursor-default'
- } py-2`}
+ } container-bg w-full select-none rounded border border-transparent py-2 px-3 hover:border-line-divider hover:bg-fill-list-active`}
>
-
- {formula ? (
-
- ) : (
-
-
- {t('document.plugins.mathEquation.addMathEquation')}
-
- )}
-
+ {formula ? (
+
+ ) : (
+
+
+ {t('document.plugins.mathEquation.addMathEquation')}
+
+ )}
{children}
+ {showToolbar && (
+
{
+ if (!formula) return;
+ try {
+ await copyTextToClipboard(formula);
+ notify.success(t('publish.copy.mathBlock'));
+ } catch (_) {
+ // do nothing
+ }
+ }}
+ />
+ )}