Merge pull request #3987 from syuilo/math-block

複数行用の数式構文を追加
This commit is contained in:
Aya Morisawa 2019-01-27 16:41:49 +09:00 committed by GitHub
commit c113fdc20e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 62 additions and 17 deletions

View file

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

View file

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

View file

@ -248,12 +248,24 @@ export default Vue.component('misskey-flavored-markdown', {
})]; })];
} }
case 'math': { case 'mathInline': {
//const MkFormula = () => import('./formula.vue').then(m => m.default); //const MkFormula = () => import('./formula.vue').then(m => m.default);
return [createElement(MkFormula, { return [createElement(MkFormula, {
key: Math.random(), key: Math.random(),
props: { 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

@ -99,7 +99,13 @@ export default (tokens: MfmForest, mentionedRemoteUsers: INote['mentionedRemoteU
return el; 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'); const el = doc.createElement('code');
el.textContent = token.node.props.formula; el.textContent = token.node.props.formula;
return el; return el;

View file

@ -105,7 +105,8 @@ const mfm = P.createLanguage({
r.flip, r.flip,
r.inlineCode, r.inlineCode,
r.quote, r.quote,
r.math, r.mathInline,
r.mathBlock,
r.search, r.search,
r.title, r.title,
r.center, r.center,
@ -123,7 +124,7 @@ const mfm = P.createLanguage({
r.mention, r.mention,
r.hashtag, r.hashtag,
r.emoji, r.emoji,
r.math, r.mathInline,
r.spin, r.spin,
r.text r.text
).atLeast(1).tryParse(x), {})), ).atLeast(1).tryParse(x), {})),
@ -138,7 +139,7 @@ const mfm = P.createLanguage({
r.mention, r.mention,
r.hashtag, r.hashtag,
r.emoji, r.emoji,
r.math, r.mathInline,
r.text r.text
).atLeast(1).tryParse(x), {})), ).atLeast(1).tryParse(x), {})),
//#endregion //#endregion
@ -194,7 +195,7 @@ const mfm = P.createLanguage({
r.mention, r.mention,
r.hashtag, r.hashtag,
r.emoji, r.emoji,
r.math, r.mathInline,
r.url, r.url,
r.link, r.link,
r.flip, r.flip,
@ -308,10 +309,16 @@ const mfm = P.createLanguage({
}), }),
//#endregion //#endregion
//#region Math //#region Math (inline)
math: r => mathInline: r =>
P.regexp(/\\\((.+?)\\\)/, 1) 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 //#endregion
//#region Mention //#region Mention
@ -347,7 +354,7 @@ const mfm = P.createLanguage({
r.url, r.url,
r.link, r.link,
r.flip, r.flip,
r.math, r.mathInline,
r.text r.text
).atLeast(1).tryParse(x), {})), ).atLeast(1).tryParse(x), {})),
//#endregion //#endregion

View file

@ -901,15 +901,26 @@ describe('MFM', () => {
}); });
}); });
it('math', () => { it('mathInline', () => {
const fomula = 'x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}'; const fomula = 'x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}';
const text = `\\(${fomula}\\)`; const content = `\\(${fomula}\\)`;
const tokens = analyze(text); const tokens = analyze(content);
assert.deepStrictEqual(tokens, [ 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', () => { it('search', () => {
const tokens1 = analyze('a b c 検索'); const tokens1 = analyze('a b c 検索');
assert.deepStrictEqual(tokens1, [ assert.deepStrictEqual(tokens1, [