From 92b5afd657a845cf1fc0ef8cd7e7f6d1a9219e7d Mon Sep 17 00:00:00 2001 From: leijun Date: Fri, 25 Aug 2023 18:20:25 +0800 Subject: [PATCH] feat: iframe --- main.ts | 2 +- src/Excel.ts | 75 ++++++++++++++++++++++++++++++++++++ src/ExcelView.ts | 5 ++- src/MarkdownPostProcessor.ts | 60 ++++++++++++++++++----------- src/test.html | 41 ++++++++++++++++++++ styles.css | 6 +++ tsconfig.json | 3 +- 7 files changed, 166 insertions(+), 26 deletions(-) create mode 100644 src/Excel.ts create mode 100644 src/test.html 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": [