Merge pull request #40 from trey-wallis/dev

Bug fixes

README.md

@@ -7,29 +7,24 @@ Obsidian Notion-Like Tables allows you to create markdown tables using an interf
 ![Screenshot](.readme/preview.png)
 
 ## Roadmap
-- 0.1.0
-	- MVP
-- 0.2.0
-	- Make sort 1 button
-	- Remove empty cells along side and bottom
-	- Add ability to create new tag on "Enter" press
-	- Add hover to header
-- 0.3.0
-	- Multi-tagging
-- 0.4.0
-	- Editable table width
-- 0.5.0
-	- Draggable columns
-	- Draggable rows
-- 0.6.0
-	- Search bar?
-	- TBA
-
-### Known Bugs
-- Column header doesn't save currently
-- Tags are not unique per column
-- A text cell with numbers only is considered a number cell and will throw an error
-- Tags with spaces causes issues
+
+-   0.1.0
+    -   MVP
+-   0.2.0
+    -   Make sort 1 button
+    -   Remove empty cells along side and bottom
+    -   Add ability to create new tag on "Enter" press
+    -   Add hover to header
+-   0.3.0
+    -   Multi-tagging
+-   0.4.0
+    -   Editable table width
+-   0.5.0
+    -   Draggable columns
+    -   Draggable rows
+-   0.6.0
+    -   Search bar?
+    -   TBA
 
 ## Usage
 
@@ -118,6 +113,7 @@ Run development server
 -   `npm run start`
 
 ## Reporting Bugs
+
 If you find a bug, please open an issue. I will try to respond as soon as possible.
 
 ## Resources

main.ts

@@ -1,11 +1,14 @@
-import { Plugin, Editor, MarkdownView, TFile } from "obsidian";
+import { Plugin, Editor } from "obsidian";
 
 import { NLTTable } from "src/NLTTable";
 import { NltSettings, DEFAULT_SETTINGS } from "src/app/services/state";
 export default class NltPlugin extends Plugin {
 	settings: NltSettings;
-	containerElements: HTMLElement[] = [];
 
+	/**
+	 * Called on plugin load.
+	 * This can be when the plugin is enabled or Obsidian is first opened.
+	 */
 	async onload() {
 		await this.loadSettings();
 		await this.forcePostProcessorReload();
@@ -14,12 +17,34 @@ export default class NltPlugin extends Plugin {
 			const table = element.getElementsByTagName("table");
 			if (table.length === 1) {
 				context.addChild(
-					new NLTTable(table[0], this.app, this, this.settings)
+					new NLTTable(
+						table[0],
+						this.app,
+						this,
+						this.settings,
+						context.sourcePath
+					)
 				);
 			}
 		});
-
 		this.registerCommands();
+		this.registerFileHandlers();
+	}
+
+	registerFileHandlers() {
+		this.registerEvent(
+			this.app.vault.on("rename", (file, oldPath) => {
+				//If filepath exists for our settings, then we want to rename it
+				//So that we can keep our app data matched to each file
+				if (this.settings.appData[oldPath]) {
+					const newPath = file.path;
+					const data = { ...this.settings.appData[oldPath] };
+					delete this.settings.appData[oldPath];
+					this.settings.appData[newPath] = data;
+					this.saveSettings();
+				}
+			})
+		);
 	}
 
 	registerCommands() {
@@ -32,6 +57,10 @@ export default class NltPlugin extends Plugin {
 		});
 	}
 
