diff --git a/src/client/app/common/views/components/formula-core.vue b/src/client/app/common/views/components/formula-core.vue new file mode 100644 index 000000000..930f16b47 --- /dev/null +++ b/src/client/app/common/views/components/formula-core.vue @@ -0,0 +1,26 @@ +<template> +<span v-html="compiledFormula"></span> +</template> + +<script lang="ts"> +import Vue from 'vue'; +import * as katex from 'katex'; + +export default Vue.extend({ + props: { + formula: { + type: String, + required: true + } + }, + computed: { + compiledFormula(): any { + return katex.renderToString(this.formula); + } + } +}); +</script> + +<style> +@import "../../../../../../node_modules/katex/dist/katex.min.css"; +</style> diff --git a/src/client/app/common/views/components/formula.vue b/src/client/app/common/views/components/formula.vue index 930f16b47..02ed96daa 100644 --- a/src/client/app/common/views/components/formula.vue +++ b/src/client/app/common/views/components/formula.vue @@ -1,26 +1,20 @@ <template> -<span v-html="compiledFormula"></span> +<x-formula :formula="formula"/> </template> <script lang="ts"> import Vue from 'vue'; -import * as katex from 'katex'; export default Vue.extend({ + components: { + XFormula: () => import('./formula-core.vue').then(m => m.default) + }, + props: { formula: { type: String, required: true } - }, - computed: { - compiledFormula(): any { - return katex.renderToString(this.formula); - } } }); </script> - -<style> -@import "../../../../../../node_modules/katex/dist/katex.min.css"; -</style>