Update katex usage

Author: janniks

dev/serve.js

@@ -1,8 +1,12 @@
-import Vue from 'vue';
-import Dev from './serve.vue';
+import Vue from "vue";
+import Dev from "./serve.vue";
+
+import VueKatex from "vue-katex";
 
 Vue.config.productionTip = false;
 
+Vue.use(VueKatex);
+
 new Vue({
   render: (h) => h(Dev),
-}).$mount('#app');
+}).$mount("#app");

dev/serve.vue

@@ -9,6 +9,7 @@ import { NotionRenderer, getPageBlocks } from "@/entry";
 
 import "prismjs";
 import "prismjs/themes/prism.css";
+import "katex/dist/katex.min.css";
 
 export default {
   name: "ServeDev",
@@ -20,8 +21,8 @@ export default {
   },
   async created() {
     // react-notion tester: 2e22de6b770e4166be301490f6ffd420
-    // Equation terser: add9966dd1ae4d839ccec39150f90c5d
-    this.blockMap = await getPageBlocks("add9966dd1ae4d839ccec39150f90c5d");
+    // equation tester: 2a1d5226d68246deba627012081693f9
+    this.blockMap = await getPageBlocks("2e22de6b770e4166be301490f6ffd420");
   },
 };
 </script>

example/nuxt.config.js

@@ -21,4 +21,7 @@ export default {
 
   // Modules for dev and build (recommended) (https://go.nuxtjs.dev/config-modules)
   buildModules: ["vue-notion/nuxt"],
+
+  // Plugins (e.g. vue-katex for equations)
+  plugins: ["~/plugins/vue-katex.js"],
 };

example/plugins/vue-katex.js

@@ -0,0 +1,4 @@
+import Vue from "vue";
+import VueKatex from "vue-katex";
+
+Vue.use(VueKatex);

package-lock.json

@@ -29,8 +29,8 @@
   "dependencies": {
     "cross-fetch": "^3.0.6",
     "defu": "^5.0.0",
-    "katex": "^0.13.16",
     "vue-fragment": "^1.5.1",
+    "vue-katex": "^0.5.0",
     "vue-prism-component": "^1.2.0"
   },
   "devDependencies": {

package.json

@@ -30,17 +30,16 @@
   >
     <NotionDecorator :content="nextContent" v-bind="pass" />
   </a>
-  <span
+  <component
     v-else-if="decoratorKey === 'e'"
-    v-html="inlineEquation"
+    :is="'katex-element'"
+    :expression="decoratorValue"
   />
   <NotionDecorator v-else :content="nextContent" v-bind="pass" />
 </template>
 
 <script>
 import Blockable, { blockProps } from "@/lib/blockable";
-import katex from 'katex';
-import 'katex/dist/katex.css';
 
 export default {
   extends: Blockable,
@@ -72,11 +71,6 @@ export default {
     isPageLink() {
       return this.text === "‣";
     },
-    inlineEquation() {
-      return katex.renderToString(this.decoratorValue, {
-        throwOnError: false,
-      });
-    },
     pageLinkTitle() {
       return (
         this.blockMap?.[this.decoratorValue]?.value?.properties