Wire up drag-drop file uploads for the thread view

res/css/_components.scss

@@ -10,6 +10,7 @@
 @import "./structures/_ContextualMenu.scss";
 @import "./structures/_CreateRoom.scss";
 @import "./structures/_CustomRoomTagPanel.scss";
+@import "./structures/_FileDropTarget.scss";
 @import "./structures/_FilePanel.scss";
 @import "./structures/_GenericErrorPage.scss";
 @import "./structures/_GroupFilterPanel.scss";
@@ -141,11 +142,11 @@
 @import "./views/elements/_Dropdown.scss";
 @import "./views/elements/_EditableItemList.scss";
 @import "./views/elements/_ErrorBoundary.scss";
-@import "./views/elements/_GenericEventListSummary.scss";
 @import "./views/elements/_EventTilePreview.scss";
 @import "./views/elements/_ExternalLink.scss";
 @import "./views/elements/_FacePile.scss";
 @import "./views/elements/_Field.scss";
+@import "./views/elements/_GenericEventListSummary.scss";
 @import "./views/elements/_ImageView.scss";
 @import "./views/elements/_InfoTooltip.scss";
 @import "./views/elements/_InlineSpinner.scss";
@@ -183,9 +184,9 @@
 @import "./views/messages/_CallEvent.scss";
 @import "./views/messages/_CreateEvent.scss";
 @import "./views/messages/_DateSeparator.scss";
-@import "./views/messages/_JumpToDatePicker.scss";
 @import "./views/messages/_EventTileBubble.scss";
 @import "./views/messages/_HiddenBody.scss";
+@import "./views/messages/_JumpToDatePicker.scss";
 @import "./views/messages/_MEmoteBody.scss";
 @import "./views/messages/_MFileBody.scss";
 @import "./views/messages/_MImageBody.scss";

res/css/structures/_FileDropTarget.scss

@@ -0,0 +1,65 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+@keyframes mx_FileDropTarget_animation {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 0.95;
+    }
+}
+
+.mx_FileDropTarget {
+    min-width: 0;
+    width: 100%;
+    height: 100%;
+
+    font-size: $font-18px;
+    text-align: center;
+
+    pointer-events: none;
+
+    background-color: $background;
+    opacity: 0.95;
+
+    position: absolute;
+    z-index: 3000;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    animation: mx_FileDropTarget_animation;
+    animation-duration: 0.5s;
+}
+
+@keyframes mx_FileDropTarget_image_animation {
+    from {
+        transform: scaleX(0);
+    }
+    to {
+        transform: scaleX(1);
+    }
+}
+
+.mx_FileDropTarget_image {
+    width: 32px;
+    animation: mx_FileDropTarget_image_animation;
+    animation-duration: 0.5s;
+    margin-bottom: 16px;
+}

res/css/structures/_RoomView.scss

@@ -32,56 +32,6 @@ limitations under the License.
     position: relative;
 }
 
-@keyframes mx_RoomView_fileDropTarget_animation {
-    from {
-        opacity: 0;
-    }
-    to {
-        opacity: 0.95;
-    }
-}
-
-.mx_RoomView_fileDropTarget {
-    min-width: 0px;
-    width: 100%;
-    height: 100%;
-
-    font-size: $font-18px;
-    text-align: center;
-
-    pointer-events: none;
-
-    background-color: $background;
-    opacity: 0.95;
-
-    position: absolute;
-    z-index: 3000;
-
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-
-    animation: mx_RoomView_fileDropTarget_animation;
-    animation-duration: 0.5s;
-}
-
-@keyframes mx_RoomView_fileDropTarget_image_animation {
-    from {
-        transform: scaleX(0);
-    }
-    to {
-        transform: scaleX(1);
-    }
-}
-
-.mx_RoomView_fileDropTarget_image {
-    width: 32px;
-    animation: mx_RoomView_fileDropTarget_image_animation;
-    animation-duration: 0.5s;
-    margin-bottom: 16px;
-}
-
 .mx_RoomView_auxPanel {
     min-width: 0px;
     width: 100%;

res/css/views/right_panel/_ThreadPanel.scss

@@ -106,11 +106,18 @@ limitations under the License.
         padding-right: 16px;
     }
 
