Support rendering of <details> blocks

Signed-off-by: Michael Haeuslmann <michael.haeuslmann@gmail.com>

Author: mihaeu

CHANGELOG.md

@@ -6,6 +6,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.14.0] - 2021-03-05
+### Added
+- Support for rendering `<details>` blocks [as Confluence expand macros](https://confluence.atlassian.com/doc/expand-macro-223222352.html)
+
+## [0.13.3] - 2021-02-10
 ## [0.13.2] - 2021-02-10
 ### Fixed
 - Upgrade dependencies in order to fix vulnerabilities
@@ -71,7 +76,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 - Add backward compatibility for node 8 (`fs.mkdir`)
 
-[Unreleased]: https://github.com/mihaeu/cosmere/compare/0.13.1...HEAD
+[Unreleased]: https://github.com/mihaeu/cosmere/compare/0.14.0...HEAD
+[0.14.0]: https://github.com/mihaeu/cosmere/compare/0.13.3...0.14.0
+[0.13.3]: https://github.com/mihaeu/cosmere/compare/0.13.2...0.13.3
+[0.13.2]: https://github.com/mihaeu/cosmere/compare/0.13.1...0.13.2
 [0.13.1]: https://github.com/mihaeu/cosmere/compare/0.13.0...0.13.1
 [0.13.0]: https://github.com/mihaeu/cosmere/compare/0.12.3...0.13.0
 [0.12.3]: https://github.com/mihaeu/cosmere/compare/0.12.2...0.12.3

src/ConfluenceRenderer.ts

@@ -1,4 +1,4 @@
-import { Renderer } from "marked";
+import marked, { Renderer } from "marked";
 
 export default class ConfluenceRenderer extends Renderer {
     private readonly langMap = [
@@ -32,6 +32,35 @@ export default class ConfluenceRenderer extends Renderer {
         "html/xml",
     ];
 
+    private static hasDetailsBlock(html: string): boolean {
+        return !!html.match(/<details>([\s\S]*)<\/details>/);
+    }
+
+    private static renderDetailsBlock(html: string): string {
+        const summary = html.match(/<summary>([\s\S]*)<\/summary>/)?.[1] ?? 'Click here to expand ...'
+        const contentWithoutSummaryTags = html
+            .replace(/<summary>([\s\S]*)<\/summary>/, '')
+            .replace(/<\/?details>/g, '');
+        const content =
+            marked(
+                contentWithoutSummaryTags, {
+                    renderer: new ConfluenceRenderer(),
+                    xhtml: true,
+                });
+
+        return '<ac:structured-macro ac:name="expand">'
+            + '<ac:parameter ac:name="title">' + summary + '</ac:parameter>'
+            + '<ac:rich-text-body>' + content + '</ac:rich-text-body>'
+            + '</ac:structured-macro>';
+    }
+
+    html(html: string): string {
+        if (ConfluenceRenderer.hasDetailsBlock(html)) {
+            return ConfluenceRenderer.renderDetailsBlock(html);
+        }
+        return super.html(html);
+    }
+
     image(href: string, title: string, text: string) {
         if (href.startsWith("http")) {
             return `<ac:image><ri:url ri:value="${href}" /></ac:image>`;

tests/ConfluenceRenderer.test.ts

@@ -36,4 +36,56 @@ describe("ConfluenceRenderer", () => {
         + '</ac:structured-macro>'
         + "\n");
   });
+
+  it("converts <details> tags to Confluence expand macro", () => {
+    const input = `<details>
+        <summary>Short Summary</summary>
+        More elaborate text ` + '`with other things like monospace`' + `
+      </details>`;
+    expect(new ConfluenceRenderer().html(input))
+        .toBe('<ac:structured-macro ac:name="expand">'
+              + '<ac:parameter ac:name="title">'
+               + 'Short Summary'
+              + '</ac:parameter>'
+              + '<ac:rich-text-body>'
+                + '<ac:structured-macro ac:name="code" ac:schema-version="1">'
+                + '<ac:parameter ac:name="&quot;language">'
+                + 'none'
+                + '</ac:parameter>'
+                + '<ac:parameter ac:name="theme">'
+                + 'RDark'
+                + '</ac:parameter>'
+                + '<ac:parameter ac:name="borderStyle">'
+                + 'solid'
+                + '</ac:parameter>'
+                + '<ac:parameter ac:name="linenumbers">'
+                + 'true'
+                + '</ac:parameter>'
+                + '<ac:parameter ac:name="collapse">'
+                + 'false'
+                + '</ac:parameter>'
+                + '<ac:plain-text-body>'
+                + '<![CDATA[    More elaborate text `with other things like monospace`]]>'
+              + '</ac:plain-text-body>'
+              + '</ac:structured-macro>'
+              + "\n"
+              + '</ac:rich-text-body>'
+            + '</ac:structured-macro>');
+  })
+
+  it("converts <details> tags without summary to Confluence expand macro", () => {
+    const input = `<details>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aliquam beatae culpa debitis deserunt dolor ea, exercitationem ipsa, magni maxime molestias nemo nostrum possimus quibusdam quo repudiandae sint veritatis voluptatibus.</details>`;
+    expect(new ConfluenceRenderer().html(input))
+        .toBe('<ac:structured-macro ac:name="expand">'
+            + '<ac:parameter ac:name="title">'
+              + 'Click here to expand ...'
+            + '</ac:parameter>'
+            + '<ac:rich-text-body>'
+              + '<p>'
+                + 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aliquam beatae culpa debitis deserunt dolor ea, exercitationem ipsa, magni maxime molestias nemo nostrum possimus quibusdam quo repudiandae sint veritatis voluptatibus.'
+              + '</p>'
+              + "\n"
+            + '</ac:rich-text-body>'
+            + '</ac:structured-macro>');
+  })
 });