Merge pull request #6 from rca-umb/autocomplete

Autocomplete

Author: rca-umb

CHANGELOG.md

@@ -4,6 +4,20 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## Unreleased
+
+### Added
+
+- Display text suggestions. A suggestions popup will appear when the cursor is directly after an anchor link with display text. There will be three suggestions one, for each of the display text formats that can be used with this plugin (no note name, note name and then heading(s), heading(s) and then note name).
+
+### Changed
+
+- Heading separators are now validated to not include link breaking characters `[]|#^`. If any of these characters are typed into the separator field, the character will be ignored and a warning will appear.
+
+### Fixed
+
+- Minor typos.
+
 ## [1.1.0] - 2025-1-25
 
 ### Removed

README.md

@@ -37,3 +37,5 @@ Show only the last heading: [[Title#Heading#Subheading#Subsubheading|Subsubheadi
 ```
 
 By default, the headings in the display text will be separated by a single space, but this can be changed to whatever you prefer. Some examples may be a comma (, ), colon (: ), or arrow (-> ). Just note that whatever is typed in the separator text box in the settings will be exactly what is used in the display text, nothing is added to it or removed from it.
+
+Additionally, there is an option for enabling display text alternative suggestions. This is a suggestions window which will appear when the cursor is next to an existing anchor link. All three display text formats described above will be available as suggestions regardless of the option chosen for automatic display text generation. This is useful for users who wish to use multiple formats.

main.ts

@@ -1,35 +1,46 @@
-import { App, Editor, Notice, Plugin, PluginSettingTab, Setting } from 'obsidian';
+import { App, Command, Editor, EditorPosition, EditorSuggest, EditorSuggestTriggerInfo, Notice, Plugin, PluginSettingTab, Setting, TFile } from 'obsidian';
+
+interface AnchorDisplaySuggestion {
+	displayText: string;
+	source: string;
+}
 
 interface AnchorDisplayTextSettings {
 	includeNoteName : string;
 	whichHeadings: string;
 	includeNotice: boolean;
-	sep : string;
+	sep: string;
+	suggest: boolean
 }
 
 const DEFAULT_SETTINGS: AnchorDisplayTextSettings = {
 	includeNoteName: 'headersOnly',
 	whichHeadings: 'allHeaders',
 	includeNotice: false,
-	sep: ' '
+	sep: ' ',
+	suggest: true
 }
 
 export default class AnchorDisplayText extends Plugin {
 	settings: AnchorDisplayTextSettings;
+	suggestionsRegistered: boolean = false;
 
 	async onload() {
 		await this.loadSettings();
-
 		this.addSettingTab(new AnchorDisplayTextSettingTab(this.app, this));
+		if (this.settings.suggest) {
+            this.registerEditorSuggest(new AnchorDisplaySuggest(this));
+			this.suggestionsRegistered = true;
+        }
 
 		// look for header link creation
 		this.registerEvent(
 			this.app.workspace.on('editor-change', (editor: Editor) => {
 				// get what is being typed
 				const cursor = editor.getCursor();
 				const currentLine = editor.getLine(cursor.line);
-				// match links to other anchor links WITHOUT an already defined display text
-				const headerLinkPattern = /\[\[([^\]]+#[^|]+)\]\]/;
+				// match anchor links WITHOUT an already defined display text
+				const headerLinkPattern = /\[\[([^\]]+#[^|\n\r\]]+)\]\]/;
 				const match = currentLine.slice(0, cursor.ch).match(headerLinkPattern);
 				if (match) {
 					// handle multiple subheadings
@@ -76,6 +87,99 @@ export default class AnchorDisplayText extends Plugin {
 
 }
 
+class AnchorDisplaySuggest extends EditorSuggest<AnchorDisplaySuggestion> {
+	private plugin: AnchorDisplayText;
+
+	constructor(plugin: AnchorDisplayText) {
+		super(plugin.app);
+		this.plugin = plugin;
+	}
+
+	onTrigger(cursor: EditorPosition, editor: Editor): EditorSuggestTriggerInfo | null {
+		// turns off suggestions if the setting is disabled but the app hasn't been reloaded
+		if (!this.plugin.settings.suggest) {
+            return null;
+        }
+		const currentLine = editor.getLine(cursor.line);
+		// match anchor links, even if they already have a display text
+		const headerLinkPattern = /(\[\[([^\]]+#[^\n\r\]]+)\]\])$/;
+		// only when cursor is immediately after the link
+		const match = currentLine.slice(0, cursor.ch).match(headerLinkPattern);
+
+		if(!match) {
+			return null;
+		}
+
+		return {
+			start: {
+				line: cursor.line,
+				ch: match.index! + match[1].length - 2, // 2 less to keep closing brackets
+			},
+			end: {
+				line: cursor.line,
+				ch: match.index! + match[1].length - 2,
+			},
+			query: match[2],
+		};
+	};
+
+	getSuggestions(context: EditorSuggestTriggerInfo): AnchorDisplaySuggestion[] {
+		// don't include existing display text in headings
+		const headings = context.query.split('|')[0].split('#');
+
+		let displayText = headings[1];
+		for (let i = 2; i < headings.length; i++) {
+			displayText += this.plugin.settings.sep + headings[i];
+		}
+		
+		const suggestion1: AnchorDisplaySuggestion = {
+			displayText: displayText,
+			source: 'Don\'t include note name',
+		}
+		const suggestion2: AnchorDisplaySuggestion = {
+			displayText: `${headings[0]}${this.plugin.settings.sep}${displayText}`,
+			source: 'Note name and than heading(s)',
+		}
+		const suggestion3: AnchorDisplaySuggestion = {
+			displayText: `${displayText}${this.plugin.settings.sep}${headings[0]}`,
+			source: 'Heading(s) and than note name',
+		}
+		return [suggestion1, suggestion2, suggestion3];
+	};
+
+	renderSuggestion(value: AnchorDisplaySuggestion, el: HTMLElement) {
+		// prompt instructions are a child of the suggestion container, which will
+		// be the parent of the parent the element which gets passed to this function
+		const suggestionEl = el.parentElement;
+		const suggestionContainerEl = suggestionEl!.parentElement;
+		// only need to render the prompt instructions once, but renderSuggestion gets called 
+		// on each suggestion
+		if (suggestionContainerEl!.childElementCount < 2) {
+			const promptInstructionsEl = suggestionContainerEl!.createDiv({cls: 'prompt-instructions'});
+			const instructionEl = promptInstructionsEl.createDiv({cls: 'prompt-instruction'});
+			instructionEl.createEl('span', {cls: 'prompt-instruction-command', text:'↵'});
+			instructionEl.createEl('span', {text:'to accept'});
+		}
+		// class of the passed element will be suggestion-item, but we need suggestion-item mod-complex
+		// to get appropriate styling
+		el.setAttribute('class', 'suggestion-item mod-complex');
+		const suggestionContentEl = el.createDiv({cls: 'suggestion-content'});
+		suggestionContentEl.createDiv({cls: 'suggestion-title', text: value.displayText});
+		suggestionContentEl.createDiv({cls: 'suggestion-note', text: value.source});
+	};
+
+	selectSuggestion(value: AnchorDisplaySuggestion, evt: MouseEvent | KeyboardEvent): void {
+		const editor = this.context!.editor;
+		// if there is already display text, will need to overwrite it
+		const displayTextPattern = /\|([^\]]+)/;
+		const match = this.context!.query.match(displayTextPattern);
+		if (match) {
+			this.context!.start.ch = this.context!.start.ch - match[0].length;
+		}
+		editor.replaceRange(`|${value.displayText}`, this.context!.start, this.context!.end, 'headerDisplayText');
+	};
+}
+
 class AnchorDisplayTextSettingTab extends PluginSettingTab {
 	plugin: AnchorDisplayText;
 
@@ -84,6 +188,19 @@ class AnchorDisplayTextSettingTab extends PluginSettingTab {
 		this.plugin = plugin;
 	}
 
+	validateSep(value: string): string {
+		let validValue: string = value;
+		for (const c of value) {
+			if ('[]#^|'.includes(c)) {
+				validValue = validValue.replace(c, '');
+			}
+		}
+		if (validValue != value) {
+			new Notice(`Separators cannot contain any of the following characters: []#^|`);
+		}
+		return validValue;
+	}
+
 	display(): void {
 		const {containerEl} = this;
 		containerEl.empty();
@@ -101,6 +218,7 @@ class AnchorDisplayTextSettingTab extends PluginSettingTab {
 					this.plugin.saveSettings();
 				});
 			});