-    &.mx_ThreadView .mx_AutoHideScrollbar {
+    &.mx_ThreadView .mx_ThreadView_timelinePanelWrapper {
         /* the scrollbar is 8px wide, and we want a 12px gap with the side of the
         panel. Hence the magic number, 8+4=12 */
         width: calc(100% - 4px);
         padding-right: 4px;
+        position: relative;
+        min-height: 0; // don't displace the composer
+        flex-grow: 1;
+
+        .mx_FileDropTarget {
+            border-radius: 8px;
+        }
     }
 
     .mx_RoomView_MessageList {

src/@types/groups.ts

@@ -0,0 +1,59 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+export const CreateEventField = "io.element.migrated_from_community";
+
+export interface IGroupRoom {
+    displayname: string;
+    name?: string;
+    roomId: string;
+    canonicalAlias?: string;
+    avatarUrl?: string;
+    topic?: string;
+    numJoinedMembers?: number;
+    worldReadable?: boolean;
+    guestCanJoin?: boolean;
+    isPublic?: boolean;
+}
+
+/* eslint-disable camelcase */
+export interface IGroupSummary {
+    profile: {
+        avatar_url?: string;
+        is_openly_joinable?: boolean;
+        is_public?: boolean;
+        long_description: string;
+        name: string;
+        short_description: string;
+    };
+    rooms_section: {
+        rooms: unknown[];
+        categories: Record<string, unknown>;
+        total_room_count_estimate: number;
+    };
+    user: {
+        is_privileged: boolean;
+        is_public: boolean;
+        is_publicised: boolean;
+        membership: string;
+    };
+    users_section: {
+        users: unknown[];
+        roles: Record<string, unknown>;
+        total_user_count_estimate: number;
+    };
+}
+/* eslint-enable camelcase */

src/ContentMessages.tsx

@@ -447,7 +447,7 @@ export default class ContentMessages {
     public async sendContentListToRoom(
         files: File[],
         roomId: string,
-        relation: IEventRelation | null,
+        relation: IEventRelation | undefined,
         matrixClient: MatrixClient,
         context = TimelineRenderingType.Room,
     ): Promise<void> {
@@ -566,7 +566,7 @@ export default class ContentMessages {
     private sendContentToRoom(
         file: File,
         roomId: string,
-        relation: IEventRelation,
+        relation: IEventRelation | undefined,
         matrixClient: MatrixClient,
         promBefore: Promise<any>,
     ) {

src/HtmlUtils.tsx

@@ -32,9 +32,9 @@ import { IExtendedSanitizeOptions } from './@types/sanitize-html';
 import SettingsStore from './settings/SettingsStore';
 import { tryTransformPermalinkToLocalHref } from "./utils/permalinks/Permalinks";
 import { getEmojiFromUnicode } from "./emoji";
-import ReplyChain from "./components/views/elements/ReplyChain";
 import { mediaFromMxc } from "./customisations/Media";
 import { ELEMENT_URL_PATTERN, options as linkifyMatrixOptions } from './linkify-matrix';
+import { stripHTMLReply, stripPlainReply } from './utils/Reply';
 
 // Anything outside the basic multilingual plane will be a surrogate pair
 const SURROGATE_PAIR_PATTERN = /([\ud800-\udbff])([\udc00-\udfff])/;
@@ -501,8 +501,8 @@ export function bodyToHtml(content: IContent, highlights: string[], opts: IOpts
         let formattedBody = typeof content.formatted_body === 'string' ? content.formatted_body : null;
         const plainBody = typeof content.body === 'string' ? content.body : "";
 
-        if (opts.stripReplyFallback && formattedBody) formattedBody = ReplyChain.stripHTMLReply(formattedBody);
-        strippedBody = opts.stripReplyFallback ? ReplyChain.stripPlainReply(plainBody) : plainBody;
+        if (opts.stripReplyFallback && formattedBody) formattedBody = stripHTMLReply(formattedBody);
+        strippedBody = opts.stripReplyFallback ? stripPlainReply(plainBody) : plainBody;
 
         bodyHasEmoji = mightContainEmoji(isFormattedBody ? formattedBody : plainBody);
 

src/components/structures/FileDropTarget.tsx

@@ -0,0 +1,120 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, { useEffect, useState } from "react";
+
+import { _t } from "../../languageHandler";
+
+interface IProps {
+    parent: HTMLElement;
+    onFileDrop(dataTransfer: DataTransfer): void;
+}
+
+interface IState {
+    dragging: boolean;
+    counter: number;
+}
+
+const FileDropTarget: React.FC<IProps> = ({ parent, onFileDrop }) => {
+    const [state, setState] = useState<IState>({
+        dragging: false,
+        counter: 0,
+    });
+
+    useEffect(() => {
+        if (!parent || parent.ondrop) return;
+
+        const onDragEnter = (ev: DragEvent) => {
+            ev.stopPropagation();
+            ev.preventDefault();
+
+            setState(state => ({
+                // We always increment the counter no matter the types, because dragging is
+                // still happening. If we didn't, the drag counter would get out of sync.
+                counter: state.counter + 1,
+                // See:
+                // https://docs.w3cub.com/dom/datatransfer/types
+                // https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Recommended_drag_types#file
+                dragging: (
+                    ev.dataTransfer.types.includes("Files") ||
+                    ev.dataTransfer.types.includes("application/x-moz-file")
+                ) ? true : state.dragging,
+            }));
+        };
+
+        const onDragLeave = (ev: DragEvent) => {
+            ev.stopPropagation();
+            ev.preventDefault();
+
+            setState(state => ({
+                counter: state.counter - 1,
+                dragging: state.counter <= 1 ? false : state.dragging,
+            }));
+        };
+
+        const onDragOver = (ev: DragEvent) => {
+            ev.stopPropagation();
+            ev.preventDefault();
+
+            ev.dataTransfer.dropEffect = "none";
+
+            // See:
+            // https://docs.w3cub.com/dom/datatransfer/types
+            // https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Recommended_drag_types#file
+            if (ev.dataTransfer.types.includes("Files") || ev.dataTransfer.types.includes("application/x-moz-file")) {
+                ev.dataTransfer.dropEffect = "copy";
+            }
+        };
+
+        const onDrop = (ev: DragEvent) => {
+            ev.stopPropagation();
+            ev.preventDefault();
+            onFileDrop(ev.dataTransfer);
+
+            setState(state => ({
+                dragging: false,
+                counter: state.counter - 1,
+            }));
+        };
+
+        parent.addEventListener("drop", onDrop);
+        parent.addEventListener("dragover", onDragOver);
+        parent.addEventListener("dragenter", onDragEnter);
+        parent.addEventListener("dragleave", onDragLeave);
+
+        return () => {
+            // disconnect the D&D event listeners from the room view. This
+            // is really just for hygiene - we're going to be
+            // deleted anyway, so it doesn't matter if the event listeners
+            // don't get cleaned up.
+            parent.removeEventListener("drop", onDrop);
+            parent.removeEventListener("dragover", onDragOver);
+            parent.removeEventListener("dragenter", onDragEnter);
+            parent.removeEventListener("dragleave", onDragLeave);
+        };
+    }, [parent, onFileDrop]);
+
+    if (state.dragging) {
+        return <div className="mx_FileDropTarget">
+            <img src={require("../../../res/img/upload-big.svg")} className="mx_FileDropTarget_image" alt="" />
+            { _t("Drop file here to upload") }
+        </div>;
+    }
+
+    return null;
+};
+
+export default FileDropTarget;