chore(markdown): migrate to mdast-util-to-hast (#9941)

* chore(markdown): migrate to mdast-util-to-hast

* fixup! chore(markdown): migrate to mdast-util-to-hast

* fixup! fixup! chore(markdown): migrate to mdast-util-to-hast

* fixup! chore(markdown): migrate to mdast-util-to-hast

* fixup! chore(markdown): migrate to mdast-util-to-hast

markdown/m2h/handlers/code.ts

@@ -1,10 +1,11 @@
+import { Handler, State } from "mdast-util-to-hast";
 import { u } from "unist-builder";
 
 /**
  * Transform a Markdown code block into a <pre>.
  * Adding the highlight tags as classes prefixed by "brush:"
  */
-export function code(h, node) {
+export function code(state: State, node: any): ReturnType<Handler> {
   const value = node.value ? node.value + "\n" : "";
   const lang = node.lang?.replace(/-nolint$/, "");
   const meta = (node.meta || "").split(" ");
@@ -26,5 +27,10 @@ export function code(h, node) {
   // }
   // return h(node.position, "pre", props, [code]);
 
-  return h(node.position, "pre", props, [u("text", value)]);
+  return {
+    type: "element",
+    tagName: "pre",
+    properties: props,
+    children: [u("text", value)],
+  };
 }

markdown/m2h/handlers/dl.ts

@@ -1,5 +1,4 @@
-import { all, wrap } from "./mdast-util-to-hast-utils.js";
-
+import { Handler } from "mdast-util-to-hast";
 export const DEFINITION_PREFIX = ": ";
 
 export function isDefinitionList(node) {
@@ -28,7 +27,7 @@ export function isDefinitionList(node) {
   );
 }
 
-export function asDefinitionList(h, node) {
+export function asDefinitionList(state, node): ReturnType<Handler> {
   const children = node.children.flatMap((listItem) => {
     const terms = listItem.children.slice(0, -1);
     const definition =
@@ -39,25 +38,31 @@ export function asDefinitionList(h, node) {
     );
 
     return [
-      h(
-        node,
-        "dt",
-        {},
-        all(h, {
+      {
+        type: "element",
+        tagName: "dt",
+        properties: {},
+        children: state.all({
           ...node,
           children:
             terms.length == 1 && terms[0].type == "paragraph"
               ? terms[0].children
               : terms,
-        })
-      ),
-      h(
-        node,
-        "dd",
-        {},
-        all(h, { ...definition, children: [paragraph, ...rest] })
-      ),
+        }),
+      },
+      {
+        type: "element",
+        tagName: "dd",
+        properties: {},
+        children: state.all({ ...definition, children: [paragraph, ...rest] }),
+      },
     ];
   });
-  return h(node, "dl", {}, wrap(children, true));
+
+  return {
+    type: "element",
+    tagName: "dl",
+    properties: {},
+    children: state.wrap(children, true),
+  };
 }

markdown/m2h/handlers/index.ts

@@ -3,7 +3,7 @@ import fs from "node:fs";
 import { DEFAULT_LOCALE } from "../../../libs/constants/index.js";
 import { code } from "./code.js";
 import { asDefinitionList, isDefinitionList } from "./dl.js";
-import { one, all, wrap } from "./mdast-util-to-hast-utils.js";
+import { Handler, Handlers, State } from "mdast-util-to-hast";
 
 /* A utilitary function which parses a JSON gettext file
   to return a Map with each localized string and its matching ID  */
@@ -58,12 +58,12 @@ function getNotecardType(node, locale) {
   return type == "warning" || type == "note" || type == "callout" ? type : null;
 }
 
-export function buildLocalizedHandlers(locale: string) {
+export function buildLocalizedHandlers(locale: string): Handlers {
   /* This is only used for the Notecard parsing where the "magit" word depends on the locale */
   return {
     code,
 
-    paragraph(h, node) {
+    paragraph(state: State, node: any): ReturnType<Handler> {
       const [child] = node.children;
       // Check for an unnecessarily nested KS-tag and unnest it
       if (
@@ -72,13 +72,18 @@ export function buildLocalizedHandlers(locale: string) {
         child.value.startsWith("{{") &&
         child.value.endsWith("}}")
       ) {
-        return one(h, child, node);
+        return state.one(child, node);
       }
 
-      return h(node, "p", all(h, node));
+      return {
+        type: "element",
+        tagName: "p",
+        properties: {},
+        children: state.all(node),
+      };
     },
 
-    blockquote(h, node) {
+    blockquote(state: State, node: any): ReturnType<Handler> {
       const type = getNotecardType(node, locale);
       if (type) {
         const isCallout = type == "callout";
@@ -89,19 +94,24 @@ export function buildLocalizedHandlers(locale: string) {
             node.children[0].children.splice(0, 1);
           }
         }
-        return h(
-          node,
-          "div",
-          { className: isCallout ? [type] : ["notecard", type] },
-          wrap(all(h, node), true)
-        );
+        return {
+          type: "element",
+          tagName: "div",
+          properties: { className: isCallout ? [type] : ["notecard", type] },
+          children: state.wrap(state.all(node), true),
+        };
       }
-      return h(node, "blockquote", wrap(all(h, node), true));
+      return {
+        type: "element",
+        tagName: "blockquote",
+        properties: {},
+        children: state.wrap(state.all(node), true),
+      };
     },
 
-    list(h, node) {
+    list(state: State, node: any): ReturnType<Handler> {
       if (isDefinitionList(node)) {
-        return asDefinitionList(h, node);
+        return asDefinitionList(state, node);
       }
 
       const name = node.ordered ? "ol" : "ul";
@@ -112,14 +122,24 @@ export function buildLocalizedHandlers(locale: string) {
       }
 
       // This removes directly descendent paragraphs
-      const items = all(h, node).map((item) => ({
+      const items = state.all(node).map((item) => ({
         ...item,
-        children: item.children.flatMap((child) =>
-          child.tagName == "p" ? child.children : [child]
-        ),
+        children:
+          "children" in item
+            ? item.children.flatMap((child) =>
+                "tagName" in child && child.tagName == "p"
+                  ? child.children
+                  : [child]
+              )
+            : [],
       }));
 
-      return h(node, name, props, wrap(items, true));
+      return {
+        type: "element",
+        tagName: name,
+        properties: props,
+        children: state.wrap(items, true),
+      };
     },
   };
 }

markdown/m2h/index.ts

@@ -1,6 +1,6 @@
 import { unified } from "unified";
 import parse from "remark-parse";
-import remark2rehype from "remark-rehype";
+import remarkRehype from "remark-rehype";
 import stringify from "rehype-stringify";
 import gfm from "remark-gfm";
 import raw from "rehype-raw";
@@ -18,7 +18,8 @@ function makeProcessor(options: ProcessorOptions) {
   const processor = unified()
     .use(parse)
     .use(gfm)
-    .use(remark2rehype, {
+    // @ts-expect-error Need to investigate why types don't seem to match.
+    .use(remarkRehype, {
       handlers: localizedHandlers,
       allowDangerousHtml: true,
     })

package.json

@@ -206,6 +206,7 @@
     "jest-watch-typeahead": "^2.2.2",
     "jsdom": "^22.1.0",
     "lint-staged": "^13.2.3",
+    "mdast-util-to-hast": "^13.0.2",
     "mini-css-extract-plugin": "^2.7.6",
     "node-dev": "^8.0.0",
     "peggy": "^3.0.2",

yarn.lock

@@ -10317,7 +10317,7 @@ mdast-util-to-hast@^12.1.0:
     unist-util-position "^4.0.0"
     unist-util-visit "^4.0.0"
 
-mdast-util-to-hast@^13.0.0:
+mdast-util-to-hast@^13.0.0, mdast-util-to-hast@^13.0.2:
   version "13.0.2"
   resolved "https://registry.yarnpkg.com/mdast-util-to-hast/-/mdast-util-to-hast-13.0.2.tgz#74c0a9f014bb2340cae6118f6fccd75467792be7"
   integrity sha512-U5I+500EOOw9e3ZrclN3Is3fRpw8c19SMyNZlZ2IS+7vLsNzb2Om11VpIVOR+/0137GhZsFEF6YiKD5+0Hr2Og==