Enter-tainer / typst-preview

[DEPRECATED] Use tinymist instead

Home Page:https://Enter-tainer.github.io/typst-preview/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

TypeError: translateMatch is null in Firefox

havarddj opened this issue · comments

Describe the bug
After "Sync preview with current cursor", the preview in Firefox stops automatically updating the document. In the console you get the error message

TypeError: translateMatch is null

and it links to the function triggerUpdate.

It doesn't seem to be a problem in Safari.

To Reproduce
Steps to reproduce the behavior:

  1. Create .typ file in VS-code, and run Preview current file in browser,
  2. (if default browser is not firefox) Copy url and paste into firefox
  3. Run Sync preview with current cursor
  4. Write something else in the typst file. Browser window does not update, console gives error message TypeError: translateMatch is null

Expected behavior
Expected browser window to update

Package/Software version:

VSCode version(Help -> About):

Version: 1.84.2 (Universal)
Commit: 1a5daa3a0231a0fbba4f14db7ec463cf99d7768e
Date: 2023-11-09T10:52:33.687Z
Electron: 25.9.2
ElectronBuildId: 24603566
Chromium: 114.0.5735.289
Node.js: 18.15.0
V8: 11.4.183.29-electron.0
OS: Darwin arm64 23.0.0

typst-preview extension version: v0.11.2

Logs:

typst-preview server log(Output Panel -> typst-preview):

    
[2024-03-23T14:50:46Z INFO  typst_ts_compiler::service::diag::console] /fftest.typ: Compilation succeeded in 371µs
    
[2024-03-23T14:50:46Z DEBUG typst_preview::actor::render] OutlineRenderActor: received message: RenderIncremental
[2024-03-23T14:50:46Z DEBUG typst_preview::actor::render] OutlineRenderActor: received message: RenderIncremental
[2024-03-23T14:50:46Z DEBUG typst_preview::actor::render] RenderActor: has_full_render: false
[2024-03-23T14:50:46Z DEBUG typst_preview::actor::render] OutlineRenderActor: sending outline
[2024-03-23T14:50:46Z DEBUG typst_preview::actor::render] OutlineRenderActor: waiting for message
[2024-03-23T14:50:46Z DEBUG typst_preview::actor::render] OutlineRenderActor: sending outline
[2024-03-23T14:50:46Z DEBUG typst_preview::actor::render] OutlineRenderActor: waiting for message
[2024-03-23T14:50:46Z DEBUG typst_preview::actor::render] RenderActor: waiting for message
[2024-03-23T14:50:46Z DEBUG typst_preview::actor::editor] EditorActor: received message from editor: UpdateMemoryFiles ["/Users/havard/Downloads/fftest.typ"]
[2024-03-23T14:50:46Z DEBUG typst_preview::actor::typst] TypstActor: processing UPDATE memory files: ["/Users/havard/Downloads/fftest.typ"]
[2024-03-23T14:50:46Z DEBUG typst_ts_compiler::service::compile] CompileActor: memory event incoming
[2024-03-23T14:50:46Z INFO  typst_ts_compiler::service::diag::console] /fftest.typ: compiling ...
    
[2024-03-23T14:50:46Z INFO  typst_ts_compiler::service::diag::console] /fftest.typ: Compilation succeeded in 364µs
    
[2024-03-23T14:50:46Z DEBUG typst_preview::actor::render] OutlineRenderActor: received message: RenderIncremental
[2024-03-23T14:50:46Z DEBUG typst_preview::actor::render] OutlineRenderActor: received message: RenderIncremental
[2024-03-23T14:50:46Z DEBUG typst_preview::actor::render] OutlineRenderActor: sending outline
[2024-03-23T14:50:46Z DEBUG typst_preview::actor::render] OutlineRenderActor: waiting for message
[2024-03-23T14:50:46Z DEBUG typst_preview::actor::render] RenderActor: has_full_render: false
[2024-03-23T14:50:46Z DEBUG typst_preview::actor::render] OutlineRenderActor: sending outline
[2024-03-23T14:50:46Z DEBUG typst_preview::actor::render] OutlineRenderActor: waiting for message
[2024-03-23T14:50:46Z DEBUG typst_preview::actor::render] RenderActor: waiting for message

