Merge pull request #1 from akira-cn/main

feat: 允许用户指定editor

components/index.vue

@@ -4,11 +4,22 @@ import { Repl, ReplStore } from '@vue/repl';
 import { utoa } from './utils';
 import { defineClientComponent } from 'vitepress'
 import "@vue/repl/style.css";
+
 const store = ref();
 const slots = defineSlots();
+const props = defineProps({
+  editor: {
+    type: String,
+    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();
   const code = children?.[0]?.children;
@@ -52,7 +63,7 @@ onMounted(() => {
       v-if="store"
       autoResize
       :store="store"
-      :editor="Monaco"
+      :editor="editor === 'CodeMirror' ? CodeMirror : Monaco"
       :showCompileOutput="true"
       :clearConsole="false"
     />

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';