From 6c29971eb4482108e452120b4ab36a8fae0add62 Mon Sep 17 00:00:00 2001
From: Baoshuo Ren <i@baoshuo.ren>
Date: Thu, 30 Jun 2022 23:49:42 +0800
Subject: [PATCH] feat(helper/toc): more flexible class name (#5010)

---
 lib/plugins/helper/toc.js   | 24 ++++++++---
 test/scripts/helpers/toc.js | 79 +++++++++++++++++++++++++++++++++++++
 2 files changed, 97 insertions(+), 6 deletions(-)

diff --git a/lib/plugins/helper/toc.js b/lib/plugins/helper/toc.js
index e6e4fa8c7b..e055ffd6f2 100644
--- a/lib/plugins/helper/toc.js
+++ b/lib/plugins/helper/toc.js
@@ -7,6 +7,12 @@ function tocHelper(str, options = {}) {
     min_depth: 1,
     max_depth: 6,
     class: 'toc',
+    class_item: '',
+    class_link: '',
+    class_text: '',
+    class_child: '',
+    class_number: '',
+    class_level: '',
     list_number: true
   }, options);
 
@@ -15,6 +21,12 @@ function tocHelper(str, options = {}) {
   if (!data.length) return '';
 
   const className = escapeHTML(options.class);
+  const itemClassName = escapeHTML(options.class_item || options.class + '-item');
+  const linkClassName = escapeHTML(options.class_link || options.class + '-link');
+  const textClassName = escapeHTML(options.class_text || options.class + '-text');
+  const childClassName = escapeHTML(options.class_child || options.class + '-child');
+  const numberClassName = escapeHTML(options.class_number || options.class + '-number');
+  const levelClassName = escapeHTML(options.class_level || options.class + '-level');
   const listNumber = options.list_number;
 
   let result = `<ol class="${className}">`;
@@ -42,7 +54,7 @@ function tocHelper(str, options = {}) {
       }
 
       if (level > lastLevel) {
-        result += `<ol class="${className}-child">`;
+        result += `<ol class="${childClassName}">`;
       } else {
         result += '</li>';
       }
@@ -50,15 +62,15 @@ function tocHelper(str, options = {}) {
       firstLevel = level;
     }
 
-    result += `<li class="${className}-item ${className}-level-${level}">`;
+    result += `<li class="${itemClassName} ${levelClassName}-${level}">`;
     if (href) {
-      result += `<a class="${className}-link" href="${href}">`;
+      result += `<a class="${linkClassName}" href="${href}">`;
     } else {
-      result += `<a class="${className}-link">`;
+      result += `<a class="${linkClassName}">`;
     }
 
     if (listNumber && !el.unnumbered) {
-      result += `<span class="${className}-number">`;
+      result += `<span class="${numberClassName}">`;
 
       for (let i = firstLevel - 1; i < level; i++) {
         result += `${lastNumber[i]}.`;
@@ -67,7 +79,7 @@ function tocHelper(str, options = {}) {
       result += '</span> ';
     }
 
-    result += `<span class="${className}-text">${text}</span></a>`;
+    result += `<span class="${textClassName}">${text}</span></a>`;
 
     lastLevel = level;
   }
diff --git a/test/scripts/helpers/toc.js b/test/scripts/helpers/toc.js
index 08d7c3ebeb..47f0014790 100644
--- a/test/scripts/helpers/toc.js
+++ b/test/scripts/helpers/toc.js
@@ -476,4 +476,83 @@ describe('toc', () => {
 
     toc(input, { list_number: true, class: className }).should.eql(expected);
   });
+
+  it('custom class', () => {
+    const className = 'foo';
+    const childClassName = 'bar';
+    const expected = [
+      '<ol class="' + className + '">',
+      '<li class="' + className + '-item ' + className + '-level-1">',
+      '<a class="' + className + '-link" href="#title_1">',
+      '<span class="' + className + '-number">1.</span> ', // list_number enabled
+      '<span class="' + className + '-text">Title 1</span>',
+      '</a>',
+      '<ol class="' + childClassName + '">',
+      '<li class="' + className + '-item ' + className + '-level-2">',
+      '<a class="' + className + '-link" href="#title_1_1">',
+      '<span class="' + className + '-number">1.1.</span> ', // list_number enabled
+      '<span class="' + className + '-text">Title 1.1</span>',
+      '</a>',
+      '<ol class="' + childClassName + '">',
+      '<li class="' + className + '-item ' + className + '-level-3">',
+      '<a class="' + className + '-link" href="#title_1_1_1">',
+      '<span class="' + className + '-number">1.1.1.</span> ', // list_number enabled
+      '<span class="' + className + '-text">Title 1.1.1</span>',
+      '</a>',
+      '</li>',
+      '</ol>',
+      '</li>',
+      '<li class="' + className + '-item ' + className + '-level-2">',
+      '<a class="' + className + '-link" href="#title_1_2">',
+      '<span class="' + className + '-number">1.2.</span> ', // list_number enabled
+      '<span class="' + className + '-text">Title 1.2</span>',
+      '</a>',
+      '</li>',
+      '<li class="' + className + '-item ' + className + '-level-2">',
+      '<a class="' + className + '-link" href="#title_1_3">',
+      '<span class="' + className + '-number">1.3.</span> ', // list_number enabled
+      '<span class="' + className + '-text">Title 1.3</span>',
+      '</a>',
+      '<ol class="' + childClassName + '">',
+      '<li class="' + className + '-item ' + className + '-level-3">',
+      '<a class="' + className + '-link" href="#title_1_3_1">',
+      '<span class="' + className + '-number">1.3.1.</span> ', // list_number enabled
+      '<span class="' + className + '-text">Title 1.3.1</span>',
+      '</a>',
+      '</li>',
+      '</ol>',
+      '</li>',
+      '</ol>',
+      '</li>',
+      '<li class="' + className + '-item ' + className + '-level-1">',
+      '<a class="' + className + '-link" href="#title_2">',
+      '<span class="' + className + '-number">2.</span> ', // list_number enabled
+      '<span class="' + className + '-text">Title 2</span>',
+      '</a>',
+      '<ol class="' + childClassName + '">',
+      '<li class="' + className + '-item ' + className + '-level-2">',
+      '<a class="' + className + '-link" href="#title_2_1">',
+      '<span class="' + className + '-number">2.1.</span> ', // list_number enabled
+      '<span class="' + className + '-text">Title 2.1</span>',
+      '</a>',
+      '</li>',
+      '</ol>',
+      '</li>',
+      '<li class="' + className + '-item ' + className + '-level-1">',
+      '<a class="' + className + '-link" href="#title_3">',
+      '<span class="' + className + '-number">3.</span> ', // list_number enabled
+      '<span class="' + className + '-text">Title should escape &amp;, &lt;, &#39;, and &quot;</span>',
+      '</a>',
+      '</li>',
+      '<li class="' + className + '-item ' + className + '-level-1">',
+      '<a class="' + className + '-link" href="#title_4">',
+      '<span class="' + className + '-number">4.</span> ', // list_number enabled
+      '<span class="' + className + '-text">Chapter 1 should be printed to toc</span>',
+      '</a>',
+      '</li>',
+      '</ol>'
+    ].join('');
+
+    toc(html, { class: 'foo', class_child: 'bar' }).should.eql(expected);
+  });
 });