Merge pull request #543 from hannu/markdown-description

Allow markdown and HTML in KSS header and description, implement #492
SC5 · Mar 31, 2015 · f34f928 · f34f928
2 parents 7b33738 + c7fc7be
commit f34f928
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 11 deletions.
diff --git a/lib/app/views/partials/section.html b/lib/app/views/partials/section.html
@@ -5,7 +5,7 @@
       <i class="fa fa-link"></i>
       <h1 class="sg">
         <span class="reference-number">{{ section.reference }}</span>
-        <span>{{ section.header }}</span>
+        <span ng-bind-html="section.header | unsafe"></span>
         <span class="section-source">{{ section.file }}</span>
       </h1>
     </a>

diff --git a/lib/modules/kss-parser.js b/lib/modules/kss-parser.js
@@ -6,15 +6,15 @@ var kss = require('kss'),
   kssSplitter = require('./kss-splitter'),
   kssAdditionalParams = require('./kss-additional-params'),
   kssSanitizeParams = require('./kss-sanitize-params'),
-  _ = require('lodash'),
-  sanitizeHtml = require('sanitize-html');
+  marked = require('marked'),
+  _ = require('lodash');
 
 // Parses kss.KssSection to JSON
 function jsonSections(sections) {
   return sections.map(function(section) {
     return {
-      header: section.header(),
-      description: sanitize(section.description()),
+      header: generateDescription(section.header(), {noWrapper: true}),
+      description: generateDescription(section.description()),
       modifiers: jsonModifiers(section.modifiers()),
       deprecated: section.deprecated(),
       experimental: section.experimental(),
@@ -30,7 +30,7 @@ function jsonModifiers(modifiers) {
     return {
       id: id + 1,
       name: modifier.name(),
-      description: sanitize(modifier.description()),
+      description: modifier.description(),
       className: modifier.className(),
       markup: modifier.markup() ? modifier.markup().toString() : null
     };
@@ -45,12 +45,17 @@ function trimLinebreaks(str) {
   return str.replace(/^[\r\n]+|[\r\n]+$/g, '');
 }
 
-function sanitize(string) {
+function generateDescription(string, options) {
+  var desc = marked(string);
+  if (options && options.noWrapper) {
+    // Remove wrapping p tags
+    desc = desc.replace(/^<p>/, '');
+    desc = desc.replace(/<\/p>\n$/, '');
+  }
 
-  var sanitized = sanitizeHtml(string, {allowedTags: [], allowedAttributes: []});
   // HACK: Remove extra parameters from descriotion
-  sanitized = sanitized.split(/sg\-[^:]*:/)[0];
-  return sanitized;
+  desc = desc.split(/sg\-[^:]*:/)[0];
+  return desc;
 }
 
 function processBlock(block, options) {

diff --git a/package.json b/package.json
@@ -45,12 +45,12 @@
     "gulp-util": "~3.0.4",
     "kss": "~2.0.2",
     "lodash": "~3.5.0",
+    "marked": "^0.3.3",
     "minimatch": "~2.0.4",
     "morgan": "~1.5.2",
     "node-neat": "~1.7.1-beta1",
     "q": "~1.2.0",
     "run-sequence": "~1.0.2",
-    "sanitize-html": "~1.6.1",
     "socket.io": "~1.3.5",
     "through2": "~0.6.3",
     "vinyl": "~0.4.6",

diff --git a/test/unit/modules/kss-parser.test.js b/test/unit/modules/kss-parser.test.js
@@ -67,6 +67,70 @@ describe('KSS parser', function() {
     }).then(done).catch(done);
   });
 
+  it('should parse markdown in header correctly', function(done) {
+    var files = {
+      'file.less': multiline(function() {
+        /*
+        // This should be __strong__.
+        //
+        // Styleguide 1.0
+        */
+      })
+    };
+    parse(files).then(function(sections) {
+      expect(sections[0].header).to.eql('This should be <strong>strong</strong>.');
+    }).then(done).catch(done);
+  });
+
+  it('should allow HTML in header', function(done) {
+    var files = {
+      'file.less': multiline(function() {
+        /*
+        // This should be <strong>strong</strong>.
+        //
+        // Styleguide 1.0
+        */
+      })
+    };
+    parse(files).then(function(sections) {
+      expect(sections[0].header).to.eql('This should be <strong>strong</strong>.');
+    }).then(done).catch(done);
+  });
+
+  it('should parse markdown in description correctly', function(done) {
+    var files = {
+      'file.less': multiline(function() {
+        /*
+        // Header
+        //
+        // This should be __strong__.
+        //
+        // Styleguide 1.0
+        */
+      })
+    };
+    parse(files).then(function(sections) {
+      expect(sections[0].description).to.eql('<p>This should be <strong>strong</strong>.</p>\n');
+    }).then(done).catch(done);
+  });
+
+  it('should allow HTML in description', function(done) {
+    var files = {
+      'file.less': multiline(function() {
+        /*
+        // Header
+        //
+        // This should be <strong>strong</strong>.
+        //
+        // Styleguide 1.0
+        */
+      })
+    };
+    parse(files).then(function(sections) {
+      expect(sections[0].description).to.eql('<p>This should be <strong>strong</strong>.</p>\n');
+    }).then(done).catch(done);
+  });
+
   it('sorts sections numerically according to first level', function(done) {
     var file = {'file1.less': multiline(function() {
       /*