Add equation block support & code fallback

Author: Dyllan

src/blocks/decorator.vue

@@ -55,10 +55,13 @@
     <NotionDecorator :content="nextContent" v-bind="pass" />
   </s>
   <component
-    v-else-if="decoratorKey === 'e'"
+    v-else-if="decoratorKey === 'e' && katex"
     :is="'katex-element'"
     :expression="decoratorValue"
   />
+  <code v-else-if="decoratorKey === 'e'" class="notion-inline-code">
+    <NotionDecorator :content="nextContent" v-bind="pass" />
+  </code>
   <NotionDecorator v-else :content="nextContent" v-bind="pass" />
 </template>
 

src/blocks/equation.vue

@@ -0,0 +1,31 @@
+<template>
+  <div v-if="katex">
+    <KatexElement :expression="equation" />
+  </div>
+  <pre v-else-if="prism && supported" :class="['notion-code', langClass]">
+    <PrismComponent :language="lang">{{ equation }}</PrismComponent>
+  </pre>
+  <pre v-else :class="['notion-code', langClass]">
+    <code :class="langClass">{{ equation }}</code>
+  </pre>
+</template>
+
+<script>
+import KatexElement from "vue-katex";
+import Blockable, { blockComputed } from "@/lib/blockable";
+
+export default {
+  extends: Blockable,
+  name: "NotionCode",
+  components: { KatexElement },
+  data() {
+    return { Prism, lang: "latex", langClass: "language-latex" };
+  },
+  computed: {
+    ...blockComputed,
+    equation() {
+      return this.properties?.title?.[0]?.[0];
+    },
+  },
+};
+</script>

src/components/block.vue

@@ -9,6 +9,7 @@
   <NotionBookmark v-else-if="isType('bookmark')" v-bind="pass" />
   <NotionCallout v-else-if="isType('callout')" v-bind="pass" />
   <NotionCode v-else-if="isType('code')" v-bind="pass" />
+  <NotionEquation v-else-if="isType('equation')" v-bind="pass" />
   <NotionText v-else-if="isType('text')" v-bind="pass" />
   <NotionQuote v-else-if="isType('quote')" v-bind="pass" />
   <NotionToggle v-else-if="isType('toggle')" v-bind="pass">
@@ -49,6 +50,7 @@ import NotionHeader from "@/blocks/header";
 import NotionText from "@/blocks/text";
 import NotionToggle from "@/blocks/toggle";
 import NotionQuote from "@/blocks/quote";
+import NotionEquation from "@/blocks/equation";
 
 export default {
   extends: Blockable,
@@ -65,6 +67,7 @@ export default {
     NotionText,
     NotionToggle,
     NotionQuote,
+    NotionEquation,
   },
 };
 </script>

src/lib/blockable.js

@@ -12,6 +12,7 @@ export const blockProps = {
   pageLinkOptions: Object,
   pageLinkTarget: { type: String, default: "_self" },
   prism: { type: Boolean, default: false },
+  katex: { type: Boolean, default: false },
   textLinkTarget: { type: String, default: "_blank" },
   todo: { type: Boolean, default: false },
 };
@@ -30,6 +31,7 @@ export const blockComputed = {
       mapPageUrl: this.mapPageUrl,
       pageLinkOptions: this.pageLinkOptions,
       prism: this.prism,
+      katex: this.katex,
       todo: this.todo,
     };
   },