@mongoosejs/studio 0.2.12 → 0.3.0

package/frontend/src/document/document.html

@@ -1,14 +1,14 @@
 <div class="document px-1 pt-4 pb-16 md:px-0 bg-slate-50 w-full">
   <div class="max-w-7xl mx-auto">
-    <div class="flex gap-4 items-center sticky top-0 z-50 bg-white p-4 border-b border-gray-200 shadow-sm">
+    <div class="flex gap-4 items-center sticky top-0 z-50 bg-surface p-4 border-b border-edge shadow-sm">
       <div class="font-bold overflow-hidden text-ellipsis">{{model}}: {{documentId}}</div>
       <div class="flex grow">
         <button
           @click="viewMode = 'fields'"
           :class="viewMode === 'fields'
             ? 'bg-blue-600 text-white z-10'
-            : 'bg-gray-200 text-gray-700 hover:bg-gray-300'"
-          class="px-2 py-1.5 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 flex items-center gap-2 border border-gray-300 border-r-0 rounded-l-lg rounded-r-none"
+            : 'bg-gray-200 text-content-secondary hover:bg-gray-300'"
+          class="px-2 py-1.5 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 flex items-center gap-2 border border-edge-strong border-r-0 rounded-l-lg rounded-r-none"
         >
           <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16"></path>
@@ -19,8 +19,8 @@
           @click="viewMode = 'json'"
           :class="viewMode === 'json'
             ? 'bg-blue-600 text-white z-10'
-            : 'bg-gray-200 text-gray-700 hover:bg-gray-300'"
-          class="px-2 py-1.5 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 flex items-center gap-2 border border-gray-300 rounded-r-lg rounded-l-none"
+            : 'bg-gray-200 text-content-secondary hover:bg-gray-300'"
+          class="px-2 py-1.5 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 flex items-center gap-2 border border-edge-strong rounded-r-lg rounded-l-none"
         >
           <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path>
@@ -48,7 +48,7 @@
           :disabled="!canEdit"
           :class="{'cursor-not-allowed opacity-50': !canEdit}"
           type="button"
-          class="rounded-md bg-ultramarine-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600">
+          class="rounded-md bg-primary px-2.5 py-1.5 text-sm font-semibold text-primary-text shadow-sm hover:bg-primary-hover focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600">
           <img src="images/edit.svg" class="inline" /> Edit
         </button>
         <button
@@ -73,7 +73,7 @@
           <button
             @click="desktopMenuOpen = !desktopMenuOpen"
             type="button"
-            class="inline-flex items-center justify-center rounded-md bg-gray-200 px-2.5 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+            class="inline-flex items-center justify-center rounded-md bg-gray-200 px-2.5 py-1.5 text-sm font-medium text-content-secondary hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
             aria-expanded="desktopMenuOpen"
             aria-label="More options"
           >
@@ -86,13 +86,13 @@
           <div
             v-show="desktopMenuOpen"
             @click.away="desktopMenuOpen = false"
-            class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-50"
+            class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg bg-surface ring-1 ring-black ring-opacity-5 z-50"
           >
             <div class="py-1 flex flex-col">
               <button
                 @click="refreshDocument({ force: true, source: 'manual' }); desktopMenuOpen = false"
                 :disabled="isRefreshing"
-                :class="['flex items-center px-4 py-2 text-sm text-gray-700', isRefreshing ? 'cursor-not-allowed opacity-50' : 'hover:bg-slate-100']"
+                :class="['flex items-center px-4 py-2 text-sm text-content-secondary', isRefreshing ? 'cursor-not-allowed opacity-50' : 'hover:bg-slate-100']"
                 type="button"
               >
                 {{isRefreshing ? 'Refreshing...' : 'Refresh'}}
@@ -101,7 +101,7 @@
                 @click="toggleAutoRefresh(); desktopMenuOpen = false"
                 :disabled="isLambda"
                 type="button"
