Merge pull request #71 from trey-wallis/dev

Updates for Obsidian plugin store

Author: decaf-dev

.readme/add-table-command.png

@@ -9,79 +9,106 @@ Obsidian Notion-Like Tables allows you to create markdown tables using an interf
 ## Roadmap
 
 -   0.1.0
-    -   MVP
+    -   MVP (basic NLT table)
 -   0.2.0
-    -   Semantic table tags
+    -   Semantic table tags for theming (table, tr, td, etc)
 -   0.3.0
-    -   Notion-Like sort menu
+    -   Notion-Like sort menu (default, ascending, descending)
 -   1.0.0
     -   Settings cache system to persist app data
-    -   Added jest tests
     -   Sorting updates source markdown
 -   1.1.0
     -   Support for http/https links
 -   1.2.0
     -   UI updates
     -   Insert row above or below an existing row
--   1.3.0
+-   2.0.0
+    -   Table id row support & upgrading caching system
+-   2.1.0
     -   Create new row with keyboard
-    -   Add new tag colors
--   1.4.0
+    -   Insert new column
+    -   New tag colors
+-   2.2.0
     -   Navigate cells with arrow key and tab key
--   1.5.0
+-   2.3.0
     -   TBA
 
 ## Usage
 
 ### Making a Table via Command
 
-To quickly make a table you can use the add table command. Press `CMD-P` on your keyboard search "Add table".
+To quickly make a table you can use the add table command. Press `cmd + p` on your keyboard search "Add table".
 
-Note: you must be in editing mode for this command to appear
+Note: you must be in editing mode for this command to appear.
 
-Toggle to preview mode and the table will automatically render.
+Toggle to reading mode and the table will automatically render.
+
+![Screenshot](.readme/add-table-command.png)
 
 ### Making a Table Manually
 
-Make a table manually using normal markdown syntax. Under the hyphen row, specify the types of each column.
+A Notion-Like Table uses normal Obsidian table markdown syntax with 2 additional rows:
+
+-   A table id row
+-   A type definition row
+
+#### Table ID Row
+
+The table id row is a normal markdown row with the first column containing a unique string. This string must be unique per table per file. If you use the same id in another file that's fine. The id is used to map a table to its data in the settings. If you change this id, your table will not be able to find its settings and will create new ones. If you omit this id, your table will not be rendered as an NLT table.
+
+![Screenshot](.readme/table-id-row.png)
 
-The plugin currently supports 3 cell types: `text`, `number`, and `tag`.
+##### Type Definition Row
 
-![Screenshot](.readme/markdown.png)
+The type definition row is a normal markdown row with each column defining the type of data you want that column to accept. The plugin currently supports 3 column types: `text`, `number` and `tag`.
 
-Toggle to preview mode and the table will automatically render.
+![Screenshot](.readme/type-definition-row.png)
 
 ### Editing Cells
 
 To edit a cell, just click on it. Changes made to the cell will be propagated to the markdown.
 
+#### Tags
+
+Tags have a special notion-like menu that will appear. Tags are scoped to each column of a table. You can type text to filter existing tags and select one. Or you can create a new tag by typing text and clicking "Create New" or pressing enter.
+
+![Screenshot](.readme/tag-menu.png)
+
 ### Headers
 
-Click on a header name to edit the header title and change the column type.
+Click on a header name to view the header menu. In the header menu you can rename the header, sort your column values or change the header type.
 
 ![Screenshot](.readme/header.png)
 
-Please do not edit headers in the markdown once you have rendered your table for the first time. These are what are used to identify a unique table. I plan on finding a better system for this, potentially using the line ID of the table in the document. If you have any suggestions for this, please place it in a feature request.
-
 ### Links
 
 If you want to render a link in text, just add square brackets [[My Link]].
 
-![Screenshot](.readme/text-link-1.png)
-![Screenshot](.readme/text-link-2.png)
+![Screenshot](.readme/internal-link-edit.png)
+
+### URLs
+
+If you want to display a url, type the url making sure it begins with `http://` or `https://`. NLT will automatically render it in the table.
+
+![Screenshot](.readme/url.png)
+
+### Undoing a Type Change
+
+If you accidently change your column to a different type, all data will be erased. It this happens, go to editing mode and use `ctrl+z` or `option-z` on your keyboard to undo the change.
 
 ### Errors
 
+#### Not Rendering
+
+If your table is missing a table id row or type definition row then it will not be rendered as a Notion-Like Table. Likewise, if you use an invalid column type other than the accepted types `text`, `number`, or `tag`. The table will not be rendered.
+
+#### Cell Type Errors
+
 A cell type error will occur if you enter data which doesn't match the column data type. Please correct this error in your markdown to continue.
 
 ![Screenshot](.readme/cell-error-1.png)
 ![Screenshot](.readme/cell-error-2.png)
 
-### Live Preview
-
-April 9, 2022:
-Tables display with live preview is still being developed in Obsidian. If you're using live preview, please always use the table in "Reading" mode not "Editing" mode.
-
 ### Theming
 
 NLT tables uses normal table semantic elements (`table`, `th`, `tr`, `td`, etc) to render. If you wish to edit the display of the table, just style those elements in your CSS.

.readme/cell-error-1.png

@@ -1,16 +1,8 @@
-import { Plugin, Editor } from "obsidian";
+import { Plugin, Editor, MarkdownView } from "obsidian";
 
 import { NLTTable } from "src/NLTTable";
 import { NltSettings, DEFAULT_SETTINGS } from "src/app/services/state";
