[4.x] Fix markdown and code fieldtype read-only modes (#9764)

statamic · Mar 20, 2024 · 37cea63 · 37cea63
1 parent 2802f1b
commit 37cea63
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git a/resources/js/components/fieldtypes/CodeFieldtype.vue b/resources/js/components/fieldtypes/CodeFieldtype.vue
@@ -5,7 +5,7 @@
     <div class="code-fieldtype-container" :class="[themeClass, {'code-fullscreen': fullScreenMode }]">
         <div class="code-fieldtype-toolbar">
             <div>
-                <select-input v-if="config.mode_selectable" :options="modes" v-model="mode" class="text-xs leading-none" />
+                <select-input v-if="config.mode_selectable" :options="modes" v-model="mode" :is-read-only="isReadOnly" class="text-xs leading-none" />
                 <div v-else v-text="modeLabel" class="text-xs font-mono text-gray-700"></div>
             </div>
             <button @click="fullScreenMode = !fullScreenMode" class="btn-icon h-8 leading-none flex items-center justify-center text-gray-800" v-tooltip="__('Toggle Fullscreen Mode')">

diff --git a/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue b/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
@@ -190,7 +190,11 @@ export default {
 
         mode(mode) {
             if (mode === 'preview') this.updateMarkdownPreview();
-        }
+        },
+
+        readOnly(readOnly) {
+            this.codemirror.setOption('readOnly', readOnly ? 'nocursor' : false);
+        },
 
     },