a8f374dd43
* Force mentions to have a space after the # * Use types for rendering * Parse HTML * Add code block support * Add table support * Allow starting heading without a space * Escape relevant plaintext areas * Resolve many crashes * Use better matrix id regex * Don't match . after id * Don't parse mentions as links * Add emote support * Only emit HTML link if necessary * Implement review changes
499 lines
14 KiB
JavaScript
499 lines
14 KiB
JavaScript
/* eslint-disable no-use-before-define */
|
|
import SimpleMarkdown from '@khanacademy/simple-markdown';
|
|
import { idRegex, parseIdUri } from './common';
|
|
|
|
const {
|
|
defaultRules, parserFor, outputFor, anyScopeRegex, blockRegex, inlineRegex,
|
|
sanitizeText, sanitizeUrl,
|
|
} = SimpleMarkdown;
|
|
|
|
function htmlTag(tagName, content, attributes, isClosed) {
|
|
let s = '';
|
|
Object.entries(attributes || {}).forEach(([k, v]) => {
|
|
if (v !== undefined) {
|
|
s += ` ${sanitizeText(k)}`;
|
|
if (v !== null) s += `="${sanitizeText(v)}"`;
|
|
}
|
|
});
|
|
|
|
s = `<${tagName}${s}>`;
|
|
|
|
if (isClosed === false) {
|
|
return s;
|
|
}
|
|
return `${s}${content}</${tagName}>`;
|
|
}
|
|
|
|
function mathHtml(wrap, node) {
|
|
return htmlTag(wrap, htmlTag('code', sanitizeText(node.content)), { 'data-mx-maths': node.content });
|
|
}
|
|
|
|
const emojiRegex = /^:([\w-]+):/;
|
|
|
|
const plainRules = {
|
|
Array: {
|
|
...defaultRules.Array,
|
|
plain: defaultRules.Array.html,
|
|
},
|
|
userMention: {
|
|
order: defaultRules.em.order - 0.9,
|
|
match: inlineRegex(idRegex('@', undefined, '^')),
|
|
parse: (capture, _, state) => ({
|
|
type: 'mention',
|
|
content: state.userNames[capture[1]] ? `@${state.userNames[capture[1]]}` : capture[1],
|
|
id: capture[1],
|
|
}),
|
|
},
|
|
roomMention: {
|
|
order: defaultRules.em.order - 0.8,
|
|
match: inlineRegex(idRegex('#', undefined, '^')),
|
|
parse: (capture) => ({ type: 'mention', content: capture[1], id: capture[1] }),
|
|
},
|
|
mention: {
|
|
plain: (node, _, state) => (state.kind === 'edit' ? node.id : node.content),
|
|
html: (node) => htmlTag('a', sanitizeText(node.content), {
|
|
href: `https://matrix.to/#/${encodeURIComponent(node.id)}`,
|
|
}),
|
|
},
|
|
emoji: {
|
|
order: defaultRules.em.order - 0.1,
|
|
match: (source, state) => {
|
|
if (!state.inline) return null;
|
|
const capture = emojiRegex.exec(source);
|
|
if (!capture) return null;
|
|
const emoji = state.emojis.get(capture[1]);
|
|
if (emoji) return capture;
|
|
return null;
|
|
},
|
|
parse: (capture, _, state) => ({ content: capture[1], emoji: state.emojis.get(capture[1]) }),
|
|
plain: ({ emoji }) => (emoji.mxc
|
|
? `:${emoji.shortcode}:`
|
|
: emoji.unicode),
|
|
html: ({ emoji }) => (emoji.mxc
|
|
? htmlTag('img', null, {
|
|
'data-mx-emoticon': null,
|
|
src: emoji.mxc,
|
|
alt: `:${emoji.shortcode}:`,
|
|
title: `:${emoji.shortcode}:`,
|
|
height: 32,
|
|
}, false)
|
|
: emoji.unicode),
|
|
},
|
|
newline: {
|
|
...defaultRules.newline,
|
|
plain: () => '\n',
|
|
},
|
|
paragraph: {
|
|
...defaultRules.paragraph,
|
|
plain: (node, output, state) => `${output(node.content, state)}\n\n`,
|
|
html: (node, output, state) => htmlTag('p', output(node.content, state)),
|
|
},
|
|
br: {
|
|
...defaultRules.br,
|
|
match: anyScopeRegex(/^ *\n/),
|
|
plain: () => '\n',
|
|
},
|
|
text: {
|
|
...defaultRules.text,
|
|
match: anyScopeRegex(/^[\s\S]+?(?=[^0-9A-Za-z\s\u00c0-\uffff]| *\n|\w+:\S|$)/),
|
|
plain: (node) => node.content.replace(/(\*|_|!\[|\[|\|\||\$\$?)/g, '\\$1'),
|
|
},
|
|
};
|
|
|
|
const markdownRules = {
|
|
...defaultRules,
|
|
...plainRules,
|
|
heading: {
|
|
...defaultRules.heading,
|
|
match: blockRegex(/^ *(#{1,6})([^\n:]*?(?: [^\n]*?)?)#* *(?:\n *)+\n/),
|
|
plain: (node, output, state) => {
|
|
const out = output(node.content, state);
|
|
if (state.kind === 'edit' || state.kind === 'notification' || node.level > 2) {
|
|
return `${'#'.repeat(node.level)} ${out}\n\n`;
|
|
}
|
|
return `${out}\n${(node.level === 1 ? '=' : '-').repeat(out.length)}\n\n`;
|
|
},
|
|
},
|
|
hr: {
|
|
...defaultRules.hr,
|
|
plain: () => '---\n\n',
|
|
},
|
|
codeBlock: {
|
|
...defaultRules.codeBlock,
|
|
plain: (node) => `\`\`\`${node.lang || ''}\n${node.content}\n\`\`\``,
|
|
html: (node) => htmlTag('pre', htmlTag('code', sanitizeText(node.content), {
|
|
class: node.lang ? `language-${node.lang}` : undefined,
|
|
})),
|
|
},
|
|
fence: {
|
|
...defaultRules.fence,
|
|
match: blockRegex(/^ *(`{3,}|~{3,}) *(?:(\S+) *)?\n([\s\S]+?)\n?\1 *(?:\n *)*\n/),
|
|
},
|
|
blockQuote: {
|
|
...defaultRules.blockQuote,
|
|
plain: (node, output, state) => `> ${output(node.content, state).trim().replace(/\n/g, '\n> ')}\n\n`,
|
|
},
|
|
list: {
|
|
...defaultRules.list,
|
|
plain: (node, output, state) => `${node.items.map((item, i) => {
|
|
const prefix = node.ordered ? `${node.start + i}. ` : '* ';
|
|
return prefix + output(item, state).replace(/\n/g, `\n${' '.repeat(prefix.length)}`);
|
|
}).join('\n')}\n`,
|
|
},
|
|
def: undefined,
|
|
table: {
|
|
...defaultRules.table,
|
|
plain: (node, output, state) => {
|
|
const header = node.header.map((content) => output(content, state));
|
|
|
|
const colWidth = node.align.map((align) => {
|
|
switch (align) {
|
|
case 'left':
|
|
case 'right':
|
|
return 2;
|
|
case 'center':
|
|
return 3;
|
|
default:
|
|
return 1;
|
|
}
|
|
});
|
|
header.forEach((s, i) => {
|
|
if (s.length > colWidth[i])colWidth[i] = s.length;
|
|
});
|
|
|
|
const cells = node.cells.map((row) => row.map((content, i) => {
|
|
const s = output(content, state);
|
|
if (colWidth[i] === undefined || s.length > colWidth[i]) {
|
|
colWidth[i] = s.length;
|
|
}
|
|
return s;
|
|
}));
|
|
|
|
function pad(s, i) {
|
|
switch (node.align[i]) {
|
|
case 'right':
|
|
return s.padStart(colWidth[i]);
|
|
case 'center':
|
|
return s
|
|
.padStart(s.length + Math.floor((colWidth[i] - s.length) / 2))
|
|
.padEnd(colWidth[i]);
|
|
default:
|
|
return s.padEnd(colWidth[i]);
|
|
}
|
|
}
|
|
|
|
const line = colWidth.map((len, i) => {
|
|
switch (node.align[i]) {
|
|
case 'left':
|
|
return `:${'-'.repeat(len - 1)}`;
|
|
case 'center':
|
|
return `:${'-'.repeat(len - 2)}:`;
|
|
case 'right':
|
|
return `${'-'.repeat(len - 1)}:`;
|
|
default:
|
|
return '-'.repeat(len);
|
|
}
|
|
});
|
|
|
|
const table = [
|
|
header.map(pad),
|
|
line,
|
|
...cells.map((row) => row.map(pad))];
|
|
|
|
return table.map((row) => `| ${row.join(' | ')} |\n`).join('');
|
|
},
|
|
},
|
|
displayMath: {
|
|
order: defaultRules.table.order + 0.1,
|
|
match: blockRegex(/^ *\$\$ *\n?([\s\S]+?)\n?\$\$ *(?:\n *)*\n/),
|
|
parse: (capture) => ({ content: capture[1] }),
|
|
plain: (node) => (node.content.includes('\n')
|
|
? `$$\n${node.content}\n$$\n`
|
|
: `$$${node.content}$$\n`),
|
|
html: (node) => mathHtml('div', node),
|
|
},
|
|
shrug: {
|
|
order: defaultRules.escape.order - 0.1,
|
|
match: inlineRegex(/^¯\\_\(ツ\)_\/¯/),
|
|
parse: (capture) => ({ type: 'text', content: capture[0] }),
|
|
},
|
|
escape: {
|
|
...defaultRules.escape,
|
|
plain: (node, output, state) => `\\${output(node.content, state)}`,
|
|
},
|
|
tableSeparator: {
|
|
...defaultRules.tableSeparator,
|
|
plain: () => ' | ',
|
|
},
|
|
link: {
|
|
...defaultRules.link,
|
|
plain: (node, output, state) => {
|
|
const out = output(node.content, state);
|
|
const target = sanitizeUrl(node.target) || '';
|
|
if (out !== target || node.title) {
|
|
return `[${out}](${target}${node.title ? ` "${node.title}"` : ''})`;
|
|
}
|
|
return out;
|
|
},
|
|
html: (node, output, state) => {
|
|
const out = output(node.content, state);
|
|
const target = sanitizeUrl(node.target) || '';
|
|
if (out !== target || node.title) {
|
|
return htmlTag('a', out, {
|
|
href: target,
|
|
title: node.title,
|
|
});
|
|
}
|
|
return target;
|
|
},
|
|
},
|
|
image: {
|
|
...defaultRules.image,
|
|
plain: (node) => ` || ''}${node.title ? ` "${node.title}"` : ''})`,
|
|
html: (node) => htmlTag('img', '', {
|
|
src: sanitizeUrl(node.target) || '',
|
|
alt: node.alt,
|
|
title: node.title,
|
|
}, false),
|
|
},
|
|
reflink: undefined,
|
|
refimage: undefined,
|
|
em: {
|
|
...defaultRules.em,
|
|
plain: (node, output, state) => `_${output(node.content, state)}_`,
|
|
},
|
|
strong: {
|
|
...defaultRules.strong,
|
|
plain: (node, output, state) => `**${output(node.content, state)}**`,
|
|
},
|
|
u: {
|
|
...defaultRules.u,
|
|
plain: (node, output, state) => `__${output(node.content, state)}__`,
|
|
},
|
|
del: {
|
|
...defaultRules.del,
|
|
plain: (node, output, state) => `~~${output(node.content, state)}~~`,
|
|
},
|
|
inlineCode: {
|
|
...defaultRules.inlineCode,
|
|
plain: (node) => `\`${node.content}\``,
|
|
},
|
|
spoiler: {
|
|
order: defaultRules.inlineCode.order + 0.1,
|
|
match: inlineRegex(/^\|\|([\s\S]+?)\|\|(?:\(([\s\S]+?)\))?/),
|
|
parse: (capture, parse, state) => ({
|
|
content: parse(capture[1], state),
|
|
reason: capture[2],
|
|
}),
|
|
plain: (node, output, state) => {
|
|
const warning = `spoiler${node.reason ? `: ${node.reason}` : ''}`;
|
|
switch (state.kind) {
|
|
case 'edit':
|
|
return `||${output(node.content, state)}||${node.reason ? `(${node.reason})` : ''}`;
|
|
case 'notification':
|
|
return `<${warning}>`;
|
|
default:
|
|
return `[${warning}](${output(node.content, state)})`;
|
|
}
|
|
},
|
|
html: (node, output, state) => htmlTag(
|
|
'span',
|
|
output(node.content, state),
|
|
{ 'data-mx-spoiler': node.reason || null },
|
|
),
|
|
},
|
|
inlineMath: {
|
|
order: defaultRules.del.order + 0.2,
|
|
match: inlineRegex(/^\$(\S[\s\S]+?\S|\S)\$(?!\d)/),
|
|
parse: (capture) => ({ content: capture[1] }),
|
|
plain: (node) => `$${node.content}$`,
|
|
html: (node) => mathHtml('span', node),
|
|
},
|
|
};
|
|
|
|
function mapElement(el) {
|
|
switch (el.tagName) {
|
|
case 'MX-REPLY':
|
|
return [];
|
|
|
|
case 'P':
|
|
return [{ type: 'paragraph', content: mapChildren(el) }];
|
|
case 'BR':
|
|
return [{ type: 'br' }];
|
|
|
|
case 'H1':
|
|
case 'H2':
|
|
case 'H3':
|
|
case 'H4':
|
|
case 'H5':
|
|
case 'H6':
|
|
return [{ type: 'heading', level: Number(el.tagName[1]), content: mapChildren(el) }];
|
|
case 'HR':
|
|
return [{ type: 'hr' }];
|
|
case 'PRE': {
|
|
let lang;
|
|
if (el.firstChild) {
|
|
Array.from(el.firstChild.classList).some((c) => {
|
|
const langPrefix = 'language-';
|
|
if (c.startsWith(langPrefix)) {
|
|
lang = c.slice(langPrefix.length);
|
|
return true;
|
|
}
|
|
return false;
|
|
});
|
|
}
|
|
return [{ type: 'codeBlock', lang, content: el.innerText }];
|
|
}
|
|
case 'BLOCKQUOTE':
|
|
return [{ type: 'blockQuote', content: mapChildren(el) }];
|
|
case 'UL':
|
|
return [{ type: 'list', items: mapChildren(el) }];
|
|
case 'OL':
|
|
return [{
|
|
type: 'list',
|
|
ordered: true,
|
|
start: Number(el.getAttribute('start')),
|
|
items: mapChildren(el),
|
|
}];
|
|
case 'TABLE': {
|
|
const headerEl = Array.from(el.querySelector('thead > tr').childNodes);
|
|
const align = headerEl.map((childE) => childE.style['text-align']);
|
|
return [{
|
|
type: 'table',
|
|
header: headerEl.map(mapChildren),
|
|
align,
|
|
cells: Array.from(el.querySelectorAll('tbody > tr')).map((rowEl) => Array.from(rowEl.childNodes).map((childEl, i) => {
|
|
if (align[i] === undefined) align[i] = childEl.style['text-align'];
|
|
return mapChildren(childEl);
|
|
})),
|
|
}];
|
|
}
|
|
case 'A': {
|
|
const href = el.getAttribute('href');
|
|
|
|
const id = parseIdUri(href);
|
|
if (id) return [{ type: 'mention', content: el.innerText, id }];
|
|
|
|
return [{
|
|
type: 'link',
|
|
target: el.getAttribute('href'),
|
|
title: el.getAttribute('title'),
|
|
content: mapChildren(el),
|
|
}];
|
|
}
|
|
case 'IMG': {
|
|
const src = el.getAttribute('src');
|
|
let title = el.getAttribute('title');
|
|
if (el.hasAttribute('data-mx-emoticon')) {
|
|
if (title.length > 2 && title.startsWith(':') && title.endsWith(':')) {
|
|
title = title.slice(1, -1);
|
|
}
|
|
return [{
|
|
type: 'emoji',
|
|
content: title,
|
|
emoji: {
|
|
mxc: src,
|
|
shortcode: title,
|
|
},
|
|
}];
|
|
}
|
|
|
|
return [{
|
|
type: 'image',
|
|
alt: el.getAttribute('alt'),
|
|
target: src,
|
|
title,
|
|
}];
|
|
}
|
|
case 'EM':
|
|
case 'I':
|
|
return [{ type: 'em', content: mapChildren(el) }];
|
|
case 'STRONG':
|
|
case 'B':
|
|
return [{ type: 'strong', content: mapChildren(el) }];
|
|
case 'U':
|
|
return [{ type: 'u', content: mapChildren(el) }];
|
|
case 'DEL':
|
|
case 'STRIKE':
|
|
return [{ type: 'del', content: mapChildren(el) }];
|
|
case 'CODE':
|
|
return [{ type: 'inlineCode', content: el.innerText }];
|
|
|
|
case 'DIV':
|
|
if (el.hasAttribute('data-mx-maths')) {
|
|
return [{ type: 'displayMath', content: el.getAttribute('data-mx-maths') }];
|
|
}
|
|
return mapChildren(el);
|
|
case 'SPAN':
|
|
if (el.hasAttribute('data-mx-spoiler')) {
|
|
return [{ type: 'spoiler', reason: el.getAttribute('data-mx-spoiler'), content: mapChildren(el) }];
|
|
}
|
|
if (el.hasAttribute('data-mx-maths')) {
|
|
return [{ type: 'inlineMath', content: el.getAttribute('data-mx-maths') }];
|
|
}
|
|
return mapChildren(el);
|
|
default:
|
|
return mapChildren(el);
|
|
}
|
|
}
|
|
|
|
function mapNode(n) {
|
|
switch (n.nodeType) {
|
|
case Node.TEXT_NODE:
|
|
return [{ type: 'text', content: n.textContent }];
|
|
case Node.ELEMENT_NODE:
|
|
return mapElement(n);
|
|
default:
|
|
return [];
|
|
}
|
|
}
|
|
|
|
function mapChildren(n) {
|
|
return Array.from(n.childNodes).reduce((ast, childN) => {
|
|
ast.push(...mapNode(childN));
|
|
return ast;
|
|
}, []);
|
|
}
|
|
|
|
function render(content, state, plainOut, htmlOut) {
|
|
let c = content;
|
|
if (content.length === 1 && content[0].type === 'paragraph') {
|
|
c = c[0].content;
|
|
}
|
|
|
|
const plainStr = plainOut(c, state).trim();
|
|
if (state.onlyPlain) return { plain: plainStr };
|
|
|
|
const htmlStr = htmlOut(c, state);
|
|
|
|
const plainHtml = htmlStr.replace(/<br>/g, '\n').replace(/<\/p><p>/g, '\n\n').replace(/<\/?p>/g, '');
|
|
const onlyPlain = sanitizeText(plainStr) === plainHtml;
|
|
|
|
return {
|
|
onlyPlain,
|
|
plain: plainStr,
|
|
html: htmlStr,
|
|
};
|
|
}
|
|
|
|
const plainParser = parserFor(plainRules);
|
|
const plainPlainOut = outputFor(plainRules, 'plain');
|
|
const plainHtmlOut = outputFor(plainRules, 'html');
|
|
|
|
const mdParser = parserFor(markdownRules);
|
|
const mdPlainOut = outputFor(markdownRules, 'plain');
|
|
const mdHtmlOut = outputFor(markdownRules, 'html');
|
|
|
|
export function plain(source, state) {
|
|
return render(plainParser(source, state), state, plainPlainOut, plainHtmlOut);
|
|
}
|
|
|
|
export function markdown(source, state) {
|
|
return render(mdParser(source, state), state, mdPlainOut, mdHtmlOut);
|
|
}
|
|
|
|
export function html(source, state) {
|
|
const el = document.createElement('template');
|
|
el.innerHTML = source;
|
|
return render(mapChildren(el.content), state, mdPlainOut, mdHtmlOut);
|
|
}
|