1 files changed, 54 insertions, 48 deletions

diff --git a/src/mfm/to-html.ts b/src/mfm/to-html.ts
index 66015d539f..aa39443c64 100644
--- a/src/mfm/to-html.ts
+++ b/src/mfm/to-html.ts
@@ -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`);
+		},
+
+		unicodeEmoji(node) {
+			return doc.createTextNode(node.props.emoji);
 		},
 
-		hashtag(token) {
+		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>`;
 }