I am trying to use remark-embed-images
to convert relative image path in markdown file to base64 string, but it throw image not exist and it seems searching file under c:\Users\Edward\.vscode\extensions\ms-edgedevtools.vscode-edge-devtools-2.1.1
instead of my current working directory.
Here is my testing code:
import * as vscode from 'vscode';
import {unified} from 'unified';
import remarkParse from 'remark-parse';
import remarkHtml from 'remark-html';
import remarkEmbedImages from 'remark-embed-images';
export class PreviewPanel {
public static currentPanel: PreviewPanel | undefined;
public static readonly viewType = 'preview';
private readonly panel: vscode.WebviewPanel;
private readonly extensionUri: vscode.Uri;
private disposables: vscode.Disposable[] = [];
private constructor(panel: vscode.WebviewPanel, extensionUri: vscode.Uri){
this.panel = panel;
this.extensionUri = extensionUri;
this.panel.onDidDispose(() => this.dispose(), null, this.disposables);
}
public static createOrShow(extensionUri: vscode.Uri){
const column = vscode.ViewColumn.Two;
if(!PreviewPanel.currentPanel){
const panel = vscode.window.createWebviewPanel(
PreviewPanel.viewType,
'Preview',
column || vscode.ViewColumn.Two,
{
// Enable javascript in the webview
enableScripts: true,
retainContextWhenHidden: true,
// And restrict the webview to only loading content from our extension's `media` directory.
localResourceRoots: [vscode.Uri.joinPath(extensionUri, 'assets')]
}
);
PreviewPanel.currentPanel = new PreviewPanel(panel, extensionUri);
}
else if(!PreviewPanel.currentPanel.panel.visible){
PreviewPanel.currentPanel.panel.reveal(column);
}
PreviewPanel.currentPanel.update();
}
public async update() {
const webview = this.panel.webview;
// Vary the webview's content based on where it is located in the editor.
switch (this.panel.viewColumn) {
case vscode.ViewColumn.Two:
await this.updateForPreview(webview);
return;
default:
return;
}
}
private async updateForPreview(webview: vscode.Webview) {
this.panel.webview.html = await this.getHtmlForWebview(webview);
}
private async getHtmlForWebview(webview: vscode.Webview) {
var md2Html = await this.markdownCompiler().process(vscode.window.activeTextEditor?.document.getText());
return String(md2Html);
}
private markdownCompiler(): any {
return unified()
.use(remarkParse)
.use(remarkEmbedImages)
.use(remarkHtml);
}
public dispose() {
PreviewPanel.currentPanel = undefined;
// Clean up our resources
this.panel.dispose();
while (this.disposables.length) {
const x = this.disposables.pop();
if (x) {
x.dispose();
}
}
}
}