feat: support local images

close #36

Author: gera2ld

src/extension.ts

@@ -18,11 +18,12 @@ import {
 import { Utils } from 'vscode-uri';
 import {
   getAssets,
+  getLocalTransformer,
   mergeAssets,
   setExportMode,
   transformerExport,
-  transformerLocal,
 } from './util';
+import localImage from './plugins/local-image';
 
 const PREFIX = 'markmap-vscode';
 const VIEW_TYPE = `${PREFIX}.markmap`;
@@ -60,6 +61,9 @@ class MarkmapEditor implements CustomTextEditorProvider {
       webviewPanel.webview
         .asWebviewUri(this.resolveAssetPath(relPath))
         .toString();
+    const transformerLocal = getLocalTransformer([
+      localImage(relPath => webviewPanel.webview.asWebviewUri(Utils.joinPath(Utils.dirname(document.uri), relPath)).toString())
+    ]);
     const { allAssets } = getAssets(transformerLocal);
     const resolvedAssets = {
       ...allAssets,

src/plugins/local-image.ts

@@ -0,0 +1,28 @@
+import { wrapFunction } from 'markmap-common';
+import { ITransformHooks } from 'markmap-lib';
+import { definePlugin } from 'markmap-lib/plugins';
+
+const name = 'localImage';
+
+export default function plugin(resolveUrl: (url: string) => string) {
+  return definePlugin({
+    name,
+    transform(transformHooks: ITransformHooks) {
+      transformHooks.parser.tap((md) => {
+        md.renderer.renderAttrs = wrapFunction(
+          md.renderer.renderAttrs,
+          (renderAttrs, token) => {
+            if (token.tag === 'img') {
+              const src = token.attrGet('src');
+              if (src && !src.includes('://')) {
+                token.attrSet('src', resolveUrl(src));
+              }
+            }
+            return renderAttrs(token);
+          },
+        );
+      });
+      return {};
+    },
+  });
+}

src/util.ts

@@ -1,5 +1,5 @@
 import { buildCSSItem, buildJSItem } from 'markmap-common';
-import { IAssets, Transformer } from 'markmap-lib';
+import { builtInPlugins, IAssets, ITransformPlugin, Transformer } from 'markmap-lib';
 import { baseJsPaths } from 'markmap-render';
 
 const TOOLBAR_VERSION = process.env.TOOLBAR_VERSION;
@@ -23,9 +23,12 @@ export function mergeAssets(...args: IAssets[]): IAssets {
 
 const local = 'local';
 
-export const transformerLocal = new Transformer();
-transformerLocal.urlBuilder.setProvider(local, localProvider);
-transformerLocal.urlBuilder.provider = local;
+export function getLocalTransformer(plugins: ITransformPlugin[] = []) {
+  const transformerLocal = new Transformer([...builtInPlugins, ...plugins]);
+  transformerLocal.urlBuilder.setProvider(local, localProvider);
+  transformerLocal.urlBuilder.provider = local;
+  return transformerLocal;
+}
 
 export const transformerExport = new Transformer();
 let bestProvider = transformerExport.urlBuilder.provider;