From fe4bd5585dacc3bedecd5db2ab1740ea6dd4b77e Mon Sep 17 00:00:00 2001
From: Eric <airkro@qq.com>
Date: Tue, 14 Nov 2023 19:06:16 +0800
Subject: [PATCH] feat: svgToObject

---
 README.md             |  2 +-
 lib/index.mjs         |  2 +
 lib/svg-to-object.mjs | 90 +++++++++++++++++++++++++++++++++++++++++++
 package.json          |  2 +-
 4 files changed, 94 insertions(+), 2 deletions(-)
 create mode 100644 lib/svg-to-object.mjs

diff --git a/README.md b/README.md
index 5ed62d9..ae29a2f 100644
--- a/README.md
+++ b/README.md
@@ -110,7 +110,7 @@ import TabItem from '@theme/TabItem';
 
 ## Tips
 
-This plugin only compatible with `remark@^12` / `remark-mdx@1` or `docusaurus@2`.
+This plugin only compatible with `docusaurus@2/remark@^12/mdx@1` and `docusaurus@3/remark@^13+/mdx@3+`.
 
 ## Related
 
diff --git a/lib/index.mjs b/lib/index.mjs
index 66b8c2f..1053314 100644
--- a/lib/index.mjs
+++ b/lib/index.mjs
@@ -3,3 +3,5 @@ export { autoTabs } from './auto-tabs.mjs';
 export { docCardList } from './doc-card-list.mjs';
 
 export { draftSAdmonition } from './draft-admonition.mjs';
+
+export { svgToObject } from './svg-to-object.mjs';
diff --git a/lib/svg-to-object.mjs b/lib/svg-to-object.mjs
new file mode 100644
index 0000000..38471a2
--- /dev/null
+++ b/lib/svg-to-object.mjs
@@ -0,0 +1,90 @@
+import { strict as assert } from 'node:assert';
+
+import { visit } from 'unist-util-visit';
+
+function isV2Target({ type, value = '' }) {
+  return (
+    type === 'jsx' &&
+    value.startsWith('<img ') &&
+    value.includes('src={') &&
+    value.includes('.svg").default}')
+  );
+}
+
+function isV3Target({ type, name, attributes = [] }) {
+  return (
+    type === 'mdxJsxTextElement' &&
+    name === 'img' &&
+    attributes.some(
+      (attr) =>
+        attr.type === 'mdxJsxAttribute' &&
+        attr.name === 'src' &&
+        attr.value?.value &&
+        attr.value.value.includes('.svg").default'),
+    )
+  );
+}
+
+export function svgToObject({ version = 2 } = {}) {
+  assert([2, 3].includes(version), new TypeError('`version` should be 2 or 3'));
+
+  if (version === 2) {
+    return (tree) => {
+      /* eslint-disable no-param-reassign */
+      visit(tree, isV2Target, (node) => {
+        const { value } = node;
+
+        const src = value.match(/src={(.+)}/);
+
+        const alt = value.match(/alt={(.+)}/) || [0, '""'];
+
+        if (src) {
+          node.value = `
+<object
+  className="svg-object"
+  data={${src[1]}}
+  type="image/svg+xml"
+  title={${alt[1]}}
+/>
+`;
+        }
+      });
+    };
+  }
+
+  return (tree) => {
+    /* eslint-disable no-param-reassign */
+    visit(tree, isV3Target, (node) => {
+      console.log(node);
+
+      node.type = 'mdxJsxFlowElement';
+      node.name = 'object';
+      node.attributes = [
+        {
+          type: 'mdxJsxAttribute',
+          name: 'className',
+          value: 'svg-object',
+        },
+        {
+          type: 'mdxJsxAttribute',
+          name: 'type',
+          value: 'image/svg+xml',
+        },
+        {
+          type: 'mdxJsxAttribute',
+          name: 'data',
+          value: node.attributes.find(
+            ({ name, type }) => type === 'mdxJsxAttribute' && name === 'src',
+          ).value,
+        },
+        {
+          type: 'mdxJsxAttribute',
+          name: 'title',
+          value: node.attributes.find(
+            ({ name, type }) => type === 'mdxJsxAttribute' && name === 'alt',
+          )?.value,
+        },
+      ].filter((item) => item.value);
+    });
+  };
+}
diff --git a/package.json b/package.json
index 6cf9e65..ebdd344 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "remark-docusaurus",
-  "version": "0.3.11",
+  "version": "0.3.12",
   "description": "Remark plugin for docusaurus features",
   "license": "MIT",
   "author": {