chore: upgrade marked from 12.0.2 to 13.0.2 (#2467)

Author: Koooooo-7

package-lock.json

@@ -69,7 +69,7 @@
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "lint-staged": "^15.2.2",
-    "marked": "^12.0.2",
+    "marked": "^13.0.2",
     "npm-run-all": "^4.1.5",
     "postcss-cli": "^11.0.0",
     "postcss-import": "^16.1.0",

package.json

@@ -205,13 +205,14 @@ export class Compiler {
     /**
      * Render anchor tag
      * @link https://github.com/markedjs/marked#overriding-renderer-methods
-     * @param {String} text Text content
-     * @param {Number} level Type of heading (h<level> tag)
+     * @param {String} tokens the content tokens
+     * @param {Number} depth Type of heading (h<level> tag)
      * @returns {String} Heading element
      */
-    origin.heading = renderer.heading = function (text, level) {
+    origin.heading = renderer.heading = function ({ tokens, depth }) {
+      const text = this.parser.parseInline(tokens);
       let { str, config } = getAndRemoveConfig(text);
-      const nextToc = { level, title: str };
+      const nextToc = { depth, title: str };
 
       const { content, ignoreAllSubs, ignoreSubHeading } =
         getAndRemoveDocsifyIgnoreConfig(str);
@@ -229,7 +230,7 @@ export class Compiler {
       // elements after navigation. This is preferred over focusing on the link
       // within the heading because it matches the focus behavior of screen
       // readers when navigating page content.
-      return `<h${level} id="${slug}" tabindex="-1"><a href="${url}" data-id="${slug}" class="anchor"><span>${str}</span></a></h${level}>`;
+      return `<h${depth} id="${slug}" tabindex="-1"><a href="${url}" data-id="${slug}" class="anchor"><span>${str}</span></a></h${depth}>`;
     };
 
     origin.code = highlightCodeCompiler({ renderer });

src/core/render/compiler.js

@@ -3,13 +3,13 @@ import Prism from 'prismjs';
 import 'prismjs/components/prism-markup-templating.js';
 
 export const highlightCodeCompiler = ({ renderer }) =>
-  (renderer.code = function (code, lang = 'markup') {
+  (renderer.code = function ({ text, lang = 'markup' }) {
     const langOrMarkup = Prism.languages[lang] || Prism.languages.markup;
-    const text = Prism.highlight(
-      code.replace(/@DOCSIFY_QM@/g, '`'),
+    const code = Prism.highlight(
+      text.replace(/@DOCSIFY_QM@/g, '`'),
       langOrMarkup,
       lang,
     );
 
-    return /* html */ `<pre data-lang="${lang}" class="language-${lang}"><code class="lang-${lang} language-${lang}" tabindex="0">${text}</code></pre>`;
+    return /* html */ `<pre data-lang="${lang}" class="language-${lang}"><code class="lang-${lang} language-${lang}" tabindex="0">${code}</code></pre>`;
   });

src/core/render/compiler/code.js

@@ -2,7 +2,7 @@ import { getAndRemoveConfig } from '../utils.js';
 import { isAbsolutePath, getPath, getParentPath } from '../../router/util.js';
 
 export const imageCompiler = ({ renderer, contentBase, router }) =>
-  (renderer.image = (href, title, text) => {
+  (renderer.image = ({ href, title, text }) => {
     let url = href;
     const attrs = [];
 

src/core/render/compiler/image.js

@@ -8,8 +8,9 @@ export const linkCompiler = ({
   linkRel,
   compilerClass,
 }) =>
-  (renderer.link = (href, title = '', text) => {
+  (renderer.link = function ({ href, title = '', tokens }) {
     const attrs = [];
+    const text = this.parser.parseInline(tokens) || '';
     const { str, config } = getAndRemoveConfig(title);
     linkTarget = config.target || linkTarget;
     linkRel =

src/core/render/compiler/link.js

@@ -1,7 +1,8 @@
 import { helper as helperTpl } from '../tpl.js';
 
 export const paragraphCompiler = ({ renderer }) =>
-  (renderer.paragraph = text => {
+  (renderer.paragraph = function ({ tokens }) {
+    const text = this.parser.parseInline(tokens);
     let result;
 
     if (text.startsWith('!>')) {

src/core/render/compiler/paragraph.js

@@ -1,5 +1,14 @@
 export const taskListCompiler = ({ renderer }) =>
-  (renderer.list = (body, ordered, start) => {
+  (renderer.list = function (token) {
+    const ordered = token.ordered;
+    const start = token.start;
+
+    let body = '';
+    for (let j = 0; j < token.items.length; j++) {
+      const item = token.items[j];
+      body += this.listitem?.(item);
+    }
+
     const isTaskList = /<li class="task-list-item">/.test(
       body.split('class="task-list"')[0],
     );

src/core/render/compiler/taskList.js

@@ -1,5 +1,33 @@
 export const taskListItemCompiler = ({ renderer }) =>
-  (renderer.listitem = text => {
+  (renderer.listitem = function (item) {
+    let text = '';
+    if (item.task) {
+      const checkbox = this.checkbox?.({ checked: !!item.checked });
+      if (item.loose) {
+        if (item.tokens.length > 0 && item.tokens[0].type === 'paragraph') {
+          item.tokens[0].text = checkbox + ' ' + item.tokens[0].text;
+          if (
+            item.tokens[0].tokens &&
+            item.tokens[0].tokens.length > 0 &&
+            item.tokens[0].tokens[0].type === 'text'
+          ) {
+            item.tokens[0].tokens[0].text =
+              checkbox + ' ' + item.tokens[0].tokens[0].text;
+          }
+        } else {
+          item.tokens.unshift({
+            type: 'text',
+            raw: checkbox + ' ',
+            text: checkbox + ' ',
+          });
+        }
+      } else {
+        text += checkbox + ' ';
+      }
+    }
+
+    text += this.parser?.parse(item.tokens, !!item.loose);
+
     const isTaskItem = /^(<input.*type="checkbox"[^>]*>)/.test(text);
     const html = isTaskItem
       ? /* html */ `<li class="task-list-item"><label>${text}</label></li>`