From 8cf38af5c0301457997afff7bb24ca6cc30bcc17 Mon Sep 17 00:00:00 2001
From: akira-cn <akira.cn@gmail.com>
Date: Tue, 10 Oct 2023 12:16:19 +0800
Subject: [PATCH 1/3] =?UTF-8?q?feat:=20=E5=85=81=E8=AE=B8=E7=94=A8?=
 =?UTF-8?q?=E6=88=B7=E6=8C=87=E5=AE=9Aeditor?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/index.vue | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/components/index.vue b/components/index.vue
index a319e25..9ca3366 100644
--- a/components/index.vue
+++ b/components/index.vue
@@ -2,13 +2,18 @@
 import { ref, onMounted } from 'vue';
 import { Repl, ReplStore } from '@vue/repl';
 import { utoa } from './utils';
-import { defineClientComponent } from 'vitepress'
 import "@vue/repl/style.css";
+import CodeMirror from '@vue/repl/codemirror-editor'
+import Monaco from '@vue/repl/monaco-editor'
 const store = ref();
 const slots = defineSlots();
-const Monaco = defineClientComponent(() => {
-  return import('@vue/repl/monaco-editor')
-})
+const props = defineProps({
+  editor: {
+    type: String,
+    default: 'CodeMirror'
+  }
+});
+
 onMounted(() => {
   const children = slots.default();
   const code = children?.[0]?.children;
@@ -52,7 +57,7 @@ onMounted(() => {
       v-if="store"
       autoResize
       :store="store"
-      :editor="Monaco"
+      :editor="editor === 'CodeMirror' ? CodeMirror : Monaco"
       :showCompileOutput="true"
       :clearConsole="false"
     />

From 753580a6601409d36b0c0c4dba2f6e90d3206a92 Mon Sep 17 00:00:00 2001
From: akira-cn <akira.cn@gmail.com>
Date: Tue, 10 Oct 2023 12:39:35 +0800
Subject: [PATCH 2/3] =?UTF-8?q?fix:=E9=81=BF=E5=85=8D=E7=94=9F=E4=BA=A7?=
 =?UTF-8?q?=E7=8E=AF=E5=A2=83=E4=B8=8B=E6=89=93=E5=8C=85=E5=A4=B1=E8=B4=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/index.vue | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/components/index.vue b/components/index.vue
index 9ca3366..bb44596 100644
--- a/components/index.vue
+++ b/components/index.vue
@@ -2,9 +2,9 @@
 import { ref, onMounted } from 'vue';
 import { Repl, ReplStore } from '@vue/repl';
 import { utoa } from './utils';
+import { defineClientComponent } from 'vitepress'
 import "@vue/repl/style.css";
-import CodeMirror from '@vue/repl/codemirror-editor'
-import Monaco from '@vue/repl/monaco-editor'
+
 const store = ref();
 const slots = defineSlots();
 const props = defineProps({
@@ -13,6 +13,12 @@ const props = defineProps({
     default: 'CodeMirror'
   }
 });
+const Monaco = defineClientComponent(() => {
+  return import('@vue/repl/monaco-editor')
+});
+const CodeMirror = defineClientComponent(() => {
+  return import('@vue/repl/codemirror-editor')
+});
 
 onMounted(() => {
   const children = slots.default();

From e6a3a15a109d7b2052a008d882c33f52701bde5d Mon Sep 17 00:00:00 2001
From: akira-cn <akira.cn@gmail.com>
Date: Tue, 10 Oct 2023 13:27:58 +0800
Subject: [PATCH 3/3] =?UTF-8?q?fix:=E5=A2=9E=E5=8A=A0markdown=E8=AF=AD?=
 =?UTF-8?q?=E6=B3=95=E5=AF=B9editor=E6=94=AF=E6=8C=81=EF=BC=8C=E5=B9=B6?=
 =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E4=B8=80=E4=B8=AA=E9=A1=B5=E9=9D=A2=E4=B8=8A?=
 =?UTF-8?q?=E5=A4=9A=E4=B8=AAplayground=E6=B8=B2=E6=9F=93=E4=BB=A3?=
 =?UTF-8?q?=E7=A0=81=E5=A7=8B=E7=BB=88=E6=98=AF=E7=AC=AC=E4=B8=80=E4=B8=AA?=
 =?UTF-8?q?=E7=9A=84bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 node/index.ts | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/node/index.ts b/node/index.ts
index e0eb510..2988331 100644
--- a/node/index.ts
+++ b/node/index.ts
@@ -1,14 +1,16 @@
 import MarkdownItContainer from 'markdown-it-container';
 export function VueReplMdPlugin(md: markdownit) {
   const defaultRender = md.renderer.rules.fence;
+  const pattern = /^playground\s*(CodeMirror|Monaco)?\s*$/i;
   md.use(MarkdownItContainer, 'playground', {
     validate: function(params: string) {
-      return params.trim().match(/^playground\s*(.*)$/);
+      return params.trim().match(pattern);
     },
     render: function (tokens: any[], idx: number) {
       if (tokens[idx].nesting === 1) {
-        const vueToken = tokens.find(e => e.info === 'vue');
-        return `<VuePlayground>${encodeURIComponent(vueToken.content)}\n`;
+        const editor = tokens[idx].info.toLowerCase().indexOf('monaco') > -1 ? 'Monaco' : 'CodeMirror';
+        const vueToken = tokens.slice(idx).find(e => e.info === 'vue');
+        return `<VuePlayground editor="${editor}">${encodeURIComponent(vueToken.content)}\n`;
       } else {
         // closing tag
         return '</VuePlayground>\n';