From 40eae24a552c2c4de8c180c3600bd3b9f36089a2 Mon Sep 17 00:00:00 2001
From: Ronald Barendse <ronald@barend.se>
Date: Thu, 14 Jul 2022 23:41:17 +0200
Subject: [PATCH] Show editor in read-only mode when using runtime mode
 production

---
 .../src/views/templates/edit.controller.js       |  9 +++++----
 .../src/views/templates/edit.html                | 16 +++++++---------
 2 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/templates/edit.controller.js b/src/Umbraco.Web.UI.Client/src/views/templates/edit.controller.js
index e231ff51f5..1e14cf1e87 100644
--- a/src/Umbraco.Web.UI.Client/src/views/templates/edit.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/templates/edit.controller.js
@@ -83,9 +83,7 @@
     vm.save = function (suppressNotification) {
       vm.page.saveButtonState = "busy";
 
-      if (vm.editor) {
-        vm.template.content = vm.editor.getValue();
-      }
+      vm.template.content = vm.editor.getValue();
 
       contentEditingHelper.contentEditorPerformSave({
         saveMethod: templateResource.save,
@@ -228,7 +226,10 @@
         onLoad: function (_editor) {
           vm.editor = _editor;
 
-          //Update the auto-complete method to use ctrl+alt+space
+          // Set read-only when using runtime mode Production
+          _editor.setReadOnly(vm.runtimeModeProduction);
+
+          // Update the auto-complete method to use ctrl+alt+space
           _editor.commands.bindKey("ctrl-alt-space", "startAutocomplete");
 
           // Unassigns the keybinding (That was previously auto-complete)
diff --git a/src/Umbraco.Web.UI.Client/src/views/templates/edit.html b/src/Umbraco.Web.UI.Client/src/views/templates/edit.html
index 663e0a1f04..5fb4118491 100644
--- a/src/Umbraco.Web.UI.Client/src/views/templates/edit.html
+++ b/src/Umbraco.Web.UI.Client/src/views/templates/edit.html
@@ -23,15 +23,13 @@
 
             <umb-editor-container>
                 <umb-box>
-                    <umb-box-content ng-if="vm.runtimeModeProduction">
-                      <div class="umb-alert umb-alert--info">
-                        <localize key="template_runtimeModeProduction">Template content is not editable when using runtime mode <code>Production</code>.</localize>
-                      </div>
-                    </umb-box-content>
+        
+                    <umb-box-content>
+                        <div class="umb-alert umb-alert--info mb3" ng-if="vm.runtimeModeProduction">
+                          <localize key="template_runtimeModeProduction">Template content is not editable when using runtime mode <code>Production</code>.</localize>
+                        </div>
 
-                    <umb-box-content ng-if="!vm.runtimeModeProduction">
-
-                        <div class="flex" style="margin-bottom: 30px;">
+                        <div class="flex mb3" ng-if="!vm.runtimeModeProduction">
 
                             <div class="flex">
 
@@ -99,7 +97,7 @@
 
                         <div
                             data-element="code-editor"
-                            auto-scale="85"
+                            auto-scale="90"
                             umb-ace-editor="vm.aceOption"
                             model="vm.template.content">
                         </div>