added dropzones for comments and node editors

src/components/upload/UploadDropzone/index.tsx

@@ -0,0 +1,48 @@
+import React, { FC, useCallback } from 'react';
+import Dropzone from 'react-dropzone';
+import classnames from 'classnames';
+import classNames from 'classnames';
+import styles from './styles.module.scss';
+import { DivProps } from '~/utils/types';
+import { DropHereIcon } from '~/components/input/DropHereIcon';
+import { useDragDetector } from '~/utils/hooks/useDragDetector';
+
+interface IProps extends DivProps {
+  onUpload: (files: File[]) => void;
+  helperClassName?: string;
+}
+
+const UploadDropzone: FC<IProps> = ({ children, onUpload, helperClassName, ...rest }) => {
+  const { isDragging: isDraggingOnBody, onStopDragging } = useDragDetector();
+  const onDrop = useCallback(
+    (files: File[]) => {
+      onStopDragging();
+      onUpload(files);
+    },
+    [onUpload]
+  );
+
+  return (
+    <Dropzone onDrop={onDrop}>
+      {({ getRootProps, isDragActive }) => (
+        <div
+          {...getRootProps({
+            ...rest,
+            className: classnames(styles.zone),
+          })}
+        >
+          {children}
+          <div
+            className={classNames(styles.helper, helperClassName, {
+              [styles.active]: isDragActive || isDraggingOnBody,
+            })}
+          >
+            <DropHereIcon className={styles.icon} />
+          </div>
+        </div>
+      )}
+    </Dropzone>
+  );
+};
+
+export { UploadDropzone };

src/components/upload/UploadDropzone/styles.module.scss

@@ -0,0 +1,34 @@
+@import '~/styles/variables';
+
+.zone {
+  position: relative;
+  z-index: 1;
+  outline: none;
+}
+
+.helper {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: transparentize($wisegreen, 0.7);
+  border-radius: $radius;
+  z-index: 10;
+  box-shadow: inset $wisegreen 0 0 0 2px;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+  touch-action: none;
+
+  &.active, :global(.dragging) & {
+    display: flex;
+  }
+}
+
+svg.icon {
+  width: auto;
+  height: 72px;
+  fill: $wisegreen;
+}