From e5d38fd3c7247c9bcc0980638192bb679277b30c Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <git@vladimir.berlin>
Date: Wed, 19 Aug 2026 15:51:48 +0900
Subject: [PATCH] refactor(ui): consolidate CodeMirror options prop (#11008)

Co-authored-by: Hiroshi Ogawa <4232207+hi-ogawa@users.noreply.github.com>
Co-authored-by: OpenCode <noreply@opencode.ai>
---
 packages/ui/client/components/CodeMirrorContainer.vue | 11 +++++------
 .../client/components/ModuleTransformResultView.vue   |  6 +++---
 packages/ui/client/components/views/ViewEditor.vue    |  6 +++---
 3 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/packages/ui/client/components/CodeMirrorContainer.vue b/packages/ui/client/components/CodeMirrorContainer.vue
index c9c20b447..0641fd0df 100644
--- a/packages/ui/client/components/CodeMirrorContainer.vue
+++ b/packages/ui/client/components/CodeMirrorContainer.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import type { EditorFromTextArea } from 'codemirror'
+import type { EditorConfiguration, EditorFromTextArea } from 'codemirror'
 import type { Ref } from 'vue'
-import { onMounted, ref, useAttrs } from 'vue'
+import { onMounted, ref } from 'vue'
 import { codemirrorRef, useCodeMirror } from '~/composables/codemirror'
 
-const { mode, readOnly } = defineProps<{
+const { mode, options, readOnly } = defineProps<{
   mode?: string
+  options?: EditorConfiguration
   readOnly?: boolean
   saving?: boolean
 }>()
@@ -17,8 +18,6 @@ const emit = defineEmits<{
 
 const modelValue = defineModel<string>()
 
-const attrs = useAttrs()
-
 const modeMap: Record<string, any> = {
   html: 'htmlmixed',
   vue: 'htmlmixed',
@@ -38,7 +37,7 @@ const el = ref<HTMLTextAreaElement>()
 onMounted(async () => {
   // useCodeMirror will remove the codemirrorRef.value on onUnmounted callback
   const codemirror = useCodeMirror(el, modelValue as unknown as Ref<string>, {
-    ...attrs,
+    ...options,
     mode: modeMap[mode || ''] || mode,
     readOnly: readOnly ? true : undefined,
     extraKeys: {
diff --git a/packages/ui/client/components/ModuleTransformResultView.vue b/packages/ui/client/components/ModuleTransformResultView.vue
index 74bd2c929..1cfa84963 100644
--- a/packages/ui/client/components/ModuleTransformResultView.vue
+++ b/packages/ui/client/components/ModuleTransformResultView.vue
@@ -307,7 +307,7 @@ onKeyStroke('Escape', () => {
           h-full
           :model-value="source"
           read-only
-          v-bind="{ lineNumbers: true }"
+          :options="{ lineNumbers: true }"
           :mode="ext"
           @codemirror="markImportDurations($event)"
         />
@@ -316,7 +316,7 @@ onKeyStroke('Escape', () => {
           h-full
           :model-value="code"
           read-only
-          v-bind="{ lineNumbers: true }"
+          :options="{ lineNumbers: true }"
           mode="js"
         />
       </div>
@@ -327,7 +327,7 @@ onKeyStroke('Escape', () => {
         <CodeMirrorContainer
           :model-value="sourceMap.mappings"
           read-only
-          v-bind="{ lineNumbers: true }"
+          :options="{ lineNumbers: true }"
         />
       </div>
     </template>
diff --git a/packages/ui/client/components/views/ViewEditor.vue b/packages/ui/client/components/views/ViewEditor.vue
index 397367fff..2cebb5e8c 100644
--- a/packages/ui/client/components/views/ViewEditor.vue
+++ b/packages/ui/client/components/views/ViewEditor.vue
@@ -448,10 +448,10 @@ onBeforeUnmount(clearListeners)
     ref="editor"
     v-model="code"
     h-full
-    v-bind="{
+    :read-only="isReport || !config.api?.allowWrite"
+    :saving="saving"
+    :options="{
       lineNumbers: true,
-      readOnly: isReport || !config.api?.allowWrite,
-      saving,
       styleActiveLine: true,
       gutters: ['CodeMirror-linenumbers', ...traceGutterConfigs],
     }"
-- 
2.51.2