Merge pull request #9 from Quorafind/chore-review

feat: remove icon

src/components/Picker.ts

@@ -1,17 +1,30 @@
-import { App, Modal } from "obsidian";
+import { App, ExtraButtonComponent, Modal } from "obsidian";
 import PickerComponent from './UI/PickerComponent.svelte';
+import type FilePropertyEnhancerPlugin from "../filePropertyEnhancerIndex";
+import { removeIcon } from "../utils/utils";
 
 export class PickerModal extends Modal {
 	private cb: (emoji: any) => void;
 	private picker: PickerComponent;
+	private plugin: FilePropertyEnhancerPlugin;
+	private property: any;
 
-	constructor(app: App, cb: (emoji: any) => void) {
+	constructor(plugin: FilePropertyEnhancerPlugin, app: App, property: any, cb: (emoji: any) => void) {
 		super(app);
 		this.cb = cb;
+		this.plugin = plugin;
+		this.property = property;
 	}
 
 	onOpen() {
 		this.containerEl.toggleClass("icon-picker-modal", true);
+		const buttonEl = createEl('div', {cls: 'icon-delete-btn'});
+		// Insert the button into the modal the first child of the contentEl
+		new ExtraButtonComponent(buttonEl).setIcon('trash').onClick(async () => {
+			await removeIcon(this.plugin, this.property);
+			this.close();
+		});
+		this.modalEl.insertBefore(buttonEl, this.modalEl.firstChild);
 		this.picker = new PickerComponent({
 			target: (this as any).contentEl, props: {}
 		});

src/filePropertyEnhancerIndex.ts

@@ -1,8 +1,7 @@
 import { MarkdownRenderer, Plugin, setIcon } from 'obsidian';
 import { around } from "monkey-around";
 import "./styles/custom.css";
-import { createModal, getIcon, setPropertyIcon } from "./utils/utils";
-import MetaManager from "./components/MetaManager";
+import { createModal, getIcon, removeIcon, setPropertyIcon } from "./utils/utils";
 import "./styles/styles.scss";
 import type { filePropertyEnhancerSettings } from "./filePropertyEnhancerSettings";
 import { DEFAULT_SETTINGS } from "./filePropertyEnhancerSettings";
@@ -28,7 +27,8 @@ const SHORTCUTS: ShortcutConfig[] = [
 
 export default class FilePropertyEnhancerPlugin extends Plugin {
 	settings: filePropertyEnhancerSettings;
-	metaManager: MetaManager;
+
+	// metaManager: MetaManager;
 
 	async onload() {
 		await this.loadSettings();
@@ -221,6 +221,7 @@ export default class FilePropertyEnhancerPlugin extends Plugin {
 							}
 							if (this.editing) return;
 							this.inputEl.empty();
+							this.inputEl.toggleClass('markdown-rendered', true);
 							await MarkdownRenderer.render(
 								this.ctx.app,
 								this.value,

src/styles/custom.css

@@ -47,10 +47,23 @@ span.metadata-property-icon {
 	background-color: var(--metadata-property-icon-hover-background-color);
 }
 
+.metadata-input-longtext.markdown-rendered {
+	white-space: pre-wrap;
+	-webkit-box-orient: unset;
+	-webkit-line-clamp: unset;
+
+	max-height: max-content;
+}
+
+.metadata-input-longtext.markdown-rendered ul, .metadata-input-longtext.markdown-rendered ol {
+	padding-inline-start: var(--list-indent);
+	margin-block-start: 0;
+	margin-block-end: 0;
+}
+
 /*.metadata-property-key, .metadata-property {*/
 /*    height: var(--input-height);*/
 /*}*/
-
 .metadata-property-key {
 	width: calc(var(--metadata-label-width) + var(--size-4-1));
 }
@@ -212,3 +225,23 @@ li.file-property-enhancer-tab-header {
 
 	transition: padding 0.2s ease-in-out;
 }
+
+
+.icon-delete-btn {
+	cursor: var(--cursor);
+	position: absolute;
+	top: var(--size-2-2);
+	right: 40px;
+	font-size: 24px;
+	line-height: 20px;
+	height: 28px;
+	width: 28px;
+	padding: 0 var(--size-2-2);
+	border-radius: var(--radius-s);
+	color: var(--text-muted);
+}
+
+.icon-delete-btn .clickable-icon {
+	height: 28px;
+	width: 28px;
+}