Added markdown render manifest

index.html

@@ -21,8 +21,12 @@
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.46.0/codemirror.min.js" integrity="sha256-OMbqhJ5GYA+UQ2a9UE9iXHA1kn3hlZCFL5aZmpSp/+M=" crossorigin="anonymous"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.46.0/mode/javascript/javascript.min.js" integrity="sha256-h2CaV12bheEEc7Ao3zF6MntAbDLJkPoFR+h+nHvQUqA=" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.46.0/mode/css/css.min.js" integrity="sha256-mSK/ZI2z8KrKSjKaCmUIVLJVH5ocYo92K8Zjam/tCyc=" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.46.0/mode/xml/xml.min.js" integrity="sha256-ZhQvi0y/HBV02Ej24EigSb5UyIhHe5COCWNRv/0Bd5E=" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.46.0/mode/htmlmixed/htmlmixed.min.js" integrity="sha256-9Dta/idKg17o/o0a3PEsL6JjkYvijj9UMh3Z86HhUcg=" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.46.0/mode/markdown/markdown.min.js" integrity="sha256-BZXkUzlSBobUXEiSFbDIbTc/DOqhNdegF/iK5m99kbk=" crossorigin="anonymous"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote.min.js" integrity="sha256-1XDZ8T0bWi65wnqq7bBPK9QrWkE0fg6xLVAVuSqKw/4=" crossorigin="anonymous"></script>
-
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.9.0/showdown.min.js" integrity="sha256-LSUpTY0kkXGKvcBC9kbmgibmx3NVVgJvAEfTZbs51mU=" crossorigin="anonymous"></script>
 
     <script src="js/OliveUI.js"></script>
     <script src="js/modules/newWidgetUI.js"></script>
@@ -34,6 +38,7 @@
     <script src="js/widgets/MicroserviceUI_manifest.js"></script>
     <script src="js/widgets/JavascriptRenderUI_manifest.js"></script>
     <script src="js/widgets/HTMLRenderUI_manifest.js"></script>
+    <script src="js/widgets/MarkdownRenderUI_manifest.js"></script>
 
     <script src="js/main.js"></script>
   </body>

js/main.js

@@ -12,6 +12,7 @@
   var widget2 = oliveUI.createWidgetInstance('Microservice UI');
   var widget3 = oliveUI.createWidgetInstance('Javascript Render UI');
   var widget4 = oliveUI.createWidgetInstance('HTML Render UI');
+  var widget5 = oliveUI.createWidgetInstance('Markdown Render UI');
 
   oliveUI.setWidgetInstanceConfiguration(widget1, {
     microserviceInputs: {
@@ -34,13 +35,17 @@
   });
 
   oliveUI.setWidgetInstanceConfiguration(widget3, {
-    javascriptAlg: `return $('<button>Test</button>').click(function () {
-      alert('Test button clicked');
+    javascriptAlg: `return $('<button>This is a javascript generated button</button>').click(function () {
+      alert('Button clicked');
     });`
   });
 
   oliveUI.setWidgetInstanceConfiguration(widget4, {
-    html: `<blockquote><b><u>tests</u></b></blockquote>`
+    html: `<blockquote><b>This is a Bold HTML text</b></blockquote>`
+  });
+
+  oliveUI.setWidgetInstanceConfiguration(widget5, {
+    text: `# This is a markdown text`
   });
 
 }(jQuery, OliveUI));

js/modules/newHTMLEditorUI.js

-(function ($, OliveUI) {
+(function ($, OliveUI, CodeMirror) {
   'use strict';
   if (!$('<div>').summernote) throw 'Summernote WYSIWYG Editor not available';
 
   OliveUI.modules.newHTMLEditorUI = function (config = {}) {
     config.height = config.minHeight || 100;
+    config.codemirror = config.codemirror || {
+      mode: 'htmlmixed',
+      tabSize: 2,
+      lineNumbers: true,
+      lineWrapping: true
+    };
 
     var _dom = {
       rootDiv: $('<div>'),
@@ -26,4 +32,4 @@
       }
     };
   };
-}(jQuery, OliveUI));
+}(jQuery, OliveUI, CodeMirror));

js/widgets/MarkdownRenderUI_manifest.js

+(function ($, OliveUI, showdown, newCodeEditorUI) {
+  'use strict';
+
+  OliveUI.addWidgetManifest({
+
+    name: 'Markdown Render UI',
+    description: '',
+
+    createUIFn: function () {
+      var _newMarkdownRenderUI = function (config = {}) {
+        config.noHeaderId = config.noHeaderId!=null ? config.noHeaderId: true;
+        var _dom = {
+          rootDiv: $('<div>')
+        };
+        var _converter = new showdown.Converter(config);
+        return {
+          render: function () {
+            return _dom.rootDiv;
+          },
+          setContent: function (content = {}) {
+            content.text = content.text || '';
+            _dom.rootDiv.empty();
+            try {
+              var html = _converter.makeHtml(content.text);
+              _dom.rootDiv.append($(html));
+            } catch (e) {
+              OliveUI.utils.showError(e, _dom.rootDiv);
+            }
+          }
+        };
+      };
+      return _newMarkdownRenderUI();
+    },
+
+    createConfigurationUIFn: function () {
+      return newCodeEditorUI({
+        mode: 'markdown'
+      });
+    }
+
+  });
+
+}(jQuery, OliveUI, showdown, OliveUI.modules.newCodeEditorUI));