wip

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

@@ -65,6 +65,15 @@ $secondary: $gray-600 !default;
   }
 }
 
+// ref: https://github.com/google/material-design-icons/blob/master/font/MaterialIcons-Regular.codepoints
+@mixin insertMaterialIcons($code) {
+  &:before {
+    margin-right: 0.2em;
+    font-family: 'Material Icons';
+    content: $code;
+  }
+}
+
 
 .codemirror-editor :global {
 
@@ -101,7 +110,17 @@ $secondary: $gray-600 !default;
 
     // uploading
     &.dropzone-uploading {
-      @include overlay-processing-style(overlay-dropzone-active, 2.5em, 0.5em);
+      .overlay.overlay-dropzone-active {
+        .overlay-content {
+          // insert content
+          @include insertMaterialIcons('\e9fc'); // upload_file
+
+          &:after {
+            content: 'Uploading...';
+          }
+        }
+      }
+
     }
 
     // unuploadable
@@ -109,7 +128,8 @@ $secondary: $gray-600 !default;
       .overlay.overlay-dropzone-active {
         .overlay-content {
           // insert content
-          @include insertSimpleLineIcons('\e617'); // icon-exclamation
+          // @include insertSimpleLineIcons('\e617'); // icon-exclamation
+          @include insertMaterialIcons('\e000'); // error
 
           &:after {
             content: 'File uploading is disabled';
@@ -127,7 +147,8 @@ $secondary: $gray-600 !default;
 
         .overlay-content {
           // insert content
-          @include insertSimpleLineIcons('\e084'); // icon-cloud-upload
+          // @include insertSimpleLineIcons('\e084'); // icon-cloud-upload
+          @include insertMaterialIcons('\e2c3'); // cloud-upload
 
           &:after {
             content: 'Drop here to upload';
@@ -145,7 +166,8 @@ $secondary: $gray-600 !default;
       .overlay.overlay-dropzone-active {
         .overlay-content {
           // insert content
-          @include insertSimpleLineIcons('\e032'); // icon-picture
+          // @include insertSimpleLineIcons()('\e032'); // icon-picture
+          @include insertMaterialIcons('\e410'); // photo
 
           &:after {
             content: 'Only an image file is allowed';
@@ -153,7 +175,6 @@ $secondary: $gray-600 !default;
         }
       }
     }
-
     /* end of.dropzone */
   }
 }

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

@@ -1,5 +1,5 @@
 import {
-  forwardRef, useMemo, useRef, useEffect,
+  forwardRef, useMemo, useRef, useEffect, useCallback,
 } from 'react';
 
 import { indentUnit } from '@codemirror/language';
@@ -112,7 +112,8 @@ export const CodeMirrorEditor = (props: Props): JSX.Element => {
       return 'dropzone-uploading';
     }
     if (isDragAccept) {
-      return 'dropzone-accepted';
+      // return 'dropzone-accepted';
+      return 'dropzone-regected';
     }
     if (isDragReject) {
       return 'dropzone-regected';
@@ -120,17 +121,22 @@ export const CodeMirrorEditor = (props: Props): JSX.Element => {
     return '';
   }, [isDragAccept, isDragReject, isUploading]);
 
+  const renderOverlay = useCallback(() => {
+    if (isDragActive) {
+      return (
+        <div className="overlay overlay-dropzone-active">
+          <span className="overlay-content">
+          </span>
+        </div>
+      );
+    }
+    return <></>;
+  }, [isDragActive]);
+
   return (
     <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>
-        )
-        }
+        {renderOverlay()}
         <CodeMirrorEditorContainer ref={containerRef} />
         <Toolbar onFileOpen={open} />
       </div>