feat: excel处理

esbuild.config.mjs

@@ -1,15 +1,16 @@
 import esbuild from "esbuild";
 import process from "process";
 import builtins from "builtin-modules";
+import { lessLoader } from "esbuild-plugin-less";
+import svg from 'esbuild-plugin-svg';
 
-const banner =
-`/*
+const banner = `/*
 THIS IS A GENERATED/BUNDLED FILE BY ESBUILD
 if you want to view the source, please visit the github repository of this plugin
 */
 `;
 
-const prod = (process.argv[2] === "production");
+const prod = process.argv[2] === "production";
 
 const context = await esbuild.context({
 	banner: {
@@ -31,13 +32,15 @@ const context = await esbuild.context({
 		"@lezer/common",
 		"@lezer/highlight",
 		"@lezer/lr",
-		...builtins],
+		...builtins,
+	],
 	format: "cjs",
 	target: "es2018",
 	logLevel: "info",
 	sourcemap: prod ? false : "inline",
 	treeShaking: true,
 	outfile: "main.js",
+	plugins: [lessLoader(), svg()],
 });
 
 if (prod) {
@@ -45,4 +48,4 @@ if (prod) {
 	process.exit(0);
 } else {
 	await context.watch();
-}
+}

main.ts

@@ -1,23 +1,16 @@
-import { App, Editor, MarkdownView, Modal, Notice, Plugin, PluginSettingTab, Setting } from 'obsidian';
+import { App, Editor, MarkdownView, Modal, Notice, Plugin, PluginSettingTab, Setting, WorkspaceLeaf } from 'obsidian';
 
-// Remember to rename these classes and interfaces!
+import { ExcelView, VIEW_TYPE_EXCEL } from './src/ExcelView';
 
-interface MyPluginSettings {
-	mySetting: string;
-}
-
-const DEFAULT_SETTINGS: MyPluginSettings = {
-	mySetting: 'default'
-}
-
-export default class MyPlugin extends Plugin {
-	settings: MyPluginSettings;
+export default class ExcelPlugin extends Plugin {
 
 	async onload() {
-		await this.loadSettings();
+
+		this.registerView(VIEW_TYPE_EXCEL, (leaf: WorkspaceLeaf) => new ExcelView(leaf, this));
+		this.registerExtensions(["xlsx"], VIEW_TYPE_EXCEL);
 
 		// This creates an icon in the left ribbon.
-		const ribbonIconEl = this.addRibbonIcon('dice', 'Sample Plugin', (evt: MouseEvent) => {
+		const ribbonIconEl = this.addRibbonIcon('table', 'Excel', (evt: MouseEvent) => {
 			// Called when the user clicks the icon.
 			new Notice('This is a notice!');
 		});
@@ -28,45 +21,6 @@ export default class MyPlugin extends Plugin {
 		const statusBarItemEl = this.addStatusBarItem();
 		statusBarItemEl.setText('Status Bar Text');
 
-		// This adds a simple command that can be triggered anywhere
-		this.addCommand({
-			id: 'open-sample-modal-simple',
-			name: 'Open sample modal (simple)',
-			callback: () => {
-				new SampleModal(this.app).open();
-			}
-		});
-		// This adds an editor command that can perform some operation on the current editor instance
-		this.addCommand({
-			id: 'sample-editor-command',
-			name: 'Sample editor command',
-			editorCallback: (editor: Editor, view: MarkdownView) => {
-				console.log(editor.getSelection());
-				editor.replaceSelection('Sample Editor Command');
-			}
-		});
-		// This adds a complex command that can check whether the current state of the app allows execution of the command
-		this.addCommand({
-			id: 'open-sample-modal-complex',
-			name: 'Open sample modal (complex)',
-			checkCallback: (checking: boolean) => {
-				// Conditions to check
-				const markdownView = this.app.workspace.getActiveViewOfType(MarkdownView);
-				if (markdownView) {
-					// If checking is true, we're simply "checking" if the command can be run.
-					// If checking is false, then we want to actually perform the operation.
-					if (!checking) {
-						new SampleModal(this.app).open();
-					}
-
-					// This command will only show up in Command Palette when the check function returns true
-					return true;
-				}
-			}
-		});
-
-		// This adds a settings tab so the user can configure various aspects of the plugin
-		this.addSettingTab(new SampleSettingTab(this.app, this));
 
 		// If the plugin hooks up any global DOM events (on parts of the app that doesn't belong to this plugin)
 		// Using this function will automatically remove the event listener when this plugin is disabled.
@@ -82,53 +36,11 @@ export default class MyPlugin extends Plugin {
 
 	}
 
-	async loadSettings() {
-		this.settings = Object.assign({}, DEFAULT_SETTINGS, await this.loadData());
-	}
+	// async loadSettings() {
+	// 	this.settings = Object.assign({}, DEFAULT_SETTINGS, await this.loadData());
+	// }
 
-	async saveSettings() {
-		await this.saveData(this.settings);
-	}
-}
-
-class SampleModal extends Modal {
-	constructor(app: App) {
-		super(app);
-	}
-
-	onOpen() {
-		const {contentEl} = this;
-		contentEl.setText('Woah!');
-	}
-
-	onClose() {
-		const {contentEl} = this;
-		contentEl.empty();
-	}
-}
-
-class SampleSettingTab extends PluginSettingTab {
-	plugin: MyPlugin;
-
-	constructor(app: App, plugin: MyPlugin) {
-		super(app, plugin);
-		this.plugin = plugin;
-	}
-
-	display(): void {
-		const {containerEl} = this;
-
-		containerEl.empty();
-
-		new Setting(containerEl)
-			.setName('Setting #1')
-			.setDesc('It\'s a secret')
-			.addText(text => text
-				.setPlaceholder('Enter your secret')
-				.setValue(this.plugin.settings.mySetting)
-				.onChange(async (value) => {
-					this.plugin.settings.mySetting = value;
-					await this.plugin.saveSettings();
-				}));
-	}
+	// async saveSettings() {
+	// 	await this.saveData(this.settings);
+	// }
 }

manifest.json

@@ -1,11 +1,11 @@
 {
-	"id": "sample-plugin",
-	"name": "Sample Plugin",
+	"id": "com.ljcoder.obsidian-excel",
+	"name": "Excel",
 	"version": "1.0.0",
 	"minAppVersion": "0.15.0",
-	"description": "This is a sample plugin for Obsidian. This plugin demonstrates some of the capabilities of the Obsidian API.",
-	"author": "Obsidian",
-	"authorUrl": "https://obsidian.md",
-	"fundingUrl": "https://obsidian.md/pricing",
+	"description": "This is a Excel plugin for Obsidian.",
+	"author": "ljcoder",
+	"authorUrl": "https://github.com/ljcoder2015/obsidian-excel",
+	"fundingUrl": "https://github.com/ljcoder2015/obsidian-excel",
 	"isDesktopOnly": false
 }

package.json

@@ -17,8 +17,13 @@
 		"@typescript-eslint/parser": "5.29.0",
 		"builtin-modules": "3.3.0",
 		"esbuild": "0.17.3",
+		"esbuild-plugin-less": "^1.2.4",
+		"esbuild-plugin-svg": "^0.1.0",
 		"obsidian": "latest",
 		"tslib": "2.4.0",
 		"typescript": "4.7.4"
+	},
+	"dependencies": {
+		"x-data-spreadsheet": "^1.1.9"
 	}
 }

src/ExcelView.ts

@@ -0,0 +1,60 @@
+import ExcelPlugin from "main";
+import { TextFileView, WorkspaceLeaf } from "obsidian";
+import Spreadsheet from "x-data-spreadsheet";
+
+export const VIEW_TYPE_EXCEL = "excel-view";
+
+export class ExcelView extends TextFileView {
+	public plugin: ExcelPlugin;
+	public ownerWindow: Window;
+	public ownerDocument: Document;
+	public sheet: any;
+
+	constructor(leaf: WorkspaceLeaf, plugin: ExcelPlugin) {
+		super(leaf);
+		this.plugin = plugin;
+	}
+
+	getViewData(): string {
+		return this.data;
+	}
+
+	setViewData(data: string, clear: boolean): void {
+		this.data = data;
+
+		this.containerEl.empty();
+		this.containerEl.createDiv({
+			attr: {
+				id: "x-spreadsheet"
+				// class: "sheet-box"
+			},
+		});
+
+		console.log(this.ownerWindow, this.data);
+		const jsonData = JSON.parse(this.data || "{}") || {}
+		//@ts-ignore
+		this.sheet = new Spreadsheet("#x-spreadsheet")
+		.loadData(jsonData) // load data
+		.change(data => {
+		  // save data to db
+		  this.data = JSON.stringify(data);
+		});
+
+		this.sheet.validate()
+	}
+
+	onload(): void {
+		const apiMissing = Boolean(
+			typeof this.containerEl.onWindowMigrated === "undefined"
+		);
+		this.ownerWindow = this.containerEl.win;
+	}
+
+	clear(): void {
+		this.data = "";
+	}
+
+	getViewType(): string {
+		return VIEW_TYPE_EXCEL;
+	}
+}