Trilium Textpander

[AnhTuWally]

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

User Experience: Similar to how the "inline" linking by typing @ and auto-completion. 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"...

In trilium the inline linking was done through the mentions system in CKEDitor 5 here.

trilium/src/public/app/widgets/type_widgets/editable_text.js

Line 169 in 82a437f

await this.watchdog.create(this.$editor[0], {

My plan is to use a Fronted JS script to execute something similar to this to the current editor. This approach might be similar to the Syntax Highlight Widget here https://github.com/antoniotejada/Trilium-SyntaxHighlightWidget/blob/c01a42bb56d233de396a7ce199aeb12b7852a645/SyntaxHighlightWidget.js#L215

Unfortunately, I can't seem to access the editor following this method.

However, I realized that it might be simpler to access the current editor overriding the doRender() of NoteContextAwareWidget, which will get the editor and add the textpander's mention feature to CKEDitor 5.

This is what I've tried so far in doRender method

$(document).ready(function (){
            
    let editor = $('.note-detail-editable-text-editor');
    api.log(`${editor.html()}`);
        });

However, it printed out as undefied for me. Please give me some guidance to continue this project.

References:

• https://ckeditor.com/docs/ckeditor5/latest/features/mentions.html

[meichthys]

If you were looking to add this as a feature to Trilium, you can ask questions, or submit a PR to TriliumNext as Trilium is in maintenance mode.