@@ -112,7 +82,7 @@ function MessageReply({ name, color, body }) {
- {name}
+ {parse(twemoji.parse(name))}
<>{` ${body}`}
@@ -132,11 +102,16 @@ function MessageBody({
isEdited,
msgType,
}) {
+ // if body is not string it is a React( element.
+ if (typeof body !== 'string') return
{body}
;
+
+ const content = twemoji.parse(isCustomHTML ? sanitize(body) : body);
+ const linkified = linkifyHtml(content, { target: '_blank', rel: 'noreferrer noopener' });
return (
{ msgType === 'm.emote' && `* ${senderName} ` }
- { isCustomHTML ? genMarkdown(body) : linkifyContent(body) }
+ { parse(linkified) }
{ isEdited &&
(edited)}
@@ -383,18 +358,16 @@ function parseReply(rawBody) {
body,
};
}
-function getEditedBody(eventId, editedTimeline) {
- const editedList = editedTimeline.get(eventId);
- const editedMEvent = editedList[editedList.length - 1];
+function getEditedBody(editedMEvent) {
const newContent = editedMEvent.getContent()['m.new_content'];
- if (typeof newContent === 'undefined') return [null, false];
+ if (typeof newContent === 'undefined') return [null, false, null];
const isCustomHTML = newContent.format === 'org.matrix.custom.html';
const parsedContent = parseReply(newContent.body);
if (parsedContent === null) {
- return [newContent.body, isCustomHTML];
+ return [newContent.body, isCustomHTML, newContent.formatted_body ?? null];
}
- return [parsedContent.body, isCustomHTML];
+ return [parsedContent.body, isCustomHTML, newContent.formatted_body ?? null];
}
function Message({ mEvent, isBodyOnly, roomTimeline }) {
@@ -406,7 +379,7 @@ function Message({ mEvent, isBodyOnly, roomTimeline }) {
} = roomTimeline;
const className = ['message', (isBodyOnly ? 'message--body-only' : 'message--full')];
- const content = mEvent.getWireContent();
+ const content = mEvent.getContent();
const eventId = mEvent.getId();
const msgType = content?.msgtype;
const senderId = mEvent.getSender();
@@ -419,16 +392,18 @@ function Message({ mEvent, isBodyOnly, roomTimeline }) {
if (typeof body === 'undefined') return null;
if (msgType === 'm.emote') className.push('message--type-emote');
- // TODO: these line can be moved to option menu
const myPowerlevel = room.getMember(mx.getUserId())?.powerLevel;
const canIRedact = room.currentState.hasSufficientPowerLevelFor('redact', myPowerlevel);
let [reply, reactions, isCustomHTML] = [null, null, content.format === 'org.matrix.custom.html'];
const [isEdited, haveReactions] = [editedTimeline.has(eventId), reactionTimeline.has(eventId)];
const isReply = typeof content['m.relates_to']?.['m.in_reply_to'] !== 'undefined';
+ let customHTML = isCustomHTML ? content.formatted_body : null;
if (isEdited) {
- [body, isCustomHTML] = getEditedBody(eventId, editedTimeline);
+ const editedList = editedTimeline.get(eventId);
+ const editedMEvent = editedList[editedList.length - 1];
+ [body, isCustomHTML, customHTML] = getEditedBody(editedMEvent);
if (typeof body !== 'string') return null;
}
@@ -500,7 +475,7 @@ function Message({ mEvent, isBodyOnly, roomTimeline }) {
diff --git a/src/app/molecules/message/Message.scss b/src/app/molecules/message/Message.scss
index 3c12c92..4da02c1 100644
--- a/src/app/molecules/message/Message.scss
+++ b/src/app/molecules/message/Message.scss
@@ -1,5 +1,14 @@
@use '../../atoms/scroll/scrollbar';
+.custom-emoji {
+ height: var(--fs-b1);
+ margin: 0 !important;
+ margin-right: 2px !important;
+ padding: 0 !important;
+ position: relative;
+ top: 2px;
+}
+
.message,
.ph-msg {
padding: var(--sp-ultra-tight) var(--sp-normal);
@@ -107,6 +116,10 @@
display: flex;
align-items: baseline;
+ & img.emoji {
+ @extend .custom-emoji;
+ }
+
& .message__profile {
min-width: 0;
color: var(--tc-surface-high);
@@ -142,6 +155,10 @@
}
}
.message__reply {
+ & img.emoji {
+ @extend .custom-emoji;
+ height: 14px;
+ }
.text {
color: var(--tc-surface-low);
white-space: nowrap;
@@ -163,6 +180,45 @@
& a {
word-break: break-word;
}
+ & img.emoji,
+ & img[data-mx-emoticon] {
+ @extend .custom-emoji;
+ }
+ & span[data-mx-pill] {
+ background-color: hsla(0, 0%, 64%, 0.15);
+ padding: 0 2px;
+ border-radius: 4px;
+ cursor: pointer;
+ font-weight: 500;
+ &:hover {
+ background-color: hsla(0, 0%, 64%, 0.3);
+ color: var(--tc-surface-high);
+ }
+ }
+
+ & span[data-mx-spoiler] {
+ border-radius: 4px;
+ background-color: rgba(124, 124, 124, 0.5);
+ color:transparent;
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ & > * {
+ opacity: 0;
+ }
+ &:focus, &:hover {
+ background-color: transparent;
+ color: inherit;
+ user-select: initial;
+ & > * {
+ opacity: inherit;
+ }
+ }
+
+ }
&-edited {
color: var(--tc-surface-low);
}
@@ -327,10 +383,20 @@
@include scrollbar.scroll__h;
@include scrollbar.scroll--auto-hide;
}
- & pre code {
- color: var(--tc-surface-normal) !important;
+ & pre {
+ display: inline-block;
+ max-width: 100%;
+ @include scrollbar.scroll;
+ @include scrollbar.scroll__h;
+ @include scrollbar.scroll--auto-hide;
+ & code {
+ color: var(--tc-surface-normal) !important;
+ white-space: pre;
+ }
}
& blockquote {
+ display: inline-block;
+ max-width: 100%;
padding-left: var(--sp-extra-tight);
border-left: 4px solid var(--bg-surface-active);
white-space: initial !important;
@@ -372,15 +438,21 @@
list-style: none;
}
& table {
+ display: -webkit-box;
+ width: 100%;
background-color: var(--bg-surface-hover);
border-radius: calc(var(--bo-radius) / 2);
border-spacing: 0;
border: 1px solid var(--bg-surface-border);
+ @include scrollbar.scroll;
+ @include scrollbar.scroll__h;
+ @include scrollbar.scroll--auto-hide;
& td, & th {
padding: var(--sp-extra-tight);
border: 1px solid var(--bg-surface-border);
border-width: 0 1px 1px 0;
+ white-space: pre;
&:last-child {
border-width: 0;
border-bottom-width: 1px;
diff --git a/src/app/molecules/message/sanitize.js b/src/app/molecules/message/sanitize.js
new file mode 100644
index 0000000..94d9ac6
--- /dev/null
+++ b/src/app/molecules/message/sanitize.js
@@ -0,0 +1,144 @@
+import sanitizeHtml from 'sanitize-html';
+import initMatrix from '../../../client/initMatrix';
+
+function sanitizeColorizedTag(tagName, attributes) {
+ const attribs = { ...attributes };
+ const styles = [];
+ if (attributes['data-mx-color']) {
+ styles.push(`color: ${attributes['data-mx-color']};`);
+ }
+ if (attributes['data-mx-bg-color']) {
+ styles.push(`background-color: ${attributes['data-mx-bg-color']};`);
+ }
+ attribs.style = styles.join(' ');
+
+ return { tagName, attribs };
+}
+
+function sanitizeLinkTag(tagName, attribs) {
+ const userLink = attribs.href.match(/^https?:\/\/matrix.to\/#\/(@.+:.+)/);
+ if (userLink !== null) {
+ // convert user link to pill
+ const userId = userLink[1];
+ return {
+ tagName: 'span',
+ attribs: {
+ 'data-mx-pill': userId,
+ },
+ };
+ }
+
+ return {
+ tagName,
+ attribs: {
+ ...attribs,
+ target: '_blank',
+ rel: 'noreferrer noopener',
+ },
+ };
+}
+
+function sanitizeCodeTag(tagName, attributes) {
+ const attribs = { ...attributes };
+ let classes = [];
+ if (attributes.class) {
+ classes = attributes.class.split(/\s+/).filter((className) => className.match(/^language-(\w+)/));
+ }
+
+ return {
+ tagName,
+ attribs: {
+ ...attribs,
+ class: classes.join(' '),
+ },
+ };
+}
+
+function sanitizeImgTag(tagName, attributes) {
+ const mx = initMatrix.matrixClient;
+ const { src } = attributes;
+ const attribs = { ...attributes };
+ delete attribs.src;
+
+ if (src.match(/^mxc:\/\//)) {
+ attribs.src = mx.mxcUrlToHttp(src);
+ }
+
+ return { tagName, attribs };
+}
+
+export default function sanitize(body) {
+ return sanitizeHtml(body, {
+ allowedTags: [
+ 'font',
+ 'del',
+ 'h1',
+ 'h2',
+ 'h3',
+ 'h4',
+ 'h5',
+ 'h6',
+ 'blockquote',
+ 'p',
+ 'a',
+ 'ul',
+ 'ol',
+ 'sup',
+ 'sub',
+ 'li',
+ 'b',
+ 'i',
+ 'u',
+ 'strong',
+ 'em',
+ 'strike',
+ 'code',
+ 'hr',
+ 'br',
+ 'div',
+ 'table',
+ 'thead',
+ 'tbody',
+ 'tr',
+ 'th',
+ 'td',
+ 'caption',
+ 'pre',
+ 'span',
+ 'img',
+ 'details',
+ 'summary',
+ ],
+ allowedClasses: {},
+ allowedAttributes: {
+ ol: ['start'],
+ img: ['width', 'height', 'alt', 'title', 'src', 'data-mx-emoticon'],
+ a: ['name', 'target', 'href', 'rel'],
+ code: ['class'],
+ font: ['data-mx-bg-color', 'data-mx-color', 'color', 'style'],
+ span: ['data-mx-bg-color', 'data-mx-color', 'data-mx-spoiler', 'style', 'data-mx-pill'],
+ },
+ allowProtocolRelative: false,
+ allowedSchemesByTag: {
+ a: ['https', 'http', 'ftp', 'mailto', 'magnet'],
+ img: ['https', 'http'],
+ },
+ allowedStyles: {
+ '*': {
+ color: [/^#(0x)?[0-9a-f]+$/i],
+ 'background-color': [/^#(0x)?[0-9a-f]+$/i],
+ },
+ },
+ nestingLimit: 100,
+ nonTextTags: [
+ 'style', 'script', 'textarea', 'option', 'mx-reply',
+ ],
+ transformTags: {
+ a: sanitizeLinkTag,
+ img: sanitizeImgTag,
+ code: sanitizeCodeTag,
+ font: sanitizeColorizedTag,
+ span: sanitizeColorizedTag,
+ },
+ });
+}
diff --git a/src/app/molecules/room-intro/RoomIntro.scss b/src/app/molecules/room-intro/RoomIntro.scss
index 8e923f3..ca1c43a 100644
--- a/src/app/molecules/room-intro/RoomIntro.scss
+++ b/src/app/molecules/room-intro/RoomIntro.scss
@@ -13,7 +13,7 @@
.room-intro__content {
margin-top: var(--sp-extra-loose);
- max-width: 640px;
+ width: calc(100% - 88px);
}
&__name {
color: var(--tc-surface-high);
diff --git a/src/app/organisms/room/PeopleDrawer.jsx b/src/app/organisms/room/PeopleDrawer.jsx
index 268e43b..3e48b98 100644
--- a/src/app/organisms/room/PeopleDrawer.jsx
+++ b/src/app/organisms/room/PeopleDrawer.jsx
@@ -106,7 +106,6 @@ function PeopleDrawer({ roomId }) {
let isGettingMembers = true;
const updateMemberList = (event) => {
if (isGettingMembers) return;
- console.log(event?.event?.room_id);
if (event && event?.event?.room_id !== roomId) return;
setMemberList(
simplyfiMembers(
diff --git a/src/app/organisms/room/RoomViewContent.jsx b/src/app/organisms/room/RoomViewContent.jsx
index 7478327..25577d3 100644
--- a/src/app/organisms/room/RoomViewContent.jsx
+++ b/src/app/organisms/room/RoomViewContent.jsx
@@ -1,3 +1,5 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
/* eslint-disable react/prop-types */
import React, { useState, useEffect, useLayoutEffect } from 'react';
import PropTypes from 'prop-types';
@@ -8,6 +10,7 @@ import dateFormat from 'dateformat';
import initMatrix from '../../../client/initMatrix';
import cons from '../../../client/state/cons';
import { diffMinutes, isNotInSameDay } from '../../../util/common';
+import { openProfileViewer } from '../../../client/action/navigation';
import Divider from '../../atoms/divider/Divider';
import { Message, PlaceholderMessage } from '../../molecules/message/Message';
@@ -188,8 +191,16 @@ function RoomViewContent({
}
}, [onStateUpdate]);
+ const handleOnClickCapture = (e) => {
+ const { target } = e;
+ const userId = target.getAttribute('data-mx-pill');
+ if (!userId) return;
+
+ openProfileViewer(userId, roomId);
+ };
+
let prevMEvent = null;
- function renderMessage(mEvent) {
+ const renderMessage = (mEvent) => {
const isContentOnly = (prevMEvent !== null && prevMEvent.getType() !== 'm.room.member'
&& diffMinutes(mEvent.getDate(), prevMEvent.getDate()) <= MAX_MSG_DIFF_MINUTES
&& prevMEvent.getSender() === mEvent.getSender()
@@ -222,7 +233,7 @@ function RoomViewContent({
);
- }
+ };
const renderTimeline = () => {
const { timeline } = roomTimeline;
@@ -249,7 +260,7 @@ function RoomViewContent({
};
return (
-