-                :class="['flex items-center px-4 py-2 text-sm', isLambda ? 'text-gray-400 cursor-not-allowed' : 'text-gray-700 hover:bg-slate-100']"
+                :class="['flex items-center px-4 py-2 text-sm', isLambda ? 'text-gray-400 cursor-not-allowed' : 'text-content-secondary hover:bg-slate-100']"
                 :title="isLambda ? 'Auto-refresh only available on Express deployments' : ''"
               >
                 {{autoRefreshEnabled ? 'Disable Auto-Refresh' : 'Enable Auto-Refresh'}}
@@ -109,28 +109,28 @@
               <button
                 @click="addField(); desktopMenuOpen = false"
                 type="button"
-                class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-green-100"
+                class="flex items-center px-4 py-2 text-sm text-content-secondary hover:bg-green-100"
               >
                 Add Field
               </button>
               <button
                 @click="copyDocument(); desktopMenuOpen = false"
                 type="button"
-                class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-blue-100"
+                class="flex items-center px-4 py-2 text-sm text-content-secondary hover:bg-blue-100"
               >
                 Copy Document
               </button>
               <button
                 @click="openScriptDrawer()"
                 type="button"
-                class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-indigo-100"
+                class="flex items-center px-4 py-2 text-sm text-content-secondary hover:bg-indigo-100"
               >
                 Run Script
               </button>
               <button
                 @click="shouldShowDeleteModal=true; desktopMenuOpen = false"
                 :disabled="!canManipulate"
-                :class="['flex items-center px-4 py-2 text-sm text-gray-700', !canManipulate ? 'cursor-not-allowed opacity-50' : 'hover:bg-red-100']"
+                :class="['flex items-center px-4 py-2 text-sm text-content-secondary', !canManipulate ? 'cursor-not-allowed opacity-50' : 'hover:bg-red-100']"
                 type="button"
               >
                 Delete
@@ -138,7 +138,7 @@
               <button
                 @click="shouldShowCloneModal=true; desktopMenuOpen = false"
                 :disabled="!canManipulate"
-                :class="['flex items-center px-4 py-2 text-sm text-gray-700', !canManipulate ? 'cursor-not-allowed opacity-50' : 'hover:bg-pink-100']"
+                :class="['flex items-center px-4 py-2 text-sm text-content-secondary', !canManipulate ? 'cursor-not-allowed opacity-50' : 'hover:bg-pink-100']"
                 type="button"
               >
                 Clone
@@ -152,7 +152,7 @@
           <button
             @click="mobileMenuOpen = !mobileMenuOpen"
             type="button"
-            class="inline-flex items-center justify-center rounded-md bg-gray-200 px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+            class="inline-flex items-center justify-center rounded-md bg-gray-200 px-3 py-2 text-sm font-medium text-content-secondary hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
             aria-expanded="mobileMenuOpen"
             aria-label="Open menu"
           >
@@ -164,14 +164,14 @@
           <div
             v-show="mobileMenuOpen"
             @click.away="mobileMenuOpen = false"
-            class="origin-top-right absolute right-0 mt-2 w-52 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-50"
+            class="origin-top-right absolute right-0 mt-2 w-52 rounded-md shadow-lg bg-surface ring-1 ring-black ring-opacity-5 z-50"
           >
             <div class="py-1 flex flex-col">
               <button
                 v-if="!editting"
                 @click="editting = true; mobileMenuOpen = false"
                 :disabled="!canEdit"
-                :class="['flex items-center px-4 py-2 text-sm text-gray-700', !canEdit ? 'cursor-not-allowed opacity-50' : 'hover:bg-ultramarine-100']"
+                :class="['flex items-center px-4 py-2 text-sm text-content-secondary', !canEdit ? 'cursor-not-allowed opacity-50' : 'hover:bg-primary-subtle']"
                 type="button"
               >
                 Edit
