added a spoiler container (#947)

changed toolbar to insert the new spoiler container
changed tests accordingly

References:
https://github.com/markdown-it/markdown-it-container
Signed-off-by: Philip Molares <philip.molares@udo.edu>

src/components/markdown-renderer/markdown-it-configurator/BasicMarkdownItConfigurator.tsx

@@ -16,6 +16,7 @@ import superscript from 'markdown-it-sup'
 import { alertContainer } from '../markdown-it-plugins/alert-container'
 import { linkifyExtra } from '../markdown-it-plugins/linkify-extra'
 import { MarkdownItParserDebugger } from '../markdown-it-plugins/parser-debugger'
+import { spoilerContainer } from '../markdown-it-plugins/spoiler-container'
 import { tasksLists } from '../markdown-it-plugins/tasks-lists'
 import { twitterEmojis } from '../markdown-it-plugins/twitter-emojis'
 import { MarkdownItConfigurator } from './MarkdownItConfigurator'
@@ -33,7 +34,8 @@ export class BasicMarkdownItConfigurator extends MarkdownItConfigurator {
       footnote,
       imsize,
       tasksLists,
-      alertContainer
+      alertContainer,
+      spoilerContainer
     )
     this.postConfigurations.push(
       linkifyExtra,

src/components/markdown-renderer/markdown-it-plugins/alert-container.ts

@@ -10,7 +10,7 @@ import Renderer from 'markdown-it/lib/renderer'
 import Token from 'markdown-it/lib/token'
 import { MarkdownItPlugin } from '../replace-components/ComponentReplacer'
 
-type RenderContainerReturn = (tokens: Token[], index: number, options: MarkdownIt.Options, env: unknown, self: Renderer) => void;
+export type RenderContainerReturn = (tokens: Token[], index: number, options: MarkdownIt.Options, env: unknown, self: Renderer) => string;
 type ValidAlertLevels = ('warning' | 'danger' | 'success' | 'info')
 export const validAlertLevels: ValidAlertLevels[] = ['success', 'danger', 'info', 'warning']
 

src/components/markdown-renderer/markdown-it-plugins/spoiler-container.ts

@@ -0,0 +1,36 @@
+/*
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import MarkdownIt from 'markdown-it'
+import { escapeHtml } from 'markdown-it/lib/common/utils'
+import markdownItContainer from 'markdown-it-container'
+import Token from 'markdown-it/lib/token'
+import { MarkdownItPlugin } from '../replace-components/ComponentReplacer'
+import { RenderContainerReturn } from './alert-container'
+
+export const spoilerRegEx = /^spoiler\s+(.*)$/;
+
+const createSpoilerContainer = (): RenderContainerReturn => {
+  return (tokens: Token[], index: number) => {
+    const matches = spoilerRegEx.exec(tokens[index].info.trim())
+
+    if (tokens[index].nesting === 1 && matches && matches[1]) {
+      // opening tag
+      return `<details><summary>${escapeHtml(matches[1])}</summary>`
+
+    } else {
+      // closing tag
+      return '</details>\n'
+    }
+  }
+}
+
+export const spoilerContainer: MarkdownItPlugin = (markdownIt: MarkdownIt) => {
+  markdownItContainer(markdownIt, 'spoiler', {
+    validate: (params: string) => spoilerRegEx.test(params),
+    render: createSpoilerContainer()
+  })
+}