diff --git a/src/client/app/common/views/components/formula-core.vue b/src/client/app/common/views/components/formula-core.vue index 254e0df308..69697d6df0 100644 --- a/src/client/app/common/views/components/formula-core.vue +++ b/src/client/app/common/views/components/formula-core.vue @@ -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: { diff --git a/src/client/app/common/views/components/formula.vue b/src/client/app/common/views/components/formula.vue index 02ed96daac..73572b72c6 100644 --- a/src/client/app/common/views/components/formula.vue +++ b/src/client/app/common/views/components/formula.vue @@ -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 } } }); diff --git a/src/client/app/common/views/components/mfm.ts b/src/client/app/common/views/components/mfm.ts index a3849e9607..199d6bb978 100644 --- a/src/client/app/common/views/components/mfm.ts +++ b/src/client/app/common/views/components/mfm.ts @@ -248,12 +248,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 } })]; } diff --git a/src/mfm/html.ts b/src/mfm/html.ts index 568a39bc7b..acd6891aba 100644 --- a/src/mfm/html.ts +++ b/src/mfm/html.ts @@ -99,7 +99,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; diff --git a/src/mfm/parser.ts b/src/mfm/parser.ts index 1cf1edfa4e..7bddea2ac2 100644 --- a/src/mfm/parser.ts +++ b/src/mfm/parser.ts @@ -105,7 +105,8 @@ const mfm = P.createLanguage({ r.flip, r.inlineCode, r.quote, - r.math, + r.mathInline, + r.mathBlock, r.search, r.title, r.center, @@ -123,7 +124,7 @@ const mfm = P.createLanguage({ r.mention, r.hashtag, r.emoji, - r.math, + r.mathInline, r.spin, r.text ).atLeast(1).tryParse(x), {})), @@ -138,7 +139,7 @@ const mfm = P.createLanguage({ r.mention, r.hashtag, r.emoji, - r.math, + r.mathInline, r.text ).atLeast(1).tryParse(x), {})), //#endregion @@ -194,7 +195,7 @@ const mfm = P.createLanguage({ r.mention, r.hashtag, r.emoji, - r.math, + r.mathInline, r.url, r.link, r.flip, @@ -308,10 +309,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 @@ -347,7 +354,7 @@ const mfm = P.createLanguage({ r.url, r.link, r.flip, - r.math, + r.mathInline, r.text ).atLeast(1).tryParse(x), {})), //#endregion diff --git a/test/mfm.ts b/test/mfm.ts index 2eeaeb2e5a..7070329f31 100644 --- a/test/mfm.ts +++ b/test/mfm.ts @@ -901,15 +901,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, [