+
 		new Setting(containerEl)
 			.setName('Include subheadings')
 			.setDesc('Change which headings and subheadings are in the display text.')
@@ -114,13 +232,14 @@ class AnchorDisplayTextSettingTab extends PluginSettingTab {
 					this.plugin.saveSettings();
 				});
 			});
+
 		new Setting(containerEl)
-			.setName('Seperator')
+			.setName('Separator')
 			.setDesc('Choose what to insert between headings instead of #.')
 			.addText(text => {
 				text.setValue(this.plugin.settings.sep);
 				text.onChange(value => {
-					this.plugin.settings.sep = value;
+					this.plugin.settings.sep = this.validateSep(value);
 					this.plugin.saveSettings();
 				});
 			});
@@ -135,5 +254,20 @@ class AnchorDisplayTextSettingTab extends PluginSettingTab {
 					this.plugin.saveSettings();
 				});
 			});
+
+		new Setting(containerEl)
+			.setName('Suggest alternatives')
+			.setDesc('Have a suggestion window to present alternative display text options when the cursor is directly after an anchor link.')
+			.addToggle(toggle => {
+				toggle.setValue(this.plugin.settings.suggest);
+				toggle.onChange(value => {
+					this.plugin.settings.suggest = value;
+					this.plugin.saveSettings();
+					if (!this.plugin.suggestionsRegistered) {
+						this.plugin.registerEditorSuggest(new AnchorDisplaySuggest(this.plugin));
+						this.plugin.suggestionsRegistered = true;
+					}
+				});
+			});
 	}
 }