use dropzone-editor.ts

packages/editor/src/components/CodeMirrorEditor/CodeMirrorEditor.tsx

@@ -1,12 +1,12 @@
 import {
-  forwardRef, useMemo, useRef, useEffect, useCallback,
+  forwardRef, useMemo, useRef, useEffect,
 } from 'react';
 
 import { indentUnit } from '@codemirror/language';
 import type { ReactCodeMirrorProps } from '@uiw/react-codemirror';
-import { useDropzone } from 'react-dropzone';
 
 import { GlobalCodeMirrorEditorKey } from '../../consts';
+import { useDropzoneEditor } from '../../services';
 import { useCodeMirrorEditorIsolated } from '../../stores';
 
 import { Toolbar } from './Toolbar';
@@ -19,7 +19,6 @@ const CodeMirrorEditorContainer = forwardRef<HTMLDivElement>((props, ref) => {
   );
 });
 
-
 type Props = {
   editorKey: string | GlobalCodeMirrorEditorKey,
   onChange?: (value: string) => void,
@@ -55,23 +54,8 @@ export const CodeMirrorEditor = (props: Props): JSX.Element => {
 
   }, [codeMirrorEditor, indentSize]);
 
-  // ------------------------| Dropzone |------------------------------------------
-  const dropHandler = useCallback((acceptedFiles: File[]) => {
-    if (onUpload == null) {
-      return;
-    }
-    onUpload(acceptedFiles);
-  }, [onUpload]);
-
-  const { getRootProps, open } = useDropzone(
-    {
-      noKeyboard: true,
-      noClick: true,
-      onDrop: dropHandler,
-    },
-  );
+  const { getRootProps, open } = useDropzoneEditor(onUpload);
 
-  // ------------------------| Dropzone |-------------------------------------------
   return (
     <div {...getRootProps()} className="flex-expand-vert">
       <CodeMirrorEditorContainer ref={containerRef} />

packages/editor/src/services/dropzone-editor/use-dropzone-editor.ts

@@ -1,6 +1,27 @@
+import { useCallback } from 'react';
+
 import { useDropzone } from 'react-dropzone';
-import type { DropzoneOptions, DropzoneState } from 'react-dropzone';
+import type { DropzoneState } from 'react-dropzone';
+
+type DropzoneEditor = {
+  onUpload?: (args: File | File[]) => void,
+}
+
+export const useDropzoneEditor = (props: DropzoneEditor): DropzoneState => {
+
+  const { onUpload } = props;
+
+  const dropHandler = useCallback((acceptedFiles: File[]) => {
+    if (onUpload == null) {
+      return;
+    }
+    onUpload(acceptedFiles);
+  }, [onUpload]);
+
+  return useDropzone({
+    noKeyboard: true,
+    noClick: true,
+    onDrop: dropHandler,
+  });
 
-export const useDropzoneEditor = (props?: DropzoneOptions): DropzoneState => {
-  return useDropzone(props);
 };