Typescript conversion of Composer components and more

src/utils/pillify.tsx

@@ -0,0 +1,152 @@
+/*
+Copyright 2019, 2020, 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.
+*/
+
+import React from "react";
+import ReactDOM from 'react-dom';
+import { PushProcessor } from 'matrix-js-sdk/src/pushprocessor';
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+
+import { MatrixClientPeg } from '../MatrixClientPeg';
+import SettingsStore from "../settings/SettingsStore";
+import Pill from "../components/views/elements/Pill";
+import { parseAppLocalLink } from "./permalinks/Permalinks";
+
+/**
+ * Recurses depth-first through a DOM tree, converting matrix.to links
+ * into pills based on the context of a given room.  Returns a list of
+ * the resulting React nodes so they can be unmounted rather than leaking.
+ *
+ * @param {Element[]} nodes - a list of sibling DOM nodes to traverse to try
+ *   to turn into pills.
+ * @param {MatrixEvent} mxEvent - the matrix event which the DOM nodes are
+ *   part of representing.
+ * @param {Element[]} pills: an accumulator of the DOM nodes which contain
+ *   React components which have been mounted as part of this.
+ *   The initial caller should pass in an empty array to seed the accumulator.
+ */
+export function pillifyLinks(nodes: ArrayLike<Element>, mxEvent: MatrixEvent, pills: Element[]) {
+    const room = MatrixClientPeg.get().getRoom(mxEvent.getRoomId());
+    const shouldShowPillAvatar = SettingsStore.getValue("Pill.shouldShowPillAvatar");
+    let node = nodes[0];
+    while (node) {
+        let pillified = false;
+
+        if (node.tagName === "A" && node.getAttribute("href")) {
+            const href = node.getAttribute("href");
+            const parts = parseAppLocalLink(href);
+            // If the link is a (localised) matrix.to link, replace it with a pill
+            // We don't want to pill event permalinks, so those are ignored.
+            if (parts && !parts.eventId) {
+                const pillContainer = document.createElement('span');
+
+                const pill = <Pill
+                    url={href}
+                    inMessage={true}
+                    room={room}
+                    shouldShowPillAvatar={shouldShowPillAvatar}
+                />;
+
+                ReactDOM.render(pill, pillContainer);
+                node.parentNode.replaceChild(pillContainer, node);
+                pills.push(pillContainer);
+                // Pills within pills aren't going to go well, so move on
+                pillified = true;
+
+                // update the current node with one that's now taken its place
+                node = pillContainer;
+            }
+        } else if (
+            node.nodeType === Node.TEXT_NODE &&
+            // as applying pills happens outside of react, make sure we're not doubly
+            // applying @room pills here, as a rerender with the same content won't touch the DOM
+            // to clear the pills from the last run of pillifyLinks
+            !node.parentElement.classList.contains("mx_AtRoomPill")
+        ) {
+            let currentTextNode = node as Node as Text;
+            const roomNotifTextNodes = [];
+
+            // Take a textNode and break it up to make all the instances of @room their
+            // own textNode, adding those nodes to roomNotifTextNodes
+            while (currentTextNode !== null) {
+                const roomNotifPos = Pill.roomNotifPos(currentTextNode.textContent);
+                let nextTextNode = null;
+                if (roomNotifPos > -1) {
+                    let roomTextNode = currentTextNode;
+
+                    if (roomNotifPos > 0) roomTextNode = roomTextNode.splitText(roomNotifPos);
+                    if (roomTextNode.textContent.length > Pill.roomNotifLen()) {
+                        nextTextNode = roomTextNode.splitText(Pill.roomNotifLen());
+                    }
+                    roomNotifTextNodes.push(roomTextNode);
+                }
+                currentTextNode = nextTextNode;
+            }
+
+            if (roomNotifTextNodes.length > 0) {
+                const pushProcessor = new PushProcessor(MatrixClientPeg.get());
+                const atRoomRule = pushProcessor.getPushRuleById(".m.rule.roomnotif");
+                if (atRoomRule && pushProcessor.ruleMatchesEvent(atRoomRule, mxEvent)) {
+                    // Now replace all those nodes with Pills
+                    for (const roomNotifTextNode of roomNotifTextNodes) {
+                        // Set the next node to be processed to the one after the node
+                        // we're adding now, since we've just inserted nodes into the structure
+                        // we're iterating over.
+                        // Note we've checked roomNotifTextNodes.length > 0 so we'll do this at least once
+                        node = roomNotifTextNode.nextSibling;
+
+                        const pillContainer = document.createElement('span');
+                        const pill = <Pill
+                            type={Pill.TYPE_AT_ROOM_MENTION}
+                            inMessage={true}
+                            room={room}
+                            shouldShowPillAvatar={shouldShowPillAvatar}
+                        />;
+
+                        ReactDOM.render(pill, pillContainer);
+                        roomNotifTextNode.parentNode.replaceChild(pillContainer, roomNotifTextNode);
+                        pills.push(pillContainer);
+                    }
+                    // Nothing else to do for a text node (and we don't need to advance
+                    // the loop pointer because we did it above)
+                    continue;
+                }
+            }
+        }
+
+        if (node.childNodes && node.childNodes.length && !pillified) {
+            pillifyLinks(node.childNodes as NodeListOf<Element>, mxEvent, pills);
+        }
+
+        node = node.nextSibling as Element;
+    }
+}
+
+/**
+ * Unmount all the pill containers from React created by pillifyLinks.
+ *
+ * It's critical to call this after pillifyLinks, otherwise
+ * Pills will leak, leaking entire DOM trees via the event
+ * emitter on BaseAvatar as per
+ * https://github.com/vector-im/element-web/issues/12417
+ *
+ * @param {Element[]} pills - array of pill containers whose React
+ *   components should be unmounted.
+ */
+export function unmountPills(pills: Element[]) {
+    for (const pillContainer of pills) {
+        ReactDOM.unmountComponentAtNode(pillContainer);
+    }
+}