Add multiline math syntax

Co-authored-by: syuilo <syuilotan@yahoo.co.jp>
This commit is contained in:
Aya Morisawa 2019-01-25 23:08:06 +09:00
parent 4398651841
commit 79d2374d8e
No known key found for this signature in database
GPG key ID: 3E64865D70D579F2
6 changed files with 62 additions and 17 deletions

View file

@ -1,5 +1,6 @@
<template>
<span v-html="compiledFormula"></span>
<div v-if="block" v-html="compiledFormula"></div>
<span v-else v-html="compiledFormula"></span>
</template>
<script lang="ts">
@ -11,6 +12,10 @@ export default Vue.extend({
formula: {
type: String,
required: true
},
block: {
type: Boolean,
required: true
}
},
computed: {

View file

@ -1,5 +1,5 @@
<template>
<x-formula :formula="formula"/>
<x-formula :formula="formula" :block="block" />
</template>
<script lang="ts">
@ -14,6 +14,10 @@ export default Vue.extend({
formula: {
type: String,
required: true
},
block: {
type: Boolean,
required: true
}
}
});

View file

@ -228,12 +228,24 @@ export default Vue.component('misskey-flavored-markdown', {
})];
}
case 'math': {
case 'mathInline': {
//const MkFormula = () => import('./formula.vue').then(m => m.default);
return [createElement(MkFormula, {
key: Math.random(),
props: {
formula: token.node.props.formula
formula: token.node.props.formula,
block: false
}
})];
}
case 'mathBlock': {
//const MkFormula = () => import('./formula.vue').then(m => m.default);
return [createElement(MkFormula, {
key: Math.random(),
props: {
formula: token.node.props.formula,
block: true
}
})];
}

View file

@ -87,7 +87,13 @@ export default (tokens: MfmForest, mentionedRemoteUsers: INote['mentionedRemoteU
return el;
},
math(token) {
mathInline(token) {
const el = doc.createElement('code');
el.textContent = token.node.props.formula;
return el;
},
mathBlock(token) {
const el = doc.createElement('code');
el.textContent = token.node.props.formula;
return el;

View file

@ -103,7 +103,8 @@ const mfm = P.createLanguage({
r.blockCode,
r.inlineCode,
r.quote,
r.math,
r.mathInline,
r.mathBlock,
r.search,
r.title,
r.center,
@ -121,7 +122,7 @@ const mfm = P.createLanguage({
r.mention,
r.hashtag,
r.emoji,
r.math,
r.mathInline,
r.text
).atLeast(1).tryParse(x), {})),
//#endregion
@ -135,7 +136,7 @@ const mfm = P.createLanguage({
r.mention,
r.hashtag,
r.emoji,
r.math,
r.mathInline,
r.text
).atLeast(1).tryParse(x), {})),
//#endregion
@ -180,7 +181,7 @@ const mfm = P.createLanguage({
r.mention,
r.hashtag,
r.emoji,
r.math,
r.mathInline,
r.url,
r.link,
r.text
@ -274,10 +275,16 @@ const mfm = P.createLanguage({
}),
//#endregion
//#region Math
math: r =>
//#region Math (inline)
mathInline: r =>
P.regexp(/\\\((.+?)\\\)/, 1)
.map(x => createLeaf('math', { formula: x })),
.map(x => createLeaf('mathInline', { formula: x })),
//#endregion
//#region Math (block)
mathBlock: r =>
P.regexp(/\\\[([\s\S]+?)\\\]/, 1)
.map(x => createLeaf('mathBlock', { formula: x.trim() })),
//#endregion
//#region Mention
@ -311,7 +318,7 @@ const mfm = P.createLanguage({
r.emoji,
r.url,
r.link,
r.math,
r.mathInline,
r.text
).atLeast(1).tryParse(x), {})),
//#endregion

View file

@ -836,15 +836,26 @@ describe('MFM', () => {
});
});
it('math', () => {
it('mathInline', () => {
const fomula = 'x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}';
const text = `\\(${fomula}\\)`;
const tokens = analyze(text);
const content = `\\(${fomula}\\)`;
const tokens = analyze(content);
assert.deepStrictEqual(tokens, [
leaf('math', { formula: fomula })
leaf('mathInline', { formula: fomula })
]);
});
describe('mathBlock', () => {
it('simple', () => {
const fomula = 'x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}';
const content = `\\[\n${fomula}\n\\]`;
const tokens = analyze(content);
assert.deepStrictEqual(tokens, [
leaf('mathBlock', { formula: fomula })
]);
});
});
it('search', () => {
const tokens1 = analyze('a b c 検索');
assert.deepStrictEqual(tokens1, [