feat: added class names to spoilers

ggs-dev · Sep 14, 2020 · 33886f1 · 33886f1
1 parent 13cb667
commit 33886f1
Show file tree

Hide file tree

Showing 5 changed files with 80 additions and 4 deletions.
diff --git a/packages/remark-spoilers/__tests__/__snapshots__/index.spec.js.snap b/packages/remark-spoilers/__tests__/__snapshots__/index.spec.js.snap
@@ -43,6 +43,16 @@ exports[`spoilers should show spoiler with custom summary 1`] = `
 "
 `;
 
+exports[`spoilers should show spoiler with details class name 1`] = `
+"<details class=\\"hello hello-world\\"><p>peek-a-boo!</p></details>
+"
+`;
+
+exports[`spoilers should show spoiler with summary class name 1`] = `
+"<details><summary class=\\"hello hello-world\\">test</summary><p>peek-a-boo!</p></details>
+"
+`;
+
 exports[`spoilers should show spoiler without custom summary 1`] = `
 "<details><p>peek-a-boo!</p></details>
 "

diff --git a/packages/remark-spoilers/__tests__/index.spec.js b/packages/remark-spoilers/__tests__/index.spec.js
@@ -19,6 +19,44 @@ describe('spoilers', () => {
     expect(result).toMatchSnapshot()
   })
 
+  test('should show spoiler with details class name', () => {
+    // Arrange
+    let string = dedent`
+    !spoiler
+    peek-a-boo!
+    !spoiler
+    `
+
+    // Act
+    let result = remark()
+      .use(html)
+      .use(spoiler, { detailsClassName: 'hello hello-world' })
+      .processSync(string)
+      .toString()
+
+    // Assert
+    expect(result).toMatchSnapshot()
+  })
+
+  test('should show spoiler with summary class name', () => {
+    // Arrange
+    let string = dedent`
+    !spoiler test
+    peek-a-boo!
+    !spoiler
+    `
+
+    // Act
+    let result = remark()
+      .use(html)
+      .use(spoiler, { summaryClassName: 'hello hello-world' })
+      .processSync(string)
+      .toString()
+
+    // Assert
+    expect(result).toMatchSnapshot()
+  })
+
   test('should show spoiler with custom summary', () => {
     // Arrange
     let string = dedent`

diff --git a/packages/remark-spoilers/package-lock.json b/packages/remark-spoilers/package-lock.json
diff --git a/packages/remark-spoilers/package.json b/packages/remark-spoilers/package.json
@@ -11,5 +11,8 @@
   "module": "src/index.js",
   "scripts": {
     "build": "cross-env BABEL_ENV=production babel src/index.js --config-file ../../babel.config.js --ignore '**/*.spec.js,**/*.test.js' --out-dir dist"
+  },
+  "dependencies": {
+    "space-separated-tokens": "^1.1.5"
   }
 }
diff --git a/packages/remark-spoilers/src/index.js b/packages/remark-spoilers/src/index.js
@@ -1,3 +1,5 @@
+import spaceSeparated from 'space-separated-tokens'
+
 const C_NEWLINE = '\n'
 const C_NEWPARAGRAPH = '\n\n'
 
@@ -19,8 +21,12 @@ export default function plugin(options = {}) {
 
   options.defaultSummary = options.defaultSummary ?? 'Open spoiler'
   options.token = options.token ?? '!spoiler'
-  options.detailsClassName = options.detailsClassName ?? ''
-  options.summaryClassName = options.summaryClassName ?? ''
+  options.detailsClassName = options.detailsClassName
+    ? spaceSeparated.parse(options.detailsClassName)
+    : null
+  options.summaryClassName = options.summaryClassName
+    ? spaceSeparated.parse(options.summaryClassName)
+    : null
 
   function tokenizeBlocks(eat, value, silent) {
     let match = matchToken(options.token, value)
@@ -72,7 +78,10 @@ export default function plugin(options = {}) {
       children.push({
         type: 'summary',
         data: {
-          hName: 'summary'
+          hName: 'summary',
+          hProperties: {
+            class: options.summaryClassName
+          }
         },
         children: [
           {
@@ -89,7 +98,10 @@ export default function plugin(options = {}) {
       type: 'spoiler',
       children: children,
       data: {
-        hName: 'details'
+        hName: 'details',
+        hProperties: {
+          class: options.detailsClassName
+        }
       },
       position: {
         start,