feat(AdfPreview): Make local files render correctly in ADF Preview

Loads the files via the `app://local` schema which enables them to be loaded as "external" files in the ADF Renderer component.

package.json

@@ -59,7 +59,8 @@
 		"react": "^16.14.0",
 		"react-dom": "^16.14.0",
 		"spark-md5": "^3.0.2",
-		"uuid": "^9.0.0"
+		"uuid": "^9.0.0",
+		"react-intl-next": "npm:react-intl@^5.18.1"
 	},
 	"lint-staged": {
 		"src/**/*": "prettier --write --ignore-unknown"

src/AdfView.ts

@@ -1,5 +1,6 @@
 import {
 	EventRef,
+	FileSystemAdapter,
 	ItemView,
 	Menu,
 	Vault,
@@ -11,6 +12,9 @@ import React from "react";
 import ReactDOM from "react-dom";
 import { ReactRenderer } from "@atlaskit/renderer";
 import MdToADF from "./mdToADF";
+import { JSONDocNode } from "@atlaskit/editor-json-transformer";
+import { traverse, filter } from "@atlaskit/adf-utils/traverse";
+import { IntlProvider } from "react-intl-next";
 
 export const ADF_VIEW_TYPE = "AtlassianDocumentFormatView";
 
@@ -55,11 +59,58 @@ export default class AdfView extends ItemView {
 
 		let md = await this.app.vault.adapter.read(this.filePath);
 		const adf = this.mdToADF.parse(md);
-		ReactDOM.render(
+		const renderADF = this.convertMediaFilesToLocalPath(adf);
+
+		const locale = "en";
+		const messages = {
+			// Your localized messages
+		};
+
+		const intlProvider = React.createElement(
+			IntlProvider,
+			{
+				locale: locale,
+				messages: messages,
+			},
 			// @ts-ignore
-			React.createElement(ReactRenderer, { document: adf }),
-			container
+			React.createElement(ReactRenderer, { document: renderADF })
 		);
+
+		ReactDOM.render(intlProvider, container);
+	}
+
+	convertMediaFilesToLocalPath(adf: JSONDocNode): JSONDocNode {
+		const basePath = this.getBasePath();
+		return traverse(adf, {
+			media: (node, parent) => {
+				if (node?.attrs?.type === "file") {
+					console.log({ node });
+					const currentUrl = node?.attrs?.url as string;
+					const test = this.app.vault.adapter as FileSystemAdapter;
+					const vaultPath =
+						this.app.metadataCache.getFirstLinkpathDest(
+							currentUrl.replace("file://", ""),
+							this.filePath
+						);
+					if (!vaultPath) {
+						return false;
+					}
+					const path = test.getResourcePath(vaultPath.path);
+					console.log({ path });
+					node.attrs.type = "external";
+					node.attrs.url = path; // currentUrl.replace("file://", `file://${basePath}`);
+					return node;
+				}
+			},
+		}) as JSONDocNode;
+	}
+
+	getBasePath() {
+		let adapter = app.vault.adapter;
+		if (adapter instanceof FileSystemAdapter) {
+			return adapter.getBasePath();
+		}
+		throw new Error("No Path???");
 	}
 
 	async onClose() {

src/MarkdownTransformer/media.ts

@@ -79,7 +79,7 @@ function createRule() {
 					: undefined;
 
 			return [
-				["url", `localfile:${filename}`],
+				["url", `file://${filename}`],
 				["type", "file"],
 				...(width ? [["width", `${width}`]] : []),
 				...(height ? [["height", `${height}`]] : []),