From f7c6d93b90e0d543717b3ce3e4a4f0dc6795e8f5 Mon Sep 17 00:00:00 2001
From: Ellpeck <me@ellpeck.de>
Date: Sat, 26 Mar 2022 11:23:11 +0100
Subject: [PATCH] experiment with webviews

---
 README.md     |  2 +-
 main.ts       | 40 ++++++++++------------------------------
 manifest.json |  2 +-
 3 files changed, 12 insertions(+), 32 deletions(-)

diff --git a/README.md b/README.md
index 52b3732..0d351d8 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
 # Obsidian Custom Frames
 An Obsidian plugin that turns web apps into panes using iframes with custom styling. Also comes with presets for Google Keep and more.
 
-⚠️⚠️⚠️ **For header-heavy sites like Google Keep to work, this plugin requires Obsidian 0.14.3 or newer due to changes in the way iframes are handled.** ⚠️⚠️⚠️
+⚠️⚠️⚠️ **For header-heavy sites like Google Keep to work, this plugin requires Obsidian 0.14.3.** ⚠️⚠️⚠️
 
 ![A screenshot of the plugin in action](https://raw.githubusercontent.com/Ellpeck/ObsidianCustomFrames/master/screenshot.png)
 
diff --git a/main.ts b/main.ts
index 3025515..c245a5e 100644
--- a/main.ts
+++ b/main.ts
@@ -90,27 +90,15 @@ class CustomFrameView extends ItemView {
 		this.contentEl.empty();
 		this.contentEl.addClass("custom-frames-view");
 
-		let frame = this.contentEl.createEl("iframe");
+		let frame: any = document.createElement("webview");
 		frame.addClass("custom-frames-frame");
-		frame.setAttribute("sandbox", "allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts allow-top-navigation-by-user-activation");
-		frame.setAttribute("allow", "encrypted-media; fullscreen; oversized-images; picture-in-picture; sync-xhr; geolocation;");
+		frame.setAttribute("allowpopups", "");
 		frame.setAttribute("style", `padding: ${this.settings.padding}px`);
-		frame.onload = () => {
-			if (Platform.isDesktopApp) {
-				for (let other of require("electron").remote.getCurrentWebContents().mainFrame.frames) {
-					if (frame.src.contains(new URL(other.url).host)) {
-						other.executeJavaScript(`
-						(() => {
-							let customFramesStyle = document.createElement("style");
-							customFramesStyle.textContent = \`${this.frame.customCss}\`;
-							document.head.appendChild(customFramesStyle);
-						})();
-					`);
-					}
-				}
-			}
+		frame.setAttribute("src", this.frame.url);
+		frame.addEventListener("dom-ready", () => {
+			frame.insertCSS(this.frame.customCss);
 
-			if (Platform.isDesktop && this.frame.minimumWidth) {
+			if (this.frame.minimumWidth) {
 				let parent = this.contentEl.closest<HTMLElement>(".workspace-split.mod-horizontal");
 				if (parent) {
 					let minWidth = `${this.frame.minimumWidth + 2 * this.settings.padding}px`;
@@ -118,8 +106,8 @@ class CustomFrameView extends ItemView {
 						parent.style.width = minWidth;
 				}
 			}
-		};
-		frame.src = this.frame.url;
+		});
+		this.contentEl.appendChild(frame);
 	}
 
 	getViewType(): string {
@@ -203,11 +191,7 @@ class CustomFramesSettingTab extends PluginSettingTab {
 				});
 			new Setting(this.containerEl)
 				.setName("Minimum Width")
-				.setDesc(createFragment(f => {
-					f.createSpan({ text: "The width that this frame's pane should be adjusted to automatically if it is lower. Set to 0 to disable." });
-					f.createEl("br");
-					f.createEl("em", { text: "Note that this is only applied on Desktop devices." });
-				}))
+				.setDesc("The width that this frame's pane should be adjusted to automatically if it is lower. Set to 0 to disable.")
 				.addText(t => {
 					t.inputEl.type = "number";
 					t.setValue(String(frame.minimumWidth));
@@ -218,11 +202,7 @@ class CustomFramesSettingTab extends PluginSettingTab {
 				});
 			new Setting(this.containerEl)
 				.setName("Additional CSS")
-				.setDesc(createFragment(f => {
-					f.createSpan({ text: "A snippet of additional CSS that should be applied to this frame." });
-					f.createEl("br");
-					f.createEl("em", { text: "Note that this is only applied on Desktop devices." });
-				}))
+				.setDesc("A snippet of additional CSS that should be applied to this frame.")
 				.addTextArea(t => {
 					t.inputEl.rows = 5;
 					t.inputEl.cols = 50;
diff --git a/manifest.json b/manifest.json
index 16930da..d4fbe78 100644
--- a/manifest.json
+++ b/manifest.json
@@ -6,5 +6,5 @@
 	"description": "A plugin that turns web apps into panes using iframes with custom styling. Also comes with presets for Google Keep and more.",
 	"author": "Ellpeck",
 	"authorUrl": "https://ellpeck.de",
-	"isDesktopOnly": false
+	"isDesktopOnly": true
 }