trilium textpander help

[AnhTuWally]

Abstract: A Textpander widget that allow user to do text expand in trilium.

User Experience: Similar to how the "inline" linking by typeing @ and autocompletion. In this case we just type : and a list of available options appears. For example if we type :dat then the options will show "date -> 2024/05/31", "dat is cool"... User type.

In trilium the inline linking was done through the mentions system in CKEDitor 5 here.
https://github.com/zadam/trilium/blob/82a437f2a83fc10299f3205713f7dcb04e2d047c/src/public/app/widgets/type_widgets/editable_text.js#L169

My plan is to use a Frontend JS script to execute something similar to this to the current editor.

Here is what I've frankensteined together so far.

To prevent breaking trilium accidentally, the widget only activate when you press "ctrl+alt+x"

This doesn't work yet. Can some body point me to the right direction, please?

module.exports = new TextPanderWidget();


const mentionSetup = {
    feeds: [
        {
            marker: ':',
            feed: queryText => noteAutocompleteService.autocompleteSourceForCKEditor(queryText),
            itemRenderer: item => {
                const itemElement = document.createElement('button');

                itemElement.innerHTML = `${item.highlightedNotePathTitle} `;

                return itemElement;
            },
            minimumCharacters: 0
        }
    ]
};


async function activateTextpander() {

    get the CKEditor
    let editor = await api.getActiveContextTextEditor();
    
    
    let watchdog = new EditorWatchdog(BalloonEditor, {
                minimumNonErrorTimePeriod: 5000,
                crashNumberLimit: 3,
                saveInterval: 5000
        });
 
    
        await watchdog.create(editor, {
            placeholder: "Type the content of your note here ...",
            mention: mentionSetup,
            math: {
                engine: 'katex',
                outputType: 'span', // or script
                lazyLoad: async () => await libraryLoader.requireLibrary(libraryLoader.KATEX),
                forceOutputType: false, // forces output to use outputType
                enablePreview: true // Enable preview view
            }
        });
}

api.bindGlobalShortcut('ctrl+alt+x', remove_format);