feat: output code block should be readonly (#267)

* feat: output code block should be readonly * chore: fmt
rolldown · Nov 14, 2023 · 629fd35 · 629fd35
1 parent 4430a89
commit 629fd35
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 13 deletions.
diff --git a/web/playground/src/App.vue b/web/playground/src/App.vue
@@ -78,6 +78,7 @@ const handleToggleIsEntry = (item: any) => {
         v-for="item in outputs"
         :code="item.code"
         :title="item.title"
+        :readonly="true"
         @code="item.code = $event"
         @title="item.title = $event.target.innerText"
       />

diff --git a/web/playground/src/components/CodeBlock.vue b/web/playground/src/components/CodeBlock.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ShallowRef, defineComponent, ref, shallowRef } from 'vue'
+import { ShallowRef, shallowRef } from 'vue'
 import { Codemirror } from 'vue-codemirror'
 import { javascript } from '@codemirror/lang-javascript'
 import { oneDark } from '@codemirror/theme-one-dark'
@@ -12,14 +12,19 @@ type Payload = {
   container: HTMLElement
 }
 
-defineProps({
+let props = defineProps({
   code: String,
+  readonly: {
+    type: Boolean,
+    required: false,
+  },
 })
 
-const emit = defineEmits(['code'])
-
 const extensions = [javascript(), oneDark]
 
+if (props.readonly) {
+  extensions.push(EditorView.editable.of(false))
+}
 // Codemirror EditorView instance ref
 const view = <ShallowRef<EditorView>>shallowRef()
 const handleReady = (payload: Payload) => {
@@ -43,11 +48,6 @@ const handleReady = (payload: Payload) => {
 //     lines
 //   }
 // }
-
-const handleCodeChange = (e: string) => {
-  emit('code', e)
-}
-const log = console.log
 </script>
 <template>
   <codemirror
@@ -59,8 +59,6 @@ const log = console.log
     :tab-size="2"
     :extensions="extensions"
     @ready="handleReady"
-    @change="handleCodeChange"
-    @focus="log('focus', $event)"
-    @blur="console.log('blur', $event)"
+    @change="$emit('code', $event)"
   />
 </template>
diff --git a/web/playground/src/components/ModuleBlock.vue b/web/playground/src/components/ModuleBlock.vue
@@ -23,6 +23,10 @@ const props = defineProps({
     type: Boolean,
     required: false,
   },
+  readonly: {
+    type: Boolean,
+    required: false,
+  },
 })
 
 const input = ref(null)
@@ -66,7 +70,11 @@ onMounted(() => {
       </button>
     </div>
 
-    <CodeBlock :code="code" @code="$emit('code', $event)" />
+    <CodeBlock
+      :code="code"
+      @code="$emit('code', $event)"
+      :readonly="readonly"
+    />
   </div>
 </template>