docs: separate Editor and EditorInner

docs/components/Editor.vue

@@ -1,28 +1,14 @@
-<script setup lang="ts">
-	import { ref, onMounted } from 'vue'
-	import * as monaco from 'monaco-editor'
-	import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
-
-	self.MonacoEnvironment = {
-		getWorker: () => new editorWorker(),
-	}
-
-	const editorEl = ref(null)
-
-	onMounted(() => {
-		monaco.languages.register({ id: 'dyn' })
-
-		monaco.languages.setMonarchTokensProvider('dyn', {
-			tokenizer: { root: [] },
-		})
-
-		monaco.editor.create(editorEl.value, {
-			language: 'dyn',
-			automaticLayout: true,
-		})
-	})
+<script setup>
+	import { defineAsyncComponent } from 'vue'
+	import { inBrowser } from 'vitepress'
+
+	const EditorInner = inBrowser
+		? defineAsyncComponent(
+				() => import('./EditorInner.vue'),
+			)
+		: () => null
 </script>
 
 <template>
-	<div ref="editorEl"></div>
+	<EditorInner />
 </template>

docs/components/EditorInner.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+	import { ref, onMounted } from 'vue'
+	import * as monaco from 'monaco-editor'
+	import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
+
+	self.MonacoEnvironment = {
+		getWorker: () => new editorWorker(),
+	}
+
+	const editorEl = ref(null)
+
+	onMounted(() => {
+		monaco.languages.register({ id: 'dyn' })
+
+		monaco.languages.setMonarchTokensProvider('dyn', {
+			tokenizer: { root: [] },
+		})
+
+		monaco.editor.create(editorEl.value, {
+			language: 'dyn',
+			automaticLayout: true,
+		})
+	})
+</script>
+
+<template>
+	<div ref="editorEl"></div>
+</template>

docs/components/Playground.vue

@@ -2,13 +2,7 @@
 	import Split from './Split.vue'
 	import Output from './Output.vue'
 	import Buttons from './Buttons.vue'
-
-	import { defineAsyncComponent } from 'vue'
-	import { inBrowser } from 'vitepress'
-
-	const Editor = inBrowser
-		? defineAsyncComponent(() => import('./Editor.vue'))
-		: () => null
+	import Editor from './Editor.vue'
 </script>
 
 <template>

docs/playground.md

@@ -4,10 +4,7 @@ sidebar: false
 ---
 
 <script setup>
-	import { defineAsyncComponent } from 'vue';
-	import { inBrowser } from 'vitepress';
-
-	const Editor = inBrowser ? defineAsyncComponent(() => import('./components/Editor.vue')) : () => null;
+	import Playground from './components/Playground.vue';
 </script>
 
-<Editor width="600" height="800" />
+<Playground />