docs: playground content from query

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,10 +33,11 @@ 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 () => {
+const { data: doc, refresh } = await useAsyncData('playground-' + content.value, async () => {
   try {
     // const startParse = Date.now()
     let parsed = await parse(content.value)
@@ -54,7 +55,8 @@ const { data: doc, refresh } = await useAsyncData('playground', async () => {
       _type: 'markdown',
       updatedAt: new Date().toISOString(),
       ...parsed.meta || {},
-      ...parsed
+      ...parsed,
+      meta: undefined
     }
   } catch (e) {
     return doc.value

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>

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