fix: Drag and drop images in editor, conflict with sidebar react-dnd (#1918)

* fix: Drag and drop images in editor, conflict with sidebar react-dnd
see: https://github.com/react-dnd/react-dnd/pull/3052

* Bump to non-canary

* Upgrade react-dnd

* react-dnd api changes

* lint

* fix: dnd doesn't work on first render

* remove unneccessary async

* chore: Update react-dnd (API changed again)

* restore fade

app/components/Sidebar/Main.js

@@ -12,6 +12,8 @@ import {
   SettingsIcon,
 } from "outline-icons";
 import * as React from "react";
+import { DndProvider } from "react-dnd";
+import { HTML5Backend } from "react-dnd-html5-backend";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
 import CollectionNew from "scenes/CollectionNew";
@@ -63,126 +65,142 @@ function MainSidebar() {
     setInviteModalOpen(false);
   }, []);
 
+  const [dndArea, setDndArea] = React.useState();
+  const handleSidebarRef = React.useCallback((node) => setDndArea(node), []);
+  const html5Options = React.useMemo(() => ({ rootElement: dndArea }), [
+    dndArea,
+  ]);
+
   const { user, team } = auth;
   if (!user || !team) return null;
 
   const can = policies.abilities(team.id);
 
   return (
-    <Sidebar>
-      <AccountMenu>
-        {(props) => (
-          <TeamButton
-            {...props}
-            subheading={user.name}
-            teamName={team.name}
-            logoUrl={team.avatarUrl}
-            showDisclosure
-          />
-        )}
-      </AccountMenu>
-      <Scrollable flex topShadow>
-        <Section>
-          <SidebarLink
-            to="/home"
-            icon={<HomeIcon color="currentColor" />}
-            exact={false}
-            label={t("Home")}
-          />
-          <SidebarLink
-            to={{
-              pathname: "/search",
-              state: { fromMenu: true },
-            }}
-            icon={<SearchIcon color="currentColor" />}
-            label={t("Search")}
-            exact={false}
-          />
-          <SidebarLink
-            to="/starred"
-            icon={<StarredIcon color="currentColor" />}
-            exact={false}
-            label={t("Starred")}
-          />
-          <SidebarLink
-            to="/templates"
-            icon={<ShapesIcon color="currentColor" />}
-            exact={false}
-            label={t("Templates")}
-            active={documents.active ? documents.active.template : undefined}
-          />
-          <SidebarLink
-            to="/drafts"
-            icon={<EditIcon color="currentColor" />}
-            label={
-              <Drafts align="center">
-                {t("Drafts")}
-                <Bubble count={documents.totalDrafts} />
-              </Drafts>
-            }
-            active={
-              documents.active
-                ? !documents.active.publishedAt &&
-                  !documents.active.isDeleted &&
-                  !documents.active.isTemplate
-                : undefined
-            }
-          />
-        </Section>
-        <Section auto>
-          <Collections onCreateCollection={handleCreateCollectionModalOpen} />
-        </Section>
-        <Section>
-          <SidebarLink
-            to="/archive"
-            icon={<ArchiveIcon color="currentColor" />}
-            exact={false}
-            label={t("Archive")}
-            active={
-              documents.active
-                ? documents.active.isArchived && !documents.active.isDeleted
-                : undefined
-            }
-          />
-          <SidebarLink
-            to="/trash"
-            icon={<TrashIcon color="currentColor" />}
-            exact={false}
-            label={t("Trash")}
-            active={documents.active ? documents.active.isDeleted : undefined}
-          />
-          <SidebarLink
-            to="/settings"
-            icon={<SettingsIcon color="currentColor" />}
-            exact={false}
-            label={t("Settings")}
-          />
+    <Sidebar ref={handleSidebarRef}>
+      {dndArea && (
+        <DndProvider backend={HTML5Backend} options={html5Options}>
+          <AccountMenu>
+            {(props) => (
+              <TeamButton
+                {...props}
+                subheading={user.name}
+                teamName={team.name}
+                logoUrl={team.avatarUrl}
+                showDisclosure
+              />
+            )}
+          </AccountMenu>
+          <Scrollable flex topShadow>
+            <Section>
+              <SidebarLink
+                to="/home"
+                icon={<HomeIcon color="currentColor" />}
+                exact={false}
+                label={t("Home")}
+              />
+              <SidebarLink
+                to={{
+                  pathname: "/search",
+                  state: { fromMenu: true },
+                }}
+                icon={<SearchIcon color="currentColor" />}
+                label={t("Search")}
+                exact={false}
+              />
+              <SidebarLink
+                to="/starred"
+                icon={<StarredIcon color="currentColor" />}
+                exact={false}
+                label={t("Starred")}
+              />
+              <SidebarLink
+                to="/templates"
+                icon={<ShapesIcon color="currentColor" />}
+                exact={false}
+                label={t("Templates")}
+                active={
+                  documents.active ? documents.active.template : undefined
+                }
+              />
+              <SidebarLink
+                to="/drafts"
+                icon={<EditIcon color="currentColor" />}
+                label={
+                  <Drafts align="center">
+                    {t("Drafts")}
+                    <Bubble count={documents.totalDrafts} />
+                  </Drafts>
+                }
+                active={
+                  documents.active
+                    ? !documents.active.publishedAt &&
+                      !documents.active.isDeleted &&
+                      !documents.active.isTemplate
+                    : undefined
+                }
+              />
+            </Section>
+            <Section auto>
+              <Collections
+                onCreateCollection={handleCreateCollectionModalOpen}
+              />
+            </Section>
+            <Section>
+              <SidebarLink
+                to="/archive"
+                icon={<ArchiveIcon color="currentColor" />}
+                exact={false}
+                label={t("Archive")}
+                active={
+                  documents.active
+                    ? documents.active.isArchived && !documents.active.isDeleted
+                    : undefined
+                }
+              />
+              <SidebarLink
+                to="/trash"
+                icon={<TrashIcon color="currentColor" />}
+                exact={false}
+                label={t("Trash")}
+                active={
+                  documents.active ? documents.active.isDeleted : undefined
+                }
+              />
+              <SidebarLink
+                to="/settings"
+                icon={<SettingsIcon color="currentColor" />}
+                exact={false}
+                label={t("Settings")}
+              />
+              {can.invite && (
+                <SidebarLink
+                  to="/settings/people"
+                  onClick={handleInviteModalOpen}
+                  icon={<PlusIcon color="currentColor" />}
+                  label={`${t("Invite people")}…`}
+                />
+              )}
+            </Section>
+          </Scrollable>
           {can.invite && (
-            <SidebarLink
-              to="/settings/people"
-              onClick={handleInviteModalOpen}
-              icon={<PlusIcon color="currentColor" />}
-              label={`${t("Invite people")}…`}
-            />
+            <Modal
+              title={t("Invite people")}
+              onRequestClose={handleInviteModalClose}
+              isOpen={inviteModalOpen}
+            >
+              <Invite onSubmit={handleInviteModalClose} />
+            </Modal>
           )}
-        </Section>
-      </Scrollable>
-      {can.invite && (
-        <Modal
-          title={t("Invite people")}
-          onRequestClose={handleInviteModalClose}
-          isOpen={inviteModalOpen}
-        >
-          <Invite onSubmit={handleInviteModalClose} />
-        </Modal>
+          <Modal
+            title={t("Create a collection")}
+            onRequestClose={handleCreateCollectionModalClose}
+            isOpen={createCollectionModalOpen}
+          >
+            <CollectionNew onSubmit={handleCreateCollectionModalClose} />
+          </Modal>
+        </DndProvider>
       )}
-      <Modal
-        title={t("Create a collection")}
-        onRequestClose={handleCreateCollectionModalClose}
-        isOpen={createCollectionModalOpen}
-      >
-        <CollectionNew onSubmit={handleCreateCollectionModalClose} />
-      </Modal>
     </Sidebar>
   );
 }

app/components/Sidebar/Sidebar.js

@@ -13,153 +13,145 @@ import Toggle, { ToggleButton, Positioner } from "./components/Toggle";
 import usePrevious from "hooks/usePrevious";
 import useStores from "hooks/useStores";
 
-let firstRender = true;
 let ANIMATION_MS = 250;
+let isFirstRender = true;
 
-type Props = {
+type Props = {|
   children: React.Node,
-};
+|};
 
-function Sidebar({ children }: Props) {
-  const [isCollapsing, setCollapsing] = React.useState(false);
-  const theme = useTheme();
-  const { t } = useTranslation();
-  const { ui } = useStores();
-  const location = useLocation();
-  const previousLocation = usePrevious(location);
+const Sidebar = React.forwardRef<Props, HTMLButtonElement>(
+  ({ children }: Props, ref) => {
+    const [isCollapsing, setCollapsing] = React.useState(false);
+    const theme = useTheme();
+    const { t } = useTranslation();
+    const { ui } = useStores();
+    const location = useLocation();
+    const previousLocation = usePrevious(location);
 
-  const width = ui.sidebarWidth;
-  const collapsed = ui.isEditing || ui.sidebarCollapsed;
-  const maxWidth = theme.sidebarMaxWidth;
-  const minWidth = theme.sidebarMinWidth + 16; // padding
-  const setWidth = ui.setSidebarWidth;
+    const width = ui.sidebarWidth;
+    const collapsed = ui.isEditing || ui.sidebarCollapsed;
+    const maxWidth = theme.sidebarMaxWidth;
+    const minWidth = theme.sidebarMinWidth + 16; // padding
+    const setWidth = ui.setSidebarWidth;
 
-  const [offset, setOffset] = React.useState(0);
-  const [isAnimating, setAnimating] = React.useState(false);
-  const [isResizing, setResizing] = React.useState(false);
-  const isSmallerThanMinimum = width < minWidth;
+    const [offset, setOffset] = React.useState(0);
+    const [isAnimating, setAnimating] = React.useState(false);
+    const [isResizing, setResizing] = React.useState(false);
+    const isSmallerThanMinimum = width < minWidth;
 
-  const handleDrag = React.useCallback(
-    (event: MouseEvent) => {
-      // suppresses text selection
-      event.preventDefault();
+    const handleDrag = React.useCallback(
+      (event: MouseEvent) => {
+        // suppresses text selection
+        event.preventDefault();
 
-      // this is simple because the sidebar is always against the left edge
-      const width = Math.min(event.pageX - offset, maxWidth);
-      const isSmallerThanCollapsePoint = width < minWidth / 2;
-
-      if (isSmallerThanCollapsePoint) {
-        setWidth(theme.sidebarCollapsedWidth);
-      } else {
-        setWidth(width);
-      }
-    },
-    [theme, offset, minWidth, maxWidth, setWidth]
-  );
-
-  const handleStopDrag = React.useCallback(
-    (event: MouseEvent) => {
-      setResizing(false);
-
-      if (document.activeElement) {
-        document.activeElement.blur();
-      }
-
-      if (isSmallerThanMinimum) {
+        // this is simple because the sidebar is always against the left edge
+        const width = Math.min(event.pageX - offset, maxWidth);
         const isSmallerThanCollapsePoint = width < minWidth / 2;
 
         if (isSmallerThanCollapsePoint) {
-          setAnimating(false);
-          setCollapsing(true);
-          ui.collapseSidebar();
+          setWidth(theme.sidebarCollapsedWidth);
         } else {
-          setWidth(minWidth);
-          setAnimating(true);
+          setWidth(width);
         }
-      } else {
-        setWidth(width);
+      },
+      [theme, offset, minWidth, maxWidth, setWidth]
+    );
+
+    const handleStopDrag = React.useCallback(
+      (event: MouseEvent) => {
+        setResizing(false);
+
+        if (document.activeElement) {
+          document.activeElement.blur();
+        }
+
+        if (isSmallerThanMinimum) {
+          const isSmallerThanCollapsePoint = width < minWidth / 2;
+
+          if (isSmallerThanCollapsePoint) {
+            setAnimating(false);
+            setCollapsing(true);
+            ui.collapseSidebar();
+          } else {
+            setWidth(minWidth);
+            setAnimating(true);
+          }
+        } else {
+          setWidth(width);
+        }
+      },
+      [ui, isSmallerThanMinimum, minWidth, width, setWidth]
+    );
+
+    const handleMouseDown = React.useCallback(
+      (event: MouseEvent) => {
+        setOffset(event.pageX - width);
+        setResizing(true);
+        setAnimating(false);
+      },
+      [width]
+    );
+
+    React.useEffect(() => {
+      if (isAnimating) {
+        setTimeout(() => setAnimating(false), ANIMATION_MS);
       }
-    },
-    [ui, isSmallerThanMinimum, minWidth, width, setWidth]
-  );
+    }, [isAnimating]);
 
-  const handleMouseDown = React.useCallback(
-    (event: MouseEvent) => {
-      setOffset(event.pageX - width);
-      setResizing(true);
-      setAnimating(false);
-    },
-    [width]
-  );
+    React.useEffect(() => {
+      if (isCollapsing) {
+        setTimeout(() => {
+          setWidth(minWidth);
+          setCollapsing(false);
+        }, ANIMATION_MS);
+      }
+    }, [setWidth, minWidth, isCollapsing]);
 
-  React.useEffect(() => {
-    if (isAnimating) {
-      setTimeout(() => setAnimating(false), ANIMATION_MS);
-    }
-  }, [isAnimating]);
+    React.useEffect(() => {
+      if (isResizing) {
+        document.addEventListener("mousemove", handleDrag);
+        document.addEventListener("mouseup", handleStopDrag);
+      }
 
-  React.useEffect(() => {
-    if (isCollapsing) {
-      setTimeout(() => {
-        setWidth(minWidth);
-        setCollapsing(false);
-      }, ANIMATION_MS);
-    }
-  }, [setWidth, minWidth, isCollapsing]);
+      return () => {
+        document.removeEventListener("mousemove", handleDrag);
+        document.removeEventListener("mouseup", handleStopDrag);
+      };
+    }, [isResizing, handleDrag, handleStopDrag]);
 
-  React.useEffect(() => {
-    if (isResizing) {
-      document.addEventListener("mousemove", handleDrag);
-      document.addEventListener("mouseup", handleStopDrag);
-    }
+    const handleReset = React.useCallback(() => {
+      ui.setSidebarWidth(theme.sidebarWidth);
+    }, [ui, theme.sidebarWidth]);
 
-    return () => {
-      document.removeEventListener("mousemove", handleDrag);
-      document.removeEventListener("mouseup", handleStopDrag);
-    };
-  }, [isResizing, handleDrag, handleStopDrag]);
+    React.useEffect(() => {
+      ui.setSidebarResizing(isResizing);
+    }, [ui, isResizing]);
 
-  const handleReset = React.useCallback(() => {
-    ui.setSidebarWidth(theme.sidebarWidth);
-  }, [ui, theme.sidebarWidth]);
+    React.useEffect(() => {
+      if (location !== previousLocation) {
+        isFirstRender = false;
+        ui.hideMobileSidebar();
+      }
+    }, [ui, location, previousLocation]);
 
-  React.useEffect(() => {
-    ui.setSidebarResizing(isResizing);
-  }, [ui, isResizing]);
+    const style = React.useMemo(
+      () => ({
+        width: `${width}px`,
+      }),
+      [width]
+    );
 
-  React.useEffect(() => {
-    if (location !== previousLocation) {
-      ui.hideMobileSidebar();
-    }
-  }, [ui, location, previousLocation]);
+    const toggleStyle = React.useMemo(
+      () => ({
+        right: "auto",
+        marginLeft: `${collapsed ? theme.sidebarCollapsedWidth : width}px`,
+      }),
+      [width, theme.sidebarCollapsedWidth, collapsed]
+    );
 
-  const style = React.useMemo(
-    () => ({
-      width: `${width}px`,
-    }),
-    [width]
-  );
-
-  const toggleStyle = React.useMemo(
-    () => ({
-      right: "auto",
-      marginLeft: `${collapsed ? theme.sidebarCollapsedWidth : width}px`,
-    }),
-    [width, theme.sidebarCollapsedWidth, collapsed]
-  );
-
-  const content = (
-    <>
-      <Container
-        style={style}
-        $sidebarWidth={ui.sidebarWidth}
-        $isCollapsing={isCollapsing}
-        $isAnimating={isAnimating}
-        $isSmallerThanMinimum={isSmallerThanMinimum}
-        $mobileSidebarVisible={ui.mobileSidebarVisible}
-        $collapsed={collapsed}
-        column
-      >
+    const content = (
+      <>
         {ui.mobileSidebarVisible && (
           <Portal>
             <Fade>
@@ -180,26 +172,36 @@ function Sidebar({ children }: Props) {
             aria-label={t("Expand")}
           />
         )}
-      </Container>
-      {!ui.isEditing && (
-        <Toggle
-          style={toggleStyle}
-          onClick={ui.toggleCollapsedSidebar}
-          direction={ui.sidebarCollapsed ? "right" : "left"}
-          aria-label={ui.sidebarCollapsed ? t("Expand") : t("Collapse")}
-        />
-      )}
-    </>
-  );
+      </>
+    );
 
-  // Fade in the sidebar on first render after page load
-  if (firstRender) {
-    firstRender = false;
-    return <Fade>{content}</Fade>;
+    return (
+      <>
+        <Container
+          ref={ref}
+          style={style}
+          $sidebarWidth={ui.sidebarWidth}
+          $isCollapsing={isCollapsing}
+          $isAnimating={isAnimating}
+          $isSmallerThanMinimum={isSmallerThanMinimum}
+          $mobileSidebarVisible={ui.mobileSidebarVisible}
+          $collapsed={collapsed}
+          column
+        >
+          {isFirstRender ? <Fade>{content}</Fade> : content}
+        </Container>
+        {!ui.isEditing && (
+          <Toggle
+            style={toggleStyle}
+            onClick={ui.toggleCollapsedSidebar}
+            direction={ui.sidebarCollapsed ? "right" : "left"}
+            aria-label={ui.sidebarCollapsed ? t("Expand") : t("Collapse")}
+          />
+        )}
+      </>
+    );
   }
-
-  return content;
-}
+);
 
 const Background = styled.a`
   position: fixed;

app/components/Sidebar/components/Collections.js

@@ -35,7 +35,7 @@ class Collections extends React.Component<Props> {
   componentDidMount() {
     const { collections } = this.props;
 
-    if (!collections.isFetching && !collections.isLoaded) {
+    if (!collections.isLoaded) {
       collections.fetchPage({ limit: 100 });
     }
   }

app/components/Sidebar/components/DocumentLink.js

@@ -123,7 +123,8 @@ function DocumentLink({
 
   // Draggable
   const [{ isDragging }, drag] = useDrag({
-    item: { type: "document", ...node, depth, active: isActiveDocument },
+    type: "document",
+    item: () => ({ ...node, depth, active: isActiveDocument }),
     collect: (monitor) => ({
       isDragging: !!monitor.isDragging(),
     }),
@@ -146,7 +147,7 @@ function DocumentLink({
   // Drop to re-parent
   const [{ isOverReparent, canDropToReparent }, dropToReparent] = useDrop({
     accept: "document",
-    drop: async (item, monitor) => {
+    drop: (item, monitor) => {
       if (monitor.didDrop()) return;
       if (!collection) return;
       documents.move(item.id, collection.id, node.id);
@@ -183,7 +184,7 @@ function DocumentLink({
   // Drop to reorder
   const [{ isOverReorder }, dropToReorder] = useDrop({
     accept: "document",
-    drop: async (item, monitor) => {
+    drop: (item, monitor) => {
       if (!collection) return;
       if (item.id === node.id) return;