Upgrade v3.108.0

.eslintrc.js

@@ -142,6 +142,7 @@ module.exports = {
                             "!matrix-js-sdk/src/models/read-receipt",
                             "!matrix-js-sdk/src/models/relations-container",
                             "!matrix-js-sdk/src/models/related-relations",
+                            "!matrix-js-sdk/src/matrixrtc",
                         ],
                         message: "Please use matrix-js-sdk/src/matrix instead",
                     },

.github/workflows/playwright-image-updates.yaml

@@ -9,14 +9,14 @@ jobs:
         steps:
             - uses: actions/checkout@v4
 
-            - name: Update matrixdotorg/synapse image
+            - name: Update synapse image
               run: |
                   docker pull "$IMAGE"
                   INSPECT=$(docker inspect --format='{{index .RepoDigests 0}}' "$IMAGE")
                   DIGEST=${INSPECT#*@}
                   sed -i "s/const DOCKER_TAG.*/const DOCKER_TAG = \"develop@$DIGEST\";/" playwright/plugins/homeserver/synapse/index.ts
               env:
-                  IMAGE: matrixdotorg/synapse:develop
+                  IMAGE: ghcr.io/element-hq/synapse:develop
 
             - name: Create Pull Request
               id: cpr

.github/workflows/static_analysis.yaml

@@ -36,7 +36,7 @@ jobs:
             - name: Switch js-sdk to release mode
               working-directory: node_modules/matrix-js-sdk
               run: |
-                  scripts/switch_package_to_release.js
+                  scripts/switch_package_to_release.cjs
                   yarn install
                   yarn run build:compile
                   yarn run build:types

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged --concurrent false

.lintstagedrc

@@ -0,0 +1,5 @@
+{
+    "*": "prettier --write",
+    "*.(ts|tsx|js|jsx)": ["eslint --fix"],
+    "*.pcss": ["stylelint"]
+}

CHANGELOG.md

@@ -1,3 +1,70 @@
+Changes in [3.108.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.108.0) (2024-08-27)
+=======================================================================================================
+## ✨ Features
+
+* Message Pinning: rework the message pinning list in the right panel ([#12825](https://github.com/matrix-org/matrix-react-sdk/pull/12825)). Contributed by @florianduros.
+* Tweak UIA postMessage check to work cross-origin ([#12878](https://github.com/matrix-org/matrix-react-sdk/pull/12878)). Contributed by @t3chguy.
+* Delayed events (Futures) / MSC4140 for call widget ([#12714](https://github.com/matrix-org/matrix-react-sdk/pull/12714)). Contributed by @AndrewFerr.
+* Stop the ongoing ring if another device joins the call session. ([#12866](https://github.com/matrix-org/matrix-react-sdk/pull/12866)). Contributed by @toger5.
+* Rich text Editor: Auto-replace plain text emoticons with emoji ([#12828](https://github.com/matrix-org/matrix-react-sdk/pull/12828)). Contributed by @langleyd.
+* Clean up editor drafts for unknown rooms  ([#12850](https://github.com/matrix-org/matrix-react-sdk/pull/12850)). Contributed by @langleyd.
+* Rename general user settings to account ([#12841](https://github.com/matrix-org/matrix-react-sdk/pull/12841)). Contributed by @dbkr.
+* Update settings tab icons ([#12867](https://github.com/matrix-org/matrix-react-sdk/pull/12867)). Contributed by @dbkr.
+* Disable jump to read receipt button instead of hiding when nothing to jump to ([#12863](https://github.com/matrix-org/matrix-react-sdk/pull/12863)). Contributed by @t3chguy.
+
+## 🐛 Bug Fixes
+
+* Ensure elements on Login page are disabled when in-flight ([#12895](https://github.com/matrix-org/matrix-react-sdk/pull/12895)). Contributed by @t3chguy.
+* Hide pinned messages when grouped in timeline when feature pinning is disabled ([#12888](https://github.com/matrix-org/matrix-react-sdk/pull/12888)). Contributed by @florianduros.
+* Add chat button on new room header for maximised widgets ([#12882](https://github.com/matrix-org/matrix-react-sdk/pull/12882)). Contributed by @t3chguy.
+* Show spinner whilst initial search request is in progress ([#12883](https://github.com/matrix-org/matrix-react-sdk/pull/12883)). Contributed by @t3chguy.
+* Fix user menu font ([#12879](https://github.com/matrix-org/matrix-react-sdk/pull/12879)). Contributed by @florianduros.
+* Allow selecting text in the right panel topic ([#12870](https://github.com/matrix-org/matrix-react-sdk/pull/12870)). Contributed by @t3chguy.
+* Add missing presence indicator to new room header ([#12865](https://github.com/matrix-org/matrix-react-sdk/pull/12865)). Contributed by @t3chguy.
+
+
+Changes in [3.107.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.107.0) (2024-08-20)
+=======================================================================================================
+* No changes
+
+
+Changes in [3.106.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.106.0) (2024-08-13)
+=======================================================================================================
+## ✨ Features
+
+* Invite dialog: display MXID on its own line ([#11756](https://github.com/matrix-org/matrix-react-sdk/pull/11756)). Contributed by @AndrewFerr.
+* Align RoomSummaryCard styles with Figma ([#12793](https://github.com/matrix-org/matrix-react-sdk/pull/12793)). Contributed by @t3chguy.
+* Extract Extensions into their own right panel tab ([#12844](https://github.com/matrix-org/matrix-react-sdk/pull/12844)). Contributed by @t3chguy.
+* Remove topic from new room header and expand right panel topic ([#12842](https://github.com/matrix-org/matrix-react-sdk/pull/12842)). Contributed by @t3chguy.
+* Rework how the onboarding notifications task works ([#12839](https://github.com/matrix-org/matrix-react-sdk/pull/12839)). Contributed by @t3chguy.
+* Update toast styles to match Figma ([#12833](https://github.com/matrix-org/matrix-react-sdk/pull/12833)). Contributed by @t3chguy.
+* Warn users on unsupported browsers before they lack features ([#12830](https://github.com/matrix-org/matrix-react-sdk/pull/12830)). Contributed by @t3chguy.
+* Add sign out button to settings profile section ([#12666](https://github.com/matrix-org/matrix-react-sdk/pull/12666)). Contributed by @dbkr.
+* Remove MatrixRTC realted import ES lint exceptions using a index.ts for matrixrtc ([#12780](https://github.com/matrix-org/matrix-react-sdk/pull/12780)). Contributed by @toger5.
+* Fix unwanted ringing of other devices even though the user is already connected to the call. ([#12742](https://github.com/matrix-org/matrix-react-sdk/pull/12742)). Contributed by @toger5.
+* Acknowledge `DeviceMute` widget actions ([#12790](https://github.com/matrix-org/matrix-react-sdk/pull/12790)). Contributed by @toger5.
+
+## 🐛 Bug Fixes
+
+* Fix formatting of rich text emotes ([#12862](https://github.com/matrix-org/matrix-react-sdk/pull/12862)). Contributed by @dbkr.
+* Fixed custom emotes background color #27745 ([#12798](https://github.com/matrix-org/matrix-react-sdk/pull/12798)). Contributed by @asimdelvi.
+* Ignore permalink\_prefix when serializing pills ([#11726](https://github.com/matrix-org/matrix-react-sdk/pull/11726)). Contributed by @herkulessi.
+* Deflake the chat export test ([#12854](https://github.com/matrix-org/matrix-react-sdk/pull/12854)). Contributed by @dbkr.
+* Fix alignment of RTL messages ([#12837](https://github.com/matrix-org/matrix-react-sdk/pull/12837)). Contributed by @dbkr.
+* Handle media download errors better ([#12848](https://github.com/matrix-org/matrix-react-sdk/pull/12848)). Contributed by @t3chguy.
+* Make micIcon display on primary ([#11908](https://github.com/matrix-org/matrix-react-sdk/pull/11908)). Contributed by @kdanielm.
+* Fix compound typography font component issues ([#12826](https://github.com/matrix-org/matrix-react-sdk/pull/12826)). Contributed by @t3chguy.
+* Allow Chrome page translator to translate messages in rooms ([#11113](https://github.com/matrix-org/matrix-react-sdk/pull/11113)). Contributed by @lukaszpolowczyk.
+
+
+Changes in [3.105.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.105.1) (2024-08-06)
+=======================================================================================================
+Fixes for CVE-2024-42347 / GHSA-f83w-wqhc-cfp4
+
+Changes in [3.105.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.105.0) (2024-08-06)
+=======================================================================================================
+Fixes for CVE-2024-42347 / GHSA-f83w-wqhc-cfp4
+
 Changes in [3.104.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.104.0) (2024-07-30)
 =======================================================================================================
 ## ✨ Features

babel.config.js

@@ -10,15 +10,15 @@ module.exports = {
                     "last 2 Safari versions",
                     "last 2 Edge versions",
                 ],
+                include: ["@babel/plugin-transform-class-properties"],
             },
         ],
-        "@babel/preset-typescript",
+        ["@babel/preset-typescript", { allowDeclareFields: true }],
         "@babel/preset-react",
     ],
     plugins: [
         "@babel/plugin-proposal-export-default-from",
         "@babel/plugin-transform-numeric-separator",
-        "@babel/plugin-transform-class-properties",
         "@babel/plugin-transform-object-rest-spread",
         "@babel/plugin-syntax-dynamic-import",
         "@babel/plugin-transform-runtime",

docs/playwright.md

@@ -29,7 +29,7 @@ need to have Docker installed and working in order to run the Playwright tests.
 There are a few different ways to run the tests yourself. The simplest is to run:
 
 ```shell
-docker pull matrixdotorg/synapse:develop
+docker pull ghcr.io/element-hq/synapse:develop
 yarn run test:playwright
 ```
 

package.json

@@ -1,7 +1,7 @@
 {
     "name": "matrix-react-sdk",
     "version": "0.0.0",
-    "version-matrix": "3.104.0",
+    "version-matrix": "3.108.0",
     "description": "SDK for matrix.org using React for Tchap",
     "author": "DINUM",
     "repository": {
@@ -70,32 +70,36 @@
         "oidc-client-ts": "3.0.1",
         "jwt-decode": "4.0.0",
         "@floating-ui/react": "0.26.11",
-        "@radix-ui/react-id": "1.1.0"
+        "@radix-ui/react-id": "1.1.0",
+        "caniuse-lite": "1.0.30001643",
+        "electron-to-chromium": "1.5.2"
     },
     "dependencies": {
         "@babel/runtime": "^7.12.5",
         "@matrix-org/analytics-events": "^0.24.0",
         "@matrix-org/emojibase-bindings": "^1.1.2",
-        "@matrix-org/matrix-wysiwyg": "2.37.4",
+        "@matrix-org/matrix-wysiwyg": "2.37.8",
         "@matrix-org/olm": "3.2.15",
         "@matrix-org/react-sdk-module-api": "^2.4.0",
         "@matrix-org/spec": "^1.7.0",
         "@sentry/browser": "^8.0.0",
         "@testing-library/react-hooks": "^8.0.1",
-        "@vector-im/compound-design-tokens": "^1.6.1",
-        "@vector-im/compound-web": "^5.4.0",
+        "@vector-im/compound-design-tokens": "^1.8.0",
+        "@vector-im/compound-web": "^5.5.0",
         "@zxcvbn-ts/core": "^3.0.4",
         "@zxcvbn-ts/language-common": "^3.0.4",
         "@zxcvbn-ts/language-en": "^3.0.2",
         "await-lock": "^2.1.0",
         "bloom-filters": "^3.0.1",
         "blurhash": "^2.0.3",
+        "browserslist": "^4.23.2",
         "classnames": "^2.2.6",
         "commonmark": "^0.31.0",
         "counterpart": "^0.18.6",
         "css-tree": "^2.3.1",
         "diff-dom": "^5.0.0",
         "diff-match-patch": "^1.0.5",
+        "electron-to-chromium": "^1.5.2",
         "emojibase-regex": "15.3.2",
         "escape-html": "^1.0.3",
         "file-saver": "^2.0.5",
@@ -116,15 +120,15 @@
         "maplibre-gl": "^2.0.0",
         "matrix-encrypt-attachment": "^1.0.3",
         "matrix-events-sdk": "0.0.1",
-        "matrix-js-sdk": "34.2.0",
-        "matrix-widget-api": "^1.5.0",
+        "matrix-js-sdk": "34.4.0",
+        "matrix-widget-api": "^1.8.2",
         "memoize-one": "^6.0.0",
         "minimist": "^1.2.5",
         "oidc-client-ts": "^3.0.1",
         "opus-recorder": "^8.0.3",
         "pako": "^2.0.3",
         "png-chunks-extract": "^1.0.0",
-        "posthog-js": "1.145.0",
+        "posthog-js": "1.149.1",
         "qrcode": "1.5.3",
         "re-resizable": "^6.9.0",
         "react": "17.0.2",
@@ -199,7 +203,7 @@
         "@typescript-eslint/parser": "^7.0.0",
         "axe-core": "4.9.1",
         "babel-jest": "^29.0.0",
-        "blob-polyfill": "^7.0.0",
+        "blob-polyfill": "^9.0.0",
         "eslint": "8.57.0",
         "eslint-config-google": "^0.14.0",
         "eslint-config-prettier": "^9.0.0",
@@ -216,26 +220,28 @@
         "fetch-mock-jest": "^1.5.1",
         "fs-extra": "^11.0.0",
         "glob": "^11.0.0",
+        "husky": "^8.0.3",
         "jest": "^29.6.2",
         "jest-canvas-mock": "^2.5.2",
         "jest-environment-jsdom": "^29.6.2",
         "jest-mock": "^29.6.2",
         "jest-raw-loader": "^1.0.1",
         "jsqr": "^1.4.0",
+        "lint-staged": "^15.0.2",
         "mailhog": "^4.16.0",
         "matrix-web-i18n": "^3.2.1",
         "mocha-junit-reporter": "^2.2.0",
         "node-fetch": "2",
         "playwright-core": "^1.45.1",
         "postcss-scss": "^4.0.4",
-        "prettier": "3.3.2",
+        "prettier": "3.3.3",
         "raw-loader": "^4.0.2",
         "rimraf": "^6.0.0",
         "stylelint": "^16.1.0",
         "stylelint-config-standard": "^36.0.0",
         "stylelint-scss": "^6.0.0",
         "ts-node": "^10.9.1",
-        "typescript": "5.5.3",
+        "typescript": "5.5.4",
         "web-streams-polyfill": "^4.0.0"
     },
     "peerDependencies": {

playwright.config.ts

@@ -37,7 +37,7 @@ export default defineConfig({
     },
     testDir: "playwright/e2e",
     outputDir: "playwright/test-results",
-    workers: process.env.CI ? "50%" : 1,
+    workers: 1,
     retries: process.env.CI ? 2 : 0,
     reporter: process.env.CI ? [["blob"], ["github"]] : [["html", { outputFolder: "playwright/html-report" }]],
     snapshotDir: "playwright/snapshots",

playwright/Dockerfile

@@ -1,4 +1,4 @@
-FROM mcr.microsoft.com/playwright:v1.45.1-jammy
+FROM mcr.microsoft.com/playwright:v1.45.3-jammy
 
 WORKDIR /work/matrix-react-sdk
 VOLUME ["/work/element-web/node_modules"]

playwright/e2e/app-loading/feature-detection.spec.ts

@@ -21,9 +21,9 @@ test(`shows error page if browser lacks Intl support`, async ({ page }) => {
     await page.goto("/");
 
     // Lack of Intl support causes the app bundle to fail to load, so we get the iframed
-    // static error page and need to explicitly look in the iframe becuse Playwright doesn't
+    // static error page and need to explicitly look in the iframe because Playwright doesn't
     // recurse into iframes when looking for elements
-    const header = await page.frameLocator("iframe").getByText("Unsupported browser");
+    const header = page.frameLocator("iframe").getByText("Unsupported browser");
     await expect(header).toBeVisible();
 
     await expect(page).toMatchScreenshot("unsupported-browser.png");
@@ -34,8 +34,8 @@ test(`shows error page if browser lacks WebAssembly support`, async ({ page }) =
     await page.goto("/");
 
     // Lack of WebAssembly support doesn't cause the bundle to fail loading, so we get
-    // CompatibilityView, ie. no iframes.
-    const header = await page.getByText("Unsupported browser");
+    // CompatibilityView, i.e. no iframes.
+    const header = page.getByText("Element does not support this browser");
     await expect(header).toBeVisible();
 
     await expect(page).toMatchScreenshot("unsupported-browser-CompatibilityView.png");

playwright/e2e/chat-export/html-export.spec.ts

@@ -98,6 +98,10 @@ test.describe("HTML Export", () => {
     });
 
     test("should export html successfully and match screenshot", async ({ page, app, room }) => {
+        // Set a fixed time rather than masking off the line with the time in it: we don't need to worry
+        // about the width changing and we can actually test this line looks correct.
+        page.clock.setSystemTime(new Date("2024-01-01T00:00:00Z"));
+
         // Send a bunch of messages to populate the room
         for (let i = 1; i < 10; i++) {
             await app.client.sendMessage(room.roomId, { body: `Testing ${i}`, msgtype: "m.text" });
@@ -123,7 +127,6 @@ test.describe("HTML Export", () => {
         await page.goto(`file://${dirPath}/${Object.keys(zip.files)[0]}/messages.html`);
         await expect(page).toMatchScreenshot("html-export.png", {
             mask: [
-                page.getByText("This is the start of export", { exact: false }),
                 // We need to mask the whole thing because the width of the time part changes
                 page.locator(".mx_TimelineSeparator"),
                 page.locator(".mx_MessageTimestamp"),

playwright/e2e/create-room/create-room.spec.ts

@@ -38,6 +38,5 @@ test.describe("Create Room", () => {
         await expect(page).toHaveURL(/\/#\/room\/#test-room-1:localhost/);
         const header = page.locator(".mx_RoomHeader");
         await expect(header).toContainText(name);
-        await expect(header).toContainText(topic);
     });
 });

playwright/e2e/file-upload/image-upload.spec.ts

@@ -40,6 +40,6 @@ test.describe("Image Upload", () => {
 
         await expect(page.getByRole("button", { name: "Upload" })).toBeEnabled();
         await expect(page.getByRole("button", { name: "Close dialog" })).toBeEnabled();
-        await expect(page).toMatchScreenshot("image-upload-preview.png");
+        await expect(page.locator(".mx_Dialog")).toMatchScreenshot("image-upload-preview.png");
     });
 });

playwright/e2e/integration-manager/utils.ts

@@ -19,8 +19,6 @@ import type { ElementAppPage } from "../../pages/ElementAppPage";
 export async function openIntegrationManager(app: ElementAppPage) {
     const { page } = app;
     await app.toggleRoomInfoPanel();
-    await page
-        .locator(".mx_RoomSummaryCard_appsGroup")
-        .getByRole("button", { name: "Add widgets, bridges & bots" })
-        .click();
+    await page.getByRole("tab", { name: "Extensions" }).click();
+    await page.getByRole("button", { name: "Add extensions" }).click();
 }