.scrollbar {
+ width: initial;
+ height: var(--sticker-board-height);
+ }
+
+ &__sidebar {
+ display: flex;
+ flex-direction: column;
+ min-height: 100%;
+ padding: 4px 6px;
+ @include dir.side(border, none, 1px solid var(--bg-surface-border));
+ }
&__container {
flex-grow: 1;
diff --git a/src/client/action/logout.js b/src/client/action/logout.js
index 3c7b8486..c4047bb7 100644
--- a/src/client/action/logout.js
+++ b/src/client/action/logout.js
@@ -1,13 +1,16 @@
import initMatrix from '../initMatrix';
-function logout() {
+async function logout() {
const mx = initMatrix.matrixClient;
mx.stopClient();
- mx.logout().then(() => {
- mx.clearStores();
- window.localStorage.clear();
- window.location.reload();
- });
+ try {
+ await mx.logout();
+ } catch {
+ // ignore if failed to logout
+ }
+ mx.clearStores();
+ window.localStorage.clear();
+ window.location.reload();
}
export default logout;
diff --git a/src/client/initMatrix.js b/src/client/initMatrix.js
index 2118be56..936334ce 100644
--- a/src/client/initMatrix.js
+++ b/src/client/initMatrix.js
@@ -33,7 +33,6 @@ class InitMatrix extends EventEmitter {
accessToken: secret.accessToken,
userId: secret.userId,
store: indexedDBStore,
- sessionStore: new sdk.WebStorageSessionStore(global.localStorage),
cryptoStore: new sdk.IndexedDBCryptoStore(global.indexedDB, 'crypto-store'),
deviceId: secret.deviceId,
timelineSupport: true,
diff --git a/src/client/state/RoomsInput.js b/src/client/state/RoomsInput.js
index b9215c85..9b662880 100644
--- a/src/client/state/RoomsInput.js
+++ b/src/client/state/RoomsInput.js
@@ -6,10 +6,14 @@ import { math } from 'micromark-extension-math';
import { encode } from 'blurhash';
import { getShortcodeToEmoji } from '../../app/organisms/emoji-board/custom-emoji';
import { mathExtensionHtml, spoilerExtension, spoilerExtensionHtml } from '../../util/markdown';
+import { getBlobSafeMimeType } from '../../util/mimetypes';
+import { sanitizeText } from '../../util/sanitize';
import cons from './cons';
import settings from './settings';
const blurhashField = 'xyz.amorgan.blurhash';
+const MXID_REGEX = /\B@\S+:\S+\.\S+[^.,:;?!\s]/g;
+const SHORTCODE_REGEX = /\B:([\w-]+):\B/g;
function encodeBlurhash(img) {
const canvas = document.createElement('canvas');
@@ -130,38 +134,45 @@ function bindReplyToContent(roomId, reply, content) {
return newContent;
}
-function formatAndEmojifyText(mx, roomList, roomId, text) {
- const room = mx.getRoom(roomId);
+function findAndReplace(text, regex, filter, replace) {
+ let copyText = text;
+ Array.from(copyText.matchAll(regex))
+ .filter(filter)
+ .reverse() /* to replace backward to forward */
+ .forEach((match) => {
+ const matchText = match[0];
+ const tag = replace(match);
+
+ copyText = copyText.substr(0, match.index)
+ + tag
+ + copyText.substr(match.index + matchText.length);
+ });
+ return copyText;
+}
+
+function formatUserPill(room, text) {
const { userIdsToDisplayNames } = room.currentState;
- const parentIds = roomList.getAllParentSpaces(roomId);
+ return findAndReplace(
+ text,
+ MXID_REGEX,
+ (match) => userIdsToDisplayNames[match[0]],
+ (match) => (
+ `
@${userIdsToDisplayNames[match[0]]}`
+ ),
+ );
+}
+
+function formatEmoji(mx, room, roomList, text) {
+ const parentIds = roomList.getAllParentSpaces(room.roomId);
const parentRooms = [...parentIds].map((id) => mx.getRoom(id));
const allEmoji = getShortcodeToEmoji(mx, [room, ...parentRooms]);
- let formattedText;
- if (settings.isMarkdown) {
- formattedText = getFormattedBody(text);
- } else {
- formattedText = text;
- }
-
- const MXID_REGEX = /\B@\S+:\S+\.\S+[^.,:;?!\s]/g;
- Array.from(formattedText.matchAll(MXID_REGEX))
- .filter((mxidMatch) => userIdsToDisplayNames[mxidMatch[0]])
- .reverse()
- .forEach((mxidMatch) => {
- const tag = `
${userIdsToDisplayNames[mxidMatch[0]]}`;
-
- formattedText = formattedText.substr(0, mxidMatch.index)
- + tag
- + formattedText.substr(mxidMatch.index + mxidMatch[0].length);
- });
-
- const SHORTCODE_REGEX = /\B:([\w-]+):\B/g;
- Array.from(formattedText.matchAll(SHORTCODE_REGEX))
- .filter((shortcodeMatch) => allEmoji.has(shortcodeMatch[1]))
- .reverse() /* Reversing the array ensures that indices are preserved as we start replacing */
- .forEach((shortcodeMatch) => {
- const emoji = allEmoji.get(shortcodeMatch[1]);
+ return findAndReplace(
+ text,
+ SHORTCODE_REGEX,
+ (match) => allEmoji.has(match[1]),
+ (match) => {
+ const emoji = allEmoji.get(match[1]);
let tag;
if (emoji.mxc) {
@@ -175,13 +186,9 @@ function formatAndEmojifyText(mx, roomList, roomId, text) {
} else {
tag = emoji.unicode;
}
-
- formattedText = formattedText.substr(0, shortcodeMatch.index)
- + tag
- + formattedText.substr(shortcodeMatch.index + shortcodeMatch[0].length);
- });
-
- return formattedText;
+ return tag;
+ },
+ );
}
class RoomsInput extends EventEmitter {
@@ -274,6 +281,7 @@ class RoomsInput extends EventEmitter {
}
async sendInput(roomId) {
+ const room = this.matrixClient.getRoom(roomId);
const input = this.getInput(roomId);
input.isSending = true;
this.roomIdToInput.set(roomId, input);
@@ -283,19 +291,27 @@ class RoomsInput extends EventEmitter {
}
if (this.getMessage(roomId).trim() !== '') {
+ const rawMessage = input.message;
let content = {
- body: input.message,
+ body: rawMessage,
msgtype: 'm.text',
};
// Apply formatting if relevant
- const formattedBody = formatAndEmojifyText(
- this.matrixClient,
- this.roomList,
- roomId,
- input.message,
+ let formattedBody = settings.isMarkdown
+ ? getFormattedBody(rawMessage)
+ : sanitizeText(rawMessage);
+
+ formattedBody = formatUserPill(room, formattedBody);
+ formattedBody = formatEmoji(this.matrixClient, room, this.roomList, formattedBody);
+
+ content.body = findAndReplace(
+ content.body,
+ MXID_REGEX,
+ (match) => room.currentState.userIdsToDisplayNames[match[0]],
+ (match) => `@${room.currentState.userIdsToDisplayNames[match[0]]}`,
);
- if (formattedBody !== input.message) {
+ if (formattedBody !== sanitizeText(rawMessage)) {
// Formatting was applied, and we need to switch to custom HTML
content.format = 'org.matrix.custom.html';
content.formatted_body = formattedBody;
@@ -340,7 +356,7 @@ class RoomsInput extends EventEmitter {
}
async sendFile(roomId, file) {
- const fileType = file.type.slice(0, file.type.indexOf('/'));
+ const fileType = getBlobSafeMimeType(file.type).slice(0, file.type.indexOf('/'));
const info = {
mimetype: file.type,
size: file.size,
@@ -446,6 +462,7 @@ class RoomsInput extends EventEmitter {
}
async sendEditedMessage(roomId, mEvent, editedBody) {
+ const room = this.matrixClient.getRoom(roomId);
const isReply = typeof mEvent.getWireContent()['m.relates_to']?.['m.in_reply_to'] !== 'undefined';
const content = {
@@ -462,13 +479,19 @@ class RoomsInput extends EventEmitter {
};
// Apply formatting if relevant
- const formattedBody = formatAndEmojifyText(
- this.matrixClient,
- this.roomList,
- roomId,
- editedBody,
+ let formattedBody = settings.isMarkdown
+ ? getFormattedBody(editedBody)
+ : sanitizeText(editedBody);
+ formattedBody = formatUserPill(room, formattedBody);
+ formattedBody = formatEmoji(this.matrixClient, room, this.roomList, formattedBody);
+
+ content.body = findAndReplace(
+ content.body,
+ MXID_REGEX,
+ (match) => room.currentState.userIdsToDisplayNames[match[0]],
+ (match) => `@${room.currentState.userIdsToDisplayNames[match[0]]}`,
);
- if (formattedBody !== editedBody) {
+ if (formattedBody !== sanitizeText(editedBody)) {
content.formatted_body = ` * ${formattedBody}`;
content.format = 'org.matrix.custom.html';
content['m.new_content'].formatted_body = formattedBody;
diff --git a/src/client/state/cons.js b/src/client/state/cons.js
index 49d32a84..0dc01d49 100644
--- a/src/client/state/cons.js
+++ b/src/client/state/cons.js
@@ -1,5 +1,5 @@
const cons = {
- version: '2.0.4',
+ version: '2.1.2',
secretKey: {
ACCESS_TOKEN: 'cinny_access_token',
DEVICE_ID: 'cinny_device_id',
diff --git a/src/util/common.js b/src/util/common.js
index 57891a9d..83fd20fe 100644
--- a/src/util/common.js
+++ b/src/util/common.js
@@ -166,6 +166,9 @@ export function scaleDownImage(imageFile, width, height) {
img.onload = () => {
let newWidth = img.width;
let newHeight = img.height;
+ if (newHeight <= height && newWidth <= width) {
+ resolve(imageFile);
+ }
if (newHeight > height) {
newWidth = Math.floor(newWidth * (height / newHeight));
diff --git a/src/util/mimetypes.js b/src/util/mimetypes.js
new file mode 100644
index 00000000..121ae069
--- /dev/null
+++ b/src/util/mimetypes.js
@@ -0,0 +1,37 @@
+// https://github.com/matrix-org/matrix-react-sdk/blob/cd15e08fc285da42134817cce50de8011809cd53/src/utils/blobs.ts
+export const ALLOWED_BLOB_MIMETYPES = [
+ 'image/jpeg',
+ 'image/gif',
+ 'image/png',
+ 'image/apng',
+ 'image/webp',
+ 'image/avif',
+
+ 'video/mp4',
+ 'video/webm',
+ 'video/ogg',
+ 'video/quicktime',
+
+ 'audio/mp4',
+ 'audio/webm',
+ 'audio/aac',
+ 'audio/mpeg',
+ 'audio/ogg',
+ 'audio/wave',
+ 'audio/wav',
+ 'audio/x-wav',
+ 'audio/x-pn-wav',
+ 'audio/flac',
+ 'audio/x-flac',
+];
+
+export function getBlobSafeMimeType(mimetype) {
+ if (!ALLOWED_BLOB_MIMETYPES.includes(mimetype)) {
+ return 'application/octet-stream';
+ }
+ // Required for Chromium browsers
+ if (mimetype === 'video/quicktime') {
+ return 'video/mp4';
+ }
+ return mimetype;
+}
diff --git a/src/util/sanitize.js b/src/util/sanitize.js
index 5351a1a0..0f88c62b 100644
--- a/src/util/sanitize.js
+++ b/src/util/sanitize.js
@@ -1,7 +1,7 @@
import sanitizeHtml from 'sanitize-html';
-import initMatrix from '../client/initMatrix';
const MAX_TAG_NESTING = 100;
+let mx = null;
const permittedHtmlTags = [
'font', 'del', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
@@ -54,7 +54,7 @@ function transformATag(tagName, attribs) {
'data-mx-pill': userId,
},
};
- if (userId === initMatrix.matrixClient.getUserId()) {
+ if (userId === mx?.getUserId()) {
pill.attribs['data-mx-ping'] = undefined;
}
return pill;
@@ -76,17 +76,28 @@ function transformATag(tagName, attribs) {
function transformImgTag(tagName, attribs) {
const { src } = attribs;
- const mx = initMatrix.matrixClient;
+ if (src.startsWith('mxc://') === false) {
+ return {
+ tagName: 'a',
+ attribs: {
+ href: src,
+ rel: 'noopener',
+ target: '_blank',
+ },
+ text: attribs.alt || src,
+ };
+ }
return {
tagName,
attribs: {
...attribs,
- src: src.startsWith('mxc://') ? mx.mxcUrlToHttp(src) : src,
+ src: mx?.mxcUrlToHttp(src),
},
};
}
-export function sanitizeCustomHtml(body) {
+export function sanitizeCustomHtml(matrixClient, body) {
+ mx = matrixClient;
return sanitizeHtml(body, {
allowedTags: permittedHtmlTags,
allowedAttributes: permittedTagToAttributes,
}
+ { blurhash && blur &&