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.

[AlexCuan]

Hey, great work!

In some notes it works for me, but in other it gives this error

And in others, even though there are several formulas, it says there are no formulas

I upload a sample file where it gives an error
Path and surface integrals.md

[AlexCuan]

Debugging by hand found that only happen in imported files, not in "handcopied" markdown

[lhx332251335]

Thank you for your feedback and for pointing out the issue. I tried to replicate the error you described, but unfortunately, I couldn't reproduce it on my end. Here's what I attempted:

• Copied Markdown text, then used the Markdown import from clipboard button to import it into a note, followed by converting the formulas.
• Imported a note by selecting an .md file directly, then converting the formulas.

Both methods worked without any issues for me. I'm currently using TriliumNext 0.91.6.

If there are any specific scenarios where the error occurs, or if you can provide additional steps to consistently reproduce the issue, please let me know, and I'll investigate further.

[AlexCuan]

Thanks you for the quick answer :) The problem doesn't arises when importing that way (sorry, I should have been more clear about that). The problem is when you import it through this way.

EDIT: I'm using the same version, tried at 2 browsers

[lhx332251335]

I previously tested on the Windows client and just now tried the workflow using Chrome: importing the Markdown file in the exact way you described and then converting the formulas. However, I still couldn’t reproduce the issue on my side.

[AlexCuan]

I'm sorry to hear that. It seems like a thing from my instance? I don't know. I've changed from browser, restarted the container, change of OS, and nothing.
video (1).webm

I even tried on Firefox and it gives me this:

And that link goes to:

[lhx332251335]

I’m really sorry to hear about the persistent issue. Unfortunately, as I still cannot reproduce the error on my end, it’s difficult to pinpoint the cause or provide specific script modifications. Based on the error code in your screenshots, it seems the issue might stem from Trilium’s frontend API not behaving as expected in your instance. Here are a few suggestions that might help resolve or narrow down the problem: - It looks like you’re accessing Trilium through a reverse proxy. Could you try connecting directly via the server’s IP? If it works without issues this way, the problem might be related to your reverse proxy configuration. Adjusting the settings there could resolve it. - Backup your data files, then create a fresh container with a clean Trilium instance to test the script. This will help determine if the issue is specific to your current setup or environment.

[AlexCuan]

Tried, but the same happens. Even tried with a fresh chrome installing (until now I was using chromium) and nothing