allow editing css snippets (#11)

README.md

@@ -32,6 +32,13 @@ the modal.
 
 ![fence-editing.gif](fence-editing.gif)
 
+## New Feature: Allows editing CSS Snippets
+
+Search for the command "Edit CSS Snippet" to search CSS Snippets that exist in your
+Obsidian vault and edit them in the Monaco Editor.
+
+![css-files.gif](css-files.gif)
+
 ## More Screenshots
 
 ![img_2.png](img_2.png)

src/chooseCssFileModal.ts

@@ -0,0 +1,29 @@
+import { SuggestModal, TFile } from "obsidian";
+import { CodeEditorView } from "./codeEditorView";
+import CodeFilesPlugin from "./codeFilesPlugin";
+
+export class ChooseCssFileModal extends SuggestModal<string> {
+	constructor(private plugin: CodeFilesPlugin, private cssFiles: string[]) {
+		super(plugin.app);
+	}
+
+	getSuggestions(query: string): string[] {
+		return this.cssFiles.filter((item) =>
+			item.toLowerCase().includes(query.toLowerCase())
+		);
+	}
+
+	onChooseSuggestion(item: string): any {
+		CodeEditorView.openFile(
+			// @ts-ignore
+			new TFile(this.app.vault, item),
+			this.plugin
+		);
+	}
+
+	renderSuggestion(value: any, el: HTMLElement): any {
+		// eslint-disable-next-line no-param-reassign
+		el.innerHTML = value;
+		return el;
+	}
+}

src/codeEditorView.ts

@@ -43,7 +43,8 @@ export class CodeEditorView extends TextFileView {
 			this.plugin,
 			getLanguage(file.extension),
 			this.initialValue,
-			this.getContext(file)
+			this.getContext(file),
+			() => this.requestSave()
 		);
 
 		this.contentEl.style.overflow = "hidden";
@@ -71,4 +72,14 @@ export class CodeEditorView extends TextFileView {
 		this.initialValue = data;
 		this.codeEditor?.setValue(data);
 	}
+
+	static openFile(file: TFile, plugin: CodeFilesPlugin) {
+		const leaf = plugin.app.workspace.getLeaf(true);
+		const view = new CodeEditorView(leaf, plugin);
+		view.file = file;
+		view.onLoadFile(file);
+		leaf.open(view);
+		view.load();
+		plugin.app.workspace.revealLeaf(leaf);
+	}
 }

src/codeFilesPlugin.ts

@@ -1,10 +1,12 @@
-import { Plugin } from "obsidian";
+import { Plugin, SuggestModal, TAbstractFile, TFile } from "obsidian";
 import { DEFAULT_SETTINGS, MyPluginSettings, viewType } from "./common";
 import { CodeEditorView } from "./codeEditorView";
 import { CreateCodeFileModal } from "./createCodeFileModal";
 import { CodeFilesSettingsTab } from "./codeFilesSettingsTab";
 import { FenceEditModal } from "./fenceEditModal";
 import { FenceEditContext } from "./fenceEditContext";
+import { CssFile } from "./cssFile";
+import { ChooseCssFileModal } from "./chooseCssFileModal";
 
 export default class CodeFilesPlugin extends Plugin {
 	settings: MyPluginSettings;
@@ -46,13 +48,21 @@ export default class CodeFilesPlugin extends Plugin {
 					return;
 				}
 
-				const leaf = this.app.workspace.getLeaf(true);
-				const view = new CodeEditorView(leaf, this);
-				view.file = file;
-				view.onLoadFile(file);
-				leaf.open(view);
-				view.load();
-				this.app.workspace.revealLeaf(leaf);
+				CodeEditorView.openFile(file, this);
+			},
+		});
+
+		this.addCommand({
+			id: "open-css-snippet",
+			name: "Edit CSS Snippet",
+			callback: async () => {
+				const cssFiles = (
+					await this.app.vault.adapter.list(
+						`${this.app.vault.configDir}/snippets`
+					)
+				).files;
+				const modal = new ChooseCssFileModal(this, cssFiles);
+				modal.open();
 			},
 		});
 

src/cssFile.ts

@@ -0,0 +1,15 @@
+import { TFile, Vault } from "obsidian";
+
+export class CssFile extends TFile {
+	constructor(path: string, vault: Vault) {
+		// @ts-ignore
+		super(vault, path);
+		const pieces = path.split("/");
+		this.basename = pieces[pieces.length - 1];
+		this.extension = "css";
+		this.name = this.basename;
+		this.parent = null;
+		this.path = path;
+		this.vault = vault;
+	}
+}