Merge pull request #42 from ncoden/feat/ignore-html-in-headings

feat: ignore HTML in headings for the table of content

js/docs.tableOfContents.js

@@ -7,12 +7,17 @@
 var $h2s = $('.docs-component h2');
 var $toc = $('[data-docs-toc]');
 
-$h2s.each(function() {
+$h2s.each(function () {
+  var $title = $(this);
   // Ignore <h2>s inside of a rendered code sample
-  if ($(this).parents('.docs-code-live').length) return;
+  if ($title.parents('.docs-code-live').length) return;
 
-  var text = $(this).text();
-  var anchor = $(this).children('a').attr('href');
+  // Get the text in the title without the nested HTML
+  // https://stackoverflow.com/a/33592275
+  var $topLevelTitle = $title.clone().children().remove().end();
+  var text = $topLevelTitle.text();
+
+  var anchor = $title.children('a').attr('href');
 
   $toc.append('<li><a href="'+anchor+'">'+text+'</a></li>');
 });

lib/util/topText.js

@@ -0,0 +1,27 @@
+var Cheerio = require('cheerio');
+
+/**
+ * Return the top-level text in the given string or jQuery element without
+ * the nested HTML.
+ *
+ * ```js
+ * stripHtml('hello world')         // -> "hello"
+ * stripHtml('hello <b>world</b>')  // -> "hello"
+ * ```
+ */
+module.exports = function (param) {
+  var $el;
+
+  if (typeof param === 'string')
+    $el = Cheerio.load(param)('body');
+  else if (typeof param === 'object')
+    $el = $el.clone();
+  else
+    throw new Error('expected a string or a jQuery object, got "' + param + '" (' + typeof param + ')');
+
+  // https://stackoverflow.com/a/33592275
+  var $topLevelEl = $el.children().remove().end();
+  var text = $topLevelEl.text();
+
+  return text;
+}

lib/util/writeHeading.js

@@ -1,8 +1,12 @@
 var escape = require('./escape');
+var topText = require('./topText');
 var format = require('string-template');
 
-module.exports = function(text, level, anchor) {
-  var escapedText = anchor ? escape(anchor) : escape(text);
+module.exports = function (text, level, anchor) {
+  var title = anchor || text;
+
+  var topLevelText = topText(title).trim();
+  var escapedText = escape(topLevelText);
   var magellan = (level === 2) ? format(' data-magellan-target="{0}"', [escapedText]) : '';
 
   return format('<h{0} id="{1}" class="docs-heading"{3}>{2}<a class="docs-heading-icon" href="#{1}"></a></h{0}>', [level, escapedText, text, magellan]);

test/unit/utilities.js

@@ -58,4 +58,19 @@ describe('Utilities', function() {
       expect(heading).to.contain('href="#custom-anchor"');
     });
   });
+
+  describe('topText', function() {
+    var topText = require('../../lib/util/topText');
+
+    it('returns the top-level text of the given HTML string', function() {
+      var text1 = topText('Lorem <p>ipsum</p> dolor <i>sit</i> amet');
+      var text2 = topText('Lorem <p>ipsum <i>dolor</i> sit</p> amet');
+      var text3 = topText('<p>Lorem ipsum</p> dolor sit <i>amet</i>');
+
+      expect(text1).to.equal('Lorem  dolor  amet');
+      expect(text2).to.equal('Lorem  amet');
+      expect(text3).to.equal(' dolor sit ');
+    });
+
+  });
 });