From 0d7363af23d93f8561d54d1ad115923ef4ef52f6 Mon Sep 17 00:00:00 2001 From: Jeremy Pyne Date: Tue, 22 Dec 2015 10:47:04 -0500 Subject: [PATCH 1/3] Fix for MarkdownEditor no seeing changes from button clicks. --- .../markdowneditor.controller.js | 44 ++++++++++--------- 1 file changed, 23 insertions(+), 21 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/markdowneditor/markdowneditor.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/markdowneditor/markdowneditor.controller.js index 8893ebd523..2fe3fbf5e3 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/markdowneditor/markdowneditor.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/markdowneditor/markdowneditor.controller.js @@ -1,5 +1,5 @@ //inject umbracos assetsServce and dialog service -function MarkdownEditorController($scope, assetsService, dialogService, $timeout) { +function MarkdownEditorController($scope, assetsService, dialogService, angularHelper, $timeout) { //tell the assets service to load the markdown.editor libs from the markdown editors //plugin folder @@ -17,29 +17,31 @@ function MarkdownEditorController($scope, assetsService, dialogService, $timeout .then(function () { // we need a short delay to wait for the textbox to appear. - setTimeout(function () { - //this function will execute when all dependencies have loaded - // but in the case that they've been previously loaded, we can only - // init the md editor after this digest because the DOM needs to be ready first - // so run the init on a timeout - $timeout(function () { - var converter2 = new Markdown.Converter(); - var editor2 = new Markdown.Editor(converter2, "-" + $scope.model.alias); - editor2.run(); + //this function will execute when all dependencies have loaded + // but in the case that they've been previously loaded, we can only + // init the md editor after this digest because the DOM needs to be ready first + // so run the init on a timeout + $timeout(function () { + var converter2 = new Markdown.Converter(); + var editor2 = new Markdown.Editor(converter2, "-" + $scope.model.alias); + editor2.run(); - //subscribe to the image dialog clicks - editor2.hooks.set("insertImageDialog", function (callback) { + //subscribe to the image dialog clicks + editor2.hooks.set("insertImageDialog", function (callback) { - dialogService.mediaPicker({ - callback: function (data) { - callback(data.image); - } - }); - - return true; // tell the editor that we'll take care of getting the image url + dialogService.mediaPicker({ + callback: function (data) { + callback(data.image); + } }); - }, 200); - }); + + return true; // tell the editor that we'll take care of getting the image url + }); + + editor2.hooks.set("onPreviewRefresh", function () { + angularHelper.getCurrentForm($scope).$setDirty(); + }); + }, 200); //load the seperat css for the editor to avoid it blocking our js loading TEMP HACK assetsService.loadCss("lib/markdown/markdown.css"); From 9649e6d9bf3604dc91d135ea01893b096e6f7a95 Mon Sep 17 00:00:00 2001 From: Jeremy Pyne Date: Tue, 22 Dec 2015 11:17:53 -0500 Subject: [PATCH 2/3] Add code to manually update the model. --- .../markdowneditor/markdowneditor.controller.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/markdowneditor/markdowneditor.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/markdowneditor/markdowneditor.controller.js index 2fe3fbf5e3..bcf73469af 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/markdowneditor/markdowneditor.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/markdowneditor/markdowneditor.controller.js @@ -1,5 +1,5 @@ //inject umbracos assetsServce and dialog service -function MarkdownEditorController($scope, assetsService, dialogService, angularHelper, $timeout) { +function MarkdownEditorController($scope, $element, assetsService, dialogService, angularHelper, $timeout) { //tell the assets service to load the markdown.editor libs from the markdown editors //plugin folder @@ -40,6 +40,10 @@ function MarkdownEditorController($scope, assetsService, dialogService, angularH editor2.hooks.set("onPreviewRefresh", function () { angularHelper.getCurrentForm($scope).$setDirty(); + // We must manually update the model as there is no way to hook into the markdown editor events without editing that code. + $scope.$apply(function () { + $scope.model.value = $("textarea", $element).val(); + }); }); }, 200); From 9dbdae3b90b2c0f25e2b7c4ac3ec4cf8e179407b Mon Sep 17 00:00:00 2001 From: Jeremy Pyne Date: Tue, 22 Dec 2015 11:49:13 -0500 Subject: [PATCH 3/3] Added Markdown package and code to MarkdownEditorValueConverter to automatically convert the markdown text to Html when rendered in the front end. --- .../ValueConverters/MarkdownEditorValueConverter.cs | 8 ++++++-- src/Umbraco.Web/Umbraco.Web.csproj | 4 ++++ src/Umbraco.Web/packages.config | 1 + 3 files changed, 11 insertions(+), 2 deletions(-) diff --git a/src/Umbraco.Web/PropertyEditors/ValueConverters/MarkdownEditorValueConverter.cs b/src/Umbraco.Web/PropertyEditors/ValueConverters/MarkdownEditorValueConverter.cs index af66278815..681aa2ee72 100644 --- a/src/Umbraco.Web/PropertyEditors/ValueConverters/MarkdownEditorValueConverter.cs +++ b/src/Umbraco.Web/PropertyEditors/ValueConverters/MarkdownEditorValueConverter.cs @@ -1,4 +1,5 @@ -using System; +using MarkdownSharp; +using System; using System.Web; using Umbraco.Core; using Umbraco.Core.Models.PublishedContent; @@ -31,8 +32,11 @@ namespace Umbraco.Web.PropertyEditors.ValueConverters public override object ConvertSourceToObject(PublishedPropertyType propertyType, object source, bool preview) { + // Convert markup to html for frontend rendering. + Markdown mark = new Markdown(); + // source should come from ConvertSource and be a string (or null) already - return new HtmlString(source == null ? string.Empty : (string)source); + return new HtmlString(source == null ? string.Empty : mark.Transform((string)source)); } public override object ConvertSourceToXPath(PublishedPropertyType propertyType, object source, bool preview) diff --git a/src/Umbraco.Web/Umbraco.Web.csproj b/src/Umbraco.Web/Umbraco.Web.csproj index f84a2872ac..279f46a58a 100644 --- a/src/Umbraco.Web/Umbraco.Web.csproj +++ b/src/Umbraco.Web/Umbraco.Web.csproj @@ -132,6 +132,10 @@ False ..\packages\Lucene.Net.2.9.4.1\lib\net40\Lucene.Net.dll + + ..\packages\Markdown.1.14.4\lib\net45\MarkdownSharp.dll + True + False ..\packages\Microsoft.AspNet.Identity.Core.2.2.1\lib\net45\Microsoft.AspNet.Identity.Core.dll diff --git a/src/Umbraco.Web/packages.config b/src/Umbraco.Web/packages.config index d255e152ba..41f4bc1ea7 100644 --- a/src/Umbraco.Web/packages.config +++ b/src/Umbraco.Web/packages.config @@ -6,6 +6,7 @@ +