From 8393fdecfbb24f668accf921d44bccff36bd2079 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=B8ren=20Kottal?= <sk@ecreo.dk>
Date: Wed, 17 Nov 2021 01:38:15 +0100
Subject: [PATCH] Adds support for simple markdown in property descriptions,
 and extended property descriptions (#11628)

* Adds support for simple markdown in property descriptions, and extended descriptions

* removes max-width for property descriptions (doesn't make sense to limit these IMO)
---
 .../property/umbproperty.directive.js         | 14 +++++++++++++
 .../filters/simpleMarkdown.filter.js.js       | 20 +++++++++++++++++++
 src/Umbraco.Web.UI.Client/src/less/main.less  |  1 -
 .../components/property/umb-property.html     | 15 +++++++++++++-
 4 files changed, 48 insertions(+), 2 deletions(-)
 create mode 100644 src/Umbraco.Web.UI.Client/src/common/filters/simpleMarkdown.filter.js.js

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/property/umbproperty.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/property/umbproperty.directive.js
index f4cfacbf70..25e55455db 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/property/umbproperty.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/property/umbproperty.directive.js
@@ -75,7 +75,21 @@
                 // inheritance is (i.e.infinite editing)
                 var found = angularHelper.traverseScopeChain($scope, s => s && s.vm && s.vm.constructor.name === "UmbPropertyController");
                 vm.parentUmbProperty = found ? found.vm : null;
+          }
+
+          if (vm.property.description) {
+            // split by lines containing only '--'
+            var descriptionParts = vm.property.description.split(/^--$/gim);
+            if (descriptionParts.length > 1) {
+              // if more than one part, we have an extended description,
+              // combine to one extended description, and remove leading linebreak
+              vm.property.extendedDescription = descriptionParts.splice(1).join("--").substring(1);
+              vm.property.extendedDescriptionVisible = false;
+
+              // set propertydescription to first part, and remove trailing linebreak
+              vm.property.description = descriptionParts[0].slice(0, -1);
             }
+          }
         }
 
     }
diff --git a/src/Umbraco.Web.UI.Client/src/common/filters/simpleMarkdown.filter.js.js b/src/Umbraco.Web.UI.Client/src/common/filters/simpleMarkdown.filter.js.js
new file mode 100644
index 0000000000..d33b96916a
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/common/filters/simpleMarkdown.filter.js.js
@@ -0,0 +1,20 @@
+/**
+* @ngdoc filter
+* @name umbraco.filters.simpleMarkdown
+* @description 
+* Used when rendering a string as Markdown as HTML (i.e. with ng-bind-html). Allows use of **bold**, *italics*, ![images](url) and [links](url)
+**/
+angular.module("umbraco.filters").filter('simpleMarkdown', function () {
+  return function (text) {
+	if (!text) {
+		return '';
+    }
+
+    return text
+      .replace(/\*\*(.*)\*\*/gim, '<b>$1</b>')
+      .replace(/\*(.*)\*/gim, '<i>$1</i>')
+      .replace(/!\[(.*?)\]\((.*?)\)/gim, "<img alt='$1' src='$2' />")
+      .replace(/\[(.*?)\]\((.*?)\)/gim, "<a href='$2' target='_blank' class='underline'>$1</a>")
+      .replace(/\n/g, '<br />').trim();
+  };
+});
diff --git a/src/Umbraco.Web.UI.Client/src/less/main.less b/src/Umbraco.Web.UI.Client/src/less/main.less
index 66afbfd73f..43911fccb1 100644
--- a/src/Umbraco.Web.UI.Client/src/less/main.less
+++ b/src/Umbraco.Web.UI.Client/src/less/main.less
@@ -237,7 +237,6 @@ umb-property:last-of-type .umb-control-group {
     }
 
     .control-description {
-        max-width:480px;// avoiding description becoming too wide when its placed on top of property.
         margin-bottom: 5px;
     }
 }
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/property/umb-property.html b/src/Umbraco.Web.UI.Client/src/views/components/property/umb-property.html
index 650fd143c1..a037feaca2 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/property/umb-property.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/property/umb-property.html
@@ -24,7 +24,20 @@
 
                     <umb-property-actions ng-if="!vm.showInherit" actions="vm.propertyActions"></umb-property-actions>
 
-                    <small class="control-description" ng-if="vm.property.description" ng-bind-html="vm.property.description | preserveNewLineInHtml"></small>
+                    <small class="control-description" ng-if="vm.property.description" ng-bind-html="vm.property.description | simpleMarkdown"></small>
+
+                    <div ng-if="vm.property.extendedDescription">
+
+                      <div ng-if="vm.property.extendedDescriptionVisible">
+                        <small class="control-description" ng-bind-html="vm.property.extendedDescription | simpleMarkdown"></small>
+                      </div>
+
+                      <button type="button" class="btn btn-mini btn-link btn-link-reverse p0" ng-click="vm.property.extendedDescriptionVisible = !vm.property.extendedDescriptionVisible">
+                          <localize ng-if="!vm.property.extendedDescriptionVisible" key="general_readMore"></localize>
+                          <localize ng-if="vm.property.extendedDescriptionVisible" key="general_close"></localize>
+                      </button>
+
+                    </div>
                 </div>
 
                 <div class="controls" ng-transclude>