Use new marked renderer

x-govuk · Sep 7, 2024 · 5bb9edf · 5bb9edf
1 parent 255f283
commit 5bb9edf
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 33 deletions.
diff --git a/index.js b/index.js
@@ -10,39 +10,50 @@ module.exports = function (options = {}) {
   return {
     renderer: {
       // Block quotes
-      blockquote(quote) {
-        return `<blockquote class="govuk-inset-text govuk-!-margin-left-0">${quote}</blockquote>\n`
+      blockquote({ tokens }) {
+        const body = this.parser.parse(tokens)
+
+        return `<blockquote class="govuk-inset-text govuk-!-margin-left-0">${body}</blockquote>\n`
       },
 
       // Headings
-      heading(text, level, raw) {
-        const id = raw.toLowerCase().replace(/[^\w]+/g, '-')
-
-        // Make modifiers relative to the starting heading level
+      heading({ tokens, depth, raw }) {
+        const text = this.parser.parseInline(tokens)
+        const id = raw
+          .toLowerCase()
+          .replace(/[^\w\s]+/g, '') // Replace all but words and spaces
+          .trim()
+          .replace(/\s/g, '-') // Replace spaces with hyphens
+
+        // Make modifiers relative to the starting heading depth
         const modifiers = ['xl', 'l', 'm', 's']
         const headingsStartWith = modifiers.includes(options.headingsStartWith)
           ? options.headingsStartWith
           : 'l'
         const modifierStartIndex = modifiers.indexOf(headingsStartWith)
 
-        const modifier = modifiers[modifierStartIndex + level - 1] || 's'
+        const modifier = modifiers[modifierStartIndex + depth - 1] || 's'
 
-        return `<h${level} class="govuk-heading-${modifier}" id="${id}">${text}</h${level}>`
+        return `<h${depth} class="govuk-heading-${modifier}" id="${id}">${text}</h${depth}>`
       },
 
       // Paragraphs
-      paragraph(string) {
+      paragraph({ tokens }) {
+        const text = this.parser.parseInline(tokens)
+
         // Don’t place figure (or figure within an anchor) within paragraph
         const FIGURE_RE = /(<a([^>]+)>)?<figure/
-        if (FIGURE_RE.test(string)) {
-          return string
+        if (FIGURE_RE.test(text)) {
+          return text
         } else {
-          return `<p class="govuk-body">${string}</p>\n`
+          return `<p class="govuk-body">${text}</p>\n`
         }
       },
 
       // Links
-      link(href, title, text) {
+      link({ href, title, tokens }) {
+        const text = this.parser.parseInline(tokens)
+
         if (title) {
           return `<a class="govuk-link" href="${href}" title="${title}">${text}</a>`
         } else {
@@ -51,15 +62,21 @@ module.exports = function (options = {}) {
       },
 
       // Lists
-      list(body, ordered) {
+      list({ ordered, start, items }) {
+        let body = ''
+        for (const item in items) {
+          body += this.listitem(items[item])
+        }
+
         const element = ordered ? 'ol' : 'ul'
         const modifier = ordered ? 'number' : 'bullet'
+        const startAttr = ordered && start !== 1 ? ` start="${start}"` : ''
 
-        return `<${element} class="govuk-list govuk-list--${modifier}">${body}</${element}>\n`
+        return `<${element}${startAttr} class="govuk-list govuk-list--${modifier}">${body}</${element}>\n`
       },
 
       // Checkbox
-      checkbox(checked) {
+      checkbox({ checked }) {
         return `<span class="x-govuk-checkbox"><input class="x-govuk-checkbox__input" type="checkbox"${
           checked ? ' checked' : ''
         } disabled><span class="x-govuk-checkbox__pseudo"></span></span>`
@@ -71,44 +88,69 @@ module.exports = function (options = {}) {
       },
 
       // Tables
-      table(header, body) {
-        return `<table class="govuk-table">\n<thead class="govuk-table__head">\n${header}</thead>\n<tbody class="govuk-table__body">${body}</tbody>\n</table>\n`
+      table({ header, rows }) {
+        // Table head
+        let head = ''
+        let text = ''
+        for (const cell in header) {
+          text += this.tablecell(header[cell])
+        }
+        head += this.tablerow({ text })
+
+        // Table body
+        let body = ''
+        for (let row in rows) {
+          row = rows[row]
+          text = ''
+          for (const cell in row) {
+            text += this.tablecell(row[cell])
+          }
+          body += this.tablerow({ text })
+        }
+
+        if (body) {
+          body = `<tbody class="govuk-table__body">${body}</tbody>\n`
+        }
+
+        return `<table class="govuk-table">\n<thead class="govuk-table__head">\n${head}</thead>\n${body}</table>\n`
       },
 
-      tablerow(content) {
-        return `<tr class="govuk-table__row">\n${content}</tr>\n`
+      tablerow({ text }) {
+        return `<tr class="govuk-table__row">\n${text}</tr>\n`
       },
 
-      tablecell(content, { header, align }) {
+      tablecell({ tokens, header, align }) {
+        const text = this.parser.parseInline(tokens)
         const element = header ? 'th' : 'td'
         const className = header ? 'govuk-table__header' : 'govuk-table__cell'
         const alignClass = align ? ` govuk-!-text-align-${align}` : ''
-        return `<${element} class="${className}${alignClass}">${content}</${element}>\n`
+
+        return `<${element} class="${className}${alignClass}">${text}</${element}>\n`
       },
 
       // Block code
       // By not using marked’s `highlight` option, we can add a class to the container
-      code(string, language) {
+      code({ text, lang: language }) {
         highlightJs.configure({ classPrefix: 'x-govuk-code__' })
 
         if (language) {
           // Code language has been set, or can be determined
           let code
           if (highlightJs.getLanguage(language)) {
-            code = highlightJs.highlight(string, { language }).value
+            code = highlightJs.highlight(text, { language }).value
           } else {
-            code = highlightJs.highlightAuto(string).value
+            code = highlightJs.highlightAuto(text).value
           }
           return `<pre class="x-govuk-code x-govuk-code--block x-govuk-code__language--${language}" tabindex="0"><code>${code}</code></pre>\n`
         } else {
           // No language found, so render as plain text
-          return `<pre class="x-govuk-code x-govuk-code--block" tabindex="0">${string}</pre>\n`
+          return `<pre class="x-govuk-code x-govuk-code--block" tabindex="0">${text}</pre>\n`
         }
       },
 
       // Inline code
-      codespan(code) {
-        return `<code class="x-govuk-code x-govuk-code--inline">${code}</code>`
+      codespan({ text }) {
+        return `<code class="x-govuk-code x-govuk-code--inline">${text}</code>`
       }
     }
   }

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -40,7 +40,7 @@
   },
   "dependencies": {
     "highlight.js": "^11.5.0",
-    "marked": "^12.0.0"
+    "marked": "^14.0.0"
   },
   "devDependencies": {
     "eslint": "^8.55.0",