add overlay if drag items

packages/editor/src/components/CodeMirrorEditor/CodeMirrorEditor.module.scss

@@ -65,6 +65,7 @@ $secondary: $gray-600 !default;
   }
 }
 
+
 .codemirror-editor :global {
 
   // overlay in .codemirror-editor
@@ -84,10 +85,10 @@ $secondary: $gray-600 !default;
   .dropzone {
     position: relative; // against .overlay position: absolute
 
+
     @include overlay-processing-style(overlay-dropzone-active, 2.5em, 0.5em);
 
     // unuploadable or rejected
-    &.dropzone-unuploadable,
     &.dropzone-rejected {
       .overlay.overlay-dropzone-active {
         background: rgba(200, 200, 200, 0.8);
@@ -153,23 +154,7 @@ $secondary: $gray-600 !default;
       }
     }
 
-    // multiple files
-    &.dropzone-accepted.dropzone-rejected {
-      .overlay.overlay-dropzone-active {
-        .overlay-content {
-          // insert content
-          @include insertSimpleLineIcons('\e617'); // icon-exclamation
-
-          &:after {
-            content: 'Only 1 file is allowed';
-          }
-        }
-      }
-    }
-    // }
-
     /* end of.dropzone */
   }
-
-
 }
+

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

@@ -100,12 +100,17 @@ export const CodeMirrorEditor = (props: Props): JSX.Element => {
 
   const {
     getRootProps,
+    isDragActive,
     isDragAccept,
+    isUploading,
     isDragReject,
     open,
   } = useFileDropzone({ onUpload });
 
   const dropzoneClassName = useMemo(() => {
+    if (isUploading) {
+      return 'dropzone-uploading';
+    }
     if (isDragAccept) {
       return 'dropzone-accepted';
     }
@@ -113,19 +118,22 @@ export const CodeMirrorEditor = (props: Props): JSX.Element => {
       return 'dropzone-regected';
     }
     return '';
-  }, [isDragAccept, isDragReject]);
+  }, [isDragAccept, isDragReject, isUploading]);
 
   return (
-    // <div className={`${style['codemirror-editor']}`}>
-    <div>
-      <div {...getRootProps()} className={`dropzone dropzone-uploadable ${dropzoneClassName} flex-expand-vert`}>
-        <div className="overlay overlay-dropzone-active">
-          <span className="overlay-content"></span>
-        </div>
+    <div className={`${style['codemirror-editor']} flex-expand-vert`}>
+      <div {...getRootProps()} className={`dropzone ${dropzoneClassName} flex-expand-vert`}>
+        {isDragActive
+        && (
+          <div className="overlay overlay-dropzone-active">
+            <span className="overlay-content">
+            </span>
+          </div>
+        )
+        }
         <CodeMirrorEditorContainer ref={containerRef} />
         <Toolbar onFileOpen={open} />
       </div>
     </div>
-
   );
 };