misty.cafe/mistykey
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

Use mfm-js for MFM parsing (#7415)

Browse source 
* wip

* Update mfm.ts

* wip

* update mfmjs

* refactor

* nanka

* Update mfm.ts

* Update to-html.ts

* Update to-html.ts

* wip

* fix test

* fix test
This commit is contained in:
syuilo 2021-04-02 10:36:11 +09:00 • committed by GitHub
parent b378066ebf
commit 1f4ae2f63a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
31 changed files with 262 additions and 1771 deletions
Download patch file Download diff file Expand all files Collapse all files

102
src/mfm/to-html.ts
View file

@ -1,12 +1,12 @@
import { JSDOM } from 'jsdom';
import * as mfm from 'mfm-js';
import config from '@/config';
import { intersperse } from '../prelude/array';
import { MfmForest, MfmTree } from './prelude';
import { IMentionedRemoteUsers } from '../models/entities/note';
import { wellKnownServices } from '../well-known-services';
export function toHtml(tokens: MfmForest | null, mentionedRemoteUsers: IMentionedRemoteUsers = []) {
if (tokens == null) {
export function toHtml(nodes: mfm.MfmNode[] | null, mentionedRemoteUsers: IMentionedRemoteUsers = []) {
if (nodes == null) {
return null;
}
@ -14,95 +14,101 @@ export function toHtml(tokens: MfmForest | null, mentionedRemoteUsers: IMentione
const doc = window.document;
function appendChildren(children: MfmForest, targetElement: any): void {
for (const child of children.map(t => handlers[t.node.type](t))) targetElement.appendChild(child);
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: { [key: string]: (token: MfmTree) => any } = {
bold(token) {
const handlers: { [K in mfm.MfmNode['type']]: (node: mfm.NodeType<K>) => any } = {
bold(node) {
const el = doc.createElement('b');
appendChildren(token.children, el);
appendChildren(node.children, el);
return el;
},
small(token) {
small(node) {
const el = doc.createElement('small');
appendChildren(token.children, el);
appendChildren(node.children, el);
return el;
},
strike(token) {
strike(node) {
const el = doc.createElement('del');
appendChildren(token.children, el);
appendChildren(node.children, el);
return el;
},
italic(token) {
italic(node) {
const el = doc.createElement('i');
appendChildren(token.children, el);
appendChildren(node.children, el);
return el;
},
fn(token) {
fn(node) {
const el = doc.createElement('i');
appendChildren(token.children, el);
appendChildren(node.children, el);
return el;
},
blockCode(token) {
blockCode(node) {
const pre = doc.createElement('pre');
const inner = doc.createElement('code');
inner.textContent = token.node.props.code;
inner.textContent = node.props.code;
pre.appendChild(inner);
return pre;
},
center(token) {
center(node) {
const el = doc.createElement('div');
appendChildren(token.children, el);
appendChildren(node.children, el);
return el;
},
emoji(token) {
return doc.createTextNode(token.node.props.emoji ? token.node.props.emoji : `\u200B:${token.node.props.name}:\u200B`);
emojiCode(node) {
return doc.createTextNode(`\u200B:${node.props.name}:\u200B`);
},
hashtag(token) {
unicodeEmoji(node) {
return doc.createTextNode(node.props.emoji);
},
hashtag(node) {
const a = doc.createElement('a');
a.href = `${config.url}/tags/${token.node.props.hashtag}`;
a.textContent = `#${token.node.props.hashtag}`;
a.href = `${config.url}/tags/${node.props.hashtag}`;
a.textContent = `#${node.props.hashtag}`;
a.setAttribute('rel', 'tag');
return a;
},
inlineCode(token) {
inlineCode(node) {
const el = doc.createElement('code');
el.textContent = token.node.props.code;
el.textContent = node.props.code;
return el;
},
mathInline(token) {
mathInline(node) {
const el = doc.createElement('code');
el.textContent = token.node.props.formula;
el.textContent = node.props.formula;
return el;
},
mathBlock(token) {
mathBlock(node) {
const el = doc.createElement('code');
el.textContent = token.node.props.formula;
el.textContent = node.props.formula;
return el;
},
link(token) {
link(node) {
const a = doc.createElement('a');
a.href = token.node.props.url;
appendChildren(token.children, a);
a.href = node.props.url;
appendChildren(node.children, a);
return a;
},
mention(token) {
mention(node) {
const a = doc.createElement('a');
const { username, host, acct } = token.node.props;
const { username, host, acct } = node.props;
const wellKnown = wellKnownServices.find(x => x[0] === host);
if (wellKnown) {
a.href = wellKnown[1](username);
@ -115,39 +121,39 @@ export function toHtml(tokens: MfmForest | null, mentionedRemoteUsers: IMentione
return a;
},
quote(token) {
quote(node) {
const el = doc.createElement('blockquote');
appendChildren(token.children, el);
appendChildren(node.children, el);
return el;
},
text(token) {
text(node) {
const el = doc.createElement('span');
const nodes = (token.node.props.text as string).split(/\r\n|\r|\n/).map(x => doc.createTextNode(x) as Node);
const nodes = node.props.text.split(/\r\n|\r|\n/).map(x => doc.createTextNode(x));
for (const x of intersperse<Node | 'br'>('br', nodes)) {
for (const x of intersperse<FIXME | 'br'>('br', nodes)) {
el.appendChild(x === 'br' ? doc.createElement('br') : x);
}
return el;
},
url(token) {
url(node) {
const a = doc.createElement('a');
a.href = token.node.props.url;
a.textContent = token.node.props.url;
a.href = node.props.url;
a.textContent = node.props.url;
return a;
},
search(token) {
search(node) {
const a = doc.createElement('a');
a.href = `https://www.google.com/search?q=${token.node.props.query}`;
a.textContent = token.node.props.content;
a.href = `https://www.google.com/search?q=${node.props.query}`;
a.textContent = node.props.content;
return a;
}
};
appendChildren(tokens, doc.body);
appendChildren(nodes, doc.body);
return `<p>${doc.body.innerHTML}</p>`;
}