@@ -180,14 +180,14 @@
                 v-if="editting"
                 @click="editting = false; mobileMenuOpen = false"
                 type="button"
-                class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-slate-100"
+                class="flex items-center px-4 py-2 text-sm text-content-secondary hover:bg-slate-100"
               >
                 Cancel
               </button>
               <button
                 v-if="editting"
                 :disabled="!canManipulate"
-                :class="['flex items-center px-4 py-2 text-sm text-gray-700', !canManipulate ? 'cursor-not-allowed opacity-50' : 'hover:bg-green-100']"
+                :class="['flex items-center px-4 py-2 text-sm text-content-secondary', !canManipulate ? 'cursor-not-allowed opacity-50' : 'hover:bg-green-100']"
                 @click="shouldShowConfirmModal=true; mobileMenuOpen = false"
                 type="button"
               >
@@ -196,7 +196,7 @@
               <button
                 @click="refreshDocument({ force: true, source: 'manual' }); mobileMenuOpen = false"
                 :disabled="isRefreshing"
-                :class="['flex items-center px-4 py-2 text-sm text-gray-700', isRefreshing ? 'cursor-not-allowed opacity-50' : 'hover:bg-slate-100']"
+                :class="['flex items-center px-4 py-2 text-sm text-content-secondary', isRefreshing ? 'cursor-not-allowed opacity-50' : 'hover:bg-slate-100']"
                 type="button"
               >
                 {{isRefreshing ? 'Refreshing...' : 'Refresh'}}
@@ -204,35 +204,35 @@
               <button
                 @click="toggleAutoRefresh(); mobileMenuOpen = false"
                 type="button"
-                class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-slate-100"
+                class="flex items-center px-4 py-2 text-sm text-content-secondary hover:bg-slate-100"
               >
                 Auto-Refresh {{autoRefreshEnabled ? 'ON' : 'OFF'}}
               </button>
               <button
                 @click="addField(); mobileMenuOpen = false"
                 type="button"
-                class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-green-100"
+                class="flex items-center px-4 py-2 text-sm text-content-secondary hover:bg-green-100"
               >
                 Add Field
               </button>
               <button
                 @click="copyDocument(); mobileMenuOpen = false"
                 type="button"
-                class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-blue-100"
+                class="flex items-center px-4 py-2 text-sm text-content-secondary hover:bg-blue-100"
               >
                 Copy Document
               </button>
               <button
                 @click="openScriptDrawer()"
                 type="button"
-                class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-indigo-100"
+                class="flex items-center px-4 py-2 text-sm text-content-secondary hover:bg-indigo-100"
               >
                 Run Script
               </button>
               <button
                 @click="shouldShowDeleteModal=true; mobileMenuOpen = false"
                 :disabled="!canManipulate"
-                :class="['flex items-center px-4 py-2 text-sm text-gray-700', !canManipulate ? 'cursor-not-allowed opacity-50' : 'hover:bg-red-100']"
+                :class="['flex items-center px-4 py-2 text-sm text-content-secondary', !canManipulate ? 'cursor-not-allowed opacity-50' : 'hover:bg-red-100']"
                 type="button"
               >
                 Delete
@@ -240,7 +240,7 @@
               <button
                 @click="shouldShowCloneModal=true; mobileMenuOpen = false"
                 :disabled="!canManipulate"
-                :class="['flex items-center px-4 py-2 text-sm text-gray-700', !canManipulate ? 'cursor-not-allowed opacity-50' : 'hover:bg-pink-100']"
+                :class="['flex items-center px-4 py-2 text-sm text-content-secondary', !canManipulate ? 'cursor-not-allowed opacity-50' : 'hover:bg-pink-100']"
                 type="button"
               >
                 Clone
@@ -289,5 +289,31 @@
       @close="closeScriptDrawer"
       @refresh="handleScriptRefresh"
     ></execute-script>
