Add math block

dist/block-renderer.css

@@ -0,0 +1 @@
+.katex-html[data-v-59e6cee5]{display:none}

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "block-renderer",
-  "version": "0.1.0",
+  "version": "0.1.16",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -3550,8 +3550,7 @@
     "commander": {
       "version": "2.20.3",
       "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
-      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
-      "dev": true
     },
     "commondir": {
       "version": "1.0.1",
@@ -6903,6 +6902,14 @@
         "verror": "1.10.0"
       }
     },
+    "katex": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/katex/-/katex-0.12.0.tgz",
+      "integrity": "sha512-y+8btoc/CK70XqcHqjxiGWBOeIL8upbS0peTPXTvgrh21n1RiWWcIpSWM+4uXq+IAgNh9YYQWdc7LVDPDAEEAg==",
+      "requires": {
+        "commander": "^2.19.0"
+      }
+    },
     "killable": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "block-renderer",
   "description": "Content renderer for JSON blocks from Editor.js",
-  "version": "0.1.16",
+  "version": "0.1.20",
   "author": "KingOfDog <info@kingofdog.de>",
   "repository": {
     "type": "git",
@@ -17,6 +17,7 @@
   "main": "./dist/block-renderer.common.js",
   "dependencies": {
     "core-js": "^3.6.5",
+    "katex": "^0.12.0",
     "vue": "^2.6.11"
   },
   "devDependencies": {

src/components/BlockContentRenderer.vue

@@ -17,6 +17,7 @@ import HeaderBlock from "./HeaderBlock";
 import ImageBlock from "./ImageBlock";
 import LinkBlock from "./LinkBlock";
 import ListBlock from "./ListBlock";
+import MathBlock from "./MathBlock";
 import ParagraphBlock from "./ParagraphBlock";
 import QuoteBlock from "./QuoteBlock";
 import WarningBlock from "./WarningBlock";
@@ -29,6 +30,7 @@ const componentTypes = {
   image: ImageBlock,
   link: LinkBlock,
   list: ListBlock,
+  math: MathBlock,
   paragraph: ParagraphBlock,
   quote: QuoteBlock,
   warning: WarningBlock

src/components/MathBlock.vue

@@ -0,0 +1,29 @@
+<template>
+  <figure>
+    <div v-html="content"></div>
+  </figure>
+</template>
+
+<script>
+import katex from "katex";
+
+export default {
+  props: ["data"],
+  data() {
+    return {
+      content: ""
+    };
+  },
+  mounted() {
+    this.content = katex.renderToString(this.data.text, {
+      throwOnError: false
+    });
+  }
+};
+</script>
+
+<style scoped>
+.katex-html {
+  display: none;
+}
+</style>