#176 - Fix image webview paths

src/helpers/ImageHelper.ts

@@ -55,11 +55,14 @@ export class ImageHelper {
 
     const staticPath = join(parseWinPath(wsFolder?.fsPath || ""), staticFolder || "", value);
     const contentFolderPath = filePath ? join(dirname(filePath), value) : null;
+    const workspaceFolderPath = wsFolder ? join(wsFolder.fsPath, value) : null;
 
     if (existsSync(staticPath)) {
       return Uri.file(staticPath);
     } else if (contentFolderPath && existsSync(contentFolderPath)) {
       return Uri.file(contentFolderPath);
+    } else if (workspaceFolderPath && existsSync(workspaceFolderPath)) {
+      return Uri.file(workspaceFolderPath);
     }
   }
 
@@ -100,7 +103,7 @@ export class ImageHelper {
     if (parentObj) {
       for (const field of imageFields) {
         if (parentObj[field.name]) {
-          const imageData = ImageHelper.allRelToAbs(field, parentObj[field.name])
+          const imageData = ImageHelper.allRelToAbs(field, parentObj[field.name]);
   
           if (imageData) {
             if (field.multiple && imageData instanceof Array) {

src/listeners/panel/MediaListener.ts

@@ -1,6 +1,8 @@
-import { commands } from "vscode";
+import { ExplorerView } from './../../explorerView/ExplorerView';
+import { commands, window } from "vscode";
 import { Dashboard } from "../../commands/Dashboard";
 import { COMMAND_NAME } from "../../constants";
+import { ImageHelper } from "../../helpers";
 import { DashboardData } from "../../models";
 import { Command } from "../../panelWebView/Command";
 import { CommandToCode } from "../../panelWebView/CommandToCode";
@@ -20,6 +22,24 @@ export class MediaListener extends BaseListener {
       case CommandToCode.selectImage:
         this.selectMedia(msg);
         break;
+      case CommandToCode.getImageUrl:
+        this.generateUrl(msg.data);
+        break;
+    }
+  }
+
+  private static generateUrl(data: string) {
+    const filePath = window.activeTextEditor?.document.uri.fsPath;
+
+    const imgUrl = ImageHelper.relToAbs(filePath || "", data);
+    if (imgUrl) {
+      const viewUrl = ExplorerView.getInstance().getWebview()?.asWebviewUri(imgUrl);
+      if (viewUrl) {
+        this.sendMsg(Command.sendMediaUrl, {
+          original: data,
+          url: viewUrl.toString()
+        });
+      }
     }
   }
 

src/panelWebView/Command.ts

@@ -6,5 +6,6 @@ export enum Command {
   focusOnCategories = "focusOnCategories",
   closeSections = "closeSections",
   folderInfo = "folderInfo",
-  mediaSelectionData = "mediaSelectionData"
+  mediaSelectionData = "mediaSelectionData",
+  sendMediaUrl = "sendMediaUrl",
 }

src/panelWebView/CommandToCode.ts

@@ -30,4 +30,5 @@ export enum CommandToCode {
   addToCustomTaxonomy = "addToCustomTaxonomy",
   frameworkCommand = "framework-command",
   updateStartCommand = "update-start-command",
+  getImageUrl = "get-image-url",
 }

src/panelWebView/components/Fields/PreviewImage.tsx

@@ -1,4 +1,8 @@
 import * as React from 'react';
+import { useEffect, useState } from 'react';
+import { MessageHelper } from '../../../helpers/MessageHelper';
+import { Command } from '../../Command';
+import { CommandToCode } from '../../CommandToCode';
 import { ImageFallback } from './ImageFallback';
 import { PreviewImageValue } from './PreviewImageField';
 
@@ -8,10 +12,38 @@ export interface IPreviewImageProps {
 }
 
 export const PreviewImage: React.FunctionComponent<IPreviewImageProps> = ({ value, onRemove }: React.PropsWithChildren<IPreviewImageProps>) => {
+  const [ imgUrl, setImgUrl ] = useState("");
+
+  const listener = (event: any) => {
+    const message = event.data;
+
+    if (message.command === Command.sendMediaUrl) {
+      const data = message.data;
+      if (data?.original === value && data.url) {
+        setImgUrl(data.url);
+      }
+    }
+  }
+
+  useEffect(() => {
+    if (value?.webviewUrl) {
+      setImgUrl(value.webviewUrl);
+    } else {
+      MessageHelper.sendMessage(CommandToCode.getImageUrl, value)
+    }
+  }, [value]);
+
+  useEffect(() => {
+    window.addEventListener('message', listener);
+
+    return () => {
+      window.removeEventListener('message', listener);
+    }
+  }, []);
 
   return (
     <div className={`metadata_field__preview_image__preview`}>
-      <ImageFallback src={value.webviewUrl} />
+      <ImageFallback src={imgUrl} />
 
       <button type="button" onClick={() => onRemove(value.original)} className={`metadata_field__preview_image__remove`}>Remove image</button>
     </div>