+    <div
+      v-if="keyboardShortcuts.length > 0"
+      class="fixed bottom-4 left-4 z-40 group"
+    >
+      <button
+        type="button"
+        aria-label="Keyboard shortcuts"
+        title="Keyboard shortcuts"
+        class="rounded-full border border-slate-300 bg-surface p-2 text-slate-700 shadow-sm transition-colors hover:bg-slate-100 focus:outline-none focus:ring-2 focus:ring-primary"
+      >
+        <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true">
+          <rect x="2.5" y="6.5" width="19" height="11" rx="2" stroke-width="1.5"></rect>
+          <path d="M6 10.5h1.5M9 10.5h1.5M12 10.5h1.5M15 10.5h1.5M18 10.5h.01M6 13.5h1.5M9 13.5h6M16.5 13.5h1.5" stroke-width="1.5" stroke-linecap="round"></path>
+        </svg>
+      </button>
+      <div class="pointer-events-none absolute left-0 bottom-full mb-2 min-w-[220px] translate-y-1 rounded-lg bg-slate-900 px-3 py-2.5 text-slate-200 opacity-0 shadow-xl transition-all duration-150 group-hover:pointer-events-auto group-hover:translate-y-0 group-hover:opacity-100 group-focus-within:pointer-events-auto group-focus-within:translate-y-0 group-focus-within:opacity-100">
+        <div
+          v-for="shortcut in keyboardShortcuts"
+          :key="shortcut.command + shortcut.description"
+          class="flex items-center justify-between gap-3 text-xs"
+        >
+          <span class="font-mono font-semibold text-slate-50">{{shortcut.command}}</span>
+          <span class="text-slate-300">{{shortcut.description}}</span>
+        </div>
+      </div>
+    </div>
   </div>
 </div>

package/frontend/src/document/document.js

@@ -40,11 +40,17 @@ module.exports = app => app.component('document', {
   }),
   async mounted() {
     window.pageState = this;
+    if (typeof window !== 'undefined' && window.addEventListener) {
+      window.addEventListener('keydown', this.handleSaveShortcut);
+    }
     // Store query parameters from the route (preserved from models page)
     this.previousQuery = Object.assign({}, this.$route.query);
     await this.refreshDocument({ force: true, source: 'initial' });
   },
