Create cache dir and gitignore.

main.ts

@@ -1,5 +1,5 @@
 import { MarkdownView, Plugin, editorLivePreviewField, editorInfoField, MarkdownFileInfo, MarkdownPostProcessorContext, Notice, debounce, normalizePath } from "obsidian";
-import { SettingTab, SettingsManager } from "src/SettingTab";
+import { SETTING_NAME, SettingTab, SettingsManager } from "src/SettingTab";
 import { CacheManager, CacheMetadataItem, CacheResourceType } from "src/CacheManager";
 import { EditorView, ViewUpdate } from "@codemirror/view";
 
@@ -9,19 +9,28 @@ export default class PluginImplementation extends Plugin {
 
 	async onload() {
 
-		const pluginDir = this.manifest.dir;
-		if (!pluginDir) {
-			const errorMsg = `${this.manifest.name}: Cannot load because plugin directory is unknown`;
-			new Notice(errorMsg, 0);
-			throw new Error(errorMsg);
-		}
-		this.cacheManager = new CacheManager(this.app, pluginDir + "/cache");
+		//#region Settings 
 
 		this.settingsManager = new SettingsManager(
 			await this.loadData(),
 			async (settings) => await this.saveData(settings),
+			(name) => {
+				if (name === SETTING_NAME.gitIgnoreCacheDir)
+					this.ensureCacheDir();
+			}
 		);
 		this.addSettingTab(new SettingTab(this, this.settingsManager));
+		
+		//#endregion
+		
+		//#region Cache 
+		
+		this.cacheManager = new CacheManager(this.app, this.cacheDir);
+		this.ensureCacheDir();
+		
+		//#endregion
+
+		//#region Register 
 
 		// The post processor runs after the Markdown has been processed into HTML. It lets you add, remove, or replace HTML elements to the rendered document.
 		this.registerMarkdownPostProcessor((element, context) => {
@@ -53,12 +62,50 @@ export default class PluginImplementation extends Plugin {
 				}
 			}
 		});
+
+		//#endregion
 	}
 
 	onunload() {
 		this.cacheManager?.cancelAllOngoing();
 	}
 
+	/**
+	 * Will be set once it's ensured that `this.manifest.dir` is set. 
+	 * @throws {Error} - If this.manifest.dir isn't set.
+	 */
+	get cacheDir(): string {
+		if (this._cacheDir === undefined) {
+			const pluginDir = this.manifest.dir;
+			if (pluginDir) {
+				this._cacheDir = `${pluginDir}/cache`;
+			}
+			else {
+				const errorMsg = `${this.manifest.name}: Cannot load because plugin directory is unknown`;
+				new Notice(errorMsg);
+				throw new Error(errorMsg);
+			}
+		}
+		return this._cacheDir;
+	}
+	_cacheDir: string | undefined;
+
+	async ensureCacheDir() {
+		const ensureGitIgnore = this.settingsManager.settings.gitIgnoreCacheDir;
+
+		const cacheFolderExists = await this.app.vault.adapter.exists(this.cacheDir);
+		if (!cacheFolderExists)
+			await this.app.vault.adapter.mkdir(this.cacheDir);
+
+		const gitignorePath = `${this.cacheDir}/.gitignore`;
+		const gitignoreExists = await this.app.vault.adapter.exists(gitignorePath);
+
+		if (ensureGitIgnore && !gitignoreExists)
+			await this.app.vault.adapter.write(gitignorePath, "*");
+		else if (!ensureGitIgnore && gitignoreExists)
+			await this.app.vault.adapter.remove(gitignorePath);
+	}
+
 	processLivePreview(update: ViewUpdate) {
 		const view = update.view;
 		const isInLivePreview = view.state.field(editorLivePreviewField);
@@ -100,7 +147,7 @@ export default class PluginImplementation extends Plugin {
 
 		imageElements
 			.filter((imageElement => imageElement.src.length > 0)) // In case src hasn't been set yet.
-			.filter((imageElement) => imageElement.dataset.comeDownCacheInitiated !== "true" ) // Avoid stampede.
+			.filter((imageElement) => imageElement.dataset.comeDownCacheInitiated !== "true") // Avoid stampede.
 			.forEach((imageElement) => {
 
 				const metadata: CacheMetadataItem = {
@@ -110,11 +157,11 @@ export default class PluginImplementation extends Plugin {
 				};
 
 				const originalAltText = imageElement.alt;
-				
+
 				imageElement.alt = "Loading...";
 				imageElement.dataset.comeDownCacheInitiated = "true";
 				imageElement.src = `data:image/svg+xml;charset=utf-8,${PluginImplementation.ENCODED_LOADING_ICON}`;
-				
+
 				console.log(`handleImage: ${metadata.key}, alt: ${originalAltText}`);
 
 				this.cacheManager.getCache(metadata, (result) => {

src/SettingTab.ts

@@ -7,15 +7,21 @@ interface PluginSettings {
 
 const DEFAULT_SETTINGS: PluginSettings = {
 	gitIgnoreCacheDir: true,
-}
+} as const;
+
+export const SETTING_NAME = {
+	gitIgnoreCacheDir: "gitIgnoreCacheDir",
+} as const;
 
 export class SettingsManager {
 	settings: PluginSettings;
 	save: () => Promise<void>;
+	onChangedCallback: (name: string) => void | undefined;
 
-	constructor(settings: any, save: (settings: PluginSettings) => Promise<void>) {
+	constructor(settings: any, save: (settings: PluginSettings) => Promise<void>, onChangedCallback: (name: string) => void | undefined) {
 		this.settings = Object.assign({}, DEFAULT_SETTINGS, settings);
 		this.save = () => save(this.settings);
+		this.onChangedCallback = onChangedCallback;				
 	}
 }
 
@@ -34,12 +40,13 @@ export class SettingTab extends PluginSettingTab {
 
 		new Setting(containerEl)
 			.setName("Exclude cache from Git")
-			.setDesc("Enable to automatically add a .gitignore file to your Obsidian cache, preventing it from being committed to Git.")
+			.setDesc("If you are using Git to backup/sync your vault: toggle this on to automatically add a .gitignore file to the cache folder, which will prevent cached files from being committed to Git; disable to remove the file.")
 			.addToggle((toggle) => {
 				toggle.setValue(this.settingsManager.settings.gitIgnoreCacheDir);
 				toggle.onChange(async (value) => {
 					this.settingsManager.settings.gitIgnoreCacheDir = value;
 					await this.settingsManager.save();
+					this.settingsManager?.onChangedCallback(SETTING_NAME.gitIgnoreCacheDir);
 				});
 			})
 	}