From c32d83dc6e142106606b73fc987d6215ce3606cb Mon Sep 17 00:00:00 2001
From: Ellpeck <me@ellpeck.de>
Date: Wed, 13 Apr 2022 21:59:39 +0200
Subject: [PATCH] allow displaying custom frames in files

---
 src/main.ts | 25 +++++++++++++++++++++++++
 src/view.ts |  3 +--
 styles.css  |  5 +++++
 3 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/src/main.ts b/src/main.ts
index e9b3b18..d95d857 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,4 +1,5 @@
 import { Plugin, Platform } from "obsidian";
+import { CustomFrame } from "./frame";
 import { CustomFramesSettings, defaultSettings } from "./settings";
 import { CustomFramesSettingTab } from "./settings-tab";
 import { CustomFrameView } from "./view";
@@ -33,6 +34,30 @@ export default class CustomFramesPlugin extends Plugin {
 		}
 
 		this.addSettingTab(new CustomFramesSettingTab(this.app, this));
+
+		this.registerMarkdownCodeBlockProcessor("custom-frames", (s, e, ctx) => {
+			e.empty();
+			e.addClass("custom-frames-view-file");
+
+			let frameMatch = /frame:([^\n]+)/gi.exec(s);
+			let frameName = frameMatch && frameMatch[1].trim();
+			if (!frameName) {
+				e.createSpan({ text: "Couldn't parse frame name" });
+				return;
+			}
+			let data = this.settings.frames.find(f => f.displayName == frameName);
+			if (!data) {
+				e.createSpan({ text: `Couldn't find a frame with name ${frameName}` });
+				return;
+			}
+
+			let styleMatch = /style:([^\n]+)/gi.exec(s);
+			let style = styleMatch && styleMatch[1].trim();
+			style ||= "height: 600px;";
+
+			let frame = new CustomFrame(this.settings, data);
+			e.appendChild(frame.create(style));
+		});
 	}
 
 	async loadSettings() {
diff --git a/src/view.ts b/src/view.ts
index df850bf..db085ff 100644
--- a/src/view.ts
+++ b/src/view.ts
@@ -32,16 +32,15 @@ export class CustomFrameView extends ItemView {
         }
     ];
 
-    private readonly settings: CustomFramesSettings;
     private readonly data: CustomFrameSettings;
     private readonly name: string;
     private frame: CustomFrame;
 
     constructor(leaf: WorkspaceLeaf, settings: CustomFramesSettings, data: CustomFrameSettings, name: string) {
         super(leaf);
-        this.settings = settings;
         this.data = data;
         this.name = name;
+        this.frame = new CustomFrame(settings, data);
 
         for (let action of CustomFrameView.actions)
             this.addAction(action.icon, action.name, () => action.action(this));
diff --git a/styles.css b/styles.css
index db61186..8dad984 100644
--- a/styles.css
+++ b/styles.css
@@ -3,6 +3,11 @@
 	overflow: hidden !important;
 }
 
+.custom-frames-view-file {
+	padding: 0;
+	overflow: auto;
+}
+
 .custom-frames-frame {
 	width: 100%;
 	height: 100%;