Merge pull request #15 from guicassolato/fix/local-images

fix: relative paths in image src

samples/tothom.md

@@ -1,27 +1,39 @@
 # Tothom
 
-- [Hello World!](#hello-world)
-- [Interpolation](#interpolation)
-- [Multiline](#multiline)
+- [Code blocks](#code-blocks)
+  - [Executable](#executable)
+  - [Interpolation](#interpolation)
+  - [Multiline](#multiline)
+  - [Non-executable](#non-executable)
 - [Compatibility](#compatibility)
-  - [Unordered Lists](#unordered-lists)
-  - [Ordered Lists](#ordered-lists)
-  - [Task lists](#task-lists)
+  - [Formatting](#formatting)
+  - [Lists](#lists)
+    - [Ordered lists](#ordered-lists)
+    - [Bullet lists](#bullet-lists)
+    - [Nested lists](#nested-lists)
+    - [Task lists](#task-lists)
   - [Links](#links)
+  - [Tables](#tables)
+  - [Images](#images)
+  - [Other](#other)
+    - [Blockquote](#blockquote)
+    - [Horizontal line](#horizontal-line)
 
-## Hello World!
+## Code blocks
+
+### Executable
 
 ```sh
 echo 'Hello World!'
 ```
 
-## Interpolation
+### Interpolation
 
 ```sh
 echo "Current directory is $PWD"
 ```
 
-## Multiline
+### Multiline
 
 ```sh
 cat <<EOF
@@ -31,26 +43,85 @@ code block
 EOF
 ```
 
+### Non-executable
+
+```yaml
+obj:
+  arr:
+    - item 1
+    - item 2
+  str: value
+  num: 1
+  bool: true
+```
+
 ## Compatibility
 
-### Unordered Lists
+### Formatting
 
-- Item 1
-- Item 2
-- Item 3
+**Bold**, _italic_, _**both**_, ~~strikethrough~~, <sub>subscript</sub>, <sup>superscript</sup>, <key>⌘</key>.
 
-### Ordered Lists
+### Lists
+
+#### Ordered lists
 
 1. Item 1
 2. Item 2
 3. Item 3
 
-### Task lists
+1) Item 1
+2) Item 2
+3) Item 3
+
+#### Bullet lists
+
+* Item 1
+* Item 2
+* Item 3
+
+- Item 1
+- Item 2
+- Item 3
+
+#### Nested lists
+
+1. First list item
+   - First nested list item
+     - Second nested list item
+
+#### Task lists
 
 - [x] Item 1
-- [ ] Item 2
+- [x] Item 2
 - [ ] Item 3
 
 ### Links
 
-External [link](https://marketplace.visualstudio.com/items?itemName=guicassolato.tothom).
+- External [link](https://marketplace.visualstudio.com/items?itemName=guicassolato.tothom).
+- Linkified URL: https://github.com/guicassolato/tothom.
+- Local [link](./hello-world.md).
+- Indirect [link][1].
+
+[1]: https://github.com/guicassolato/tothom
+
+### Tables
+
+| Left   | Center | Right  |
+| ------ | :----: | -----: |
+| Cell 1 | Cell 2 | Cell 3 |
+
+### Images
+
+![Tothom](../resources/tothom.png)
+
+### Other
+
+#### Blockquote
+
+> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+#### Horizontal line
+
+---
+
+***

src/tothom.ts

@@ -31,12 +31,17 @@ export class Tothom {
     if (!panel) {
       const title = `Preview: ${utils.resourceName(resource)}`;
 
+      var localResourceRoots = [this._extensionUri];
+      if (vscode.workspace.workspaceFolders && vscode.workspace.workspaceFolders[0]) {
+        localResourceRoots.push(vscode.workspace.workspaceFolders[0].uri);
+      }
+
       panel = vscode.window.createWebviewPanel(WEBVIEW_PANEL_TYPE, title, vscode.ViewColumn.Active, {
         enableScripts: true,
         enableFindWidget: true,
         retainContextWhenHidden: true,
         localResourceRoots: [
-          this._extensionUri
+          this._extensionUri,
         ]
       });
       panel.onDidDispose(() => this._views.delete(resource));
@@ -79,9 +84,20 @@ export class Tothom {
     return webview.asWebviewUri(vscode.Uri.joinPath(this._extensionUri, 'media', filePath));
   };
 
+  private sanitizeHtmlLocalPaths = (webview: vscode.Webview, uri: vscode.Uri, htmlContent: string): string => {
+    const uriBasePath = vscode.Uri.file(utils.resourceDir(uri)).path;
+    return htmlContent.replace(/<img(.+)src="([^"]+)"/g, (_: string, attrs: string, src: string): string => {
+      const newSrc = src.startsWith('.') ? webview.asWebviewUri(vscode.Uri.file(uriBasePath + '/' + src)) : src;
+      return `<img${attrs}src="${newSrc}"`;
+    });
+  };
+
   private renderHtmlContent = (webview: vscode.Webview, uri: vscode.Uri, htmlContent: string): string => {
     const cspSrc = webview.cspSource;
     const nonce = utils.getNonce();
+    const baseHref = utils.resourceDir(uri);
+    const baseTag = `<base href="${baseHref}${baseHref.endsWith('/') ? '' : '/'}"/>`;
+    const sanitizedHtmlContent = this.sanitizeHtmlLocalPaths(webview, uri, htmlContent);
 
     let colorScheme: string = "";
     switch (this._config.get('colorScheme')) {
@@ -106,11 +122,12 @@ export class Tothom {
       <link rel="stylesheet" href="${this.mediaFilePath(webview, 'tothom.css')}"/>
       <link rel="stylesheet" href="${this.mediaFilePath(webview, 'github-markdown.css')}"/>
       <link rel="stylesheet" href="${this.mediaFilePath(webview, 'highlight-js.css')}"/>
+      ${baseTag}
       <script defer="true" src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
     </head>
     <body class="tothom-body ${colorScheme}" data-uri="${uri}">
       <div class="tothom-content">
-        ${htmlContent}
+        ${sanitizedHtmlContent}
       </div>
       <script nonce="${nonce}" src="${this.mediaFilePath(webview, 'main.js')}"/>
     </body>

src/utils.ts

@@ -1,5 +1,5 @@
 import * as vscode from 'vscode';
-import { basename } from 'path';
+import { basename, dirname } from 'path';
 import { readFileSync } from 'fs';
 
 export const resourceFromUri = (uri: vscode.Uri): vscode.Uri => {
@@ -14,6 +14,10 @@ export const resourceName = (resource: vscode.Uri): string => {
   return basename(resource.path);
 };
 
+export const resourceDir = (resource: vscode.Uri): string => {
+  return dirname(resource.path);
+};
+
 export const readFileContent = (resource: vscode.Uri): string => {
   return readFileSync(resource.fsPath, 'utf8');
 };