TriliumNext / Notes

Build your personal knowledge base with TriliumNext Notes
https://triliumnext.github.io/Docs/
GNU Affero General Public License v3.0
1.03k stars 59 forks source link

Insert Math appears to be broken #297

Closed eliandoran closed 1 month ago

eliandoran commented 3 months ago

Not sure how it wasn't caught until now.

Most likely a problem with the KaTeX or CKEditor update.

Uncaught (in promise) ReferenceError: katex is not defined
    LL http://localhost:8080/ line 2 > injectedScript:6
    zL http://localhost:8080/ line 2 > injectedScript:6
    LL http://localhost:8080/ line 2 > injectedScript:6
    c http://localhost:8080/ line 2 > injectedScript:6
    viewToDom http://localhost:8080/ line 2 > injectedScript:6
    viewChildrenToDom http://localhost:8080/ line 2 > injectedScript:6
    viewToDom http://localhost:8080/ line 2 > injectedScript:6
    viewChildrenToDom http://localhost:8080/ line 2 > injectedScript:6
    _updateChildren http://localhost:8080/ line 2 > injectedScript:6
    render http://localhost:8080/ line 2 > injectedScript:6
    _render http://localhost:8080/ line 2 > injectedScript:6
    yc http://localhost:8080/ line 2 > injectedScript:6
    fire http://localhost:8080/ line 2 > injectedScript:6
    change http://localhost:8080/ line 2 > injectedScript:6
    _disableRendering http://localhost:8080/ line 2 > injectedScript:6
    Xl http://localhost:8080/ line 2 > injectedScript:6
    fire http://localhost:8080/ line 2 > injectedScript:6
    _runPendingChanges http://localhost:8080/ line 2 > injectedScript:6
    change http://localhost:8080/ line 2 > injectedScript:6
    execute http://localhost:8080/ line 2 > injectedScript:6
    decorate http://localhost:8080/ line 2 > injectedScript:6
    fire http://localhost:8080/ line 2 > injectedScript:6
    t http://localhost:8080/ line 2 > injectedScript:6
    execute http://localhost:8080/ line 2 > injectedScript:6
    execute http://localhost:8080/ line 2 > injectedScript:6
    _createFormView http://localhost:8080/ line 2 > injectedScript:6
    fire http://localhost:8080/ line 2 > injectedScript:6
    Qm http://localhost:8080/ line 2 > injectedScript:6
    fire http://localhost:8080/ line 2 > injectedScript:6
    e http://localhost:8080/ line 2 > injectedScript:6
meichthys commented 3 months ago

It seems to be working for me in v0.90.3 : image

But the equation preview doesn't seem to be working (I'm not sure it ever worked, but then again, I rarely use the feature): image

meichthys commented 3 months ago

I did just experience this, but after refreshing the page, the math formula shows.

SiriusXT commented 2 months ago

I've been using version 0.90.4 for a while, and although the formula editor couldn't preview equations a few days ago, they were still displayed correctly in the notes. However, after testing the develop branch on my computer and switching back to version 0.90.4, all the formulas in the notes now appear as blank blocks.
Similar errors:

Uncaught (in promise)                                                                 VM148:6
ReferenceError: katex is not defined                     
    at <anonymous>:6:1485979
    at zL (<anonymous>:6:1487450)
    at LL (<anonymous>:6:1485963)
    at Os.render (<anonymous>:6:1489992)
    at Ca.viewToDom (<anonymous>:6:588729)
    at Ca.viewChildrenToDom (<anonymous>:6:590317)
    at viewChildrenToDom.next (<anonymous>)
    at Ca.viewToDom (<anonymous>:6:589206)
    at Ca.viewChildrenToDom (<anonymous>:6:590317)
    at viewChildrenToDom.next (<anonymous>)
rastiqdev commented 2 months ago

The PR that broke the Insert Math feature is #277. Replacing ckeditor.js and ckeditor.js.map by the ones from v0.90.1-beta is a temporary fix. Though I haven't been able to fix the issue with my own CKEditor files because I don't know the config used by Trilium/TriliumNext.

