From cac8b52ffbc0ff3bb8a686d16767f7e98568f384 Mon Sep 17 00:00:00 2001
From: phibr0 <bronzel.phillip@gmail.com>
Date: Mon, 11 Jul 2022 12:45:50 +0200
Subject: [PATCH] Compatibility with Obsidian 0.15.4's new suggestion dom
 structure

---
 manifest.json             |  2 +-
 package.json              |  2 +-
 src/main.ts               | 15 +++++++--------
 src/ui/addCommandModal.ts |  7 +++++--
 src/ui/chooseIconModal.ts |  8 ++++++--
 5 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/manifest.json b/manifest.json
index cdb1341..0844d21 100644
--- a/manifest.json
+++ b/manifest.json
@@ -1,7 +1,7 @@
 {
 	"id": "cmdr",
 	"name": "Commander",
-	"version": "0.0.9",
+	"version": "0.0.10",
 	"minAppVersion": "0.12.0",
 	"description": "Customize your workspace by adding commands /everywhere/.",
 	"author": "jsmorabito & phibr0",
diff --git a/package.json b/package.json
index f3420f7..a51a433 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "cmdr",
-	"version": "0.0.9",
+	"version": "0.0.10",
 	"description": "Customize your workspace by adding commands /everywhere/.",
 	"main": "main.js",
 	"scripts": {
diff --git a/src/main.ts b/src/main.ts
index fc07a59..88ad4c2 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -10,11 +10,10 @@ import {
 	TitleBarManager,
 } from "./manager/commands";
 import { CommanderSettings, Macro } from './types';
-import MacroModal from './ui/macroModal';
 import CommanderSettingTab from './ui/settingTab';
 import SettingTabModal from './ui/settingTabModal';
 
-import 'beautiful-react-diagrams/styles.css';
+//import 'beautiful-react-diagrams/styles.css';
 import "./styles.scss";
 import { updateHiderStylesheet } from './util';
 
@@ -51,11 +50,11 @@ export default class CommanderPlugin extends Plugin {
 			callback: () => new SettingTabModal(this).open(),
 		});
 
-		this.addCommand({
-			name: t("Open Macro Builder"),
-			id: "open-macro-builder",
-			callback: () => new MacroModal(this).open(),
-		});
+		// this.addCommand({
+		// 	name: t("Open Macro Builder"),
+		// 	id: "open-macro-builder",
+		// 	callback: () => new MacroModal(this).open(),
+		// });
 
 		this.registerEvent(
 			app.workspace.on('editor-menu', this.manager.editorMenu.applyEditorMenuCommands(this)),
@@ -73,7 +72,7 @@ export default class CommanderPlugin extends Plugin {
 	}
 
 	// Macros become quite large objects, because we are saving the whole flowchart state (including position, etc.)
-	// This is why they are encoded into a single line base64 string to save space
+	// This is why they are encoded into a single line base64 string to save space (wip)
 	private async loadSettings(): Promise<void> {
 		const data = Object.assign({}, DEFAULT_SETTINGS, await this.loadData());
 		data.macros = data.macros.map((str: string) => JSON.parse(window.atob(str)));
diff --git a/src/ui/addCommandModal.ts b/src/ui/addCommandModal.ts
index 03211a5..f4a3b6e 100644
--- a/src/ui/addCommandModal.ts
+++ b/src/ui/addCommandModal.ts
@@ -38,11 +38,14 @@ export default class AddCommandModal extends FuzzySuggestModal<Command> {
 	}
 
 	public renderSuggestion(item: FuzzyMatch<Command>, el: HTMLElement): void {
-		super.renderSuggestion(item, el);
+		el.addClass("mod-complex");
+		const content = el.createDiv({ cls: "suggestion-content" });
+		content.createDiv({ cls: "suggestion-title" }).setText(item.item.name);
 
 		//Append the icon if available
 		if (item.item.icon) {
-			setIcon(el.createSpan({ cls: "suggestion-flair" }), item.item.icon);
+			const aux = el.createDiv({ cls: "suggestion-aux" });
+			setIcon(aux.createSpan({ cls: "suggestion-flair" }), item.item.icon);
 		}
 	}
 
diff --git a/src/ui/chooseIconModal.ts b/src/ui/chooseIconModal.ts
index 1cfa1e7..942801a 100644
--- a/src/ui/chooseIconModal.ts
+++ b/src/ui/chooseIconModal.ts
@@ -37,8 +37,12 @@ export default class ChooseIconModal extends FuzzySuggestModal<string> {
 	}
 
 	public renderSuggestion(item: FuzzyMatch<string>, el: HTMLElement): void {
-		super.renderSuggestion(item, el);
-		setIcon(el.createSpan({ cls: "suggestion-flair" }), item.item);
+		el.addClass("mod-complex");
+		const content = el.createDiv({ cls: "suggestion-content" });
+		content.createDiv({ cls: "suggestion-title" }).setText(item.item.replace(/-/g, " ").replace(/(^\w{1})|(\s+\w{1})/g, letter => letter.toUpperCase()));
+
+		const aux = el.createDiv({ cls: "suggestion-aux" });
+		setIcon(aux.createSpan({ cls: "suggestion-flair" }), item.item);
 	}
 
 	public getItems(): string[] {