From f5bcad3cb4c5239a8a4dfe46cca7db230783559e Mon Sep 17 00:00:00 2001
From: Ahad Birang <farnabaz@gmail.com>
Date: Mon, 5 Sep 2022 11:59:56 +0200
Subject: [PATCH 1/3] chore: playground content from query

---
 docs/components/content/Playground.vue    |  5 +++--
 docs/components/content/PropInspector.vue | 21 +++++++++++++++++++++
 2 files changed, 24 insertions(+), 2 deletions(-)
 create mode 100644 docs/components/content/PropInspector.vue

diff --git a/docs/components/content/Playground.vue b/docs/components/content/Playground.vue
index c62c9d932..6afa181a3 100644
--- a/docs/components/content/Playground.vue
+++ b/docs/components/content/Playground.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, useAsyncData, shallowRef, computed, onMounted, watch } from '#imports'
+import { ref, useAsyncData, shallowRef, computed, onMounted, watch, useRoute } from '#imports'
 import { parse } from '../../../src/runtime/markdown-parser'
 import { useShiki } from '../../editor/useShiki.ts'
 
@@ -33,8 +33,9 @@ This syntax supercharges regular Markdown to write documents interacting deeply
 ::
 `
 const shiki = await useShiki()
+const route = useRoute()
 
-const content = ref(INITIAL_CODE)
+const content = ref(route.query.content || INITIAL_CODE)
 
 const { data: doc, refresh } = await useAsyncData('playground', async () => {
   try {
diff --git a/docs/components/content/PropInspector.vue b/docs/components/content/PropInspector.vue
new file mode 100644
index 000000000..16092ce68
--- /dev/null
+++ b/docs/components/content/PropInspector.vue
@@ -0,0 +1,21 @@
+<script setup>
+import { computed } from 'vue'
+// eslint-disable-next-line vue/require-prop-types
+const props = defineProps(['prop'])
+const propType = computed(() => Array.isArray(props.prop) ? 'array' : typeof props.prop)
+</script>
+
+<template>
+  <pre>
+Type: {{ propType }}
+Value:
+{{ prop }}
+    </pre>
+</template>
+
+<style scoped>
+pre {
+  padding: 1rem 1rem 0 1rem;
+  border-radius: 4px;
+}
+</style>

From 63a40caccea6859b2b043acc53bdfba78c1a6e65 Mon Sep 17 00:00:00 2001
From: Ahad Birang <farnabaz@gmail.com>
Date: Mon, 5 Sep 2022 12:24:44 +0200
Subject: [PATCH 2/3] chore: update fetch key

---
 docs/components/content/Playground.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/components/content/Playground.vue b/docs/components/content/Playground.vue
index 6afa181a3..bab165e49 100644
--- a/docs/components/content/Playground.vue
+++ b/docs/components/content/Playground.vue
@@ -37,7 +37,7 @@ const route = useRoute()
 
 const content = ref(route.query.content || INITIAL_CODE)
 
-const { data: doc, refresh } = await useAsyncData('playground', async () => {
+const { data: doc, refresh } = await useAsyncData('playground-' + content.value, async () => {
   try {
     // const startParse = Date.now()
     let parsed = await parse(content.value)

From ddfd115891832201af0ea7eb5d220a3a8d61b0b2 Mon Sep 17 00:00:00 2001
From: Ahad Birang <farnabaz@gmail.com>
Date: Mon, 5 Sep 2022 15:07:11 +0200
Subject: [PATCH 3/3] chore: update editor

---
 docs/components/content/Playground.vue | 3 ++-
 docs/editor/Editor.vue                 | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/docs/components/content/Playground.vue b/docs/components/content/Playground.vue
index bab165e49..2c1744854 100644
--- a/docs/components/content/Playground.vue
+++ b/docs/components/content/Playground.vue
@@ -55,7 +55,8 @@ const { data: doc, refresh } = await useAsyncData('playground-' + content.value,
       _type: 'markdown',
       updatedAt: new Date().toISOString(),
       ...parsed.meta || {},
-      ...parsed
+      ...parsed,
+      meta: undefined
     }
   } catch (e) {
     return doc.value
diff --git a/docs/editor/Editor.vue b/docs/editor/Editor.vue
index c3d22c758..3384d0c26 100644
--- a/docs/editor/Editor.vue
+++ b/docs/editor/Editor.vue
@@ -1,5 +1,5 @@
 <template>
-  <Monaco :value="raw" :language="language" :read-only="readOnly" @change="update" />
+  <Monaco :value="readOnly? modelValue : raw" :language="language" :read-only="readOnly" @change="update" />
 </template>
 
 <script setup lang="ts">