mirror of
https://github.com/vector-im/element-web.git
synced 2024-11-18 14:44:58 +08:00
224 lines
8.0 KiB
TypeScript
224 lines
8.0 KiB
TypeScript
/*
|
|
Copyright 2021 Šimon Brandner <simon.bra.ag@gmail.com>
|
|
|
|
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 { IContent, MatrixEvent } from "matrix-js-sdk/src/models/event";
|
|
import sanitizeHtml from "sanitize-html";
|
|
import escapeHtml from "escape-html";
|
|
import { THREAD_RELATION_TYPE } from "matrix-js-sdk/src/models/thread";
|
|
import { MsgType } from "matrix-js-sdk/src/@types/event";
|
|
|
|
import { PERMITTED_URL_SCHEMES } from "../HtmlUtils";
|
|
import { makeUserPermalink, RoomPermalinkCreator } from "./permalinks/Permalinks";
|
|
import { RecursivePartial } from "../@types/common";
|
|
import SettingsStore from "../settings/SettingsStore";
|
|
|
|
export function getParentEventId(ev?: MatrixEvent): string | undefined {
|
|
if (!ev || ev.isRedacted()) return;
|
|
if (ev.replyEventId) {
|
|
return ev.replyEventId;
|
|
}
|
|
}
|
|
|
|
// Part of Replies fallback support
|
|
export function stripPlainReply(body: string): string {
|
|
// Removes lines beginning with `> ` until you reach one that doesn't.
|
|
const lines = body.split('\n');
|
|
while (lines.length && lines[0].startsWith('> ')) lines.shift();
|
|
// Reply fallback has a blank line after it, so remove it to prevent leading newline
|
|
if (lines[0] === '') lines.shift();
|
|
return lines.join('\n');
|
|
}
|
|
|
|
// Part of Replies fallback support
|
|
export function stripHTMLReply(html: string): string {
|
|
// Sanitize the original HTML for inclusion in <mx-reply>. We allow
|
|
// any HTML, since the original sender could use special tags that we
|
|
// don't recognize, but want to pass along to any recipients who do
|
|
// recognize them -- recipients should be sanitizing before displaying
|
|
// anyways. However, we sanitize to 1) remove any mx-reply, so that we
|
|
// don't generate a nested mx-reply, and 2) make sure that the HTML is
|
|
// properly formatted (e.g. tags are closed where necessary)
|
|
return sanitizeHtml(
|
|
html,
|
|
{
|
|
allowedTags: false, // false means allow everything
|
|
allowedAttributes: false,
|
|
// we somehow can't allow all schemes, so we allow all that we
|
|
// know of and mxc (for img tags)
|
|
allowedSchemes: [...PERMITTED_URL_SCHEMES, 'mxc'],
|
|
exclusiveFilter: (frame) => frame.tag === "mx-reply",
|
|
},
|
|
);
|
|
}
|
|
|
|
// Part of Replies fallback support
|
|
export function getNestedReplyText(
|
|
ev: MatrixEvent,
|
|
permalinkCreator: RoomPermalinkCreator,
|
|
): { body: string, html: string } | null {
|
|
if (!ev) return null;
|
|
|
|
let { body, formatted_body: html, msgtype } = ev.getContent();
|
|
if (getParentEventId(ev)) {
|
|
if (body) body = stripPlainReply(body);
|
|
}
|
|
|
|
if (!body) body = ""; // Always ensure we have a body, for reasons.
|
|
|
|
if (html) {
|
|
// sanitize the HTML before we put it in an <mx-reply>
|
|
html = stripHTMLReply(html);
|
|
} else {
|
|
// Escape the body to use as HTML below.
|
|
// We also run a nl2br over the result to fix the fallback representation. We do this
|
|
// after converting the text to safe HTML to avoid user-provided BR's from being converted.
|
|
html = escapeHtml(body).replace(/\n/g, '<br/>');
|
|
}
|
|
|
|
// dev note: do not rely on `body` being safe for HTML usage below.
|
|
|
|
const evLink = permalinkCreator.forEvent(ev.getId());
|
|
const userLink = makeUserPermalink(ev.getSender());
|
|
const mxid = ev.getSender();
|
|
|
|
// This fallback contains text that is explicitly EN.
|
|
switch (msgtype) {
|
|
case MsgType.Text:
|
|
case MsgType.Notice: {
|
|
html = `<mx-reply><blockquote><a href="${evLink}">In reply to</a> <a href="${userLink}">${mxid}</a>`
|
|
+ `<br>${html}</blockquote></mx-reply>`;
|
|
const lines = body.trim().split('\n');
|
|
if (lines.length > 0) {
|
|
lines[0] = `<${mxid}> ${lines[0]}`;
|
|
body = lines.map((line) => `> ${line}`).join('\n') + '\n\n';
|
|
}
|
|
break;
|
|
}
|
|
case MsgType.Image:
|
|
html = `<mx-reply><blockquote><a href="${evLink}">In reply to</a> <a href="${userLink}">${mxid}</a>`
|
|
+ `<br>sent an image.</blockquote></mx-reply>`;
|
|
body = `> <${mxid}> sent an image.\n\n`;
|
|
break;
|
|
case MsgType.Video:
|
|
html = `<mx-reply><blockquote><a href="${evLink}">In reply to</a> <a href="${userLink}">${mxid}</a>`
|
|
+ `<br>sent a video.</blockquote></mx-reply>`;
|
|
body = `> <${mxid}> sent a video.\n\n`;
|
|
break;
|
|
case MsgType.Audio:
|
|
html = `<mx-reply><blockquote><a href="${evLink}">In reply to</a> <a href="${userLink}">${mxid}</a>`
|
|
+ `<br>sent an audio file.</blockquote></mx-reply>`;
|
|
body = `> <${mxid}> sent an audio file.\n\n`;
|
|
break;
|
|
case MsgType.File:
|
|
html = `<mx-reply><blockquote><a href="${evLink}">In reply to</a> <a href="${userLink}">${mxid}</a>`
|
|
+ `<br>sent a file.</blockquote></mx-reply>`;
|
|
body = `> <${mxid}> sent a file.\n\n`;
|
|
break;
|
|
case MsgType.Emote: {
|
|
html = `<mx-reply><blockquote><a href="${evLink}">In reply to</a> * `
|
|
+ `<a href="${userLink}">${mxid}</a><br>${html}</blockquote></mx-reply>`;
|
|
const lines = body.trim().split('\n');
|
|
if (lines.length > 0) {
|
|
lines[0] = `* <${mxid}> ${lines[0]}`;
|
|
body = lines.map((line) => `> ${line}`).join('\n') + '\n\n';
|
|
}
|
|
break;
|
|
}
|
|
default:
|
|
return null;
|
|
}
|
|
|
|
return { body, html };
|
|
}
|
|
|
|
export function makeReplyMixIn(ev?: MatrixEvent): RecursivePartial<IContent> {
|
|
if (!ev) return {};
|
|
|
|
const mixin: RecursivePartial<IContent> = {
|
|
'm.relates_to': {
|
|
'm.in_reply_to': {
|
|
'event_id': ev.getId(),
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
* If the event replied is part of a thread
|
|
* Add the `m.thread` relation so that clients
|
|
* that know how to handle that relation will
|
|
* be able to render them more accurately
|
|
*/
|
|
if (ev.isThreadRelation || ev.isThreadRoot) {
|
|
mixin['m.relates_to'] = {
|
|
...mixin['m.relates_to'],
|
|
is_falling_back: false,
|
|
rel_type: THREAD_RELATION_TYPE.name,
|
|
event_id: ev.threadRootId,
|
|
};
|
|
}
|
|
|
|
return mixin;
|
|
}
|
|
|
|
export function shouldDisplayReply(event: MatrixEvent): boolean {
|
|
if (event.isRedacted()) {
|
|
return false;
|
|
}
|
|
|
|
const inReplyTo = event.getWireContent()?.["m.relates_to"]?.["m.in_reply_to"];
|
|
if (!inReplyTo) {
|
|
return false;
|
|
}
|
|
|
|
const relation = event.getRelation();
|
|
if (SettingsStore.getValue("feature_thread") &&
|
|
relation?.rel_type === THREAD_RELATION_TYPE.name &&
|
|
relation?.is_falling_back
|
|
) {
|
|
return false;
|
|
}
|
|
|
|
return !!inReplyTo.event_id;
|
|
}
|
|
|
|
interface IAddReplyOpts {
|
|
permalinkCreator?: RoomPermalinkCreator;
|
|
includeLegacyFallback?: boolean;
|
|
}
|
|
|
|
export function addReplyToMessageContent(
|
|
content: IContent,
|
|
replyToEvent: MatrixEvent,
|
|
opts: IAddReplyOpts = {
|
|
includeLegacyFallback: true,
|
|
},
|
|
): void {
|
|
const replyContent = makeReplyMixIn(replyToEvent);
|
|
Object.assign(content, replyContent);
|
|
|
|
if (opts.includeLegacyFallback) {
|
|
// Part of Replies fallback support - prepend the text we're sending
|
|
// with the text we're replying to
|
|
const nestedReply = getNestedReplyText(replyToEvent, opts.permalinkCreator);
|
|
if (nestedReply) {
|
|
if (content.formatted_body) {
|
|
content.formatted_body = nestedReply.html + content.formatted_body;
|
|
}
|
|
content.body = nestedReply.body + content.body;
|
|
}
|
|
}
|
|
}
|