trilium icon indicating copy to clipboard operation
trilium copied to clipboard

(Feature request) I think a simple "smart equation" shortcut would help a lot.

Open metorm opened this issue 1 year ago • 5 comments

Describe feature

Feature description: If I select some text and press a shortcut key, the editor gets the selected text, cleans the front/tail $ or \[ or $$ text, and puts the remaining text in the equation editing box.

I think this feature is simple enough but would make equation editing much easier. It also helps a lot to tidy the imported mark-down file having equations.

Additional Information

No response

metorm avatar Mar 25 '23 09:03 metorm

I have a script that turns selected text into a formula, I changed it slightly to remove the $ and $$, hope it does what you need. setTimeout(() => { api.bindGlobalShortcut("alt+=",function (){ if (window.getSelection().toString()!=""){ var clip=window.getSelection().toString(); setTimeout(() => { window.getSelection().deleteFromDocument(); }, 50); setTimeout(() => {document.querySelectorAll("button.ck.ck-button.ck-off.ck-block-toolbar-button:not(.ck-hidden)")[0].click();}, 100); setTimeout(() => { document.querySelectorAll("div.ck.ck-balloon-panel.ck-balloon-panel_visible.ck-balloon-panel_with-arrow.ck-toolbar-container button.ck:nth-child(12)")[0].click();}, 110); setTimeout(() => { var input=document.querySelectorAll(' div.ck-balloon-rotator__content form.ck.ck-math-form div.ck-math-view div.ck.ck-labeled-input input.ck.ck-input.ck-input-text')[0]; clip = clip.replace(/^[$]+|[$]+$/g, ""); clip = clip.replace(/^\${2,}|\${2,}$/g, ""); input.value=clip; input.dispatchEvent(new Event('input')); }, 200); setTimeout(() => { document.querySelectorAll("button.ck.ck-button.ck-off.ck-button-save")[0].click();//Automatically click the save button }, 250); } else { setTimeout(() => {document.querySelectorAll("button.ck.ck-button.ck-off.ck-block-toolbar-button:not(.ck-hidden)")[0].click();}, 10); setTimeout(() => {document.querySelectorAll("div.ck.ck-balloon-panel.ck-balloon-panel_visible.ck-balloon-panel_with-arrow.ck-toolbar-container button.ck:nth-child(12)")[0].click();}, 20); } } ); }, 1000);

SiriusXT avatar Mar 25 '23 15:03 SiriusXT

@SiriusXT Wow, this one looks amazing. However, I'm a noob, could you please show me how to run this code?

metorm avatar Mar 25 '23 15:03 metorm

Use the content of the above script to create a JS Frontend type code note, then add the #widget label, and finally restart the note software. The shortcut key is alt+=.

SiriusXT avatar Mar 25 '23 15:03 SiriusXT

Thank you @SiriusXT , I think I am almost there.

However, I get an unexpected token ) error in the first setTimeout(() = >{ statement. I tried to move other setTimeout(() = >{ section to the first few lines and the error repeats. Did I miss something?

image

metorm avatar Mar 25 '23 15:03 metorm

OK, it is now working. I think it's my formating tool that caused this.

The following picture shows my working sample.

image

image

Again, thanks a lot, you saved my day @SiriusXT

metorm avatar Mar 25 '23 15:03 metorm

@SiriusXT, a little advise for the future: when you want to post a script in a comment, try this:

```<programming language here ('js' in your case)> <your code> ```

For example:

setTimeout(() => {
    api.bindGlobalShortcut("alt+=", function() {
        if (window.getSelection().toString() != "") {
            var clip = window.getSelection().toString();
            setTimeout(() => {
                window.getSelection().deleteFromDocument();
            }, 50);
            setTimeout(() => {
                document.querySelectorAll("button.ck.ck-button.ck-off.ck-block-toolbar-button:not(.ck-hidden)")[0].click();
            }, 100);
            setTimeout(() => {
                document.querySelectorAll("div.ck.ck-balloon-panel.ck-balloon-panel_visible.ck-balloon-panel_with-arrow.ck-toolbar-container button.ck:nth-child(12)")[0].click();
            }, 110);
            setTimeout(() => {
                var input = document.querySelectorAll(' div.ck-balloon-rotator__content form.ck.ck-math-form div.ck-math-view div.ck.ck-labeled-input input.ck.ck-input.ck-input-text')[0];
                clip = clip.replace(/^[$]+|[$]+$/g, "");
                clip = clip.replace(/^\${2,}|\${2,}$/g, "");
                input.value = clip;
                input.dispatchEvent(new Event('input'));
            }, 200);
            setTimeout(() => {
                document.querySelectorAll("button.ck.ck-button.ck-off.ck-button-save")[0].click(); //Automatically click the save button    
            }, 250);
        } else {
            setTimeout(() => {
                document.querySelectorAll("button.ck.ck-button.ck-off.ck-block-toolbar-button:not(.ck-hidden)")[0].click();
            }, 10);
            setTimeout(() => {
                document.querySelectorAll("div.ck.ck-balloon-panel.ck-balloon-panel_visible.ck-balloon-panel_with-arrow.ck-toolbar-container button.ck:nth-child(12)")[0].click();
            }, 20);
        }
    });
}, 1000);

Hope this helps! :)

XXXJetfireXXX avatar Mar 25 '23 20:03 XXXJetfireXXX

@SiriusXT, can you please help me understand why setTimeout() is used this way? Why wait 1s before binding the shortcut, and why not just call those functions sequentially rather than scheduling them for execution at staggered intervals?

mm21 avatar Mar 26 '23 18:03 mm21

This sounds like a good feature for https://github.com/isaul32/ckeditor5-math

zadam avatar Mar 26 '23 19:03 zadam

This implementation is relatively rough. Execution at time intervals is just to wait for the webpage to load, and sometimes it can be executed directly

SiriusXT avatar Mar 27 '23 01:03 SiriusXT

@SiriusXT BTW, if i want to write other front-end scripts, where can I find the element names like ck-button, ck-balloon-panel_with-arrow and 'ck-input' to operate?

metorm avatar Sep 16 '23 09:09 metorm

I found it by right-clicking on the browser and inspecting the element

@SiriusXT BTW, if i want to write other front-end scripts, where can I find the element names like ck-button, ck-balloon-panel_with-arrow and 'ck-input' to operate?

SiriusXT avatar Sep 16 '23 14:09 SiriusXT

The ck-* elements are (I am guessing) part of the CKEditor. You could also find the element names by searching the source on GitHub.

sottey avatar Sep 16 '23 14:09 sottey

Thanks @SiriusXT, it's a smart idea. I had spent some time searching for the documents and any "debugging" option in my client.

metorm avatar Sep 18 '23 02:09 metorm

Trilium has entered maintenance mode. Future enhancements will be addressed in TrilumNext: https://github.com/TriliumNext/Notes/issues/73

meichthys avatar May 09 '24 02:05 meichthys