New Button to Convert $formulas$ in Note

[lhx332251335]

Introduction

This script is designed to convert math formulas wrapped in single dollar signs ($) and double dollar signs ($$) into HTML format within Trilium Notes. A new button is added to the center pane, which you can click to perform the conversion. Formulas wrapped in single dollar signs are treated as inline math, while those wrapped in double dollar signs are treated as block math. Please note that using this method for formula conversion cannot be undone using the Ctrl+Z shortcut.

Usage Instructions

1. Create a Script Note:

   • Create a new note and change its type to JS Frontend.

2. Copy the Script:

   • Copy the following script into the newly created note:

class ReplaceFormulasButton extends api.NoteContextAwareWidget {

    get parentWidget() {
        return 'center-pane';
    }

    doRender() {
        this.$widget = $(`<style type="text/css">
            .replace-formulas-icon.ribbon-tab-title-icon.bx:before {
                content: "\\1D4C1"; 
            }
        </style>`);
        return this.$widget;
    }

    async refreshWithNote() {
        $(document).ready(() => {
            if (!$("div.component.note-split:not(.hidden-ext) div.ribbon-tab-title").hasClass('replace-formulas-button')) {
                $("div.component.note-split:not(.hidden-ext) .ribbon-tab-title:not(.backToHis)").last().after(`
                    <div class="replace-formulas-button ribbon-tab-spacer"></div>
                    <div class="replace-formulas-button ribbon-tab-title">
                        <span class="replace-formulas-icon ribbon-tab-title-icon bx" title="Replace Formulas"></span>
                    </div>
                `);
            }
            $('div.component.note-split:not(.hidden-ext) div.replace-formulas-button').off("click", replaceFormulas);
            $('div.component.note-split:not(.hidden-ext) div.replace-formulas-button').on("click", replaceFormulas);
        });
    }
}

var replaceFormulas = function () {
    api.getActiveContextTextEditor().then(editor => {
        const data = editor.getData();

        const regex = /\$\$(.*?)\$\$|\$(.*?)\$/gs;
        let replacedData = data;
        let matchFound = false;

        replacedData = replacedData.replace(regex, (match, p1, p2) => {
            matchFound = true;
            if (p1) {
                return `<span class="math-tex">\\[${p1.replace(/<br\s*\/?>/gi, '')}\\]</span>`;
            } else if (p2) {
                return `<span class="math-tex">\\(${p2.replace(/<br\s*\/?>/gi, '')}\\)</span>`;
            }
        });

        if (matchFound) {
            editor.setData(replacedData);
            api.showMessage('Formulas have been successfully replaced.');
        } else {
            api.showMessage('No formulas found to replace.');
        }
    }).catch(error => {
        console.error('Failed to get CKEditor instance:', error);
        api.showMessage('An error occurred while trying to replace formulas.');
    });
};

module.exports = new ReplaceFormulasButton();

3. Add Widget Attribute:

   • In the Owned Attributes section of the note, add #widget.

4. Refresh Trilium:

   • Press Ctrl+Shift+R to refresh Trilium Notes to apply the script.

[Nriver]

added to https://github.com/Nriver/awesome-trilium

[CsatiZoltan]

@lhx332251335 I don't see "JS Frontend" note type. Where do you set it?

[lhx332251335]

If you don't have the option, click the trilium icon on the top-left, then "Options" - "Code Notes", and check JS frontend.

[CsatiZoltan]

Thanks, it works after having activated in the settings.

It seems to have the same effect as using Ctrl + m.