From 4cf9f6ee53d19f67380144030a38ede88cb1a59b Mon Sep 17 00:00:00 2001
From: axetroy <axetroy.dev@gmail.com>
Date: Thu, 26 Nov 2020 16:56:21 +0800
Subject: [PATCH] fix(repl): markdown is not rendered correctly

---
 repl/src/App.vue                   | 13 ++++++++++---
 repl/src/components/CodeMirror.vue | 19 ++++++++++++-------
 repl/src/components/Markdown.vue   | 19 +++++++++++++------
 repl/src/components/Render.vue     | 16 +++++++---------
 repl/src/main.js                   |  3 ++-
 5 files changed, 44 insertions(+), 26 deletions(-)

diff --git a/repl/src/App.vue b/repl/src/App.vue
index 5f65b0b3..20660a07 100644
--- a/repl/src/App.vue
+++ b/repl/src/App.vue
@@ -29,13 +29,13 @@
           <CodeMirror
             class="my-editor2"
             :content.sync="template"
-            @update:content="template = $event"
             :readonly="true"
+            @update:content="template = $event"
           />
         </div>
       </div>
       <div class="right">
-        <Render :content="content"></Render>
+        <Render :content="content" :loading="loading"></Render>
       </div>
     </div>
   </div>
@@ -43,6 +43,7 @@
 
 <script setup>
 import { ref } from "vue";
+import { notification } from "ant-design-vue";
 import Render from "./components/Render.vue";
 import CodeMirror from "./components/CodeMirror.vue";
 import TEMPLATE_DEFAULT from "./template/default";
@@ -61,6 +62,12 @@ function onSubmit() {
   const tpl = encodeURIComponent(template.value);
 
   loading.value = true;
+
+  notification.info({
+    message: "Processing",
+    description: "This may take a few minutes, please be patient",
+  });
+
   fetch(
     `${import.meta.env.VITE_API_HOST}/?username=${
       form.value.username || ""
@@ -84,7 +91,7 @@ function onSubmit() {
 $height: 60px;
 .toolbar {
   height: $height;
-  background: yellow;
+  background: #eeda7c;
   display: flex;
   align-items: center;
   padding: 0 10px;
diff --git a/repl/src/components/CodeMirror.vue b/repl/src/components/CodeMirror.vue
index 496a8a79..c7a22bb8 100644
--- a/repl/src/components/CodeMirror.vue
+++ b/repl/src/components/CodeMirror.vue
@@ -1,18 +1,23 @@
 <template>
-  <div class="my-editor" v-bind="$attrs">
-    <textarea ref="input"></textarea>
-  </div>
+  <a-spin :spinning="loading">
+    <div class="my-editor" v-bind="$attrs">
+      <textarea ref="input"></textarea>
+    </div>
+  </a-spin>
 </template>
 
 <script setup>
-import { onMounted, ref, defineEmit, defineProps } from "vue";
+import { onMounted, ref, toRefs, defineEmit, defineProps } from "vue";
 import CodeMirror from "https://cdn.jsdelivr.net/npm/codemirror/src/codemirror.js";
 
-const { content, readonly } = defineProps({
+const props = defineProps({
   content: { type: String },
   readonly: { type: Boolean, default: () => false },
+  loading: Boolean,
 });
 
+const { content, readonly, loading } = toRefs(props);
+
 const emit = defineEmit(["update:content"]);
 
 let editor;
@@ -25,8 +30,8 @@ onMounted(() => {
     readonly: !!readonly,
   });
 
-  if (typeof content === "string") {
-    update(content);
+  if (typeof content.value === "string") {
+    update(content.value);
   }
   editor.on("change", (instance, change) => {
     emit("update:content", editor.doc.getValue());
diff --git a/repl/src/components/Markdown.vue b/repl/src/components/Markdown.vue
index e63b8f54..e33038b9 100644
--- a/repl/src/components/Markdown.vue
+++ b/repl/src/components/Markdown.vue
@@ -1,14 +1,21 @@
 <template>
-  <div v-bind="$attrs">
-    <div v-html="html"></div>
-  </div>
+  <a-spin :spinning="loading">
+    <div v-bind="$attrs">
+      <div v-html="html"></div>
+    </div>
+  </a-spin>
 </template>
 
 <script setup>
-import { computed, defineProps } from "vue";
+import { computed, defineProps, toRefs } from "vue";
 import marked from "marked";
 
-const props = defineProps({ content: String, default: () => "" });
+const props = defineProps({
+  content: String,
+  loading: Boolean,
+});
 
-const html = computed(() => marked(props.content));
+const { content, loading } = toRefs(props);
+
+const html = computed(() => marked(content.value));
 </script>
diff --git a/repl/src/components/Render.vue b/repl/src/components/Render.vue
index a95619ab..c3bbbc41 100644
--- a/repl/src/components/Render.vue
+++ b/repl/src/components/Render.vue
@@ -3,30 +3,28 @@
     <a-tab-pane key="1" tab="Result">
       <Markdown
         :content="content"
+        :loading="loading"
         class="markdown"
         style="padding-left: 30px"
       />
     </a-tab-pane>
     <a-tab-pane key="2" tab="Source">
-      <CodeMirror ref="editor" :content="content" :readonly="true" />
+      <CodeMirror :content="content" :loading="loading" :readonly="true" />
     </a-tab-pane>
   </a-tabs>
 </template>
 
 <script setup>
-import { ref, watch, defineProps } from "vue";
+import { defineProps, toRefs } from "vue";
 import Markdown from "./Markdown.vue";
 import CodeMirror from "./CodeMirror.vue";
 
-const editor = ref(null);
-
-const { content } = defineProps({
-  content: { type: String },
+const props = defineProps({
+  content: String,
+  loading: Boolean,
 });
 
-watch(content, () => {
-  editor.update(val);
-});
+const { content, loading } = toRefs(props);
 </script>
 
 <style lang="scss">
diff --git a/repl/src/main.js b/repl/src/main.js
index b421680c..9204594c 100644
--- a/repl/src/main.js
+++ b/repl/src/main.js
@@ -1,4 +1,4 @@
-import { Button, Form, Input, Tabs } from "ant-design-vue";
+import { Button, Form, Input, Spin, Tabs } from "ant-design-vue";
 import "ant-design-vue/dist/antd.css";
 import { createApp } from "vue";
 import App from "./App.vue";
@@ -13,5 +13,6 @@ app.use(Form);
 app.use(Tabs);
 app.use(Tabs.TabPane);
 app.use(Tabs.TabContent);
+app.use(Spin);
 
 app.mount("#app");