feat: iframe

main.ts

@@ -47,7 +47,7 @@ export default class ExcelPlugin extends Plugin {
 		);
 
 		// TODO markdwon后处理
-		// this.addMarkdownPostProcessor();
+		this.addMarkdownPostProcessor();
 
 		// TODO 链接处理
 		// this.registerCommand();

src/Excel.ts

@@ -0,0 +1,75 @@
+import { MarkdownRenderChild } from "obsidian";
+import Spreadsheet from "x-data-spreadsheet";
+
+export class Excel extends MarkdownRenderChild {
+	data: string;
+	index: number;
+	sheet: Spreadsheet;
+
+	constructor(containerEl: HTMLElement, data: string, index: number) {
+		super(containerEl);
+		this.data = data;
+		this.index = index;
+	}
+
+	onload(): void {
+		// const sheetEle = this.containerEl.createDiv({
+		// 	text: this.data,
+		// 	attr: {
+		// 		id: `x-spreadsheet-${this.index}`,
+		// 	},
+		// });
+
+		const sheetIframe = this.containerEl.createEl("iframe", {
+			cls: "sheet-iframe",
+		});
+
+        var document = sheetIframe.contentDocument
+		if (document) {
+			// 原生插入div
+			const sheetDiv = document.createElement("div");
+			sheetDiv.id = "x-spreadsheet";
+			document.body.appendChild(sheetDiv);
+
+            // <link rel="stylesheet" href="https://unpkg.com/x-data-spreadsheet@1.1.9/dist/xspreadsheet.css">
+            // <script src="https://unpkg.com/x-data-spreadsheet@1.1.9/dist/xspreadsheet.js"></script>
+
+            const cssEl = document.createElement('link')
+            cssEl.rel = 'stylesheet'
+            cssEl.href = 'https://unpkg.com/x-data-spreadsheet@1.1.9/dist/xspreadsheet.css'
+            document.head.appendChild(cssEl)
+
+            const scritpLinkEl = document.createElement('script')
+            scritpLinkEl.lang = 'javascript';
+            scritpLinkEl.type = 'text/javascript';
+            scritpLinkEl.text = Spreadsheet.toString()
+
+            document.body.appendChild(scritpLinkEl)
+
+            console.log(scritpLinkEl, '-----')
+
+			const scriptString = `
+                const s = x_spreadsheet("#x-spreadsheet", {
+                    mode: "read",
+                    view: {
+                        height: () => ${this.containerEl.clientHeight},
+                        width: () => 300,
+                    },
+                }).loadData(${this.data});
+
+                s.validate();
+            `;
+
+			const sEl = document.createElement("script");
+			sEl.text = scriptString;
+			document.body.appendChild(sEl);
+		}
+
+        console.log(
+            "sheetIframe",
+            sheetIframe
+        );
+
+		// this.containerEl.replaceWith(sheetIframe);
+	}
+}

src/ExcelView.ts

@@ -129,7 +129,10 @@ export class ExcelView extends TextFileView {
 			.change((data) => {
 				// save data to db
 				this.data = JSON.stringify(data);
-			});
+			})
+			.on('cells-selected', (cell, { sri, sci, eri, eci}) => {
+				console.log(cell, sri, sci, eri, eci)
+			})
 
 		this.sheet.validate();
 	}

src/MarkdownPostProcessor.ts

@@ -5,16 +5,7 @@ import {
   Vault,
 } from "obsidian";
 import ExcelPlugin from "../main";
-import {getIMGFilename,} from "./utils/FileUtils";
-import { linkClickModifierType } from "./utils/ModifierkeyHelper";
-
-interface imgElementAttributes {
-  file?: TFile;
-  fname: string; //Excalidraw filename
-  fwidth: string; //Display width of image
-  fheight: string; //Display height of image
-  style: string; //css style to apply to IMG element
-}
+import { Excel } from "./Excel";
 
 let plugin: ExcelPlugin;
 let vault: Vault;
