diff --git a/main.ts b/main.ts
index fb902da..7d56474 100644
--- a/main.ts
+++ b/main.ts
@@ -47,7 +47,7 @@ export default class ExcelPlugin extends Plugin {
);
// TODO markdwon后处理
- // this.addMarkdownPostProcessor();
+ this.addMarkdownPostProcessor();
// TODO 链接处理
// this.registerCommand();
diff --git a/src/Excel.ts b/src/Excel.ts
new file mode 100644
index 0000000..a3f1005
--- /dev/null
+++ b/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);
+
+ //
+ //
+
+ 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);
+ }
+}
diff --git a/src/ExcelView.ts b/src/ExcelView.ts
index a793c1f..fefe904 100644
--- a/src/ExcelView.ts
+++ b/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();
}
diff --git a/src/MarkdownPostProcessor.ts b/src/MarkdownPostProcessor.ts
index 74ee095..efcc712 100644
--- a/src/MarkdownPostProcessor.ts
+++ b/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 | [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)
+ }
+
+ }
+ })
};
diff --git a/src/test.html b/src/test.html
new file mode 100644
index 0000000..60212e8
--- /dev/null
+++ b/src/test.html
@@ -0,0 +1,41 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/styles.css b/styles.css
index 0499ebd..f3ada53 100644
--- a/styles.css
+++ b/styles.css
@@ -5,6 +5,12 @@
padding: 0;
}
+.sheet-iframe {
+ width: 100%;
+ height: 300px;
+ background-color: red;
+}
+
.import-excel {
position: absolute;
right: 0;
diff --git a/tsconfig.json b/tsconfig.json
index 2d6fbdf..1ba2070 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -15,7 +15,8 @@
"DOM",
"ES5",
"ES6",
- "ES7"
+ "ES7",
+ "DOM.Iterable"
]
},
"include": [