-  beforeDestroy() {
+  beforeUnmount() {
+    if (typeof window !== 'undefined' && window.removeEventListener) {
+      window.removeEventListener('keydown', this.handleSaveShortcut);
+    }
     this.stopAutoRefresh();
   },
   computed: {
@@ -74,6 +80,13 @@ module.exports = app => app.component('document', {
     canEdit() {
       return this.canManipulate && this.viewMode === 'fields';
     },
+    keyboardShortcuts() {
+      const shortcuts = [];
+      if (this.editting && this.canManipulate) {
+        shortcuts.push({ command: 'Ctrl + S', description: 'Save document' });
+      }
+      return shortcuts;
+    },
     isLambda() {
       return !!window?.MONGOOSE_STUDIO_CONFIG?.isLambda;
     }
@@ -86,6 +99,19 @@ module.exports = app => app.component('document', {
     }
   },
   methods: {
+    handleSaveShortcut(event) {
+      const key = typeof event?.key === 'string' ? event.key.toLowerCase() : '';
+      const isSaveShortcut = (event.ctrlKey || event.metaKey) && key === 's';
+      if (!isSaveShortcut) {
+        return;
+      }
+      if (!this.editting || !this.canManipulate) {
+        return;
+      }
+
+      event.preventDefault();
+      this.shouldShowConfirmModal = true;
+    },
     cancelEdit() {
       this.changes = {};
       this.editting = false;

package/frontend/src/document/execute-script/execute-script.html

@@ -1,10 +1,10 @@
 <div v-if="isOpen" class="fixed inset-0 z-50 execute-script-drawer" :class="{ 'is-closing': isClosing }">
   <div class="execute-script-backdrop absolute inset-0 bg-black/40" @click="close"></div>
-  <div class="execute-script-panel absolute right-0 top-0 h-full w-full max-w-xl bg-white shadow-xl flex flex-col">
-    <div class="flex items-center justify-between px-5 py-4 border-b border-gray-200">
+  <div class="execute-script-panel absolute right-0 top-0 h-full w-full max-w-xl bg-surface shadow-xl flex flex-col">
+    <div class="flex items-center justify-between px-5 py-4 border-b border-edge">
       <div>
-        <h2 class="text-lg font-semibold text-gray-900">Run Script</h2>
-        <p class="text-xs text-gray-500">Use <code class="bg-gray-100 px-1 rounded">doc</code> for this document.</p>
+        <h2 class="text-lg font-semibold text-content">Run Script</h2>
+        <p class="text-xs text-content-tertiary">Use <code class="bg-muted px-1 rounded">doc</code> for this document.</p>
       </div>
       <button
         type="button"
@@ -17,16 +17,15 @@
     </div>
     <div class="flex-1 overflow-auto p-5 space-y-4">
       <div class="space-y-2">
-        <label class="text-sm font-medium text-gray-700">Script</label>
-        <textarea
-          ref="scriptEditor"
-          :value="scriptText"
-          @input="updateScriptText"
-          rows="8"
-          placeholder="await doc.updateName('new name')&#10;return doc"
-          class="w-full rounded-md border border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-500 font-mono text-sm"
-        ></textarea>
-        <p class="text-xs text-gray-500">Return a value to see it in the output panel.</p>
+        <label class="text-sm font-medium text-content-secondary">Script</label>
+        <ace-editor
+          v-model="scriptText"
+          mode="javascript"
+          :line-numbers="true"
+          :wrap="true"
+          class="min-h-[200px]"
+        />
+        <p class="text-xs text-content-tertiary">Return a value to see it in the output panel.</p>
       </div>
       <div class="flex items-center gap-3">
         <button
@@ -41,7 +40,7 @@
         <button
           type="button"
           @click="clearScript"
-          class="text-sm text-gray-500 hover:text-gray-700"
+          class="text-sm text-content-tertiary hover:text-content-secondary"
         >
           Clear
         </button>
@@ -50,17 +49,17 @@
         <div v-if="scriptError" class="rounded-md border border-red-200 bg-red-50 p-3 text-sm text-red-700">
           {{scriptError}}
         </div>
-        <div v-if="scriptHasRun" class="rounded-md border border-gray-200 bg-gray-50 p-3">
-          <div class="text-xs uppercase tracking-wide text-gray-500 mb-2">Output</div>
+        <div v-if="scriptHasRun" class="rounded-md border border-edge bg-page p-3">
+          <div class="text-xs uppercase tracking-wide text-content-tertiary mb-2">Output</div>
           <pre class="whitespace-pre-wrap text-sm text-gray-800">{{formatScriptOutput(scriptResult)}}</pre>
         </div>
-        <div v-if="scriptLogs" class="rounded-md border border-gray-200 bg-white p-3">
-          <div class="text-xs uppercase tracking-wide text-gray-500 mb-2">Logs</div>
-          <pre class="whitespace-pre-wrap text-xs text-gray-700">{{scriptLogs}}</pre>
+        <div v-if="scriptLogs" class="rounded-md border border-edge bg-surface p-3">
+          <div class="text-xs uppercase tracking-wide text-content-tertiary mb-2">Logs</div>
+          <pre class="whitespace-pre-wrap text-xs text-content-secondary">{{scriptLogs}}</pre>
         </div>
       </div>
     </div>
-    <div class="border-t border-gray-200 px-5 py-3 text-xs text-gray-500">
+    <div class="border-t border-edge px-5 py-3 text-xs text-content-tertiary">
       Scripts run on the server with access to the Mongoose document instance.
     </div>
   </div>

package/frontend/src/document/execute-script/execute-script.js

@@ -17,7 +17,6 @@ module.exports = app => app.component('execute-script', {
       scriptError: null,
       scriptHasRun: false,
       scriptRunning: false,
-      scriptEditor: null,
       isOpen: false,
       isClosing: false
     };
@@ -29,19 +28,11 @@ module.exports = app => app.component('execute-script', {
         this.isClosing = false;
       } else if (this.isOpen) {
         this.isClosing = true;
-        this.destroyScriptEditor();
         setTimeout(() => {
           this.isOpen = false;
           this.isClosing = false;
         }, 200);
       }
-    },
-    isOpen(newVal) {
-      if (newVal) {
-        this.$nextTick(() => {
-          this.initializeScriptEditor();
-        });
-      }
     }
   },
   mounted() {
@@ -49,46 +40,16 @@ module.exports = app => app.component('execute-script', {
       this.isOpen = true;
     }
   },
-  beforeDestroy() {
-    this.destroyScriptEditor();
-  },
   methods: {
     close() {
       this.$emit('close');
     },
-    initializeScriptEditor() {
-      if (!this.$refs.scriptEditor || this.scriptEditor || typeof CodeMirror === 'undefined') {
-        return;
-      }
-
-      this.$refs.scriptEditor.value = this.scriptText;
-      this.scriptEditor = CodeMirror.fromTextArea(this.$refs.scriptEditor, {
-        mode: 'javascript',
-        lineNumbers: true,
-        lineWrapping: true
-      });
-      this.scriptEditor.on('change', () => {
-        this.scriptText = this.scriptEditor.getValue();
-      });
-    },
-    destroyScriptEditor() {
-      if (this.scriptEditor) {
-        this.scriptEditor.toTextArea();
-        this.scriptEditor = null;
-      }
-    },
-    updateScriptText(event) {
-      this.scriptText = event.target.value;
-    },
     clearScript() {
       this.scriptText = '';
       this.scriptResult = null;
       this.scriptLogs = '';
       this.scriptError = null;
       this.scriptHasRun = false;
-      if (this.scriptEditor) {
-        this.scriptEditor.setValue('');
-      }
     },
     formatScriptOutput(value) {
       if (value === undefined) {
@@ -107,7 +68,7 @@ module.exports = app => app.component('execute-script', {
       }
     },
     async runDocumentScript() {
-      const scriptToRun = (this.scriptEditor ? this.scriptEditor.getValue() : this.scriptText || '').trim();
+      const scriptToRun = (this.scriptText || '').trim();
       if (!scriptToRun) {
         this.$toast.error('Script cannot be empty.');
         return;
@@ -123,9 +84,6 @@ module.exports = app => app.component('execute-script', {
           script: scriptToRun
         });
         this.scriptText = scriptToRun;
-        if (this.scriptEditor) {
-          this.scriptEditor.setValue(scriptToRun);
-        }
         this.scriptResult = result;
         this.scriptLogs = logs;
         this.scriptHasRun = true;

package/frontend/src/document-details/document-details.css

@@ -70,21 +70,16 @@
   box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
 }
 
-/* CodeMirror styling in modal */
-.add-field-modal .CodeMirror {
+/* Ace editor styling in modal */
+.add-field-modal .add-field-ace-editor.ace_editor {
   border: 1px solid #d1d5db;
   border-radius: 0.375rem;
   font-size: 14px;
-  height: auto;
   min-height: 100px;
 }
 
-.add-field-modal .CodeMirror:focus-within {
-  border-color: #3b82f6;
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
-}
-
-.add-field-modal .CodeMirror.CodeMirror-focused {
+.add-field-modal .add-field-ace-editor:focus-within.ace_editor,
+.add-field-modal .add-field-ace-editor.ace_focus {
   border-color: #3b82f6;
   box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
 }