Merge branch 'dev' into fix-read-receipts

.npmrc

@@ -1,3 +1,2 @@
 legacy-peer-deps=true
-save-exact=true
-@matrix-org:registry=https://gitlab.matrix.org/api/v4/projects/27/packages/npm/
+save-exact=true

contrib/nginx/cinny.domain.tld.conf

@@ -24,6 +24,7 @@ server {
     rewrite ^/manifest.json$ /manifest.json break;
 
     rewrite ^.*/olm.wasm$ /olm.wasm break;
+    rewrite ^/sw.js$ /sw.js break;
     rewrite ^/pdf.worker.min.js$ /pdf.worker.min.js break;
 
     rewrite ^/public/(.*)$ /public/$1 break;

docker-nginx.conf

@@ -9,6 +9,7 @@ server {
     rewrite ^/manifest.json$ /manifest.json break;
 
     rewrite ^.*/olm.wasm$ /olm.wasm break;
+    rewrite ^/sw.js$ /sw.js break;
     rewrite ^/pdf.worker.min.js$ /pdf.worker.min.js break;
 
     rewrite ^/public/(.*)$ /public/$1 break;

netlify.toml

@@ -7,7 +7,12 @@
   from = "/manifest.json"
   to = "/manifest.json"
   status = 200
-
+
+[[redirects]]
+  from = "/sw.js"
+  to = "/sw.js"
+  status = 200
+
 [[redirects]]
   from = "*/olm.wasm"
   to = "/olm.wasm"

package.json

@@ -24,7 +24,7 @@
     "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "1.3.0",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "1.0.3",
     "@fontsource/inter": "4.5.14",
-    "@matrix-org/olm": "3.2.14",
+    "@matrix-org/olm": "3.2.15",
     "@tanstack/react-query": "5.24.1",
     "@tanstack/react-query-devtools": "5.24.1",
     "@tanstack/react-virtual": "3.2.0",
@@ -56,7 +56,7 @@
     "jotai": "2.6.0",
     "linkify-react": "4.1.3",
     "linkifyjs": "4.1.3",
-    "matrix-js-sdk": "29.1.0",
+    "matrix-js-sdk": "34.4.0",
     "millify": "6.1.0",
     "pdfjs-dist": "4.2.67",
     "prismjs": "1.29.0",
@@ -90,6 +90,7 @@
     "@types/react-dom": "18.2.17",
     "@types/react-google-recaptcha": "2.1.8",
     "@types/sanitize-html": "2.9.0",
+    "@types/serviceworker": "0.0.95",
     "@types/ua-parser-js": "0.7.36",
     "@typescript-eslint/eslint-plugin": "5.46.1",
     "@typescript-eslint/parser": "5.46.1",
@@ -106,6 +107,7 @@
     "sass": "1.56.2",
     "typescript": "4.9.4",
     "vite": "5.0.13",
+    "vite-plugin-pwa": "0.20.5",
     "vite-plugin-static-copy": "1.0.4",
     "vite-plugin-top-level-await": "1.4.1"
   }

src/app/components/editor/Elements.tsx

@@ -13,6 +13,8 @@ import { CommandElement, EmoticonElement, LinkElement, MentionElement } from './
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { getBeginCommand } from './utils';
 import { BlockType } from './types';
+import { mxcUrlToHttp } from '../../utils/matrix';
+import { useSpecVersions } from '../../hooks/useSpecVersions';
 
 // Put this at the start and end of an inline component to work around this Chromium bug:
 // https://bugs.chromium.org/p/chromium/issues/detail?id=1249405
@@ -76,6 +78,8 @@ function RenderEmoticonElement({
   children,
 }: { element: EmoticonElement } & RenderElementProps) {
   const mx = useMatrixClient();
+  const { versions } = useSpecVersions();
+  const useAuthentication = versions.includes('v1.11');
   const selected = useSelected();
   const focused = useFocused();
 
@@ -90,7 +94,7 @@ function RenderEmoticonElement({
         {element.key.startsWith('mxc://') ? (
           <img
             className={css.EmoticonImg}
-            src={mx.mxcUrlToHttp(element.key) ?? element.key}
+            src={mxcUrlToHttp(mx, element.key, useAuthentication) ?? element.key}
             alt={element.shortcode}
           />
         ) : (

src/app/components/editor/autocomplete/EmoticonAutocomplete.tsx

@@ -18,6 +18,8 @@ import { useRelevantImagePacks } from '../../../hooks/useImagePacks';
 import { IEmoji, emojis } from '../../../plugins/emoji';
 import { ExtendedPackImage, PackUsage } from '../../../plugins/custom-emoji';
 import { useKeyDown } from '../../../hooks/useKeyDown';
+import { mxcUrlToHttp } from '../../../utils/matrix';
+import { useSpecVersions } from '../../../hooks/useSpecVersions';
 
 type EmoticonCompleteHandler = (key: string, shortcode: string) => void;
 
@@ -48,6 +50,8 @@ export function EmoticonAutocomplete({
   requestClose,
 }: EmoticonAutocompleteProps) {
   const mx = useMatrixClient();
+  const { versions } = useSpecVersions();
+  const useAuthentication = versions.includes('v1.11');
 
   const imagePacks = useRelevantImagePacks(mx, PackUsage.Emoticon, imagePackRooms);
   const recentEmoji = useRecentEmoji(mx, 20);
@@ -103,7 +107,7 @@ export function EmoticonAutocomplete({
                 <Box
                   shrink="No"
                   as="img"
-                  src={mx.mxcUrlToHttp(key) || key}
+                  src={mxcUrlToHttp(mx, key, useAuthentication) || key}
                   alt={emoticon.shortcode}
                   style={{ width: toRem(24), height: toRem(24), objectFit: 'contain' }}
                 />

src/app/components/editor/autocomplete/UserMentionAutocomplete.tsx

@@ -18,6 +18,7 @@ import { useKeyDown } from '../../../hooks/useKeyDown';
 import { getMxIdLocalPart, getMxIdServer, validMxId } from '../../../utils/matrix';
 import { getMemberDisplayName, getMemberSearchStr } from '../../../utils/room';
 import { UserAvatar } from '../../user-avatar';
+import { useSpecVersions } from '../../../hooks/useSpecVersions';
 
 type MentionAutoCompleteHandler = (userId: string, name: string) => void;
 
@@ -84,6 +85,8 @@ export function UserMentionAutocomplete({
   requestClose,
 }: UserMentionAutocompleteProps) {
   const mx = useMatrixClient();
+  const { versions } = useSpecVersions();
+  const useAuthentication = versions.includes('v1.11');
   const roomId: string = room.roomId!;
   const roomAliasOrId = room.getCanonicalAlias() || roomId;
   const members = useRoomMembers(mx, roomId);
@@ -143,7 +146,8 @@ export function UserMentionAutocomplete({
         />
       ) : (
         autoCompleteMembers.map((roomMember) => {
-          const avatarUrl = roomMember.getAvatarUrl(mx.baseUrl, 32, 32, 'crop', undefined, false);
+          const avatarMxcUrl = roomMember.getMxcAvatarUrl();
+          const avatarUrl = avatarMxcUrl ? mx.mxcUrlToHttp(avatarMxcUrl, 32, 32, 'crop', undefined, false, useAuthentication) : undefined;
           return (
             <MenuItem
               key={roomMember.userId}

src/app/components/editor/output.ts

@@ -62,7 +62,7 @@ const elementToCustomHtml = (node: CustomElement, children: string): string => {
       }
 
       const matrixTo = `https://matrix.to/#/${fragment}`;
-      return `<a href="${encodeURIComponent(matrixTo)}">${sanitizeText(node.name)}</a>`;
+      return `<a href="${encodeURI(matrixTo)}">${sanitizeText(node.name)}</a>`;
     }
     case BlockType.Emoticon:
       return node.key.startsWith('mxc://')
@@ -71,7 +71,7 @@ const elementToCustomHtml = (node: CustomElement, children: string): string => {
           )}" title="${sanitizeText(node.shortcode)}" height="32" />`
         : sanitizeText(node.key);
     case BlockType.Link:
-      return `<a href="${encodeURIComponent(node.href)}">${node.children}</a>`;
+      return `<a href="${encodeURI(node.href)}">${node.children}</a>`;
     case BlockType.Command:
       return `/${sanitizeText(node.command)}`;
     default: