From 31fa3a07a16c66b0465acfabf3b28b8fcfa2c6bf Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Mon, 9 Jun 2025 14:41:30 +0100
Subject: [PATCH 01/12] Extract code fieldtype into UI component

---
 .../components/fieldtypes/CodeFieldtype.vue   | 175 ++++----------
 resources/js/components/ui/CodeEditor.vue     | 222 ++++++++++++++++++
 resources/js/components/ui/index.js           |   2 +
 3 files changed, 264 insertions(+), 135 deletions(-)
 create mode 100644 resources/js/components/ui/CodeEditor.vue

diff --git a/resources/js/components/fieldtypes/CodeFieldtype.vue b/resources/js/components/fieldtypes/CodeFieldtype.vue
index d14b91c55a..662dae5c44 100644
--- a/resources/js/components/fieldtypes/CodeFieldtype.vue
+++ b/resources/js/components/fieldtypes/CodeFieldtype.vue
@@ -1,6 +1,5 @@
 <template>
     <portal name="code-fullscreen" :disabled="!fullScreenMode" target-class="code-fieldtype">
-        <element-container @resized="refresh">
             <div class="code-fieldtype-container" :class="[themeClass, { 'code-fullscreen': fullScreenMode }]">
                 <publish-field-fullscreen-header
                     v-if="fullScreenMode"
@@ -10,12 +9,13 @@
                 >
                     <div class="code-fieldtype-toolbar-fullscreen">
                         <div>
-                            <select-input
+                            <Select
+                                class="w-full"
                                 v-if="config.mode_selectable"
                                 :options="modes"
-                                v-model="mode"
-                                :is-read-only="isReadOnly"
-                                class="text-xs leading-none"
+                                :disabled="isReadOnly"
+                                :model-value="mode"
+                                @update:modelValue="modeUpdated"
                             />
                             <div v-else v-text="modeLabel" class="font-mono text-xs text-gray-700"></div>
                         </div>
@@ -23,65 +23,47 @@
                 </publish-field-fullscreen-header>
                 <div class="code-fieldtype-toolbar" v-if="!fullScreenMode">
                     <div>
-                        <select-input
+                        <Select
+                            class="w-full"
                             v-if="config.mode_selectable"
                             :options="modes"
-                            v-model="mode"
-                            :is-read-only="isReadOnly"
-                            class="text-xs leading-none"
+                            :disabled="isReadOnly"
+                            :model-value="mode"
+                            @update:modelValue="modeUpdated"
                         />
+
                         <div v-else v-text="modeLabel" class="font-mono text-xs text-gray-700"></div>
                     </div>
                 </div>
-                <div ref="codemirror"></div>
+                <CodeEditor
+                    :mode="mode"
+                    :modes="modes"
+                    :theme="config.theme"
+                    :rulers="config.rulers"
+                    :disabled="isReadOnly"
+                    :key-map="config.key_map"
+                    :tab-size="config.indent_size"
+                    :indent-type="config.indent_type"
+                    :line-numbers="config.line_numbers"
+                    :line-wrapping="config.line_wrapping"
+                    :model-value="value.code"
+                    @update:model-value="codeUpdated"
+                />
             </div>
-        </element-container>
     </portal>
 </template>
 
 <script>
 import Fieldtype from './Fieldtype.vue';
