Merge pull request #18 from trey-wallis/bug/obsidian-style-guide

Bug/obsidian style guide

Author: decaf-dev

main.ts

@@ -1,14 +1,17 @@
-import { Plugin, Editor, MarkdownView } from "obsidian";
+import { Plugin, Editor, MarkdownView, TFile } 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[] = [];
 
 	async onload() {
 		await this.loadSettings();
+		await this.forcePostProcessorReload();
 
 		this.registerMarkdownPostProcessor((element, context) => {
+			console.log("REGISTERING!");
 			const table = element.getElementsByTagName("table");
 			if (table.length === 1) {
 				context.addChild(
@@ -24,7 +27,7 @@ export default class NltPlugin extends Plugin {
 		this.addCommand({
 			id: "nlt-add-table",
 			name: "Add table",
-			editorCallback: (editor: Editor, view: MarkdownView) => {
+			editorCallback: (editor: Editor) => {
 				editor.replaceSelection(this.emptyTable());
 			},
 		});
@@ -52,4 +55,35 @@ export default class NltPlugin extends Plugin {
 	async saveSettings() {
 		await this.saveData(this.settings);
 	}
+
+	async onunload() {
+		await this.forcePostProcessorReload();
+	}
+
+	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;
+			const file = this.app.vault.getAbstractFileByPath(view.file.path);
+			if (file instanceof TFile) {
+				let content = await this.app.vault.read(file);
+
+				//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);
+				}
+				this.app.vault.modify(file, content);
+			}
+		}
+	}
 }

package-lock.json

@@ -20,7 +20,7 @@
     "@types/lodash": "^4.14.180",
     "@types/node": "^16.11.26",
     "@types/react": "^17.0.40",
-    "@types/react-dom": "^17.0.13",
+    "@types/react-dom": "^17.0.14",
     "@types/uuid": "^8.3.4",
     "@typescript-eslint/eslint-plugin": "^5.2.0",
     "@typescript-eslint/parser": "^5.2.0",
@@ -31,7 +31,6 @@
     "renamer": "^4.0.0",
     "tslib": "2.3.1",
     "typescript": "4.4.4",
-    "uninstall": "^0.0.0",
     "web-vitals": "^2.1.4"
   },
   "dependencies": {

package.json

@@ -48,6 +48,4 @@ export class NLTTable extends MarkdownRenderChild {
 		}
 		this.containerEl.replaceWith(this.el);
 	}
-
-	onunload(): void {}
 }

src/NLTTable.tsx

@@ -435,7 +435,7 @@ export default function App({ plugin, settings, data }: Props) {
 	}
 
 	return (
-		<div>
+		<div className="NLT__overflow">
 			<Table
 				headers={appData.headers.map((header) => {
 					return {

src/app/App.tsx

@@ -5,13 +5,21 @@
 	color: red;
 }
 
+.NLT__overflow {
+	overflow: auto;
+}
+
 /*
 * Button
 */
 .NLT__button {
 	padding: 4px !important;
 }
 
+.NLT__button--sm {
+	width: 50px;
+}
+
 .NLT__button--reset {
 	padding: 0;
 	border: 0;

src/app/app.css

@@ -8,12 +8,18 @@ interface Props {
 
 export default function ErrorDisplay({ data }: Props) {
 	return (
-		<ul>
-			{data.columnIds.map((column, i) => (
-				<li key={i} className="NLT__error">
-					Invalid type definition in column {column}
-				</li>
-			))}
-		</ul>
+		<>
+			{data.columnIds.length > 0 ? (
+				<ul>
+					{data.columnIds.map((column, i) => (
+						<li key={i} className="NLT__error">
+							Invalid type definition in column {column}
+						</li>
+					))}
+				</ul>
+			) : (
+				<div className="NLT__error">Missing type definition row</div>
+			)}
+		</>
 	);
 }

src/app/components/ErrorDisplay/index.tsx

@@ -46,7 +46,7 @@ export default function Table({ headers, rows, onAddColumn, onAddRow }: Props) {
 				<div className="NLT__tr">
 					<div className="NLT__td">
 						<button
-							className="NLT__button"
+							className="NLT__button NLT__button--sm"
 							onClick={() => onAddRow()}
 						>
 							New