PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

send tex math as data-mx-maths attribute

Browse source
This commit is contained in:
Aleks Kissinger 2020-09-20 12:59:22 +01:00
parent 0604c86779
commit becc79d67a
2 changed files with 47 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
src/HtmlUtils.tsx
View file

@ -27,6 +27,7 @@ import classNames from 'classnames';
import EMOJIBASE_REGEX from 'emojibase-regex';
import url from 'url';
import katex from 'katex';
import { AllHtmlEntities } from 'html-entities';
import {MatrixClientPeg} from './MatrixClientPeg';
import {tryTransformPermalinkToLocalHref} from "./utils/permalinks/Permalinks";
@ -236,7 +237,8 @@ const sanitizeHtmlParams: sanitizeHtml.IOptions = {
allowedAttributes: {
// custom ones first:
font: ['color', 'data-mx-bg-color', 'data-mx-color', 'style'], // custom to matrix
span: ['data-mx-bg-color', 'data-mx-color', 'data-mx-spoiler', 'style'], // custom to matrix
span: ['data-mx-maths', 'data-mx-bg-color', 'data-mx-color', 'data-mx-spoiler', 'style'], // custom to matrix
div: ['data-mx-maths'],
a: ['href', 'name', 'target', 'rel'], // remote target: custom to matrix
img: ['src', 'width', 'height', 'alt', 'title'],
ol: ['start'],
@ -409,6 +411,27 @@ export function bodyToHtml(content: IContent, highlights: string[], opts: IOpts
if (isHtmlMessage) {
isDisplayedWithHtml = true;
safeBody = sanitizeHtml(formattedBody, sanitizeParams);
if (true) { // TODO: add katex setting
const mathDelimiters = [
{ left: "<div data-mx-maths=\"", right: "\">.*?</div>", display: true },
{ left: "<span data-mx-maths=\"", right: "\">.*?</span>", display: false }
];
mathDelimiters.forEach(function (d) {
var reg = RegExp(d.left + "(.*?)" + d.right, "g");
safeBody = safeBody.replace(reg, function(match, p1) {
return katex.renderToString(
AllHtmlEntities.decode(p1),
{
throwOnError: false,
displayMode: d.display,
output: "mathml"
})
});
});
}
}
} finally {
delete sanitizeParams.textFilter;
@ -450,6 +473,7 @@ export function bodyToHtml(content: IContent, highlights: string[], opts: IOpts
'markdown-body': isHtmlMessage && !emojiBody,
});
return isDisplayedWithHtml ?
<span
key="body"

23
src/editor/serialize.ts
View file

@ -18,6 +18,7 @@ limitations under the License.
import Markdown from '../Markdown';
import {makeGenericPermalink} from "../utils/permalinks/Permalinks";
import EditorModel from "./model";
import { AllHtmlEntities } from 'html-entities';
export function mdSerialize(model: EditorModel) {
return model.parts.reduce((html, part) => {
@ -38,7 +39,27 @@ export function mdSerialize(model: EditorModel) {
}
export function htmlSerializeIfNeeded(model: EditorModel, {forceHTML = false} = {}) {
const md = mdSerialize(model);
var md = mdSerialize(model);
if (true) { // TODO: add katex setting
const mathDelimiters = [ // TODO: make customizable
{ left: "\\$\\$\\$", right: "\\$\\$\\$", display: true },
{ left: "\\$\\$", right: "\\$\\$", display: false }
];
mathDelimiters.forEach(function (d) {
var reg = RegExp(d.left + "(.*?)" + d.right, "g");
md = md.replace(reg, function(match, p1) {
const p1e = AllHtmlEntities.encode(p1);
if (d.display == true) {
return `<div data-mx-maths="${p1e}"><code>${p1e}</code></div>`;
} else {
return `<span data-mx-maths="${p1e}"><code>${p1e}</code></span>`;
}
});
});
}
const parser = new Markdown(md);
if (!parser.isPlainText() || forceHTML) {
return parser.toHTML();