Przeglądaj źródła

it can file paste using ctrl+v

reiji-h 2 lat temu
rodzic
commit
4dd3bd8ed5

+ 12 - 22
packages/editor/src/components/CodeMirrorEditor/CodeMirrorEditor.tsx

@@ -23,6 +23,7 @@ const CodeMirrorEditorContainer = forwardRef<HTMLDivElement>((props, ref) => {
 type Props = {
 type Props = {
   editorKey: string | GlobalCodeMirrorEditorKey,
   editorKey: string | GlobalCodeMirrorEditorKey,
   onChange?: (value: string) => void,
   onChange?: (value: string) => void,
+  onUpload?: (files: File[]) => void,
   indentSize?: number,
   indentSize?: number,
 }
 }
 
 
@@ -57,31 +58,20 @@ export const CodeMirrorEditor = (props: Props): JSX.Element => {
   useEffect(() => {
   useEffect(() => {
 
 
     const extension = EditorView.domEventHandlers({
     const extension = EditorView.domEventHandlers({
-      paste(event, view) {
+      paste(event) {
         event.preventDefault();
         event.preventDefault();
-        console.log('codemirror: ', event.clipboardData?.getData('text/plain'));
-        console.log('codemirror: ', event.clipboardData?.files);
-        console.log('codemirror: ', event.clipboardData?.items);
-        return false;
-      },
-      drag(event, view) {
-        event.preventDefault();
-        console.log('DRAG: ', event.dataTransfer);
-        return true;
-      },
-      dragenter(event, view) {
-        event.preventDefault();
-        console.log('DRAGENER: ', event.dataTransfer);
-        return true;
-      },
-      dragover(event, view) {
-        event.preventDefault();
-        console.log('DRAGOVER: ', event.dataTransfer);
+
+        if (onUpload != null && event.clipboardData?.files != null) {
+          onUpload(Array.from(event.clipboardData?.files));
+        }
+        if (event.clipboardData?.getData('text/plain') != null) {
+          codeMirrorEditor?.replaceText(event.clipboardData?.getData('text/plain'));
+        }
         return true;
         return true;
       },
       },
-      drop(event, view) {
+      drop(event) {
+        // prevents conflicts between codemirror and react-dropzone
         event.preventDefault();
         event.preventDefault();
-        console.log('DROP: ', event.dataTransfer);
         return true;
         return true;
       },
       },
     });
     });
@@ -89,7 +79,7 @@ export const CodeMirrorEditor = (props: Props): JSX.Element => {
     const cleanupFunction = codeMirrorEditor?.appendExtensions?.(extension);
     const cleanupFunction = codeMirrorEditor?.appendExtensions?.(extension);
     return cleanupFunction;
     return cleanupFunction;
 
 
-  }, [codeMirrorEditor]);
+  }, [codeMirrorEditor, onUpload]);
 
 
   const { getRootProps, open } = useFileDropzone({ onUpload });
   const { getRootProps, open } = useFileDropzone({ onUpload });