added dropzones for comments and node editors

src/utils/hooks/index.ts

@@ -39,10 +39,12 @@ export const useDelayedReady = (setReady: (val: boolean) => void, delay: number
  * @param onUpload -- upload callback
  * @param allowedTypes -- list of allowed types
  */
-export const useDropZone = (onUpload: (file: File[]) => void, allowedTypes?: string[]) => {
+export const useFileDropZone = (onUpload: (file: File[]) => void, allowedTypes?: string[]) => {
   return useCallback(
     event => {
       event.preventDefault();
+      event.stopPropagation();
+
       const files: File[] = Array.from((event.dataTransfer?.files as File[]) || []).filter(
         (file: File) => file?.type && (!allowedTypes || allowedTypes.includes(file.type))
       );

src/utils/hooks/useDragDetector.tsx

@@ -0,0 +1,50 @@
+import React, { FC, useContext } from 'react';
+import { createContext, useCallback, useEffect, useState } from 'react';
+
+const DragContext = createContext({
+  isDragging: false,
+  setIsDragging: (val: boolean) => {},
+});
+
+export const DragDetectorProvider: FC = ({ children }) => {
+  const [isDragging, setIsDragging] = useState(false);
+
+  return (
+    <DragContext.Provider value={{ isDragging, setIsDragging }}>{children}</DragContext.Provider>
+  );
+};
+
+export const useDragDetector = () => {
+  const { isDragging, setIsDragging } = useContext(DragContext);
+
+  const onStopDragging = useCallback(() => setIsDragging(false), [setIsDragging]);
+
+  useEffect(() => {
+    const addClass = () => setIsDragging(true);
+
+    const removeClass = event => {
+      // Small hack to ignore intersection with child elements
+      if (event.pageX !== 0 && event.pageY !== 0) {
+        return;
+      }
+
+      setIsDragging(false);
+    };
+
+    document.addEventListener('dragenter', addClass);
+    document.addEventListener('dragover', addClass);
+    document.addEventListener('dragleave', removeClass);
+    document.addEventListener('blur', removeClass);
+    document.addEventListener('drop', onStopDragging);
+
+    return () => {
+      document.removeEventListener('dragenter', addClass);
+      document.removeEventListener('dragover', addClass);
+      document.removeEventListener('dragleave', removeClass);
+      document.removeEventListener('blur', removeClass);
+      document.removeEventListener('drop', onStopDragging);
+    };
+  }, [setIsDragging]);
+
+  return { isDragging, onStopDragging };
+};