+	/**
+	 * Creates a 1 column NLT markdown table
+	 * @returns An NLT markdown table
+	 */
 	emptyTable(): string {
 		const columnName = "Column 1";
 		const rows = [];
@@ -55,34 +84,28 @@ export default class NltPlugin extends Plugin {
 		await this.saveData(this.settings);
 	}
 
+	/**
+	 * Called on plugin unload.
+	 * This can be when the plugin is disabled or Obsidian is closed.
+	 */
 	async onunload() {
 		await this.forcePostProcessorReload();
 	}
 
+	/**
+	 * Forces the post processor to be called again.
+	 * This is necessary for clean up purposes on unload and causing NLT tables
+	 * to be rendered onload.
+	 */
 	async forcePostProcessorReload() {
 		const leaves = [
 			...this.app.workspace.getLeavesOfType("markdown"),
 			...this.app.workspace.getLeavesOfType("edit"),
 		];
 		for (let i = 0; i < leaves.length; i++) {
 			const leaf = leaves[i];
-			let view = null;
-			if (leaf.view instanceof MarkdownView) view = leaf.view;
 			this.app.workspace.duplicateLeaf(leaf);
 			leaf.detach();
-
-			//TODO remove
-			// 	//Find tables
-			// 	//Match |---| or | --- |
-			// 	//This is uniquely identity a new table
-			// 	const hyphenRows = content.match(/\|\s{0,1}-{3,}\s{0,1}\|\n/g);
-			// 	for (let i = 0; i < hyphenRows.length; i++) {
-			// 		const old = hyphenRows[i];
-			// 		const updated = old.replace("-", "--");
-			// 		content = content.replace(old, updated);
-			// 	}
-			// 	await this.app.vault.modify(file, content);
-			// }
 		}
 	}
 }

manifest.json

@@ -1,7 +1,7 @@
 {
 	"id": "notion-like-tables",
 	"name": "Notion-Like Tables",
-	"version": "0.1.3",
+	"version": "0.1.4",
 	"minAppVersion": "0.12.0",
 	"description": "Create markdown tables using an interface similar to that found in Notion.so.",
 	"author": "Trey Wallis",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "obsidian-notion-like-tables",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "Notion-like tables for Obsidian.md",
   "main": "main.js",
   "scripts": {
@@ -35,6 +35,7 @@
   },
   "dependencies": {
     "@mui/icons-material": "^5.5.0",
+    "crc-32": "^1.2.2",
     "html-react-parser": "^1.4.9",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

src/NLTTable.tsx

@@ -5,7 +5,7 @@ import ReactDOM from "react-dom";
 import { AppContext } from "./app/services/hooks";
 import App from "./app/App";
 import ErrorDisplay from "./app/components/ErrorDisplay";
-import { loadData } from "./app/services/dataUtils";
+import { loadAppData } from "./app/services/dataUtils";
 import { instanceOfErrorData, NltSettings } from "./app/services/state";
 import NltPlugin from "main";
 
@@ -15,37 +15,51 @@ export class NLTTable extends MarkdownRenderChild {
 	plugin: NltPlugin;
 	settings: NltSettings;
 	el: HTMLElement;
+	sourcePath: string;
 
 	constructor(
 		containerEl: HTMLElement,
 		app: ObsidianApp,
 		plugin: NltPlugin,
-		settings: NltSettings
+		settings: NltSettings,
+		sourcePath: string
 	) {
 		super(containerEl);
 		this.app = app;
 		this.plugin = plugin;
 		this.settings = settings;
+		this.sourcePath = sourcePath;
 	}
 
 	onload() {
-		this.el = this.containerEl.createEl("div");
+		const data = loadAppData(
+			this.plugin,
+			this.app,
+			this.settings,
+			this.containerEl,
+			this.sourcePath
+		);
 
-		const data = loadData(this.containerEl, this.settings);
-		if (instanceOfErrorData(data)) {
-			ReactDOM.render(<ErrorDisplay data={data} />, this.el);
-		} else {
-			ReactDOM.render(
-				<AppContext.Provider value={this.app}>
-					<App
-						plugin={this.plugin}
-						settings={this.settings}
-						data={data}
-					/>
-				</AppContext.Provider>,
-				this.el
-			);
+		//If data is not defined then that means that the table doesn't have a type
+		//defintion row. Therefore, it's not a valid NLT table
+		if (data) {
+			this.el = this.containerEl.createEl("div");
+			if (instanceOfErrorData(data)) {
+				ReactDOM.render(<ErrorDisplay data={data} />, this.el);
+			} else {
+				ReactDOM.render(
+					<AppContext.Provider value={this.app}>
+						<App
+							plugin={this.plugin}
+							settings={this.settings}
+							data={data}
+							sourcePath={this.sourcePath}
+						/>
+					</AppContext.Provider>,
+					this.el
+				);
+			}
+			this.containerEl.replaceWith(this.el);
 		}
-		this.containerEl.replaceWith(this.el);
 	}
 }