wip

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

@@ -6,3 +6,141 @@
   }
 
 }
+
+// TODO: ref Editor.module.scss
+//
+$gray-300: #dee2e6 !default;
+$gray-400: #ced4da !default;
+$gray-500: #adb5bd !default;
+$gray-600: #6c757d !default;
+$gray-700: #495057 !default;
+$secondary: $gray-600 !default;
+
+@mixin overlay-processing-style($additionalSelector, $contentFontSize: inherit, $contentPadding: inherit) {
+  .overlay.#{$additionalSelector} {
+    background: rgba(255, 255, 255, 0.5);
+    .overlay-content {
+      padding: $contentPadding;
+      font-size: $contentFontSize;
+      color: $gray-700;
+      background: rgba(200, 200, 200, 0.5);
+    }
+  }
+}
+
+@mixin insertSimpleLineIcons($code) {
+  &:before {
+    margin-right: 0.2em;
+    font-family: 'simple-line-icons';
+    content: $code;
+  }
+}
+
+.codemirror-editor :global {
+
+  // overlay in .codemirror-editor
+  .overlay {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 7; // forward than .CodeMirror-vscrollbar
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  // for Dropzone
+  .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);
+
+        .overlay-content {
+          color: $gray-300;
+        }
+      }
+    }
+
+    // uploading
+    &.dropzone-uploading {
+      @include overlay-processing-style(overlay-dropzone-active, 2.5em, 0.5em);
+    }
+
+    // unuploadable
+    &.dropzone-unuploadable {
+      .overlay.overlay-dropzone-active {
+        .overlay-content {
+          // insert content
+          @include insertSimpleLineIcons('\e617'); // icon-exclamation
+
+          &:after {
+            content: 'File uploading is disabled';
+          }
+        }
+      }
+    }
+
+    // uploadable
+    // &.dropzone-uploadable {
+    // accepted
+    &.dropzone-accepted:not(.dropzone-rejected) {
+      .overlay.overlay-dropzone-active {
+        border: 4px dashed $gray-300;
+
+        .overlay-content {
+          // insert content
+          @include insertSimpleLineIcons('\e084'); // icon-cloud-upload
+
+          &:after {
+            content: 'Drop here to upload';
+          }
+
+          // style
+          color: $secondary;
+          background: rgba(200, 200, 200, 0.8);
+        }
+      }
+    }
+
+    // file type mismatch
+    &.dropzone-rejected:not(.dropzone-uploadablefile) {
+      .overlay.overlay-dropzone-active {
+        .overlay-content {
+          // insert content
+          @include insertSimpleLineIcons('\e032'); // icon-picture
+
+          &:after {
+            content: 'Only an image file is allowed';
+          }
+        }
+      }
+    }
+
+    // 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

@@ -98,12 +98,34 @@ export const CodeMirrorEditor = (props: Props): JSX.Element => {
 
   }, [codeMirrorEditor]);
 
-  const { getRootProps, open } = useFileDropzone({ onUpload });
+  const {
+    getRootProps,
+    isDragAccept,
+    isDragReject,
+    open,
+  } = useFileDropzone({ onUpload });
+
+  const dropzoneClassName = useMemo(() => {
+    if (isDragAccept) {
+      return 'dropzone-accepted';
+    }
+    if (isDragReject) {
+      return 'dropzone-regected';
+    }
+    return '';
+  }, [isDragAccept, isDragReject]);
 
   return (
-    <div {...getRootProps()} className="flex-expand-vert">
-      <CodeMirrorEditorContainer ref={containerRef} />
-      <Toolbar onFileOpen={open} />
+    // <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>
+        <CodeMirrorEditorContainer ref={containerRef} />
+        <Toolbar onFileOpen={open} />
+      </div>
     </div>
+
   );
 };