wordPanel.ts

import { Plugin } from "obsidian";

class SearchableWordsPanel extends Plugin {
    private containerEl: HTMLElement;
    private similarWords: string[];

    constructor(app: App, similarWords: string[]) {
        super(app);
        this.similarWords = similarWords;
    }

    async onload() {
        // create the container element
        this.containerEl = document.createElement("div");
        this.containerEl.addClass("tlf-synonym-panel");

        // create the list element and populate it with clickable items
        const listEl = document.createElement("ul");
        listEl.addClass("tlf-synonym-list");
        this.containerEl.appendChild(listEl);

        for (const word of this.similarWords) {
            const itemEl = document.createElement("li");
            itemEl.addClass("tlf-synonym-item");
            itemEl.setText(word);
            itemEl.addEventListener("click", () => {
                this.replaceSelectionWithWord(word);
            });
            listEl.appendChild(itemEl);
        }

        // create the markdown preview
        const preview = this.app.workspace.createMarkdownPreview(
            "Synonyms",
            this.containerEl
        );

        // register the unload function to remove the preview
        this.register(() => preview && preview.destroy());
    }

    private replaceSelectionWithWord(word: string) {
        const editor = this.app.workspace.getActiveTextEditor();
        if (editor) {
            editor.replaceSelection(word);
        }
    }
}

export default SearchableWordsPanel;