Merge pull request #52 from ONSdigital/feature-update-markdown-proces…

…sor-to-allow-captions

Feature update markdown processor to allow captions

src/processors/markdown.js

@@ -1,6 +1,6 @@
 import { marked } from "marked";
 import { gfmHeadingId } from "marked-gfm-heading-id";
-
+import markedExtension from "./marked-extension.js";
 import StaticProcessor from "./processor.js";
 
 const defaultOptions = {
@@ -15,6 +15,7 @@ const defaultOptions = {
 };
 
 marked.use(gfmHeadingId(false));
+marked.use(markedExtension());
 export default class MarkdownStaticProcessor extends StaticProcessor {
   constructor(options) {
     super();

src/processors/marked-extension.js

@@ -0,0 +1,28 @@
+// This code defines a custom renderer that extends marked.js and overrides the table rendering method to include a <caption>. 
+// You can learn more about custom renderer here at https://marked.js.org/using_pro#renderer
+export default function markedExtension() {
+  // Declare the heading text so it can be used globally
+  let headingText;
+  return {
+    renderer: {
+      // Custom renderer for headings
+      heading(text) {
+        // Set the heading text
+        headingText = text;
+      // Return an empty string to skip rendering the heading itself
+        return ''; 
+      },       
+      // Custom renderer for tables
+      table(header, body){
+        // Check if there is heading text so we can add a caption
+        const caption = headingText ? `<caption>${headingText}</caption>` : '';
+        // Construct the table element with the optional caption
+        return `<table>
+          ${caption}
+          <thead>${header}</thead>
+          <tbody>${body}</tbody>
+        </table>`;
+      }
+    }
+  };
+}

src/rendering/filters/htmlContentFilter.js

@@ -35,8 +35,7 @@ export default function createHtmlContentFilter(data) {
     // Decorate table elements with ONS design system classes.
     [escape("<table>")]: '<div class="ons-table-scrollable__content"><table class="ons-table ons-table--scrollable">',
     [escape("</table>")]: '</table></div>',
-    [escape("<h2>")]: '<h3 class="ons-u-fs-m">',
-    [escape("</h2>")]: '</h3>',
+    [escape("<caption>")]: '<caption class="ons-table__caption ons-u-fs-m ons-u-mb-s ons-u-mt-l">',
     [escape("<thead>")]: '<thead class="ons-table__head">',
     [escape("<tbody>")]: '<tbody class="ons-table__body">',
     [escape("<tr>")]: '<tr class="ons-table__row">',