[mastodon-client] Use modified mfm-to-html renderer

This commit is contained in:
Laura Hausmann 2023-10-01 17:27:00 +02:00
parent 633fe46fb5
commit 2e7ac53c20
Signed by: zotan
GPG key ID: D044E84C5BE01605
4 changed files with 191 additions and 7 deletions

View file

@ -3,7 +3,6 @@ import {getNote, getUser} from "@/server/api/common/getters.js";
import { Note } from "@/models/entities/note.js";
import config from "@/config/index.js";
import mfm from "mfm-js";
import { toHtml } from "@/mfm/to-html.js";
import { UserConverter } from "@/server/api/mastodon/converters/user.js";
import { VisibilityConverter } from "@/server/api/mastodon/converters/visibility.js";
import { escapeMFM } from "@/server/api/mastodon/converters/mfm.js";
@ -18,6 +17,7 @@ import { FileConverter } from "@/server/api/mastodon/converters/file.js";
import { awaitAll } from "@/prelude/await-all.js";
import { AccountCache, UserHelpers } from "@/server/api/mastodon/helpers/user.js";
import { IsNull } from "typeorm";
import { MfmHelpers } from "@/server/api/mastodon/helpers/mfm.js";
export class NoteConverter {
public static async encode(note: Note, user: ILocalUser | null, cache: AccountCache = UserHelpers.getFreshAccountCache()): Promise<MastodonEntity.Status> {
@ -99,7 +99,7 @@ export class NoteConverter {
in_reply_to_id: note.replyId,
in_reply_to_account_id: note.replyUserId,
reblog: Promise.resolve(renote).then(renote => renote && note.text === null ? this.encode(renote, user, cache) : null),
content: text.then(text => text !== null ? toHtml(mfm.parse(text), JSON.parse(note.mentionedRemoteUsers)) ?? escapeMFM(text) : ""),
content: text.then(text => text !== null ? MfmHelpers.toHtml(mfm.parse(text), JSON.parse(note.mentionedRemoteUsers)) ?? escapeMFM(text) : ""),
text: text,
created_at: note.createdAt.toISOString(),
// Remove reaction emojis with names containing @ from the emojis list.

View file

@ -3,11 +3,11 @@ import config from "@/config/index.js";
import { DriveFiles, UserProfiles, Users } from "@/models/index.js";
import { EmojiConverter } from "@/server/api/mastodon/converters/emoji.js";
import { populateEmojis } from "@/misc/populate-emojis.js";
import { toHtml } from "@/mfm/to-html.js";
import { escapeMFM } from "@/server/api/mastodon/converters/mfm.js";
import mfm from "mfm-js";
import { awaitAll } from "@/prelude/await-all.js";
import { AccountCache, UserHelpers } from "@/server/api/mastodon/helpers/user.js";
import { MfmHelpers } from "@/server/api/mastodon/helpers/mfm.js";
type Field = {
name: string;
@ -28,7 +28,7 @@ export class UserConverter {
acctUrl = `https://${u.host}/@${u.username}`;
}
const profile = UserProfiles.findOneBy({userId: u.id});
const bio = profile.then(profile => toHtml(mfm.parse(profile?.description ?? "")) ?? escapeMFM(profile?.description ?? ""));
const bio = profile.then(profile => MfmHelpers.toHtml(mfm.parse(profile?.description ?? "")) ?? escapeMFM(profile?.description ?? ""));
const avatar = u.avatarId
? (DriveFiles.findOneBy({ id: u.avatarId }))
.then(p => p?.url ?? Users.getIdenticonUrl(u.id))
@ -74,7 +74,7 @@ export class UserConverter {
private static encodeField(f: Field): MastodonEntity.Field {
return {
name: f.name,
value: toHtml(mfm.parse(f.value)) ?? escapeMFM(f.value),
value: MfmHelpers.toHtml(mfm.parse(f.value)) ?? escapeMFM(f.value),
verified_at: f.verified ? (new Date()).toISOString() : null,
}
}

View file

@ -0,0 +1,184 @@
import { IMentionedRemoteUsers } from "@/models/entities/note.js";
import { JSDOM } from "jsdom";
import config from "@/config/index.js";
import { intersperse } from "@/prelude/array.js";
import mfm from "mfm-js";
export class MfmHelpers {
public static toHtml(
nodes: mfm.MfmNode[] | null,
mentionedRemoteUsers: IMentionedRemoteUsers = []
) {
if (nodes == null) {
return null;
}
const {window} = new JSDOM("");
const doc = window.document;
function appendChildren(children: mfm.MfmNode[], targetElement: any): void {
if (children) {
for (const child of children.map((x) => (handlers as any)[x.type](x)))
targetElement.appendChild(child);
}
}
const handlers: {
[K in mfm.MfmNode["type"]]: (node: mfm.NodeType<K>) => any;
} = {
bold(node) {
const el = doc.createElement("span");
el.textContent = '**';
appendChildren(node.children, el);
el.textContent += '**';
return el;
},
small(node) {
const el = doc.createElement("small");
appendChildren(node.children, el);
return el;
},
strike(node) {
const el = doc.createElement("span");
el.textContent = '~~';
appendChildren(node.children, el);
el.textContent += '~~';
return el;
},
italic(node) {
const el = doc.createElement("span");
el.textContent = '*';
appendChildren(node.children, el);
el.textContent += '*';
return el;
},
fn(node) {
const el = doc.createElement("span");
el.textContent = '*';
appendChildren(node.children, el);
el.textContent += '*';
return el;
},
blockCode(node) {
const pre = doc.createElement("pre");
const inner = doc.createElement("code");
inner.textContent = node.props.code;
pre.appendChild(inner);
return pre;
},
center(node) {
const el = doc.createElement("div");
appendChildren(node.children, el);
return el;
},
emojiCode(node) {
return doc.createTextNode(`\u200B:${node.props.name}:\u200B`);
},
unicodeEmoji(node) {
return doc.createTextNode(node.props.emoji);
},
hashtag(node) {
const a = doc.createElement("a");
a.href = `${config.url}/tags/${node.props.hashtag}`;
a.textContent = `#${node.props.hashtag}`;
a.setAttribute("rel", "tag");
return a;
},
inlineCode(node) {
const el = doc.createElement("code");
el.textContent = node.props.code;
return el;
},
mathInline(node) {
const el = doc.createElement("code");
el.textContent = node.props.formula;
return el;
},
mathBlock(node) {
const el = doc.createElement("code");
el.textContent = node.props.formula;
return el;
},
link(node) {
const a = doc.createElement("a");
a.href = node.props.url;
appendChildren(node.children, a);
return a;
},
mention(node) {
const a = doc.createElement("a");
const {username, host, acct} = node.props;
const remoteUserInfo = mentionedRemoteUsers.find(
(remoteUser) =>
remoteUser.username === username && remoteUser.host === host,
);
a.href = remoteUserInfo
? remoteUserInfo.url
? remoteUserInfo.url
: remoteUserInfo.uri
: `${config.url}/${acct}`;
a.className = "u-url mention";
a.textContent = acct;
return a;
},
quote(node) {
const el = doc.createElement("blockquote");
appendChildren(node.children, el);
return el;
},
text(node) {
const el = doc.createElement("span");
const nodes = node.props.text
.split(/\r\n|\r|\n/)
.map((x) => doc.createTextNode(x));
for (const x of intersperse<FIXME | "br">("br", nodes)) {
el.appendChild(x === "br" ? doc.createElement("br") : x);
}
return el;
},
url(node) {
const a = doc.createElement("a");
a.href = node.props.url;
a.textContent = node.props.url;
return a;
},
search(node) {
const a = doc.createElement("a");
a.href = `${config.searchEngine}${node.props.query}`;
a.textContent = node.props.content;
return a;
},
plain(node) {
const el = doc.createElement("span");
appendChildren(node.children, el);
return el;
},
};
appendChildren(nodes, doc.body);
return `<p>${doc.body.innerHTML}</p>`;
}
}

View file

@ -29,7 +29,7 @@ import { awaitAll } from "@/prelude/await-all.js";
import { VisibilityConverter } from "@/server/api/mastodon/converters/visibility.js";
import mfm from "mfm-js";
import { FileConverter } from "@/server/api/mastodon/converters/file.js";
import { toHtml } from "@/mfm/to-html.js";
import { MfmHelpers } from "@/server/api/mastodon/helpers/mfm.js";
export class NoteHelpers {
public static async getDefaultReaction(): Promise<string> {
@ -186,7 +186,7 @@ export class NoteHelpers {
const files = DriveFiles.packMany(edit.fileIds);
const item = {
account: account,
content: toHtml(mfm.parse(edit.text ?? ''), JSON.parse(note.mentionedRemoteUsers)) ?? '',
content: MfmHelpers.toHtml(mfm.parse(edit.text ?? ''), JSON.parse(note.mentionedRemoteUsers)) ?? '',
created_at: lastDate.toISOString(),
emojis: [],
sensitive: files.then(files => files.length > 0 ? files.some((f) => f.isSensitive) : false),