feat: add setting for highlight duration

src/main.ts

@@ -5,6 +5,8 @@ import { EditorView } from "@codemirror/view";
 import { MarkViewPlugin, markViewPlugin } from "./markViewPlugin";
 import { Vim, MarkdownViewExtended, vimEvents } from "./types";
 
+import { Settings, SettingsTab, DEFAULT_SETTINGS } from "./settings"
+
 // TODO: option to change highlight duration
 // TODO: option to change the colour of highlight
 // TODO: option to supress in visual mode
@@ -20,6 +22,8 @@ export default class VimYankHighlightPlugin extends Plugin {
     codeMirrorVimObject: Vim;
     timeoutHandle: number;
 
+    settings: Settings;
+
     private get activeView() {
         return this.app.workspace.getActiveViewOfType(
             MarkdownView
@@ -42,6 +46,9 @@ export default class VimYankHighlightPlugin extends Plugin {
     }
 
     async onload() {
+        await this.loadSettings()
+        this.addSettingTab(new SettingsTab(this.app, this))
+
         this.registerEditorExtension([markViewPlugin]);
 
         this.registerEvent(
@@ -116,7 +123,15 @@ export default class VimYankHighlightPlugin extends Plugin {
         clearTimeout(this.timeoutHandle);
         this.timeoutHandle = window.setTimeout(() => {
             plugin.cleanYankText(timeoutEditorView);
-        }, 500);
+        }, this.settings.highlightDuration);
+    }
+
+    async loadSettings() {
+        this.settings = Object.assign({}, DEFAULT_SETTINGS, await this.loadData());
+    }
+
+    async saveSettings() {
+        await this.saveData(this.settings);
     }
 
     onunload() {

src/settings.ts

@@ -0,0 +1,44 @@
+import VimYankHighlightPlugin from "./main";
+import { App, PluginSettingTab, Setting } from "obsidian";
+
+export interface Settings {
+    highlightDuration: number
+}
+
+export const DEFAULT_SETTINGS: Partial<Settings> = {
+    highlightDuration: 500
+}
+
+export class SettingsTab extends PluginSettingTab {
+    plugin: VimYankHighlightPlugin;
+
+    constructor(app: App, plugin: VimYankHighlightPlugin) {
+        super(app, plugin);
+        this.plugin = plugin;
+    }
+
+    display(): void {
+        let { containerEl } = this;
+
+        containerEl.empty();
+
+    new Setting(containerEl)
+        .setName("Date duration")
+        .setDesc("Duration in milliseconds for the highlights")
+        .addText((text) =>
+            text
+                .setPlaceholder("500")
+                .setValue(this.plugin.settings.highlightDuration.toString())
+                .onChange(async (durationString) => {
+                    const duration = parseInt(durationString);
+                    if (isNaN(duration)) {
+                        this.plugin.settings.highlightDuration = DEFAULT_SETTINGS.highlightDuration!;
+                        await this.plugin.saveSettings();
+                        return;
+                    }
+                    this.plugin.settings.highlightDuration = duration;
+                    await this.plugin.saveSettings();
+                })
+        );
+    }
+}