fix(repl): markdown is not rendered correctly

repl/src/App.vue

@@ -29,20 +29,21 @@
           <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>
 </template>
 
 <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;

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());

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>

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">

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");