-import { Header } from "src/app/services/state";
-import {
-	findMarkdownTablesFromFileData,
-	parseTableFromMarkdown,
-	validTypeDefinitionRow,
-	findAppData,
-	hashParsedTable,
-	mergeAppData,
-} from "src/app/services/utils";
+import { createEmptyTable, randomTableId } from "src/app/services/utils";
 export default class NltPlugin extends Plugin {
 	settings: NltSettings;
 
@@ -42,8 +34,8 @@ export default class NltPlugin extends Plugin {
 
 	registerFileHandlers() {
 		//Our persisted data uses a key of the file path and then stores an object mapping
-		//to a CRC32 key and an AppData object
-		//If the file we have data for changes, we want to update our cache
+		//to a table id and an AppData object.
+		//If the file path changes, we want to update our cache so that the data is still accessible.
 		this.registerEvent(
 			this.app.vault.on("rename", (file, oldPath) => {
 				if (this.settings.appData[oldPath]) {
@@ -55,94 +47,18 @@ export default class NltPlugin extends Plugin {
 				}
 			})
 		);
-
-		//The loadAppData and saveAppData functions handle markdown editing caused from the app.
-		//However if a user updates the source markdown of a table and a cached version already existed,
-		//since the CRC32 value is different, it will recreate brand new app data. This will cause things
-		//like the tag colors to change.
-		//We can avoid this by handling editor changes. If a file that was edited contains a table
-		//and that table has a reference in the cache, then we should update it with new data.
-		this.registerEvent(
-			this.app.workspace.on("editor-change", async (editor) => {
-				const file = this.app.workspace.getActiveFile();
-				const markdownTables = findMarkdownTablesFromFileData(
-					editor.getValue()
-				);
-				if (markdownTables.length !== 0) {
-					markdownTables.forEach((markdownTable) => {
-						const parsedTable =
-							parseTableFromMarkdown(markdownTable);
-						//Validate table
-						if (!validTypeDefinitionRow(parsedTable)) return;
-
-						const headers = parsedTable[0];
-
-						//Get the saved entry
-						if (this.settings.appData[file.path]) {
-							const savedData = this.settings.appData[file.path];
-							//Check headers of the save data
-							Object.entries(savedData).forEach((entry) => {
-								const [key, value] = entry;
-								//If the headers match, update the data and the CRC
-								if (
-									value.headers.every((header: Header) =>
-										headers.includes(header.content)
-									)
-								) {
-									const hash = hashParsedTable(parsedTable);
-
-									//If you change something in reading mode, we will persist
-									//that data in the settings cache. However, if you go back
-									//to editing mode, the editor-change callback will be ran.
-									//Since the hashes are the same, no data has updated, so we
-									//don't need to do anything
-									if (parseInt(key) === hash) return;
-
-									const newAppData = findAppData(parsedTable);
-									const merged = mergeAppData(
-										this.settings.appData[file.path][key],
-										newAppData
-									);
-									this.settings.appData[file.path][hash] =
-										merged;
-									delete this.settings.appData[file.path][
-										key
-									];
-									this.saveSettings();
-								}
-							});
-						}
-					});
-				}
-			})
-		);
 	}
 
 	registerCommands() {
 		this.addCommand({
 			id: "nlt-add-table",
 			name: "Add table",
 			editorCallback: (editor: Editor) => {
-				editor.replaceSelection(this.emptyTable());
+				editor.replaceSelection(createEmptyTable(randomTableId()));
 			},
 		});
 	}
 
-	/**
-	 * Creates a 1 column NLT markdown table
-	 * @returns An NLT markdown table
-	 */
-	emptyTable(): string {
-		const columnName = "Column 1";
-		const rows = [];
-		rows[0] = `|  ${columnName}  |`;
-		rows[1] = `|  ${Array(columnName.length).fill("-").join("")}  |`;
-		rows[2] = `|  text ${Array(columnName.length - 3)
-			.fill(" ")
-			.join("")}  |`;
-		return rows.join("\n");
-	}
-
 	async loadSettings() {
 		this.settings = Object.assign(
 			{},
@@ -163,20 +79,18 @@ export default class NltPlugin extends Plugin {
 		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];
-			this.app.workspace.duplicateLeaf(leaf);
-			leaf.detach();
-		}
+		this.app.workspace.iterateAllLeaves((leaf) => {
+			const view = leaf.view;
+			if (view.getViewType() === "markdown") {
+				if (view instanceof MarkdownView)
+					view.previewMode.rerender(true);
+			}
+		});
 	}
 }

.readme/cell-error-2.png

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

.readme/header.png

@@ -1,6 +1,6 @@
 {
   "name": "obsidian-notion-like-tables",
-  "version": "1.2.0",
+  "version": "2.0.0",
   "description": "Notion-like tables for Obsidian.md",
   "main": "main.js",
   "scripts": {
@@ -36,7 +36,6 @@
   },
   "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",

.readme/internal-link-edit.png

@@ -31,9 +31,8 @@ export class NLTTable extends MarkdownRenderChild {
 	}
 
 	async onload() {
-		const data = loadAppData(
+		const { tableId, data } = loadAppData(
 			this.plugin,
-			this.app,
 			this.settings,
 			this.containerEl,
 			this.sourcePath
@@ -50,6 +49,7 @@ export class NLTTable extends MarkdownRenderChild {
 						settings={this.settings}
 						data={data}
 						sourcePath={this.sourcePath}
+						tableId={tableId}
 					/>
 				</AppContext.Provider>,
 				this.el