@@ -40,24 +31,47 @@ export const markdownPostProcessor = async (
   ctx: MarkdownPostProcessorContext,
 ) => {
 
-  console.log(metadataCache)
+  console.log('markdownPostProcessor', el)
   //check to see if we are rendering in editing mode or live preview
   //if yes, then there should be no .internal-embed containers
   const embeddedItems = el.querySelectorAll(".internal-embed");
   if (embeddedItems.length === 0) {
-    // tmpObsidianWYSIWYG(el, ctx);
     return;
   }
 
-  //If the file being processed is an excalidraw file,
-  //then I want to hide all embedded items as these will be
-  //transcluded text element or some other transcluded content inside the Excalidraw file
-  //in reading mode these elements should be hidden
-  const excalidrawFile = Boolean(ctx.frontmatter?.hasOwnProperty("excel-plugin"));
-  if (excalidrawFile) {
-    el.style.display = "none";
-    return;
-  }
-
-  // await processReadingMode(embeddedItems, ctx);
+  await processReadingMode(embeddedItems, ctx);
+};
+
+const processReadingMode = async (
+  embeddedItems: NodeListOf<Element> | [HTMLElement],
+  ctx: MarkdownPostProcessorContext,
+) => {
+  //We are processing a non-excalidraw file in reading mode
+  //Embedded files will be displayed in an .internal-embed container
+
+  //Iterating all the containers in the file to check which one is an excalidraw drawing
+  //This is a for loop instead of embeddedItems.forEach() because processInternalEmbed at the end
+  //is awaited, otherwise excalidraw images would not display in the Kanban plugin
+  embeddedItems.forEach(async (maybeDrawing, index) => {
+    //check to see if the file in the src attribute exists
+    console.log(maybeDrawing)
+    const fname = maybeDrawing.getAttribute("src")?.split("#")[0];
+    if(!fname) return true;
+
+    const file = metadataCache.getFirstLinkpathDest(fname, ctx.sourcePath);
+    console.log('forEach', file, ctx.sourcePath)
+
+    //if the embeddedFile exits and it is an Excalidraw file
+    //then lets replace the .internal-embed with the generated PNG or SVG image
+    if (file && file instanceof TFile && plugin.isExcelFile(file)) {
+
+      const data = await vault.read(file)
+      const parent = maybeDrawing.parentElement
+      if (data && parent) {
+        const excel = new Excel(maybeDrawing.parentElement, data, index)
+        ctx.addChild(excel)
+      }
+      
+    }
+  })
 };

src/test.html

@@ -0,0 +1,41 @@
+<html>
+	<head>
+		<link
+			rel="stylesheet"
+			href="https://unpkg.com/x-data-spreadsheet@1.1.9/dist/xspreadsheet.css"
+		/>
+		<script
+			lang="javascript"
+			type="text/javascript"
+			src="https://unpkg.com/x-data-spreadsheet@1.1.9/dist/xspreadsheet.js"
+		></script>
+	</head>
+	<body>
+		<div id="x-spreadsheet"></div>
+		<script>
+			const s = x_spreadsheet("#x-spreadsheet", {
+				mode: "read",
+				view: {
+					height: () => 343,
+					width: () => 300,
+				},
+			}).loadData({
+				name: "sheet2",
+				freeze: "A1",
+				styles: [],
+				merges: [],
+				rows: {
+					2: { cells: { 0: { text: "111" } } },
+					3: { cells: { 1: { text: "222" }, 2: { text: "11111" } } },
+					4: { cells: { 3: { text: "2222" } } },
+					len: 100,
+				},
+				cols: { len: 26 },
+				validations: [],
+				autofilter: {},
+			});
+
+			s.validate();
+		</script>
+	</body>
+</html>

styles.css

@@ -5,6 +5,12 @@
 	padding: 0;
 }
 
+.sheet-iframe {
+	width: 100%;
+	height: 300px;
+	background-color: red;
+}
+
 .import-excel {
 	position: absolute;
 	right: 0;

tsconfig.json

@@ -15,7 +15,8 @@
       "DOM",
       "ES5",
       "ES6",
-      "ES7"
+      "ES7",
+      "DOM.Iterable"
     ]
   },
   "include": [