added dropzones for comments and node editors

src/components/editors/AudioEditor/index.tsx

@@ -12,12 +12,13 @@ import { useNodeImages } from '~/utils/hooks/node/useNodeImages';
 import { useNodeAudios } from '~/utils/hooks/node/useNodeAudios';
 import { useNodeFormContext } from '~/utils/hooks/useNodeFormFormik';
 import { useFileUploaderContext } from '~/utils/hooks/useFileUploader';
+import { UploadDropzone } from '~/components/upload/UploadDropzone';
 
 type IProps = NodeEditorProps;
 
 const AudioEditor: FC<IProps> = () => {
   const { values } = useNodeFormContext();
-  const { pending, setFiles } = useFileUploaderContext()!;
+  const { pending, setFiles, uploadFiles } = useFileUploaderContext()!;
 
   const images = useNodeImages(values);
   const audios = useNodeAudios(values);
@@ -35,10 +36,12 @@ const AudioEditor: FC<IProps> = () => {
   const setAudios = useCallback(values => setFiles([...values, ...images]), [setFiles, images]);
 
   return (
-    <div className={styles.wrap}>
-      <ImageGrid files={images} setFiles={setImages} locked={pendingImages} />
-      <AudioGrid files={audios} setFiles={setAudios} locked={pendingAudios} />
-    </div>
+    <UploadDropzone onUpload={uploadFiles} helperClassName={styles.dropzone}>
+      <div className={styles.wrap}>
+        <ImageGrid files={images} setFiles={setImages} locked={pendingImages} />
+        <AudioGrid files={audios} setFiles={setAudios} locked={pendingAudios} />
+      </div>
+    </UploadDropzone>
   );
 };
 

src/components/editors/EditorActionsPanel/styles.module.scss

@@ -11,9 +11,13 @@
   z-index: 10;
   display: flex;
   flex-direction: row;
+  pointer-events: none;
+  touch-action: none;
 
   & > * {
     margin: 0 $gap / 2;
+    pointer-events: all;
+    touch-action: auto;
 
     &:first-child {
       margin-left: 0;

src/components/editors/EditorFiller/index.tsx

@@ -1,9 +1,10 @@
 import React, { FC } from 'react';
 import { Filler } from '~/components/containers/Filler';
 import { IEditorComponentProps } from '~/redux/node/types';
+import styles from './styles.module.scss';
 
 type IProps = IEditorComponentProps & {};
 
-const EditorFiller: FC<IProps> = () => <Filler />;
+const EditorFiller: FC<IProps> = () => <Filler className={styles.filler} />;
 
 export { EditorFiller };

src/components/editors/EditorFiller/styles.module.scss

@@ -0,0 +1,4 @@
+.filler {
+  touch-action: none;
+  pointer-events: none;
+}

src/components/editors/ImageEditor/index.tsx

@@ -1,22 +1,21 @@
-import React, { FC, useMemo, useCallback } from 'react';
-import { connect } from 'react-redux';
-import { INode, IFile } from '~/redux/types';
-import * as UPLOAD_ACTIONS from '~/redux/uploads/actions';
-import { selectUploads } from '~/redux/uploads/selectors';
+import React, { FC } from 'react';
 import { ImageGrid } from '~/components/editors/ImageGrid';
 import styles from './styles.module.scss';
 import { NodeEditorProps } from '~/redux/node/types';
 import { useFileUploaderContext } from '~/utils/hooks/useFileUploader';
+import { UploadDropzone } from '~/components/upload/UploadDropzone';
 
 type IProps = NodeEditorProps;
 
 const ImageEditor: FC<IProps> = () => {
-  const { pending, files, setFiles } = useFileUploaderContext()!;
+  const { pending, files, setFiles, uploadFiles } = useFileUploaderContext()!;
 
   return (
-    <div className={styles.wrap}>
-      <ImageGrid files={files} setFiles={setFiles} locked={pending} />
-    </div>
+    <UploadDropzone onUpload={uploadFiles} helperClassName={styles.dropzone}>
+      <div className={styles.wrap}>
+        <ImageGrid files={files} setFiles={setFiles} locked={pending} />
+      </div>
+    </UploadDropzone>
   );
 };
 

src/components/editors/ImageEditor/styles.module.scss

@@ -1,6 +1,9 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
 
 .wrap {
   min-height: 200px;
   padding-bottom: $upload_button_height + $gap;
 }
+
+div.dropzone {
+}