Compare commits
1 commit
develop
...
MoshiBar/k
Author | SHA1 | Date | |
---|---|---|---|
|
92249a15f9 |
5 changed files with 82 additions and 4 deletions
|
@ -51,6 +51,7 @@
|
||||||
"insert-text-at-cursor": "0.3.0",
|
"insert-text-at-cursor": "0.3.0",
|
||||||
"is-file-animated": "1.0.2",
|
"is-file-animated": "1.0.2",
|
||||||
"json5": "2.2.3",
|
"json5": "2.2.3",
|
||||||
|
"katex": "^0.16.9",
|
||||||
"matter-js": "0.19.0",
|
"matter-js": "0.19.0",
|
||||||
"mfm-js": "0.23.3",
|
"mfm-js": "0.23.3",
|
||||||
"misskey-js": "workspace:*",
|
"misskey-js": "workspace:*",
|
||||||
|
|
25
packages/frontend/src/components/MkFormula.vue
Normal file
25
packages/frontend/src/components/MkFormula.vue
Normal file
|
@ -0,0 +1,25 @@
|
||||||
|
<template>
|
||||||
|
<XFormula :formula="formula" :block="block" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineAsyncComponent, defineComponent } from "vue";
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
components: {
|
||||||
|
XFormula: defineAsyncComponent(
|
||||||
|
() => import("@/components/MkFormulaCore.vue"),
|
||||||
|
),
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
formula: {
|
||||||
|
type: String,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
block: {
|
||||||
|
type: Boolean,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
36
packages/frontend/src/components/MkFormulaCore.vue
Normal file
36
packages/frontend/src/components/MkFormulaCore.vue
Normal file
|
@ -0,0 +1,36 @@
|
||||||
|
<template>
|
||||||
|
<div v-if="block" v-html="compiledFormula"></div>
|
||||||
|
<span v-else v-html="compiledFormula"></span>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent } from "vue";
|
||||||
|
import katex from "katex";
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
props: {
|
||||||
|
formula: {
|
||||||
|
type: String,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
block: {
|
||||||
|
type: Boolean,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
compiledFormula(): any {
|
||||||
|
const katexString = katex.renderToString(this.formula, {
|
||||||
|
throwOnError: false,
|
||||||
|
} as any);
|
||||||
|
return this.block
|
||||||
|
? `<div style="text-align:center">${katexString}</div>`
|
||||||
|
: katexString;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
@import "../../node_modules/katex/dist/katex.min.css";
|
||||||
|
</style>
|
|
@ -12,6 +12,7 @@ import MkLink from '@/components/MkLink.vue';
|
||||||
import MkMention from '@/components/MkMention.vue';
|
import MkMention from '@/components/MkMention.vue';
|
||||||
import MkEmoji from '@/components/global/MkEmoji.vue';
|
import MkEmoji from '@/components/global/MkEmoji.vue';
|
||||||
import MkCustomEmoji from '@/components/global/MkCustomEmoji.vue';
|
import MkCustomEmoji from '@/components/global/MkCustomEmoji.vue';
|
||||||
|
import MkFormula from "@/components/MkFormula.vue";
|
||||||
import MkCode from '@/components/MkCode.vue';
|
import MkCode from '@/components/MkCode.vue';
|
||||||
import MkGoogle from '@/components/MkGoogle.vue';
|
import MkGoogle from '@/components/MkGoogle.vue';
|
||||||
import MkSparkle from '@/components/MkSparkle.vue';
|
import MkSparkle from '@/components/MkSparkle.vue';
|
||||||
|
@ -389,12 +390,24 @@ export default function(props: MfmProps) {
|
||||||
})];
|
})];
|
||||||
}
|
}
|
||||||
|
|
||||||
case 'mathInline': {
|
case "mathInline": {
|
||||||
return [h('code', token.props.formula)];
|
return [
|
||||||
|
h(MkFormula, {
|
||||||
|
key: Math.random(),
|
||||||
|
formula: token.props.formula,
|
||||||
|
block: false,
|
||||||
|
}),
|
||||||
|
];
|
||||||
}
|
}
|
||||||
|
|
||||||
case 'mathBlock': {
|
case "mathBlock": {
|
||||||
return [h('code', token.props.formula)];
|
return [
|
||||||
|
h(MkFormula, {
|
||||||
|
key: Math.random(),
|
||||||
|
formula: token.props.formula,
|
||||||
|
block: true,
|
||||||
|
}),
|
||||||
|
];
|
||||||
}
|
}
|
||||||
|
|
||||||
case 'search': {
|
case 'search': {
|
||||||
|
|
|
@ -753,6 +753,9 @@ importers:
|
||||||
json5:
|
json5:
|
||||||
specifier: 2.2.3
|
specifier: 2.2.3
|
||||||
version: 2.2.3
|
version: 2.2.3
|
||||||
|
katex:
|
||||||
|
specifier: ^0.16.9
|
||||||
|
version: 0.16.9
|
||||||
matter-js:
|
matter-js:
|
||||||
specifier: 0.19.0
|
specifier: 0.19.0
|
||||||
version: 0.19.0
|
version: 0.19.0
|
||||||
|
|
Loading…
Reference in a new issue