rastiqdev commented 2 months ago

Ok so it actually looks like even with the "temporary fix" I found, katex is still not found when the app is packaged. @eliandoran would you know where the problem comes from? I don't really know how CKEditor in itself works...

rastiqdev commented 2 months ago

I don't know the config used by Trilium/TriliumNext.

I didn't see the trilium-ckeditor5 repo for some reason, sorry.

rastiqdev commented 2 months ago

Ok so now I'm pretty sure the problem is from TriliumNext not loading KaTeX properly rather than from CKEditor or KaTeX. Even using trilium-ckeditor5 41.0.0 and KaTeX 0.16.9 (the same versions as in Trilium (which loads KaTeX properly), doesn't fix it. I'll try to watch the entire commit history between Trilium and TriliumNext to see when the problem was created.

SiriusXT commented 2 months ago

I am not familiar with CKEditor. Here are some findings from my debugging, which I hope might be helpful:

Regarding the Katex loading bug, I found that during debugging, if I first open a note without any formulas and then open a note with formulas, the formulas display correctly. I suspect that this is due to a delay in loading Katex, so I disabled Katex's lazyLoad: https://github.com/TriliumNext/Notes/pull/409/files. After doing this, Katex seems to load correctly every time. I suspect that the issue might be related to the fact that CKEditor’s loading speed has increased after an update, causing Katex to be called before it is fully loaded.

As for the issue with formulas not having previews, it seems to be because the z-index of math-preview-* is set lower. I’m not sure why this issue suddenly occurred. Could adding a higher z-index to .math-preview-popup potentially resolve it.

eliandoran commented 2 months ago

@SiriusXT , your analysis regarding the loading of the library is correct and it in alignment with what I researched initially. The idea is that we need to be able to load the KaTeX library via the watchdog since it's not always needed (I would suppose some people never use equations). We have to investigate why the CKEditor (or CKEditor Math plugin, for that matter), broke the watchdog lazy-loading mechanism.

eliandoran commented 2 months ago

@SiriusXT , OK, apparently found the issue but the fix is a bit far away. It's in the https://github.com/isaul32/ckeditor5-math/ plugin where they had a relatively recent conversion to TypeScript (6 months ago) and removed a conditional that now triggers the error when lazy loading is enabled.

I'll try to fork the library and provide the fix, but that means I'll also have to figure out how to build it.

Insert math broken analysis.pdf

rastiqdev commented 2 months ago

Ok thanks!

Prowler1000 commented 2 months ago

Any progress on this issue? Currently in class and I'm definitely missing this feature. If you're not nearly done, I wouldn't mind taking a stab or three at fixing the issue and building the library.

eliandoran commented 2 months ago

Any progress on this issue? Currently in class and I'm definitely missing this feature. If you're not nearly done, I wouldn't mind taking a stab or three at fixing the issue and building the library.

There is some progress, yes. I've forked the library in https://github.com/TriliumNext/ckeditor5-math, but still have to figure out how to glue everything together.

SiriusXT commented 2 months ago

Still can't preview formula

eliandoran commented 2 months ago

@SiriusXT , yes, sad.

dousha commented 1 month ago

I figured out why the formula preview is not working. It is, to a certain extent, working as intended.

ckeditor5-math renders the preview outside of the CKEditor DOM (to circumvent a styling issue mentioned in the README), and then repositions the preview into the balloon. However, @zadam had overridden the z-index of the balloon, making it 1101 instead of var(--ck-z-panel), which in turn made the balloon appear on top of the formula preview.

There is a comment stating that the balloon is used in the autocomplete feature and should have a z-index value higher than 1070. However, I can't find where 1070 is explicitly used. Removing the override section didn't immediately break things but I cannot be sure.

The older version works because ckeditor5-math used a higher z-index. This behaviour is changed at v41.0.0.