revert patching and adopt the code from https://github.com/montogeek/remark-refractor

Author: TusharThakur04

package.json

@@ -136,16 +136,17 @@
     "postcss": "^8.5.8",
     "postcss-loader": "^8.2.0",
     "prettier": "^3.8.1",
+    "prismjs": "^1.30.0",
     "react-refresh": "^0.18.0",
     "redirect-webpack-plugin": "^1.0.0",
+    "refractor": "^5.0.0",
     "remark": "^15.0.1",
     "remark-autolink-headings": "7.0.1",
     "remark-emoji": "^5.0.2",
     "remark-extract-anchors": "1.1.1",
     "remark-frontmatter": "^5.0.0",
     "remark-gfm": "^4.0.1",
     "remark-html": "^16.0.1",
-    "remark-refractor": "^1.0.0",
     "rimraf": "^6.1.2",
     "sass": "^1.97.3",
     "sass-loader": "^16.0.6",

src/remark-plugins/remark-refractor/index.mjs

@@ -0,0 +1,87 @@
+// inspired by https://github.com/montogeek/remark-refractor
+/* eslint-disable import/no-unresolved */
+import bash from "refractor/bash";
+import coffeescript from "refractor/coffeescript";
+import { refractor } from "refractor/core";
+import diff from "refractor/diff";
+import json from "refractor/json";
+import jsx from "refractor/jsx";
+import less from "refractor/less";
+import markdown from "refractor/markdown";
+import nginx from "refractor/nginx";
+import ruby from "refractor/ruby";
+import scss from "refractor/scss";
+import stylus from "refractor/stylus";
+import twig from "refractor/twig";
+import typescript from "refractor/typescript";
+import yaml from "refractor/yaml";
+import { visit } from "unist-util-visit";
+import jsLinksDetails from "./js-links-details.mjs";
+
+refractor.register(bash);
+refractor.register(diff);
+refractor.register(yaml);
+refractor.register(json);
+refractor.register(typescript);
+refractor.register(nginx);
+refractor.register(ruby);
+refractor.register(scss);
+refractor.register(less);
+refractor.register(jsx);
+refractor.register(twig);
+refractor.register(markdown);
+refractor.register(coffeescript);
+refractor.register(stylus);
+refractor.register(jsLinksDetails);
+
+function attacher({ include, exclude } = {}) {
+  function visitor(node) {
+    const { lang } = node;
+    if (
+      !lang ||
+      (include && !include.includes(lang)) ||
+      (exclude && exclude.includes(lang))
+    ) {
+      return;
+    }
+    let { data } = node;
+    if (!data) {
+      node.data = data = {};
+    }
+    try {
+      data.hChildren = refractor.highlight(node.value, lang).children;
+      for (const child of data.hChildren) {
+        if (
+          child.properties &&
+          child.properties.className.includes("keyword")
+        ) {
+          if (child.children[1]) {
+            child.properties.componentname = child.children[1].value.trim();
+          }
+          if (child.children[2]) {
+            child.properties.url =
+              child.children[2].children[0].value.replaceAll('"', "");
+          }
+        }
+      }
+    } catch (err) {
+      if (refractor.registered(lang)) {
+        console.warn("Prism failed to highlight:", err);
+      }
+    }
+    data.hProperties ||= {};
+    data.hProperties.className = [
+      "hljs",
+      ...(data.hProperties.className || []),
+      `language-${lang}`,
+    ];
+  }
+
+  function transformer(tree) {
+    visit(tree, "code", visitor);
+  }
+
+  return transformer;
+}
+
+export default attacher;

src/remark-plugins/remark-refractor/js-links-details.mjs

@@ -0,0 +1,30 @@
+// inspired by https://github.com/montogeek/remark-refractor
+function jsLinksDetails(Prism) {
+  Prism.languages["js-with-links"] = Prism.languages.extend("javascript");
+  Prism.languages["js-with-links-details"] = Prism.languages.extend(
+    "javascript",
+    {
+      keyword: {
+        // pattern: /<[a-z]+>(.|\n)*?<\/[a-z]+>/gi, // <mode>
+        // pattern: /<[a-z]+ url=\"([^\"]+)\">(.|\n)*?<\/[a-z]+>/gi, <mode url="">
+        // pattern: /<([a-z]+ \"([^\"]+)\")>(.|\n)*?<\/[a-z]+>/gi, // <mode "url">
+        pattern: /<([a-z]+) "([^"]+)">(.|\n?)*<\/\1>/gi, // <mode "url"> with backreference
+        greedy: true,
+        inside: {
+          tag: {
+            pattern: /(<default>|<\/default>)/,
+            greedy: true,
+            inside: {
+              rest: Prism.languages.js,
+            },
+          },
+          rest: Prism.languages.js,
+        },
+      },
+    },
+  );
+}
+jsLinksDetails.displayName = "jslinks";
+jsLinksDetails.aliases = ["js-with-links", "js-with-links-details"];
+
+export default jsLinksDetails;

webpack.common.mjs

@@ -2,16 +2,16 @@ import { createRequire } from "node:module";
 import path from "node:path";
 import { fileURLToPath } from "node:url";
 // eslint-disable-next-line import/no-extraneous-dependencies
-import hastscript from "hastscript";
+import { h as hastscript } from "hastscript";
 import MiniCssExtractPlugin from "mini-css-extract-plugin";
 import autolink from "remark-autolink-headings";
 import remarkEmoji from "remark-emoji";
 import frontmatter from "remark-frontmatter";
 import gfm from "remark-gfm";
-import refractor from "remark-refractor";
 import webpack from "webpack";
 import cleanup from "./src/remark-plugins/remark-cleanup-readme/index.mjs";
 import aside from "./src/remark-plugins/remark-custom-asides/index.mjs";
+import refractor from "./src/remark-plugins/remark-refractor/index.mjs";
 import remarkRemoveDuplicateH1 from "./src/remark-plugins/remark-remove-duplicate-h1/index.mjs";
 import remarkRemoveHeadingId from "./src/remark-plugins/remark-remove-heading-id/index.mjs";
 import remarkResponsiveTable from "./src/remark-plugins/remark-responsive-table/remark-responsive-table.mjs";