allow displaying custom frames in files

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() {

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));

styles.css

@@ -3,6 +3,11 @@
 	overflow: hidden !important;
 }
 
+.custom-frames-view-file {
+	padding: 0;
+	overflow: auto;
+}
+
 .custom-frames-frame {
 	width: 100%;
 	height: 100%;