v1.11.43

This solves problems wherein the javascript debugger would get confused and
show the execution point two lines away from the source.

.editorconfig

@@ -12,7 +12,6 @@
 #   See the License for the specific language governing permissions and
 #   limitations under the License.
 
-
 root = true
 
 [*]

CHANGELOG.md

@@ -1,3 +1,76 @@
+Changes in [1.11.43](https://github.com/vector-im/element-web/releases/tag/v1.11.43) (2023-09-15)
+=================================================================================================
+
+(No changes - bumping the version number for an element-desktop release.)
+
+Changes in [1.11.42](https://github.com/vector-im/element-web/releases/tag/v1.11.42) (2023-09-13)
+=================================================================================================
+
+## 🐛 Bug Fixes
+ * Update Compound to fix Firefox-specific avatar regression ([\#11604](https://github.com/matrix-org/matrix-react-sdk/pull/11604)). Fixes #26155.
+
+Changes in [1.11.41](https://github.com/vector-im/element-web/releases/tag/v1.11.41) (2023-09-12)
+=================================================================================================
+
+## 🦖 Deprecations
+ * Deprecate customisations in favour of Module API ([\#25736](https://github.com/vector-im/element-web/pull/25736)). Fixes #25733.
+
+## ✨ Features
+ * Make SVGR icons use forward ref ([\#26082](https://github.com/vector-im/element-web/pull/26082)).
+ * Add support for rendering a custom wrapper around Element ([\#25537](https://github.com/vector-im/element-web/pull/25537)). Contributed by @maheichyk.
+ * Allow creating public knock rooms ([\#11481](https://github.com/matrix-org/matrix-react-sdk/pull/11481)). Contributed by @charlynguyen.
+ * Render custom images in reactions according to MSC4027 ([\#11087](https://github.com/matrix-org/matrix-react-sdk/pull/11087)). Contributed by @sumnerevans.
+ * Introduce room knocks bar ([\#11475](https://github.com/matrix-org/matrix-react-sdk/pull/11475)). Contributed by @charlynguyen.
+ * Room header UI updates ([\#11507](https://github.com/matrix-org/matrix-react-sdk/pull/11507)). Fixes #25892.
+ * Remove green "verified" bar for encrypted events ([\#11496](https://github.com/matrix-org/matrix-react-sdk/pull/11496)).
+ * Update member count on room summary update ([\#11488](https://github.com/matrix-org/matrix-react-sdk/pull/11488)).
+ * Support for E2EE in Element Call  ([\#11492](https://github.com/matrix-org/matrix-react-sdk/pull/11492)).
+ * Allow requesting to join knock rooms via spotlight ([\#11482](https://github.com/matrix-org/matrix-react-sdk/pull/11482)). Contributed by @charlynguyen.
+ * Lock out the first tab if Element is opened in a second tab. ([\#11425](https://github.com/matrix-org/matrix-react-sdk/pull/11425)). Fixes #25157.
+ * Change avatar to use Compound implementation ([\#11448](https://github.com/matrix-org/matrix-react-sdk/pull/11448)).
+
+## 🐛 Bug Fixes
+ * Fix vertical alignment of default avatar font ([\#11582](https://github.com/matrix-org/matrix-react-sdk/pull/11582)). Fixes #26081.
+ * Fix avatars in public room & space search being flex shrunk ([\#11580](https://github.com/matrix-org/matrix-react-sdk/pull/11580)). Fixes #26133.
+ * Fix EventTile avatars being rendered with a size of 0 instead of hidden ([\#11558](https://github.com/matrix-org/matrix-react-sdk/pull/11558)). Fixes #26075.
+ * Fix compound external assets path in bundle ([\#26069](https://github.com/vector-im/element-web/pull/26069)).
+ * Use RoomStateEvent.Update for knocks ([\#11516](https://github.com/matrix-org/matrix-react-sdk/pull/11516)). Contributed by @charlynguyen.
+ * Prevent event propagation when clicking icon buttons ([\#11515](https://github.com/matrix-org/matrix-react-sdk/pull/11515)).
+ * Only display RoomKnocksBar when feature flag is enabled ([\#11513](https://github.com/matrix-org/matrix-react-sdk/pull/11513)). Contributed by @andybalaam.
+ * Fix avatars of knock members for people tab of room settings ([\#11506](https://github.com/matrix-org/matrix-react-sdk/pull/11506)). Fixes #26083. Contributed by @charlynguyen.
+ * Fixes read receipt avatar offset ([\#11483](https://github.com/matrix-org/matrix-react-sdk/pull/11483)). Fixes #26067, #26064 #26059 and #26061.
+ * Fix avatar defects ([\#11473](https://github.com/matrix-org/matrix-react-sdk/pull/11473)). Fixes #26051 and #26046.
+ * Fix consistent avatar output for Percy ([\#11472](https://github.com/matrix-org/matrix-react-sdk/pull/11472)). Fixes #26049 and #26052.
+ * Fix colour of avatar and colour matching with username ([\#11470](https://github.com/matrix-org/matrix-react-sdk/pull/11470)). Fixes #26042.
+ * Fix incompatibility of Soft Logout with Element-R ([\#11468](https://github.com/matrix-org/matrix-react-sdk/pull/11468)).
+ * Fix instances of double translation and guard translation calls using typescript ([\#11443](https://github.com/matrix-org/matrix-react-sdk/pull/11443)).
+
+Changes in [1.11.40](https://github.com/vector-im/element-web/releases/tag/v1.11.40) (2023-08-29)
+=================================================================================================
+
+## ✨ Features
+ * Hide account deactivation for externally managed accounts ([\#11445](https://github.com/matrix-org/matrix-react-sdk/pull/11445)). Fixes #26022. Contributed by @kerryarchibald.
+ * OIDC: Redirect to delegated auth provider when signing out ([\#11432](https://github.com/matrix-org/matrix-react-sdk/pull/11432)). Fixes #26000. Contributed by @kerryarchibald.
+ * Disable 3pid fields in settings when `m.3pid_changes` capability is disabled ([\#11430](https://github.com/matrix-org/matrix-react-sdk/pull/11430)). Fixes #25995. Contributed by @kerryarchibald.
+ * OIDC: disable multi session signout for OIDC-aware servers in session manager ([\#11431](https://github.com/matrix-org/matrix-react-sdk/pull/11431)). Contributed by @kerryarchibald.
+ * Implement updated open dialog method of the Module API ([\#11395](https://github.com/matrix-org/matrix-react-sdk/pull/11395)). Contributed by @dhenneke.
+ * Polish & delabs `Exploring public spaces` feature ([\#11423](https://github.com/matrix-org/matrix-react-sdk/pull/11423)).
+ * Treat lists with a single empty item as plain text, not Markdown. ([\#6833](https://github.com/matrix-org/matrix-react-sdk/pull/6833)). Fixes vector-im/element-meta#1265.
+ * Allow managing room knocks ([\#11404](https://github.com/matrix-org/matrix-react-sdk/pull/11404)). Contributed by @charlynguyen.
+ * Pin the action buttons to the bottom of the scrollable dialogs ([\#11407](https://github.com/matrix-org/matrix-react-sdk/pull/11407)). Contributed by @dhenneke.
+ * Support Matrix 1.1 (drop legacy r0 versions) ([\#9819](https://github.com/matrix-org/matrix-react-sdk/pull/9819)).
+
+## 🐛 Bug Fixes
+ * Fix path separator for Windows based systems ([\#25997](https://github.com/vector-im/element-web/pull/25997)).
+ * Fix instances of double translation and guard translation calls using typescript ([\#11443](https://github.com/matrix-org/matrix-react-sdk/pull/11443)).
+ * Fix export type "Current timeline" to match its behaviour to its name ([\#11426](https://github.com/matrix-org/matrix-react-sdk/pull/11426)). Fixes #25988.
+ * Fix Room Settings > Notifications file upload input being shown superfluously ([\#11415](https://github.com/matrix-org/matrix-react-sdk/pull/11415)). Fixes #18392.
+ * Simplify registration with email validation ([\#11398](https://github.com/matrix-org/matrix-react-sdk/pull/11398)). Fixes #25832 #23601 and #22297.
+ * correct home server URL ([\#11391](https://github.com/matrix-org/matrix-react-sdk/pull/11391)). Fixes #25931. Contributed by @NSV1991.
+ * Include non-matching DMs in Spotlight recent conversations when the DM's userId is part of the search API results ([\#11374](https://github.com/matrix-org/matrix-react-sdk/pull/11374)). Contributed by @mgcm.
+ * Fix useRoomMembers missing updates causing incorrect membership counts ([\#11392](https://github.com/matrix-org/matrix-react-sdk/pull/11392)). Fixes #17096.
+ * Show error when searching public rooms fails ([\#11378](https://github.com/matrix-org/matrix-react-sdk/pull/11378)).
+
 Changes in [1.11.39](https://github.com/vector-im/element-web/releases/tag/v1.11.39) (2023-08-15)
 =================================================================================================
 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "element-web",
-    "version": "1.11.39",
+    "version": "1.11.43",
     "description": "A feature-rich client for Matrix.org",
     "author": "New Vector Ltd.",
     "repository": {
@@ -70,12 +70,12 @@
     },
     "dependencies": {
         "@matrix-org/olm": "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.14.tgz",
-        "@matrix-org/react-sdk-module-api": "^2.0.0",
+        "@matrix-org/react-sdk-module-api": "^2.1.0",
         "gfm.css": "^1.1.2",
         "jsrsasign": "^10.5.25",
         "katex": "^0.16.0",
-        "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#develop",
-        "matrix-react-sdk": "github:matrix-org/matrix-react-sdk#develop",
+        "matrix-js-sdk": "28.1.0",
+        "matrix-react-sdk": "3.80.1",
         "matrix-widget-api": "^1.3.1",
         "react": "17.0.2",
         "react-dom": "17.0.2",

src/i18n/strings/sq.json

@@ -27,5 +27,6 @@
     "Use %(brand)s on mobile": "Përdor %(brand)s në celular",
     "Decentralised, encrypted chat & collaboration powered by $matrixLogo": "Fjalosje & bashkëpunim i decentralizuar, i fshehtëzuar, bazuar në $matrixLogo",
     "%(brand)s Desktop: %(platformName)s": "%(brand)s për Desktop: %(platformName)s",
-    "%(appName)s: %(browserName)s on %(osName)s": "%(appName)s: %(browserName)s në %(osName)s"
+    "%(appName)s: %(browserName)s on %(osName)s": "%(appName)s: %(browserName)s në %(osName)s",
+    "Invalid configuration: a default_hs_url can't be specified along with default_server_name or default_server_config": "Formësim i pavlefshëm: një default_hs_url s’mund të jepet tok me default_server_name, apo default_server_config"
 }

src/vector/app.tsx

@@ -33,6 +33,8 @@ import { createClient } from "matrix-js-sdk/src/matrix";
 import { SnakedObject } from "matrix-react-sdk/src/utils/SnakedObject";
 import MatrixChat from "matrix-react-sdk/src/components/structures/MatrixChat";
 import { ValidatedServerConfig } from "matrix-react-sdk/src/utils/ValidatedServerConfig";
+import { WrapperLifecycle, WrapperOpts } from "@matrix-org/react-sdk-module-api/lib/lifecycles/WrapperLifecycle";
+import { ModuleRunner } from "matrix-react-sdk/src/modules/ModuleRunner";
 
 import { parseQs } from "./url_utils";
 import VectorBasePlatform from "./platform/VectorBasePlatform";
@@ -109,17 +111,22 @@ export async function loadApp(fragParams: {}): Promise<ReactElement> {
 
     const initialScreenAfterLogin = getInitialScreenAfterLogin(window.location);
 
+    const wrapperOpts: WrapperOpts = { Wrapper: React.Fragment };
+    ModuleRunner.instance.invoke(WrapperLifecycle.Wrapper, wrapperOpts);
+
     return (
-        <MatrixChat
-            onNewScreen={onNewScreen}
-            config={config}
-            realQueryParams={params}
-            startingFragmentQueryParams={fragParams}
-            enableGuest={!config.disable_guests}
-            onTokenLoginCompleted={onTokenLoginCompleted}
-            initialScreenAfterLogin={initialScreenAfterLogin}
-            defaultDeviceDisplayName={defaultDeviceName}
-        />
+        <wrapperOpts.Wrapper>
+            <MatrixChat
+                onNewScreen={onNewScreen}
+                config={config}
+                realQueryParams={params}
+                startingFragmentQueryParams={fragParams}
+                enableGuest={!config.disable_guests}
+                onTokenLoginCompleted={onTokenLoginCompleted}
+                initialScreenAfterLogin={initialScreenAfterLogin}
+                defaultDeviceDisplayName={defaultDeviceName}
+            />
+        </wrapperOpts.Wrapper>
     );
 }
 

src/vector/index.html

@@ -61,7 +61,16 @@
   <body style="height: 100%; margin: 0;">
     <noscript>Sorry, Element requires JavaScript to be enabled.</noscript> <!-- TODO: Translate this? -->
     <section id="matrixchat" style="height: 100%;" class="notranslate"></section>
-    <script src="<%= htmlWebpackPlugin.files.js.find(entry => entry.includes("bundle.js")) %>"></script>
+
+<%
+    // insert <script> tags for the JS entry points
+    for (let file of htmlWebpackPlugin.files.js) {
+        if (file.includes("bundle.js") || file.includes("unhomoglyph_data")) {
+%>    <script src="<%= file %>"></script>
+<%
+        }
+    }
+%>
 
     <!-- Legacy supporting Prefetch images -->
     <img src="<%= require('matrix-react-sdk/res/img/warning.svg').default %>" aria-hidden alt="" width="24" height="23" style="visibility: hidden; position: absolute; top: 0px; left: 0px;"/>

test/app-tests/loading-test.tsx

@@ -34,7 +34,7 @@ import { ActionPayload } from "matrix-react-sdk/src/dispatcher/payloads";
 import "../jest-mocks";
 import WebPlatform from "../../src/vector/platform/WebPlatform";
 import { parseQs, parseQsFromFragment } from "../../src/vector/url_utils";
-import { cleanLocalstorage, deleteIndexedDB } from "../test-utils";
+import { cleanLocalstorage, deleteIndexedDB, waitForLoadingSpinner, waitForWelcomeComponent } from "../test-utils";
 
 const DEFAULT_HS_URL = "http://my_server";
 const DEFAULT_IS_URL = "http://my_is";
@@ -189,7 +189,7 @@ describe("loading:", function () {
                 .then(async () => {
                     // at this point, we're trying to do a guest registration;
                     // we expect a spinner
-                    await assertAtLoadingSpinner();
+                    await waitForLoadingSpinner();
 
                     httpBackend
                         .when("POST", "/register")
@@ -202,7 +202,7 @@ describe("loading:", function () {
                 })
                 .then(() => {
                     // Wait for another trip around the event loop for the UI to update
-                    return awaitWelcomeComponent(matrixChat);
+                    return waitForWelcomeComponent(matrixChat);
                 })
                 .then(() => {
                     return waitFor(() => expect(windowLocation?.hash).toEqual("#/welcome"));
@@ -222,7 +222,7 @@ describe("loading:", function () {
                 .then(async () => {
                     // at this point, we're trying to do a guest registration;
                     // we expect a spinner
-                    await assertAtLoadingSpinner();
+                    await waitForLoadingSpinner();
 
                     httpBackend
                         .when("POST", "/register")
@@ -391,7 +391,7 @@ describe("loading:", function () {
                 .then(async () => {
                     // at this point, we're trying to do a guest registration;
                     // we expect a spinner
-                    await assertAtLoadingSpinner();
+                    await waitForLoadingSpinner();
 
                     httpBackend
                         .when("POST", "/register")
@@ -427,7 +427,7 @@ describe("loading:", function () {
                 .then(async () => {
                     // at this point, we're trying to do a guest registration;
                     // we expect a spinner
-                    await assertAtLoadingSpinner();
+                    await waitForLoadingSpinner();
 
                     httpBackend
                         .when("POST", "/register")
@@ -468,7 +468,7 @@ describe("loading:", function () {
                 .then(async () => {
                     // at this point, we're trying to do a guest registration;
                     // we expect a spinner
-                    await assertAtLoadingSpinner();
+                    await waitForLoadingSpinner();
 
                     httpBackend
                         .when("POST", "/register")
@@ -562,7 +562,7 @@ describe("loading:", function () {
             return sleep(1)
                 .then(async () => {
                     // we expect a spinner while we're logging in
-                    await assertAtLoadingSpinner();
+                    await waitForLoadingSpinner();
 
                     httpBackend
                         .when("POST", "/login")
@@ -650,11 +650,6 @@ describe("loading:", function () {
     }
 });
 
-// assert that we are on the loading page
-async function assertAtLoadingSpinner(): Promise<void> {
-    await screen.findByRole("progressbar");
-}
-
 async function awaitLoggedIn(matrixChat: RenderResult): Promise<void> {
     if (matrixChat.container.querySelector(".mx_MatrixChat_wrapper")) return; // already logged in
 
@@ -680,10 +675,6 @@ async function awaitLoginComponent(matrixChat?: RenderResult): Promise<void> {
     await waitFor(() => matrixChat?.container.querySelector(".mx_AuthPage"));
 }
 
-async function awaitWelcomeComponent(matrixChat?: RenderResult): Promise<void> {
-    await waitFor(() => matrixChat?.container.querySelector(".mx_Welcome"));
-}
-
 function moveFromWelcomeToLogin(matrixChat?: RenderResult): Promise<void> {
     dis.dispatch({ action: "start_login" });
     return awaitLoginComponent(matrixChat);

test/app-tests/wrapper-test.tsx

@@ -0,0 +1,87 @@
+/*
+Copyright 2023 Mikhail Aheichyk
+Copyright 2023 Nordeck IT + Consulting GmbH.
+
+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 SdkConfig from "matrix-react-sdk/src/SdkConfig";
+import PlatformPeg from "matrix-react-sdk/src/PlatformPeg";
+import fetchMock from "fetch-mock-jest";
+import { render, RenderResult, screen } from "@testing-library/react";
+import { ModuleRunner } from "matrix-react-sdk/src/modules/ModuleRunner";
+import { WrapperLifecycle, WrapperOpts } from "@matrix-org/react-sdk-module-api/lib/lifecycles/WrapperLifecycle";
+
+import WebPlatform from "../../src/vector/platform/WebPlatform";
+import { loadApp } from "../../src/vector/app";
+import { waitForLoadingSpinner, waitForWelcomeComponent } from "../test-utils";
+
+fetchMock.config.overwriteRoutes = true;
+
+describe("Wrapper", () => {
+    beforeEach(async () => {
+        SdkConfig.reset();
+        PlatformPeg.set(new WebPlatform());
+        fetchMock.get("https://matrix-client.matrix.org/_matrix/client/versions", {
+            unstable_features: {},
+            versions: ["v1.1"],
+        });
+        fetchMock.get("https://matrix.org/.well-known/matrix/client", {
+            "m.homeserver": {
+                base_url: "https://matrix-client.matrix.org",
+            },
+        });
+        fetchMock.get("/version", "1.10.13");
+    });
+
+    it("wrap a matrix chat with header and footer", async () => {
+        SdkConfig.put({
+            default_server_config: {
+                "m.homeserver": {
+                    base_url: "https://matrix-client.matrix.org",
+                },
+            },
+        });
+
+        jest.spyOn(ModuleRunner.instance, "invoke").mockImplementation((lifecycleEvent, opts) => {
+            if (lifecycleEvent === WrapperLifecycle.Wrapper) {
+                (opts as WrapperOpts).Wrapper = ({ children }) => {
+                    return (
+                        <>
+                            <div data-testid="wrapper-header">Header</div>
+                            <div data-testid="wrapper-matrix-chat">{children}</div>
+                            <div data-testid="wrapper-footer">Footer</div>
+                        </>
+                    );
+                };
+            }
+        });
+
+        const matrixChatResult: RenderResult = render(await loadApp({}));
+
+        // at this point, we're trying to do a guest registration;
+        // we expect a spinner
+        await waitForLoadingSpinner();
+
+        await waitForWelcomeComponent(matrixChatResult);
+
+        // Are not semantic elements because Element has a footer already.
+        const header = screen.getByTestId("wrapper-header");
+        const matrixChat = screen.getByTestId("wrapper-matrix-chat");
+        const footer = screen.getByTestId("wrapper-footer");
+
+        expect(header.nextSibling).toBe(matrixChat);
+        expect(matrixChat.nextSibling).toBe(footer);
+    });
+});

test/test-utils.ts

@@ -14,6 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import { RenderResult, screen, waitFor } from "@testing-library/react";
+
 export function cleanLocalstorage(): void {
     window.localStorage.clear();
 }
@@ -47,3 +49,12 @@ export function deleteIndexedDB(dbName: string): Promise<void> {
         throw e;
     });
 }
+
+// wait for loading page
+export async function waitForLoadingSpinner(): Promise<void> {
+    await screen.findByRole("progressbar");
+}
+
+export async function waitForWelcomeComponent(matrixChat?: RenderResult): Promise<void> {
+    await waitFor(() => matrixChat?.container.querySelector(".mx_Welcome"));
+}

webpack.config.js

@@ -171,6 +171,17 @@ module.exports = (env, argv) => {
                         enforce: true,
                         // Do not add `chunks: 'all'` here because you'll break the app entry point.
                     },
+
+                    // put the unhomoglyph data in its own file. It contains
+                    // magic characters which mess up line numbers in the
+                    // javascript debugger.
+                    unhomoglyph_data: {
+                        name: "unhomoglyph_data",
+                        test: /unhomoglyph\/data\.json$/,
+                        enforce: true,
+                        chunks: "all",
+                    },
+
                     default: {
                         reuseExistingChunk: true,
                     },
@@ -524,6 +535,12 @@ module.exports = (env, argv) => {
                                         removeDimensions: true,
                                     },
                                 },
+                                /**
+                                 * Forwards the React ref to the root SVG element
+                                 * Useful when using things like `asChild` in
+                                 * radix-ui
+                                 */
+                                ref: true,
                                 esModule: false,
                                 name: "[name].[hash:7].[ext]",
                                 outputPath: getAssetOutputPath,
@@ -733,6 +750,7 @@ function getAssetOutputPath(url, resourcePath) {
     // `res` is the parent dir for our own assets in various layers
     // `dist` is the parent dir for KaTeX assets
     const prefix = /^.*[/\\](dist|res)[/\\]/;
+
     /**
      * Only needed for https://github.com/vector-im/element-web/pull/15939
      * If keeping this, we are not able to load external assets such as SVG
@@ -742,6 +760,21 @@ function getAssetOutputPath(url, resourcePath) {
         throw new Error(`Unexpected asset path: ${resourcePath}`);
     }
     let outputDir = path.dirname(resourcePath).replace(prefix, "");
+
+    /**
+     * Imports from Compound are "absolute", we need to strip out the prefix
+     * coming before the npm package name.
+     *
+     * This logic is scoped to compound packages for now as they are the only
+     * package that imports external assets. This might need to be made more
+     * generic in the future
+     */
+    const compoundImportsPrefix = /@vector-im(?:\\|\/)compound-(.*?)(?:\\|\/)/;
+    const compoundMatch = outputDir.match(compoundImportsPrefix);
+    if (compoundMatch) {
+        outputDir = outputDir.substring(compoundMatch.index + compoundMatch[0].length);
+    }
+
     if (isKaTeX) {
         // Add a clearly named directory segment, rather than leaving the KaTeX
         // assets loose in each asset type directory.