feat(fe): show toast when copied (#2008)

* feat(fe): show-toast-when-copied

* chore(fe): improve code

apps/frontend/components/CodeEditor.tsx

@@ -9,6 +9,7 @@ import { tags as t } from '@lezer/highlight'
 import { createTheme } from '@uiw/codemirror-themes'
 import type { ReactCodeMirrorProps } from '@uiw/react-codemirror'
 import ReactCodeMirror, { EditorView } from '@uiw/react-codemirror'
+import { toast } from 'sonner'
 import { ScrollArea, ScrollBar } from './ui/scroll-area'
 
 const editorTheme = createTheme({
@@ -69,12 +70,15 @@ interface Props extends ReactCodeMirrorProps {
 const copyPasteHandler = () => {
   return EditorView.domEventHandlers({
     paste(event) {
+      toast.error('Copying and pasting is not allowed')
       event.preventDefault()
     },
     copy(event) {
+      toast.error('Copying and pasting is not allowed')
       event.preventDefault()
     },
     cut(event) {
+      toast.error('Copying and pasting is not allowed')
       event.preventDefault()
     }
   })
@@ -95,7 +99,7 @@ export default function CodeEditor({
         extensions={[
           fontSize,
           languageParser[language](),
-          enableCopyPaste ? [] : [copyPasteHandler()]
+          enableCopyPaste ? [] : copyPasteHandler()
         ]}
         value={value}
         onChange={onChange}

apps/frontend/components/EditorDescription.tsx

@@ -16,6 +16,7 @@ import {
 } from '@/components/ui/dialog'
 import { renderKatex } from '@/lib/renderKatex'
 import { convertToLetter } from '@/lib/utils'
+import CopyIcon from '@/public/24_copy.svg'
 import compileIcon from '@/public/compileVersion.svg'
 import copyIcon from '@/public/copy.svg'
 import copyCompleteIcon from '@/public/copyComplete.svg'
@@ -27,6 +28,7 @@ import { FileText } from 'lucide-react'
 import Image from 'next/image'
 import { useState, useEffect, useRef } from 'react'
 import useCopyToClipboard from 'react-use/lib/useCopyToClipboard'
+import { toast } from 'sonner'
 import {
   Tooltip,
   TooltipContent,
@@ -158,6 +160,17 @@ export function EditorDescription({
                               <Image
                                 onClick={() => {
                                   copy(input + '\n\n', `input-${id}`) // add newline to the end for easy testing
+                                  toast('Successfully copied', {
+                                    unstyled: true,
+                                    closeButton: false,
+                                    icon: <Image src={CopyIcon} alt="copy" />,
+                                    style: { backgroundColor: '#f0f8ff' },
+                                    classNames: {
+                                      toast:
+                                        'inline-flex items-center py-2 px-3 rounded gap-2',
+                                      title: 'text-primary font-medium'
+                                    }
+                                  })
                                 }}
                                 className="cursor-pointer transition-opacity hover:opacity-60"
                                 src={copyIcon}
@@ -210,6 +223,17 @@ export function EditorDescription({
                               <Image
                                 onClick={() => {
                                   copy(output + '\n\n', `output-${id}`) // add newline to the end for easy testing
+                                  toast('Successfully copied', {
+                                    unstyled: true,
+                                    closeButton: false,
+                                    icon: <Image src={CopyIcon} alt="copy" />,
+                                    style: { backgroundColor: '#f0f8ff' },
+                                    classNames: {
+                                      toast:
+                                        'inline-flex items-center py-2 px-3 rounded gap-2',
+                                      title: 'text-primary font-medium'
+                                    }
+                                  })
                                 }}
                                 className="cursor-pointer transition-opacity hover:opacity-60"
                                 src={copyIcon}