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)

(cherry picked from commit 8393fdecfb)

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);
             }
+          }
         }
 
     }

src/Umbraco.Web.UI.Client/src/common/filters/simpleMarkdown.filter.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' rel='noopener' class='underline'>$1</a>")
+      .replace(/\n/g, '<br />').trim();
+  };
+});

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;
     }
 }

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>