From 382d91c4613ad30cec1b67f46acca56d4d3aa4a8 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <madsr@hey.com>
Date: Tue, 3 May 2022 17:36:38 +0200
Subject: [PATCH] add readonly mode for markdown property editor

---
 src/Umbraco.Web.UI.Client/lib/markdown/markdown.css   |  4 ++++
 .../markdowneditor/markdowneditor.html                | 11 +++++++++--
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/lib/markdown/markdown.css b/src/Umbraco.Web.UI.Client/lib/markdown/markdown.css
index 84b867d2d6..9d13d93003 100644
--- a/src/Umbraco.Web.UI.Client/lib/markdown/markdown.css
+++ b/src/Umbraco.Web.UI.Client/lib/markdown/markdown.css
@@ -20,6 +20,10 @@
 	width: 100%;
 }
 
+.wmd-panel .btn-toolbar-container[readonly] .btn-toolbar {
+	display: none;
+}
+
 /* unset the negative margin applied in button-groups.less to avoid flickering when hovering the button bar */
 .wmd-panel .btn-toolbar .btn-group>.btn+.btn {
     margin-left: 0;
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/markdowneditor/markdowneditor.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/markdowneditor/markdowneditor.html
index 6f2592d20a..0cb617e4c9 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/markdowneditor/markdowneditor.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/markdowneditor/markdowneditor.html
@@ -1,9 +1,16 @@
 <div class="wmd-panel" ng-controller="Umbraco.PropertyEditors.MarkdownEditorController">
 
     <ng-form name="modelValueForm">
-        <div id="wmd-button-bar-{{editorId}}"></div>
+        <div class="btn-toolbar-container" id="wmd-button-bar-{{editorId}}" ng-attr-readonly="{{ readonly || undefined }}"></div>
 
-        <textarea name="modelValue" class="wmd-input" id="wmd-input-{{editorId}}" ng-model="model.value" ng-required="model.validation.mandatory"></textarea>
+        <textarea
+            name="modelValue"
+            class="wmd-input"
+            id="wmd-input-{{editorId}}"
+            ng-model="model.value"
+            ng-required="model.validation.mandatory"
+            ng-readonly="readonly">
+        </textarea>
 
         <div class="wmd-panel wmd-preview" id="wmd-preview-{{editorId}}" ng-show="model.config.preview"></div>
     </ng-form>