fix(math): add wrapper

bytedance · Mar 29, 2020 · 39aae0f · 39aae0f
1 parent ba3f4fc
commit 39aae0f
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 12 deletions.
diff --git a/packages/plugin-math/src/KatexView.svelte b/packages/plugin-math/src/KatexView.svelte
diff --git a/packages/plugin-math/src/index.ts b/packages/plugin-math/src/index.ts
@@ -1,7 +1,6 @@
 import { Plugin } from 'bytemd';
-import katex from 'katex';
 import remarkMath from 'remark-math';
-import KatexView from './KatexView.svelte';
+import Katex from './katex.svelte';
 
 export default function math(): Plugin {
   return {
@@ -19,12 +18,10 @@ export default function math(): Plugin {
 
       const displayMode = node.properties.className.includes('math-display');
       return {
-        component: KatexView,
+        component: Katex,
         props: {
-          html: katex.renderToString(textNode.value as string, {
-            displayMode,
-            throwOnError: false,
-          }),
+          displayMode,
+          text: textNode.value,
         },
       };
     },

diff --git a/packages/plugin-math/src/katex.svelte b/packages/plugin-math/src/katex.svelte
@@ -0,0 +1,19 @@
+<script>
+  import katex from 'katex';
+  export let text;
+  export let displayMode;
+</script>
+
+<!-- Note: a wrapper(div or span) is necessary to make elements keep in order -->
+{#if displayMode}
+  <div class="math math-display">
+    {@html katex.renderToString(text, {
+      displayMode: true,
+      throwOnError: false,
+    })}
+  </div>
+{:else}
+  <span class="math math-inline">
+    {@html katex.renderToString(text, { throwOnError: false })}
+  </span>
+{/if}