-import CodeMirror from 'codemirror';
-import { markRaw } from 'vue';
-
-// Addons
-import 'codemirror/addon/edit/matchbrackets';
-import 'codemirror/addon/display/fullscreen';
-import 'codemirror/addon/display/rulers';
-
-// Keymaps
-import 'codemirror/keymap/sublime';
-import 'codemirror/keymap/vim';
-
-// Modes
-import 'codemirror/mode/css/css';
-import 'codemirror/mode/clike/clike';
-import 'codemirror/mode/diff/diff';
-import 'codemirror/mode/go/go';
-import 'codemirror/mode/gfm/gfm';
-import 'codemirror/mode/handlebars/handlebars';
-import 'codemirror/mode/haml/haml';
-import 'codemirror/mode/htmlmixed/htmlmixed';
-import 'codemirror/mode/javascript/javascript';
-import 'codemirror/mode/markdown/markdown';
-import 'codemirror/mode/nginx/nginx';
-import 'codemirror/mode/php/php';
-import 'codemirror/mode/python/python';
-import 'codemirror/mode/ruby/ruby';
-import 'codemirror/mode/shell/shell';
-import 'codemirror/mode/sql/sql';
-import 'codemirror/mode/twig/twig';
-import 'codemirror/mode/vue/vue';
-import 'codemirror/mode/xml/xml';
-import 'codemirror/mode/yaml/yaml';
-import 'codemirror/mode/yaml-frontmatter/yaml-frontmatter';
+import { Select, CodeEditor } from '@statamic/ui';
 
 export default {
     mixins: [Fieldtype],
 
+    components: { Select, CodeEditor },
+
     data() {
         return {
-            codemirror: null,
             modes: [
                 { value: 'clike', label: 'C-Like' },
                 { value: 'css', label: 'CSS' },
@@ -109,46 +91,29 @@ export default {
                 { value: 'xml', label: 'XML' },
                 { value: 'yaml-frontmatter', label: 'YAML' },
             ],
-            mode: this.value.mode || this.config.mode,
             fullScreenMode: false,
         };
     },
 
     computed: {
+        mode() {
+            return this.value.mode || this.config.mode;
+        },
+
         modeLabel() {
             return this.modes.find((m) => m.value === this.mode).label || this.mode;
         },
-        exactTheme() {
-            return this.config.theme === 'light' ? 'default' : 'material';
-        },
+
         themeClass() {
-            return 'theme-' + this.config.theme;
+            return `theme-${this.config.theme}`;
         },
+
         replicatorPreview() {
             if (!this.showFieldPreviews || !this.config.replicator_preview) return;
 
             return this.value.code ? truncate(this.value.code, 60) : '';
         },
-        readOnlyOption() {
-            return this.isReadOnly ? 'nocursor' : false;
-        },
-        rulers() {
-            if (!this.config.rulers) {
-                return [];
-            }
-
-            let rulerColor = this.config.theme === 'light' ? '#d1d5db' : '#546e7a';
 
-            return Object.entries(this.config.rulers).map(([column, style]) => {
-                let lineStyle = style === 'dashed' ? 'dashed' : 'solid';
-
-                return {
-                    column: parseInt(column),
-                    lineStyle: lineStyle,
-                    color: rulerColor,
-                };
-            });
-        },
         internalFieldActions() {
             return [
                 {
@@ -162,75 +127,15 @@ export default {
         },
     },
 
-    watch: {
-        value(value, oldValue) {
-            if (value.code == this.codemirror.doc.getValue()) return;
-            if (!value.code) value.code = '';
-
-            this.codemirror.doc.setValue(value.code);
-        },
-        readOnlyOption(val) {
-            this.codemirror.setOption('readOnly', val);
-        },
-        mode(mode) {
-            this.codemirror.setOption('mode', mode);
-            this.updateDebounced({ code: this.value.code, mode: this.mode });
-        },
-    },
-
-    mounted() {
-        this.$nextTick(() => this.initCodeMirror());
-    },
-
     methods: {
-        focus() {
-            this.codemirror.focus();
+        modeUpdated(mode) {
+            this.updateDebounced({ code: this.value.code, mode });
         },
-        refresh() {
-            this.$nextTick(function () {
-                this.codemirror.refresh();
-            });
-        },
-        initCodeMirror() {
-            this.codemirror = markRaw(
-                CodeMirror(this.$refs.codemirror, {
-                    value: this.value.code || '',
-                    mode: this.mode,
-                    direction: document.querySelector('html').getAttribute('dir') ?? 'ltr',
-                    addModeClass: true,
-                    keyMap: this.config.key_map,
-                    tabSize: this.config.indent_size,
-                    indentWithTabs: this.config.indent_type !== 'spaces',
-                    lineNumbers: this.config.line_numbers,
-                    lineWrapping: this.config.line_wrapping,
-                    matchBrackets: true,
-                    readOnly: this.readOnlyOption,
-                    theme: this.exactTheme,
-                    inputStyle: 'contenteditable',
-                    rulers: this.rulers,
-                }),
-            );
-
-            this.codemirror.on('change', (cm) => {
-                this.updateDebounced({ code: cm.doc.getValue(), mode: this.mode });
-            });
-
-            this.codemirror.on('focus', () => this.$emit('focus'));
-            this.codemirror.on('blur', () => this.$emit('blur'));
-
-            // Refresh to ensure CodeMirror visible and the proper size
-            // Most applicable when loaded by another field like Bard
-            this.refresh();
 
-            this.codemirror.setOption('fullScreen', this.fullScreenMode);
-
-            if (this.fullScreenMode === false) {
-                document.documentElement.removeAttribute('style');
-            }
-
-            // CodeMirror also needs to be manually refreshed when made visible in the DOM
-            this.$events.$on('tab-switched', this.refresh);
+        codeUpdated(code) {
+            this.updateDebounced({ code, mode: this.mode });
         },
+
         toggleFullscreen() {
             this.fullScreenMode = !this.fullScreenMode;
         },
diff --git a/resources/js/components/ui/CodeEditor.vue b/resources/js/components/ui/CodeEditor.vue
new file mode 100644
index 0000000000..ee9d6702cc
--- /dev/null
+++ b/resources/js/components/ui/CodeEditor.vue
@@ -0,0 +1,222 @@
+<script setup>
+import CodeMirror from 'codemirror';
+import { computed, markRaw, nextTick, onMounted, ref, useAttrs, useTemplateRef, watch } from 'vue';
+import ElementContainer from '@statamic/components/ElementContainer.vue';
+
+// Addons
+import 'codemirror/addon/edit/matchbrackets';
+import 'codemirror/addon/display/fullscreen';
+import 'codemirror/addon/display/rulers';
+
+// Keymaps
+import 'codemirror/keymap/sublime';
+import 'codemirror/keymap/vim';
+
+// Modes
+import 'codemirror/mode/css/css';
+import 'codemirror/mode/clike/clike';
+import 'codemirror/mode/diff/diff';
+import 'codemirror/mode/go/go';
+import 'codemirror/mode/gfm/gfm';
+import 'codemirror/mode/handlebars/handlebars';
+import 'codemirror/mode/haml/haml';
+import 'codemirror/mode/htmlmixed/htmlmixed';
+import 'codemirror/mode/javascript/javascript';
+import 'codemirror/mode/markdown/markdown';
+import 'codemirror/mode/nginx/nginx';
+import 'codemirror/mode/php/php';
+import 'codemirror/mode/python/python';
+import 'codemirror/mode/ruby/ruby';
+import 'codemirror/mode/shell/shell';
+import 'codemirror/mode/sql/sql';
+import 'codemirror/mode/twig/twig';
+import 'codemirror/mode/vue/vue';
+import 'codemirror/mode/xml/xml';
+import 'codemirror/mode/yaml/yaml';
+import 'codemirror/mode/yaml-frontmatter/yaml-frontmatter';
+
+const emit = defineEmits(['update:modelValue', 'focus', 'blur']);
+
+const props = defineProps({
+    mode: String,
+    modes: {
+        type: Array,
+        default: () => [
+            { value: 'clike', label: 'C-Like' },
+            { value: 'css', label: 'CSS' },
+            { value: 'diff', label: 'Diff' },
+            { value: 'go', label: 'Go' },
+            { value: 'haml', label: 'HAML' },
+            { value: 'handlebars', label: 'Handlebars' },
+            { value: 'htmlmixed', label: 'HTML' },
+            { value: 'less', label: 'LESS' },
+            { value: 'markdown', label: 'Markdown' },
+            { value: 'gfm', label: 'Markdown (GHF)' },
+            { value: 'nginx', label: 'Nginx' },
+            { value: 'text/x-java', label: 'Java' },
+            { value: 'javascript', label: 'JavaScript' },
+            { value: 'jsx', label: 'JSX' },
+            { value: 'text/x-objectivec', label: 'Objective-C' },
+            { value: 'php', label: 'PHP' },
+            { value: 'python', label: 'Python' },
+            { value: 'ruby', label: 'Ruby' },
+            { value: 'scss', label: 'SCSS' },
+            { value: 'shell', label: 'Shell' },
+            { value: 'sql', label: 'SQL' },
+            { value: 'twig', label: 'Twig' },
+            { value: 'vue', label: 'Vue' },
+            { value: 'xml', label: 'XML' },
+            { value: 'yaml-frontmatter', label: 'YAML Frontmatter' }
+        ],
+    },
+    theme: {
+        type: String,
+        default: 'material',
+    },
+    rulers: {
+        type: Array,
+        default: () => [],
+    },
+    disabled: Boolean,
+    keyMap: {
+        type: String,
+        default: 'sublime',
+    },
+    tabSize: {
+        type: Number,
+        required: false,
+    },
+    indentType: {
+        type: String,
+        default: 'tabs',
+    },
+    lineNumbers: {
+        type: Boolean,
+        default: true,
+    },
+    lineWrapping: {
+        type: Boolean,
+        default: true,
+    },
+    modelValue: String,
+});
+
+defineOptions({
+    inheritAttrs: false,
+});
+
+const codemirror = ref(null);
+const codemirrorElement = useTemplateRef('codemirror');
+
+onMounted(() => {
+    nextTick(() => initCodeMirror());
+});
+
+function initCodeMirror() {
+    codemirror.value = markRaw(
+        CodeMirror(codemirrorElement.value, {
+            value: props.modelValue || '',
+            mode: props.mode,
+            direction: document.querySelector('html').getAttribute('dir') ?? 'ltr',
+            addModeClass: true,
+            keyMap: props.keyMap,
+            tabSize: props.indentSize,
+            indentWithTabs: props.indentType !== 'spaces',
+            lineNumbers: props.lineNumbers,
+            lineWrapping: props.lineWrapping,
+            matchBrackets: true,
+            readOnly: props.disabled ? 'nocursor' : false,
+            theme: exactTheme.value,
+            inputStyle: 'contenteditable',
+            rulers: rulers,
+        }),
+    );
+
+    codemirror.value.on('change', (cm) => {
+        emit('update:modelValue', cm.doc.getValue());
+    });
+
+    codemirror.value.on('focus', () => emit('focus'));
+    codemirror.value.on('blur', () => emit('blur'));
+
+    // Refresh to ensure CodeMirror visible and the proper size
+    // Most applicable when loaded by another field like Bard
+    refresh();
+
+    // todo
+    // codemirror.value.setOption('fullScreen', this.fullScreenMode);
+
+    // if (this.fullScreenMode === false) {
+    //     document.documentElement.removeAttribute('style');
+    // }
+
+    // CodeMirror also needs to be manually refreshed when made visible in the DOM
+    // $events.$on('tab-switched', this.refresh);
+    // todo
+}
+
+function focus() {
+    codemirror.value.focus();
+}
+
+function refresh() {
+    nextTick(() => {
+        codemirror.value.refresh();
+    })
+}
+
+watch(
+    () => props.mode,
+    (value) => {
+        codemirror.value?.setOption('mode', value);
+    },
+    { immediate: true }
+);
+
+watch(
+    () => props.disabled,
+    (value) => {
+        codemirror.value?.setOption('readOnly', value ? 'nocursor' : false);
+    },
+    { immediate: true }
+);
+
+watch(
+    () => props.modelValue,
+    (value) => {
+        if (value === codemirror.value?.doc.getValue()) return;
+        if (!value) value = '';
+
+        codemirror.value?.doc.setValue(value);
+    },
+    { immediate: true }
+);
+
+const exactTheme = computed(() => {
+    return props.theme === 'light' ? 'default' : 'material';
+});
+
+const rulers = computed(() => {
+    if (! props.rulers) {
+        return [];
+    }
+
+    let rulerColor = props.theme === 'light' ? '#d1d5db' : '#546e7a';
+
+    return Object.entries(props.rulers).map(([column, style]) => {
+        let lineStyle = style === 'dashed' ? 'dashed' : 'solid';
+
+        return {
+            column: parseInt(column),
+            lineStyle: lineStyle,
+            color: rulerColor,
+        };
+    });
+});
+</script>
+
+<template>
+    <ElementContainer @resized="refresh">
+        <div ref="codemirror"></div>
+    </ElementContainer>
+</template>
diff --git a/resources/js/components/ui/index.js b/resources/js/components/ui/index.js
index 86f3e62ef8..fab27fdba9 100644
--- a/resources/js/components/ui/index.js
+++ b/resources/js/components/ui/index.js
@@ -9,6 +9,7 @@ import { default as CardPanel } from './Card/Panel.vue';
 import { default as CharacterCounter } from './CharacterCounter.vue';
 import { default as Checkbox } from './Checkbox/Item.vue';
 import { default as CheckboxGroup } from './Checkbox/Group.vue';
+import { default as CodeEditor } from './CodeEditor.vue';
 import { default as Combobox } from './Combobox.vue';
 import { default as Context } from './Context/Context.vue';
 import { default as ContextFooter } from './Context/Footer.vue';
@@ -63,6 +64,7 @@ export {
     CharacterCounter,
     Checkbox,
     CheckboxGroup,
+    CodeEditor,
     Combobox,
     Context,
     ContextFooter,

From 6a6214ee24e30f08188f563013b110ad053078fa Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Mon, 9 Jun 2025 17:39:49 +0100
Subject: [PATCH 02/12] wip

---
 .../components/fieldtypes/CodeFieldtype.vue   | 17 ++++-
 resources/js/components/ui/CodeEditor.vue     | 64 ++++---------------
 2 files changed, 27 insertions(+), 54 deletions(-)

diff --git a/resources/js/components/fieldtypes/CodeFieldtype.vue b/resources/js/components/fieldtypes/CodeFieldtype.vue
index 662dae5c44..bfbe32ed41 100644
--- a/resources/js/components/fieldtypes/CodeFieldtype.vue
+++ b/resources/js/components/fieldtypes/CodeFieldtype.vue
@@ -36,8 +36,8 @@
                     </div>
                 </div>
                 <CodeEditor
+                    ref="codeEditor"
                     :mode="mode"
-                    :modes="modes"
                     :theme="config.theme"
                     :rulers="config.rulers"
                     :disabled="isReadOnly"
@@ -127,6 +127,11 @@ export default {
         },
     },
 
+    mounted() {
+        // CodeMirror needs to be manually refreshed when made visible in the DOM.
+        this.$events.$on('tab-switched', () => this.$refs.codeEditor?.refresh());
+    },
+
     methods: {
         modeUpdated(mode) {
             this.updateDebounced({ code: this.value.code, mode });
@@ -140,5 +145,15 @@ export default {
             this.fullScreenMode = !this.fullScreenMode;
         },
     },
+
+    watch: {
+        fullScreenMode(fullScreenMode) {
+            this.$refs.codeEditor?.codemirror.setOption('fullScreen', fullScreenMode);
+
+            if (! fullScreenMode) {
+                this.$refs.codeEditor.$el.removeAttribute('style');
+            }
+        }
+    }
 };
 </script>
diff --git a/resources/js/components/ui/CodeEditor.vue b/resources/js/components/ui/CodeEditor.vue
index ee9d6702cc..ffbab12593 100644
--- a/resources/js/components/ui/CodeEditor.vue
+++ b/resources/js/components/ui/CodeEditor.vue
@@ -39,43 +39,13 @@ const emit = defineEmits(['update:modelValue', 'focus', 'blur']);
 
 const props = defineProps({
     mode: String,
-    modes: {
-        type: Array,
-        default: () => [
-            { value: 'clike', label: 'C-Like' },
-            { value: 'css', label: 'CSS' },
-            { value: 'diff', label: 'Diff' },
-            { value: 'go', label: 'Go' },
-            { value: 'haml', label: 'HAML' },
-            { value: 'handlebars', label: 'Handlebars' },
-            { value: 'htmlmixed', label: 'HTML' },
-            { value: 'less', label: 'LESS' },
-            { value: 'markdown', label: 'Markdown' },
-            { value: 'gfm', label: 'Markdown (GHF)' },
-            { value: 'nginx', label: 'Nginx' },
-            { value: 'text/x-java', label: 'Java' },
-            { value: 'javascript', label: 'JavaScript' },
-            { value: 'jsx', label: 'JSX' },
-            { value: 'text/x-objectivec', label: 'Objective-C' },
-            { value: 'php', label: 'PHP' },
-            { value: 'python', label: 'Python' },
-            { value: 'ruby', label: 'Ruby' },
-            { value: 'scss', label: 'SCSS' },
-            { value: 'shell', label: 'Shell' },
-            { value: 'sql', label: 'SQL' },
-            { value: 'twig', label: 'Twig' },
-            { value: 'vue', label: 'Vue' },
-            { value: 'xml', label: 'XML' },
-            { value: 'yaml-frontmatter', label: 'YAML Frontmatter' }
-        ],
-    },
     theme: {
         type: String,
         default: 'material',
     },
     rulers: {
-        type: Array,
-        default: () => [],
+        type: Object,
+        default: () => {},
     },
     disabled: Boolean,
     keyMap: {
@@ -101,12 +71,17 @@ const props = defineProps({
     modelValue: String,
 });
 
+const codemirror = ref(null);
+const codemirrorElement = useTemplateRef('codemirror');
+
 defineOptions({
     inheritAttrs: false,
 });
 
-const codemirror = ref(null);
-const codemirrorElement = useTemplateRef('codemirror');
+defineExpose({
+    codemirror,
+    refresh,
+})
 
 onMounted(() => {
     nextTick(() => initCodeMirror());
@@ -120,7 +95,7 @@ function initCodeMirror() {
             direction: document.querySelector('html').getAttribute('dir') ?? 'ltr',
             addModeClass: true,
             keyMap: props.keyMap,
-            tabSize: props.indentSize,
+            tabSize: props.tabSize,
             indentWithTabs: props.indentType !== 'spaces',
             lineNumbers: props.lineNumbers,
             lineWrapping: props.lineWrapping,
@@ -142,27 +117,10 @@ function initCodeMirror() {
     // Refresh to ensure CodeMirror visible and the proper size
     // Most applicable when loaded by another field like Bard
     refresh();
-
-    // todo
-    // codemirror.value.setOption('fullScreen', this.fullScreenMode);
-
-    // if (this.fullScreenMode === false) {
-    //     document.documentElement.removeAttribute('style');
-    // }
-
-    // CodeMirror also needs to be manually refreshed when made visible in the DOM
-    // $events.$on('tab-switched', this.refresh);
-    // todo
-}
-
-function focus() {
-    codemirror.value.focus();
 }
 
 function refresh() {
-    nextTick(() => {
-        codemirror.value.refresh();
-    })
+    nextTick(() => codemirror.value.refresh());
 }
 
 watch(

From 026dec12c3aa347f42c4dc55ab8e3828e6450da8 Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Mon, 9 Jun 2025 17:39:52 +0100
Subject: [PATCH 03/12] wip

---
 src/Fieldtypes/Code.php | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/Fieldtypes/Code.php b/src/Fieldtypes/Code.php
index 4b916685e1..dc7066f477 100644
--- a/src/Fieldtypes/Code.php
+++ b/src/Fieldtypes/Code.php
@@ -123,7 +123,6 @@ protected function configFieldItems(): array
                         'instructions' => __('statamic::fieldtypes.any.config.antlers'),
                         'type' => 'toggle',
                     ],
-
                 ],
             ],
         ];

From daf1279d93b95752da245a03f612b34cbf15f600 Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Mon, 9 Jun 2025 17:41:34 +0100
Subject: [PATCH 04/12] wip

---
 resources/js/components/ui/CodeEditor.vue | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/ui/CodeEditor.vue b/resources/js/components/ui/CodeEditor.vue
index ffbab12593..4010bc9da2 100644
--- a/resources/js/components/ui/CodeEditor.vue
+++ b/resources/js/components/ui/CodeEditor.vue
@@ -38,7 +38,10 @@ import 'codemirror/mode/yaml-frontmatter/yaml-frontmatter';
 const emit = defineEmits(['update:modelValue', 'focus', 'blur']);
 
 const props = defineProps({
-    mode: String,
+    mode: {
+        type: String,
+        required: true,
+    },
     theme: {
         type: String,
         default: 'material',
@@ -47,7 +50,10 @@ const props = defineProps({
         type: Object,
         default: () => {},
     },
-    disabled: Boolean,
+    disabled: {
+        type: Boolean,
+        default: false,
+    },
     keyMap: {
         type: String,
         default: 'sublime',

From 0d6728fc6cdfc1d4a60cb9ecdfb06423a9f256c5 Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Tue, 10 Jun 2025 10:02:04 +0100
Subject: [PATCH 05/12] Move the mode selector into the component

---
 .../components/fieldtypes/CodeFieldtype.vue   | 127 +++---------------
 resources/js/components/ui/CodeEditor.vue     | 126 ++++++++++++++---
 2 files changed, 127 insertions(+), 126 deletions(-)

diff --git a/resources/js/components/fieldtypes/CodeFieldtype.vue b/resources/js/components/fieldtypes/CodeFieldtype.vue
index bfbe32ed41..59645b0fab 100644
--- a/resources/js/components/fieldtypes/CodeFieldtype.vue
+++ b/resources/js/components/fieldtypes/CodeFieldtype.vue
@@ -1,113 +1,36 @@
 <template>
-    <portal name="code-fullscreen" :disabled="!fullScreenMode" target-class="code-fieldtype">
-            <div class="code-fieldtype-container" :class="[themeClass, { 'code-fullscreen': fullScreenMode }]">
-                <publish-field-fullscreen-header
-                    v-if="fullScreenMode"
-                    :title="config.display"
-                    :field-actions="fieldActions"
-                    @close="toggleFullscreen"
-                >
-                    <div class="code-fieldtype-toolbar-fullscreen">
-                        <div>
-                            <Select
-                                class="w-full"
-                                v-if="config.mode_selectable"
-                                :options="modes"
-                                :disabled="isReadOnly"
-                                :model-value="mode"
-                                @update:modelValue="modeUpdated"
-                            />
-                            <div v-else v-text="modeLabel" class="font-mono text-xs text-gray-700"></div>
-                        </div>
-                    </div>
-                </publish-field-fullscreen-header>
-                <div class="code-fieldtype-toolbar" v-if="!fullScreenMode">
-                    <div>
-                        <Select
-                            class="w-full"
-                            v-if="config.mode_selectable"
-                            :options="modes"
-                            :disabled="isReadOnly"
-                            :model-value="mode"
-                            @update:modelValue="modeUpdated"
-                        />
-
-                        <div v-else v-text="modeLabel" class="font-mono text-xs text-gray-700"></div>
-                    </div>
-                </div>
-                <CodeEditor
-                    ref="codeEditor"
-                    :mode="mode"
-                    :theme="config.theme"
-                    :rulers="config.rulers"
-                    :disabled="isReadOnly"
-                    :key-map="config.key_map"
-                    :tab-size="config.indent_size"
-                    :indent-type="config.indent_type"
-                    :line-numbers="config.line_numbers"
-                    :line-wrapping="config.line_wrapping"
-                    :model-value="value.code"
-                    @update:model-value="codeUpdated"
-                />
-            </div>
-    </portal>
+    <CodeEditor
+        ref="codeEditor"
+        :theme="config.theme"
+        :rulers="config.rulers"
+        :disabled="isReadOnly"
+        :key-map="config.key_map"
+        :tab-size="config.indent_size"
+        :indent-type="config.indent_type"
+        :line-numbers="config.line_numbers"
+        :line-wrapping="config.line_wrapping"
+        :allow-mode-selection="config.mode_selectable"
+        :mode="mode"
+        :code="value.code"
+        @update:mode="modeUpdated"
+        @update:code="codeUpdated"
+    />
 </template>
 
 <script>
 import Fieldtype from './Fieldtype.vue';
-import { Select, CodeEditor } from '@statamic/ui';
+import { CodeEditor } from '@statamic/ui';
 
 export default {
     mixins: [Fieldtype],
 
-    components: { Select, CodeEditor },
-
-    data() {
-        return {
-            modes: [
-                { value: 'clike', label: 'C-Like' },
-                { value: 'css', label: 'CSS' },
-                { value: 'diff', label: 'Diff' },
-                { value: 'go', label: 'Go' },
-                { value: 'haml', label: 'HAML' },
-                { value: 'handlebars', label: 'Handlebars' },
-                { value: 'htmlmixed', label: 'HTML' },
-                { value: 'less', label: 'LESS' },
-                { value: 'markdown', label: 'Markdown' },
-                { value: 'gfm', label: 'Markdown (GHF)' },
-                { value: 'nginx', label: 'Nginx' },
-                { value: 'text/x-java', label: 'Java' },
-                { value: 'javascript', label: 'JavaScript' },
-                { value: 'jsx', label: 'JSX' },
-                { value: 'text/x-objectivec', label: 'Objective-C' },
-                { value: 'php', label: 'PHP' },
-                { value: 'python', label: 'Python' },
-                { value: 'ruby', label: 'Ruby' },
-                { value: 'scss', label: 'SCSS' },
-                { value: 'shell', label: 'Shell' },
-                { value: 'sql', label: 'SQL' },
-                { value: 'twig', label: 'Twig' },
-                { value: 'vue', label: 'Vue' },
-                { value: 'xml', label: 'XML' },
-                { value: 'yaml-frontmatter', label: 'YAML' },
-            ],
-            fullScreenMode: false,
-        };
-    },
+    components: { CodeEditor },
 
     computed: {
         mode() {
             return this.value.mode || this.config.mode;
         },
 
-        modeLabel() {
-            return this.modes.find((m) => m.value === this.mode).label || this.mode;
-        },
-
-        themeClass() {
-            return `theme-${this.config.theme}`;
-        },
-
         replicatorPreview() {
             if (!this.showFieldPreviews || !this.config.replicator_preview) return;
 
@@ -140,20 +63,6 @@ export default {
         codeUpdated(code) {
             this.updateDebounced({ code, mode: this.mode });
         },
-
-        toggleFullscreen() {
-            this.fullScreenMode = !this.fullScreenMode;
-        },
     },
-
-    watch: {
-        fullScreenMode(fullScreenMode) {
-            this.$refs.codeEditor?.codemirror.setOption('fullScreen', fullScreenMode);
-
-            if (! fullScreenMode) {
-                this.$refs.codeEditor.$el.removeAttribute('style');
-            }
-        }
-    }
 };
 </script>
diff --git a/resources/js/components/ui/CodeEditor.vue b/resources/js/components/ui/CodeEditor.vue
index 4010bc9da2..3142f944cc 100644
--- a/resources/js/components/ui/CodeEditor.vue
+++ b/resources/js/components/ui/CodeEditor.vue
@@ -2,6 +2,7 @@
 import CodeMirror from 'codemirror';
 import { computed, markRaw, nextTick, onMounted, ref, useAttrs, useTemplateRef, watch } from 'vue';
 import ElementContainer from '@statamic/components/ElementContainer.vue';
+import { Select } from '@statamic/ui';
 
 // Addons
 import 'codemirror/addon/edit/matchbrackets';
@@ -35,13 +36,9 @@ import 'codemirror/mode/xml/xml';
 import 'codemirror/mode/yaml/yaml';
 import 'codemirror/mode/yaml-frontmatter/yaml-frontmatter';
 
-const emit = defineEmits(['update:modelValue', 'focus', 'blur']);
+const emit = defineEmits(['update:mode', 'update:code', 'focus', 'blur']);
 
 const props = defineProps({
-    mode: {
-        type: String,
-        required: true,
-    },
     theme: {
         type: String,
         default: 'material',
@@ -74,18 +71,50 @@ const props = defineProps({
         type: Boolean,
         default: true,
     },
-    modelValue: String,
+    allowModeSelection: {
+        type: Boolean,
+        default: true,
+    },
+    mode: String,
+    code: String,
 });
 
+const modes = ref([
+    { value: 'clike', label: 'C-Like' },
+    { value: 'css', label: 'CSS' },
+    { value: 'diff', label: 'Diff' },
+    { value: 'go', label: 'Go' },
+    { value: 'haml', label: 'HAML' },
+    { value: 'handlebars', label: 'Handlebars' },
+    { value: 'htmlmixed', label: 'HTML' },
+    { value: 'less', label: 'LESS' },
+    { value: 'markdown', label: 'Markdown' },
+    { value: 'gfm', label: 'Markdown (GHF)' },
+    { value: 'nginx', label: 'Nginx' },
+    { value: 'text/x-java', label: 'Java' },
+    { value: 'javascript', label: 'JavaScript' },
+    { value: 'jsx', label: 'JSX' },
+    { value: 'text/x-objectivec', label: 'Objective-C' },
+    { value: 'php', label: 'PHP' },
+    { value: 'python', label: 'Python' },
+    { value: 'ruby', label: 'Ruby' },
+    { value: 'scss', label: 'SCSS' },
+    { value: 'shell', label: 'Shell' },
+    { value: 'sql', label: 'SQL' },
+    { value: 'twig', label: 'Twig' },
+    { value: 'vue', label: 'Vue' },
+    { value: 'xml', label: 'XML' },
+    { value: 'yaml-frontmatter', label: 'YAML' },
+]);
+
 const codemirror = ref(null);
-const codemirrorElement = useTemplateRef('codemirror');
+const codemirrorElement = useTemplateRef('codemirrorElement');
 
 defineOptions({
     inheritAttrs: false,
 });
 
 defineExpose({
-    codemirror,
     refresh,
 })
 
@@ -96,7 +125,7 @@ onMounted(() => {
 function initCodeMirror() {
     codemirror.value = markRaw(
         CodeMirror(codemirrorElement.value, {
-            value: props.modelValue || '',
+            value: props.code || '',
             mode: props.mode,
             direction: document.querySelector('html').getAttribute('dir') ?? 'ltr',
             addModeClass: true,
@@ -114,7 +143,7 @@ function initCodeMirror() {
     );
 
     codemirror.value.on('change', (cm) => {
-        emit('update:modelValue', cm.doc.getValue());
+        emit('update:code', cm.doc.getValue());
     });
 
     codemirror.value.on('focus', () => emit('focus'));
@@ -130,17 +159,17 @@ function refresh() {
 }
 
 watch(
-    () => props.mode,
+    () => props.disabled,
     (value) => {
-        codemirror.value?.setOption('mode', value);
+        codemirror.value?.setOption('readOnly', value ? 'nocursor' : false);
     },
     { immediate: true }
 );
 
 watch(
-    () => props.disabled,
+    () => props.mode,
     (value) => {
-        codemirror.value?.setOption('readOnly', value ? 'nocursor' : false);
+        codemirror.value?.setOption('mode', value);
     },
     { immediate: true }
 );
@@ -156,10 +185,18 @@ watch(
     { immediate: true }
 );
 
+const modeLabel = computed(() => {
+    return modes.find((m) => m.value === props.mode)?.label || props.mode;
+});
+
 const exactTheme = computed(() => {
     return props.theme === 'light' ? 'default' : 'material';
 });
 
+const themeClass = computed(() => {
+    return `theme-${props.theme}`;
+});
+
 const rulers = computed(() => {
     if (! props.rulers) {
         return [];
@@ -177,10 +214,65 @@ const rulers = computed(() => {
         };
     });
 });
+
+const fullScreenMode = ref(false);
+
+function toggleFullscreen() {
+    fullScreenMode.value = !fullScreenMode.value;
+}
+
+watch(
+    () => fullScreenMode.value,
+    (fullScreenMode) => {
+        codemirror.value.setOption('fullScreen', fullScreenMode);
+
+        if (!fullScreenMode) {
+            codemirrorElement.value.removeAttribute('style');
+        }
+    }
+)
 </script>
 
 <template>
-    <ElementContainer @resized="refresh">
-        <div ref="codemirror"></div>
-    </ElementContainer>
+    <portal name="code-fullscreen" :disabled="!fullScreenMode" target-class="code-fieldtype">
+        <div class="code-fieldtype-container" :class="[themeClass, { 'code-fullscreen': fullScreenMode }]">
+            <publish-field-fullscreen-header
+                v-if="fullScreenMode"
+                :title="config.display"
+                :field-actions="fieldActions"
+                @close="toggleFullscreen"
+            >
+                <div class="code-fieldtype-toolbar-fullscreen">
+                    <div>
+                        <Select
+                            class="w-32"
+                            v-if="allowModeSelection"
+                            :options="modes"
+                            :disabled="disabled"
+                            :model-value="mode"
+                            @update:modelValue="$emit('update:mode', $event)"
+                        />
+                        <div v-else v-text="modeLabel" class="font-mono text-xs text-gray-700"></div>
+                    </div>
+                </div>
+            </publish-field-fullscreen-header>
+            <div class="code-fieldtype-toolbar" v-if="!fullScreenMode">
+                <div>
+                    <Select
+                        class="w-32"
+                        v-if="allowModeSelection"
+                        :options="modes"
+                        :disabled="disabled"
+                        :model-value="mode"
+                        @update:modelValue="$emit('update:mode', $event)"
+                    />
+
+                    <div v-else v-text="modeLabel" class="font-mono text-xs text-gray-700"></div>
+                </div>
+            </div>
+            <ElementContainer @resized="refresh">
+                <div ref="codemirrorElement"></div>
+            </ElementContainer>
+        </div>
+    </portal>
 </template>

From 18602604d85eba6e26da998941726981879944e8 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Tue, 10 Jun 2025 09:59:52 -0400
Subject: [PATCH 06/12] value

---
 resources/js/components/ui/CodeEditor.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/components/ui/CodeEditor.vue b/resources/js/components/ui/CodeEditor.vue
index 3142f944cc..437571f569 100644
--- a/resources/js/components/ui/CodeEditor.vue
+++ b/resources/js/components/ui/CodeEditor.vue
@@ -186,7 +186,7 @@ watch(
 );
 
 const modeLabel = computed(() => {
-    return modes.find((m) => m.value === props.mode)?.label || props.mode;
+    return modes.value.find((m) => m.value === props.mode)?.label || props.mode;
 });
 
 const exactTheme = computed(() => {

From b114effcc9697ae535fbb559957ffae2aad092e1 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Tue, 10 Jun 2025 10:00:35 -0400
Subject: [PATCH 07/12] use modelValue so v-model works

---
 resources/js/components/fieldtypes/CodeFieldtype.vue | 4 ++--
 resources/js/components/ui/CodeEditor.vue            | 8 ++++----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/resources/js/components/fieldtypes/CodeFieldtype.vue b/resources/js/components/fieldtypes/CodeFieldtype.vue
index 59645b0fab..141bc16eb4 100644
--- a/resources/js/components/fieldtypes/CodeFieldtype.vue
+++ b/resources/js/components/fieldtypes/CodeFieldtype.vue
@@ -11,9 +11,9 @@
         :line-wrapping="config.line_wrapping"
         :allow-mode-selection="config.mode_selectable"
         :mode="mode"
-        :code="value.code"
+        :model-value="value.code"
         @update:mode="modeUpdated"
-        @update:code="codeUpdated"
+        @update:model-value="codeUpdated"
     />
 </template>
 
diff --git a/resources/js/components/ui/CodeEditor.vue b/resources/js/components/ui/CodeEditor.vue
index 437571f569..94e4c0016a 100644
--- a/resources/js/components/ui/CodeEditor.vue
+++ b/resources/js/components/ui/CodeEditor.vue
@@ -36,7 +36,7 @@ import 'codemirror/mode/xml/xml';
 import 'codemirror/mode/yaml/yaml';
 import 'codemirror/mode/yaml-frontmatter/yaml-frontmatter';
 
-const emit = defineEmits(['update:mode', 'update:code', 'focus', 'blur']);
+const emit = defineEmits(['update:mode', 'update:model-value', 'focus', 'blur']);
 
 const props = defineProps({
     theme: {
@@ -76,7 +76,7 @@ const props = defineProps({
         default: true,
     },
     mode: String,
-    code: String,
+    modelValue: String,
 });
 
 const modes = ref([
@@ -125,7 +125,7 @@ onMounted(() => {
 function initCodeMirror() {
     codemirror.value = markRaw(
         CodeMirror(codemirrorElement.value, {
-            value: props.code || '',
+            value: props.modelValue || '',
             mode: props.mode,
             direction: document.querySelector('html').getAttribute('dir') ?? 'ltr',
             addModeClass: true,
@@ -143,7 +143,7 @@ function initCodeMirror() {
     );
 
     codemirror.value.on('change', (cm) => {
-        emit('update:code', cm.doc.getValue());
+        emit('update:model-value', cm.doc.getValue());
     });
 
     codemirror.value.on('focus', () => emit('focus'));

From c7c79dbd6707e1d121b74b2de7be460b7e3c58c7 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Tue, 10 Jun 2025 10:00:42 -0400
Subject: [PATCH 08/12] prettier

---
 resources/js/components/ui/CodeEditor.vue | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/resources/js/components/ui/CodeEditor.vue b/resources/js/components/ui/CodeEditor.vue
index 94e4c0016a..70896684a6 100644
--- a/resources/js/components/ui/CodeEditor.vue
+++ b/resources/js/components/ui/CodeEditor.vue
@@ -116,7 +116,7 @@ defineOptions({
 
 defineExpose({
     refresh,
-})
+});
 
 onMounted(() => {
     nextTick(() => initCodeMirror());
@@ -163,7 +163,7 @@ watch(
     (value) => {
         codemirror.value?.setOption('readOnly', value ? 'nocursor' : false);
     },
-    { immediate: true }
+    { immediate: true },
 );
 
 watch(
@@ -171,7 +171,7 @@ watch(
     (value) => {
         codemirror.value?.setOption('mode', value);
     },
-    { immediate: true }
+    { immediate: true },
 );
 
 watch(
@@ -182,7 +182,7 @@ watch(
 
         codemirror.value?.doc.setValue(value);
     },
-    { immediate: true }
+    { immediate: true },
 );
 
 const modeLabel = computed(() => {
@@ -198,7 +198,7 @@ const themeClass = computed(() => {
 });
 
 const rulers = computed(() => {
-    if (! props.rulers) {
+    if (!props.rulers) {
         return [];
     }
 
@@ -229,8 +229,8 @@ watch(
         if (!fullScreenMode) {
             codemirrorElement.value.removeAttribute('style');
         }
-    }
-)
+    },
+);
 </script>
 
 <template>

From 0e9c0cb921ee16333386fa687015d3425e2bd48a Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Tue, 10 Jun 2025 10:29:47 -0400
Subject: [PATCH 09/12] Wire up toolbar, fullscreen mode, and some style tweaks
 ...

Avoid setting text size on CodeMirror class. It's shared between markdown/code.
---
 resources/css/vendors/codemirror.css          |  2 +-
 .../components/fieldtypes/CodeFieldtype.vue   |  6 ++-
 resources/js/components/ui/CodeEditor.vue     | 44 +++++++++++--------
 3 files changed, 31 insertions(+), 21 deletions(-)

diff --git a/resources/css/vendors/codemirror.css b/resources/css/vendors/codemirror.css
index 3b3162d8de..92363568dd 100644
--- a/resources/css/vendors/codemirror.css
+++ b/resources/css/vendors/codemirror.css
@@ -4,7 +4,7 @@
 
 .CodeMirror {
     /* Set height, width, borders, and global font properties here */
-    @apply py-3 text-base text-gray-800 dark:text-gray-300 font-normal leading-normal min-h-20;
+    @apply py-3 text-gray-800 dark:text-gray-300 font-normal leading-normal min-h-20;
 }
 
 /* PADDING */
diff --git a/resources/js/components/fieldtypes/CodeFieldtype.vue b/resources/js/components/fieldtypes/CodeFieldtype.vue
index 141bc16eb4..40a704bb06 100644
--- a/resources/js/components/fieldtypes/CodeFieldtype.vue
+++ b/resources/js/components/fieldtypes/CodeFieldtype.vue
@@ -12,6 +12,8 @@
         :allow-mode-selection="config.mode_selectable"
         :mode="mode"
         :model-value="value.code"
+        :title="config.display"
+        :field-actions="fieldActions"
         @update:mode="modeUpdated"
         @update:model-value="codeUpdated"
     />
@@ -41,10 +43,10 @@ export default {
             return [
                 {
                     title: __('Toggle Fullscreen Mode'),
-                    icon: ({ vm }) => (vm.fullScreenMode ? 'shrink-all' : 'expand-bold'),
+                    icon: ({ vm }) => (vm.$refs.codeEditor.fullScreenMode ? 'shrink-all' : 'expand-bold'),
                     quick: true,
                     visibleWhenReadOnly: true,
-                    run: this.toggleFullscreen,
+                    run: ({ vm }) => vm.$refs.codeEditor.toggleFullscreen(),
                 },
             ];
         },
diff --git a/resources/js/components/ui/CodeEditor.vue b/resources/js/components/ui/CodeEditor.vue
index 70896684a6..17162003fc 100644
--- a/resources/js/components/ui/CodeEditor.vue
+++ b/resources/js/components/ui/CodeEditor.vue
@@ -77,6 +77,14 @@ const props = defineProps({
     },
     mode: String,
     modelValue: String,
+    title: {
+        type: String,
+        default: () => __('Code Editor'),
+    },
+    fieldActions: {
+        type: Array,
+        default: () => [],
+    },
 });
 
 const modes = ref([
@@ -109,6 +117,7 @@ const modes = ref([
 
 const codemirror = ref(null);
 const codemirrorElement = useTemplateRef('codemirrorElement');
+const fullScreenMode = ref(false);
 
 defineOptions({
     inheritAttrs: false,
@@ -116,6 +125,8 @@ defineOptions({
 
 defineExpose({
     refresh,
+    toggleFullscreen,
+    fullScreenMode,
 });
 
 onMounted(() => {
@@ -215,8 +226,6 @@ const rulers = computed(() => {
     });
 });
 
-const fullScreenMode = ref(false);
-
 function toggleFullscreen() {
     fullScreenMode.value = !fullScreenMode.value;
 }
@@ -238,40 +247,39 @@ watch(
         <div class="code-fieldtype-container" :class="[themeClass, { 'code-fullscreen': fullScreenMode }]">
             <publish-field-fullscreen-header
                 v-if="fullScreenMode"
-                :title="config.display"
+                :title="title"
                 :field-actions="fieldActions"
                 @close="toggleFullscreen"
             >
-                <div class="code-fieldtype-toolbar-fullscreen">
-                    <div>
-                        <Select
-                            class="w-32"
-                            v-if="allowModeSelection"
-                            :options="modes"
-                            :disabled="disabled"
-                            :model-value="mode"
-                            @update:modelValue="$emit('update:mode', $event)"
-                        />
-                        <div v-else v-text="modeLabel" class="font-mono text-xs text-gray-700"></div>
-                    </div>
-                </div>
+                <Select
+                    class="w-32"
+                    size="sm"
+                    v-if="allowModeSelection"
+                    :options="modes"
+                    :disabled="disabled"
+                    :model-value="mode"
+                    @update:modelValue="$emit('update:mode', $event)"
+                />
+                <div v-else v-text="modeLabel" class="font-mono text-xs text-gray-700"></div>
             </publish-field-fullscreen-header>
             <div class="code-fieldtype-toolbar" v-if="!fullScreenMode">
                 <div>
                     <Select
                         class="w-32"
+                        size="xs"
                         v-if="allowModeSelection"
                         :options="modes"
                         :disabled="disabled"
                         :model-value="mode"
+                        searchable
                         @update:modelValue="$emit('update:mode', $event)"
                     />
 
-                    <div v-else v-text="modeLabel" class="font-mono text-xs text-gray-700"></div>
+                    <span v-else v-text="modeLabel" class="font-mono text-xs text-gray-700" />
                 </div>
             </div>
             <ElementContainer @resized="refresh">
-                <div ref="codemirrorElement"></div>
+                <div ref="codemirrorElement" class="font-mono text-sm"></div>
             </ElementContainer>
         </div>
     </portal>

From 7dcdc3038b82237110c58a7b68bcfc2116b1a50d Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Tue, 10 Jun 2025 10:56:45 -0400
Subject: [PATCH 10/12] adjust codemirror styles

---
 resources/css/vendors/codemirror.css | 14 +++-----------
 1 file changed, 3 insertions(+), 11 deletions(-)

diff --git a/resources/css/vendors/codemirror.css b/resources/css/vendors/codemirror.css
index 92363568dd..e4b4b741f3 100644
--- a/resources/css/vendors/codemirror.css
+++ b/resources/css/vendors/codemirror.css
@@ -4,13 +4,13 @@
 
 .CodeMirror {
     /* Set height, width, borders, and global font properties here */
-    @apply py-3 text-gray-800 dark:text-gray-300 font-normal leading-normal min-h-20;
+    @apply text-gray-800 dark:text-gray-300 font-normal leading-normal min-h-20;
 }
 
 /* PADDING */
 
 .CodeMirror-lines {
-    padding: 4px 0; /* Vertical padding around content */
+    padding: 16px 0; /* Vertical padding around content */
 }
 .CodeMirror pre {
     padding: 0 16px; /* Horizontal padding of content */
@@ -480,7 +480,7 @@ span.CodeMirror-selectedtext {
 }
 
 .CodeMirror-fullscreen {
-    @apply fixed inset-0 h-auto rounded-none pt-14;
+    @apply fixed inset-0 h-auto rounded-none pt-13;
 }
 
 .CodeMirror-rulers {
@@ -493,14 +493,6 @@ span.CodeMirror-selectedtext {
     @apply bottom-0 top-0;
 }
 
-/* Light Theme
-  ========================================================================== */
-.code-fieldtype .theme-light {
-    .CodeMirror {
-        @apply border p-0;
-    }
-}
-
 /* Material Theme
     ========================================================================== */
 

From f39d2828a415a78a567d45c660922ac4db4dd4f1 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Tue, 10 Jun 2025 11:10:17 -0400
Subject: [PATCH 11/12] Make code editor toolbar/styling more consistent with
 markdown editor

---
 resources/css/components/fieldtypes/code.css | 30 --------------------
 resources/css/cp.css                         |  1 -
 resources/css/vendors/codemirror.css         |  3 --
 resources/js/components/ui/CodeEditor.vue    | 16 +++++++++--
 4 files changed, 14 insertions(+), 36 deletions(-)
 delete mode 100644 resources/css/components/fieldtypes/code.css

diff --git a/resources/css/components/fieldtypes/code.css b/resources/css/components/fieldtypes/code.css
deleted file mode 100644
index f3281a9a8d..0000000000
--- a/resources/css/components/fieldtypes/code.css
+++ /dev/null
@@ -1,30 +0,0 @@
-.code-fieldtype-container {
-    direction: ltr;
-    @apply rounded-sm dark:border dark:border-dark-800;
-}
-
-.code-fieldtype-toolbar {
-    @apply flex flex-wrap items-center justify-end gap-2 rounded-t border border-b-0 bg-white px-2 py-1 text-sm shadow-none;
-    @apply dark:border-b dark:border-l-0 dark:border-r-0 dark:border-t-0 dark:border-dark-900 dark:bg-dark-800;
-
-    [dir='rtl'] & {
-        direction: rtl;
-    }
-}
-
-.code-fieldtype-toolbar select,
-.code-fieldtype-toolbar-fullscreen select {
-    @apply h-8 text-sm leading-none;
-}
-
-.code-fieldtype-container.code-fullscreen {
-    @apply fixed inset-0 min-h-screen overflow-scroll rounded-none bg-gray-200 pt-14 dark:bg-dark-600;
-
-    .code-fieldtype-toolbar {
-        @apply fixed top-0 z-2 h-12 w-full rounded-none bg-linear-to-b from-white to-gray-100 px-6 py-2 text-base shadow dark:from-dark-550 dark:to-dark-600 dark:shadow-lg;
-    }
-}
-
-.CodeMirror {
-    @apply dark:text-dark-150 ;
-}
diff --git a/resources/css/cp.css b/resources/css/cp.css
index 96ba715f51..e9626ffe31 100644
--- a/resources/css/cp.css
+++ b/resources/css/cp.css
@@ -53,7 +53,6 @@
 @import './components/fieldtypes/bard.css';
 @import './components/fieldtypes/button-group.css';
 @import './components/fieldtypes/checkboxes.css';
-@import './components/fieldtypes/code.css';
 @import './components/fieldtypes/dictionary-fields.css';
 @import './components/fieldtypes/environment.css';
 @import './components/fieldtypes/grid.css';
diff --git a/resources/css/vendors/codemirror.css b/resources/css/vendors/codemirror.css
index e4b4b741f3..c1a936a2fe 100644
--- a/resources/css/vendors/codemirror.css
+++ b/resources/css/vendors/codemirror.css
@@ -15,9 +15,6 @@
 .CodeMirror pre {
     padding: 0 16px; /* Horizontal padding of content */
 }
-.CodeMirror-wrap {
-    @apply rounded-b;
-}
 
 .CodeMirror-scrollbar-filler,
 .CodeMirror-gutter-filler {
diff --git a/resources/js/components/ui/CodeEditor.vue b/resources/js/components/ui/CodeEditor.vue
index 17162003fc..b751b7a2e9 100644
--- a/resources/js/components/ui/CodeEditor.vue
+++ b/resources/js/components/ui/CodeEditor.vue
@@ -244,7 +244,16 @@ watch(
 
 <template>
     <portal name="code-fullscreen" :disabled="!fullScreenMode" target-class="code-fieldtype">
-        <div class="code-fieldtype-container" :class="[themeClass, { 'code-fullscreen': fullScreenMode }]">
+        <div
+            :class="[
+                '@container/markdown block w-full overflow-hidden rounded-lg bg-white dark:bg-gray-900',
+                'border border-gray-300 dark:border-x-0 dark:border-t-0 dark:border-white/15 dark:inset-shadow-2xs dark:inset-shadow-black',
+                'text-gray-800 dark:text-gray-300',
+                'shadow-ui-sm not-prose appearance-none antialiased disabled:shadow-none',
+                themeClass,
+                { 'code-fullscreen': fullScreenMode },
+            ]"
+        >
             <publish-field-fullscreen-header
                 v-if="fullScreenMode"
                 :title="title"
@@ -262,7 +271,10 @@ watch(
                 />
                 <div v-else v-text="modeLabel" class="font-mono text-xs text-gray-700"></div>
             </publish-field-fullscreen-header>
-            <div class="code-fieldtype-toolbar" v-if="!fullScreenMode">
+            <div
+                class="flex items-center justify-between rounded-t-xl border-b border-gray-300 bg-gray-50 px-2 py-1 dark:border-white/15 dark:bg-gray-950"
+                v-if="!fullScreenMode"
+            >
                 <div>
                     <Select
                         class="w-32"

From 10fb646320f59ce4f4bcfaba07a866f8b1fce9e5 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Tue, 10 Jun 2025 11:17:02 -0400
Subject: [PATCH 12/12] ability to prevent showing mode label, which could hide
 the toolbar completely

---
 resources/js/components/ui/CodeEditor.vue | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/ui/CodeEditor.vue b/resources/js/components/ui/CodeEditor.vue
index b751b7a2e9..1fb43a577f 100644
--- a/resources/js/components/ui/CodeEditor.vue
+++ b/resources/js/components/ui/CodeEditor.vue
@@ -75,6 +75,10 @@ const props = defineProps({
         type: Boolean,
         default: true,
     },
+    showModeLabel: {
+        type: Boolean,
+        default: true,
+    },
     mode: String,
     modelValue: String,
     title: {
@@ -226,6 +230,10 @@ const rulers = computed(() => {
     });
 });
 
+const showToolbar = computed(() => {
+    return props.allowModeSelection || props.showModeLabel;
+});
+
 function toggleFullscreen() {
     fullScreenMode.value = !fullScreenMode.value;
 }
@@ -269,11 +277,11 @@ watch(
                     :model-value="mode"
                     @update:modelValue="$emit('update:mode', $event)"
                 />
-                <div v-else v-text="modeLabel" class="font-mono text-xs text-gray-700"></div>
+                <div v-else-if="showModeLabel" v-text="modeLabel" class="font-mono text-xs text-gray-700"></div>
             </publish-field-fullscreen-header>
             <div
                 class="flex items-center justify-between rounded-t-xl border-b border-gray-300 bg-gray-50 px-2 py-1 dark:border-white/15 dark:bg-gray-950"
-                v-if="!fullScreenMode"
+                v-if="showToolbar"
             >
                 <div>
                     <Select