test suggestions api

main.ts

@@ -1,4 +1,4 @@
-import { App, Editor, MarkdownView, Modal, Notice, Plugin, PluginSettingTab, Setting } from 'obsidian';
+import { App, Editor, MarkdownView, Modal, Notice, Plugin, PluginSettingTab, Setting, EditorChange, EditorPosition, EditorSuggest, EditorSuggestContext, EditorSuggestTriggerInfo, TFile } from 'obsidian';
 
 // Remember to rename these classes and interfaces!
 
@@ -12,69 +12,15 @@ const DEFAULT_SETTINGS: MyPluginSettings = {
 
 export default class MyPlugin extends Plugin {
 	settings: MyPluginSettings;
+	suggester: DataviewSuggester
 
 	async onload() {
 		await this.loadSettings();
 	
-		// This creates an icon in the left ribbon.
+		// register suggester
-		const ribbonIconEl = this.addRibbonIcon('dice', 'Sample Plugin', (evt: MouseEvent) => {
+		this.suggester = new DataviewSuggester(this);
-			// Called when the user clicks the icon.
+		this.registerEditorSuggest(this.suggester);
-			new Notice('This is a notice!');
-		});
-		// Perform additional things with the ribbon
-		ribbonIconEl.addClass('my-plugin-ribbon-class');
 
-		// This adds a status bar item to the bottom of the app. Does not work on mobile apps.
-		const statusBarItemEl = this.addStatusBarItem();
-		statusBarItemEl.setText('Status Bar Text');
-
-		// This adds a simple command that can be triggered anywhere
-		this.addCommand({
-			id: 'open-sample-modal-simple',
-			name: 'Open sample modal (simple)',
-			callback: () => {
-				new SampleModal(this.app).open();
-			}
-		});
-		// This adds an editor command that can perform some operation on the current editor instance
-		this.addCommand({
-			id: 'sample-editor-command',
-			name: 'Sample editor command',
-			editorCallback: (editor: Editor, view: MarkdownView) => {
-				console.log(editor.getSelection());
-				editor.replaceSelection('Sample Editor Command');
-			}
-		});
-		// This adds a complex command that can check whether the current state of the app allows execution of the command
-		this.addCommand({
-			id: 'open-sample-modal-complex',
-			name: 'Open sample modal (complex)',
-			checkCallback: (checking: boolean) => {
-				// Conditions to check
-				const markdownView = this.app.workspace.getActiveViewOfType(MarkdownView);
-				if (markdownView) {
-					// If checking is true, we're simply "checking" if the command can be run.
-					// If checking is false, then we want to actually perform the operation.
-					if (!checking) {
-						new SampleModal(this.app).open();
-					}
-
-					// This command will only show up in Command Palette when the check function returns true
-					return true;
-				}
-			}
-		});
-
-		// This adds a settings tab so the user can configure various aspects of the plugin
-		this.addSettingTab(new SampleSettingTab(this.app, this));
-
-		// If the plugin hooks up any global DOM events (on parts of the app that doesn't belong to this plugin)
-		// Using this function will automatically remove the event listener when this plugin is disabled.
-		this.registerDomEvent(document, 'click', (evt: MouseEvent) => {
-			console.log('click', evt);
-		});
-
-		// When registering intervals, this function will automatically clear the interval when the plugin is disabled.
 		this.registerInterval(window.setInterval(() => console.log('setInterval'), 5 * 60 * 1000));
 	}
 
@@ -90,23 +36,6 @@ export default class MyPlugin extends Plugin {
 		await this.saveData(this.settings);
 	}
 }
-
-class SampleModal extends Modal {
-	constructor(app: App) {
-		super(app);
-	}
-
-	onOpen() {
-		const {contentEl} = this;
-		contentEl.setText('Woah!');
-	}
-
-	onClose() {
-		const {contentEl} = this;
-		contentEl.empty();
-	}
-}
-
 class SampleSettingTab extends PluginSettingTab {
 	plugin: MyPlugin;
 
@@ -132,3 +61,56 @@ class SampleSettingTab extends PluginSettingTab {
 				}));
 	}
 }
+
+class DataviewSuggester extends EditorSuggest<String> {
+
+	constructor(plugin: Plugin) {
+		super(plugin.app)
+	}
+
+	onTrigger(
+		cursor: EditorPosition,
+		editor: Editor,
+		file: TFile,
+	): EditorSuggestTriggerInfo | null {
+		const line = editor.getLine(cursor.line);
+		const regex = /\((.*?)\)/g
+		
+		let match
+		while((match = regex.exec(line)) !== null) {
+
+			// check if cursor is positioned inside the match
+			const cursorInMatch = cursor.ch > match.index && cursor.ch <= match.index + match[1].length + 1
+			if (cursorInMatch) {
+
+				return {
+					start: { line: cursor.line, ch: match.index+1 },
+					end: { line: cursor.line, ch: match.index + match[1].length+1 },
+					query: match[1],
+				};
+			}
+
+		} 
+		return null;
+	}
+
+	getSuggestions(context: EditorSuggestContext): string[] | Promise<string[]> {
+		return ["hello", "world"]
+	}
+
+	renderSuggestion(value: string, el: HTMLElement): void {
+		el.setText(value)
+	}
+
+	selectSuggestion(value: string, evt: MouseEvent | KeyboardEvent): void {
+		console.log("selected", value)
+		const { editor, start, end } = this.context!;
+		editor.replaceRange(value, start, end);
+
+		const newCursorPos = {
+			line: end.line + 1,
+			ch: 0,
+		};
+		editor.setCursor(newCursorPos);
+	}
+}

tsconfig.json

@@ -15,7 +15,8 @@
       "DOM",
       "ES5",
       "ES6",
-      "ES7"
+      "ES7",
+      "es2020.string"
     ]
   },
   "include": [