bugy#117 added markdown support for scripts description section

samples/configs/bash_formatting.json

@@ -1,5 +1,5 @@
 {
   "name": "Bash formatting",
   "script_path": "./samples/scripts/bash_formatting.py",
-  "description": "Test script for validating output in case of bash escape sequences: https://en.wikipedia.org/wiki/ANSI_escape_code"
+  "description": "Test script for validating output in case of bash escape sequences: [**ANSI wiki**](https://en.wikipedia.org/wiki/ANSI_escape_code). Supported features: \n - carriage return (\\r) \n - text colors/styles"
 }

src/tests/karma.conf.js

@@ -19,6 +19,7 @@ module.exports = function (config) {
             '../../web/js/libs/*.js',
             '../../web/js/common.js',
             '../../web/js/components/log_panel.js',
+            '../../web/js/script/script-view.js',
             '*.js'
         ],
 

src/tests/script_view_conf_test.js

@@ -0,0 +1,42 @@
+"use strict";
+
+var assert = chai.assert;
+chai.config.truncateThreshold = 0;
+
+describe('Test Configuration of ScriptView', function () {
+
+    beforeEach(function () {
+        this.viewContainer = document.createElement('div');
+        document.children[0].appendChild(this.viewContainer);
+
+        this.scriptView = new ScriptView(this.viewContainer);
+        this.vueModel = this.scriptView.vueModel;
+    });
+
+    afterEach(function () {
+        this.viewContainer.remove();
+    });
+
+    describe('Test descript section', function () {
+
+        it('test simple text', function () {
+            this.scriptView.setScriptDescription('some text');
+            assert.equal('some text', this.vueModel.formattedDescription)
+        });
+
+        it('test bold', function () {
+            this.scriptView.setScriptDescription('some **bold** text');
+            assert.equal('some <strong>bold</strong> text', this.vueModel.formattedDescription)
+        });
+
+        it('test explicit link', function () {
+            this.scriptView.setScriptDescription('some [link_text](https://google.com)');
+            assert.equal('some <a href="https://google.com">link_text</a>', this.vueModel.formattedDescription)
+        });
+
+        it('test new line', function () {
+            this.scriptView.setScriptDescription('line1\nline2');
+            assert.equal('line1<br>line2', this.vueModel.formattedDescription)
+        });
+    })
+});

tools/init.py

@@ -23,6 +23,11 @@
     'vue-router.js': {
         'prod': 'https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.1/vue-router.min.js',
         'dev': 'https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.1/vue-router.js'
+    },
+
+    'marked.js': {
+        'prod': 'https://cdnjs.cloudflare.com/ajax/libs/marked/0.4.0/marked.min.js',
+        'dev': 'https://cdnjs.cloudflare.com/ajax/libs/marked/0.4.0/marked.js'
     }
 }
 

web/index.html

@@ -11,6 +11,7 @@
     <script src="js/libs/materialize.min.js"></script>
     <script src="js/libs/hashtable.js"></script>
     <script src="js/libs/vue.js"></script>
+    <script src="js/libs/marked.js"></script>
     <script src="js/common.js"></script>
     <script src="js/index.js"></script>
 

web/js/script/script-view.js

@@ -13,7 +13,7 @@ function ScriptView(parent) {
 
         template:
         '<div class="script-panel" :id="id">\n'
-        + ' <p class="script-description" v-show="scriptDescription">{{ scriptDescription }}</p>\n'
+        + ' <p class="script-description" v-show="scriptDescription" v-html="formattedDescription"></p>\n'
         + ' <div class="script-parameters-panel" ref="parametersPanel"></div>\n'
         + ' <div>\n'
         + '     <button class="button-execute btn"'
@@ -67,6 +67,26 @@ function ScriptView(parent) {
         computed: {
             hasErrors: function () {
                 return !isNull(this.errors) && (this.errors.length > 0);
+            },
+            formattedDescription: function () {
+                var descriptionHtml = marked(this.scriptDescription, {sanitize: true, gfm: true, breaks: true});
+                var paragraphRemoval = document.createElement('div');
+                paragraphRemoval.innerHTML = descriptionHtml.trim();
+
+                for (var i = 0; i < paragraphRemoval.childNodes.length; i++) {
+                    var child = paragraphRemoval.childNodes[i];
+                    if (child.tagName === 'P') {
+                        i += child.childNodes.length - 1;
+
+                        while (child.childNodes.length > 0) {
+                            paragraphRemoval.insertBefore(child.firstChild, child);
+                        }
+
+                        paragraphRemoval.removeChild(child);
+                    }
+                }
+
+                return paragraphRemoval.innerHTML;
             }
         },