typst-preview client log(Help -> Toggle Developer Tools -> Console):

updateCanvas start [127.0.0.1:55496:1874:15](http://127.0.0.1:55496/)
updateCanvas done 1 [127.0.0.1:55496:1924:15](http://127.0.0.1:55496/)
batch 1 messages [127.0.0.1:55496:5999:17](http://127.0.0.1:55496/)
recv jump 24 [127.0.0.1:55496:6020:15](http://127.0.0.1:55496/)
batch 1 messages [127.0.0.1:55496:5999:17](http://127.0.0.1:55496/)
recv diff-v1 228 [127.0.0.1:55496:6020:15](http://127.0.0.1:55496/)
TypeError: translateMatch is null
    fetchSvgDataByDocMode http://127.0.0.1:55496/:1436
    rerender$svg http://127.0.0.1:55496/:1308
    doUpdate http://127.0.0.1:55496/:443
[127.0.0.1:55496:454:17](http://127.0.0.1:55496/)
batch 1 messages [127.0.0.1:55496:5999:17](http://127.0.0.1:55496/)
recv diff-v1 228 [127.0.0.1:55496:6020:15](http://127.0.0.1:55496/)
TypeError: translateMatch is null
    fetchSvgDataByDocMode http://127.0.0.1:55496/:1436
    rerender$svg http://127.0.0.1:55496/:1308
    doUpdate http://127.0.0.1:55496/:443
[127.0.0.1:55496:454:17](http://127.0.0.1:55496/)
batch 1 messages [127.0.0.1:55496:5999:17](http://127.0.0.1:55496/)
recv diff-v1 452 [127.0.0.1:55496:6020:15](http://127.0.0.1:55496/)
TypeError: translateMatch is null
    fetchSvgDataByDocMode http://127.0.0.1:55496/:1436
    rerender$svg http://127.0.0.1:55496/:1308
    doUpdate http://127.0.0.1:55496/:443
[127.0.0.1:55496:454:17](http://127.0.0.1:55496/)
batch 1 messages [127.0.0.1:55496:5999:17](http://127.0.0.1:55496/)
recv diff-v1 396 [127.0.0.1:55496:6020:15](http://127.0.0.1:55496/)
TypeError: translateMatch is null
    fetchSvgDataByDocMode http://127.0.0.1:55496/:1436
    rerender$svg http://127.0.0.1:55496/:1308
    doUpdate http://127.0.0.1:55496/:443
[127.0.0.1:55496:454:17](http://127.0.0.1:55496/)
batch 1 messages [127.0.0.1:55496:5999:17](http://127.0.0.1:55496/)
recv diff-v1 196 [127.0.0.1:55496:6020:15](http://127.0.0.1:55496/)
...

const translateMatch = translate.match(translateRegex)!;
related code. It looks like the regex doesn't match anything for some reason

I will try in firefox and see what translate looks like

On firefox, the translate is matrix(1, 0, 0, 1, 0, 0). So we fails to extract translate(x, y) from it.

cc @Myriad-Dreamin any idea?

I was lazy and extract positions from translate attribute. Perhaps we can do positive and active fix to make it much more robust, that saves data-position here:

/// Move page to the correct position
pageElem.setAttribute("transform", translateAttr);

Changing to:

pageElem.setAttribute("transform", translateAttr); 
pageElem.setAttribute("data-x", `${x}`); 
pageElem.setAttribute("data-y", `${y}`); 

And using them without complex parsing.

Great stuff! Thanks a lot

I'm publishing a new version. It will be soon available in vscode marketplace

Great! I've written an emacs package (https://github.com/havarddj/typst-preview.el) for typst-preview so I don't really use the vscode plugin, will the binary here on github be updated with 0.11.4 as well?

will the binary here on github be updated with 0.11.4 as well?

yes. ci will do it all. just wait it finish!