feat(typst): add @prosemark/typst with typst.ts math rendering#125
Draft
jsimonrichard wants to merge 27 commits into
Draft
feat(typst): add @prosemark/typst with typst.ts math rendering#125jsimonrichard wants to merge 27 commits into
jsimonrichard wants to merge 27 commits into
Conversation
Mirror @prosemark/latex: fold widgets for Math nodes, delimiter/formula theme, LRU SVG cache, and typstMath* re-exports. Wire docs TypeDoc and dependency on @myriaddreamin/typst.ts with pinned WASM URLs on jsDelivr. Co-authored-by: J. Simon Richard <jsimonrichard@gmail.com>
🦋 Changeset detectedLatest commit: d08b13e The changes in this PR will be included in the next version bump. This PR includes changesets to release 2 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Deploying prosemark with
|
| Latest commit: |
d08b13e
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://5d14a73b.prosemark.pages.dev |
| Branch Preview URL: | https://cursor-prosemark-typst-exten.prosemark.pages.dev |
@prosemark/core
@prosemark/latex
@prosemark/paste-rich-text
@prosemark/render-html
@prosemark/spellcheck-frontend
@prosemark/typst
@prosemark/vscode-extension-integrator
commit: |
Swap LaTeX/MathJax for typst.ts; import compiler/renderer wasm via ?url so assets ship with the demo build. Update initDoc with Typst math examples. Co-authored-by: J. Simon Richard <jsimonrichard@gmail.com>
Copy typst-ts-web-compiler and typst-ts-renderer wasm into dist/wasm after tsdown; resolve default URLs via new URL(..., import.meta.url). Demo uses defaults and drops direct wasm package deps. Ignore scripts/ in typst eslint. Co-authored-by: J. Simon Richard <jsimonrichard@gmail.com>
Drop copy-wasm script; import compiler/renderer wasm from dependencies with Vite-style ?url so app bundlers emit assets. Add typstWasmUrls module and ambient declarations for TS. Co-authored-by: J. Simon Richard <jsimonrichard@gmail.com>
typst.ts embeds foreignObject/.tsel layers with position:fixed CSS that fragment inline formulas in CodeMirror. Omit css/js from render options and remove overlays before inserting SVG; tune inline widget sizing. Co-authored-by: J. Simon Richard <jsimonrichard@gmail.com>
typst.ts can emit multiple SVG nodes that stack vertically when treated as block-level. Force display: inline on all widget SVGs; block math centering relies on the container text-align: center. Co-authored-by: J. Simon Richard <jsimonrichard@gmail.com>
Theme CSS alone may not apply or may lose to typst embedded styles. Apply display:inline as inline styles on every SVG (including nested and sibling fragments) and mount multiple top-level SVG nodes when typst returns them. Co-authored-by: J. Simon Richard <jsimonrichard@gmail.com>
@prosemark/typst already uses cm-typst-math; cm-latex-math appears when latexMarkdownEditorExtensions is loaded instead. Export typstMathWidgetClass and use typst in debug-vsc-extn-in-web. Co-authored-by: J. Simon Richard <jsimonrichard@gmail.com>
Add ProseMarkTypstDemo with typst extensions and typstInitDoc. Extract shared demo styles. Main /demo stays on @prosemark/latex (MathJax). Co-authored-by: J. Simon Richard <jsimonrichard@gmail.com>
Configure matching tsconfig paths and Vite resolve alias; use in MDX imports instead of deep relative paths. Co-authored-by: J. Simon Richard <jsimonrichard@gmail.com>
Options compilerWasmUrl/rendererWasmUrl already existed; defaults used ?url imports that Vite copied into static output (over Cloudflare Pages 25MB limit). Default to pinned jsDelivr URLs; export jsdelivrTypstWasmUrls. Co-authored-by: J. Simon Richard <jsimonrichard@gmail.com>
Astro scopes component CSS by default; moving styles into a separate component broke #app / :root selectors for the demo editor markup. Co-authored-by: J. Simon Richard <jsimonrichard@gmail.com>
typst.ts emits fill="#000" on math glyphs. Replace black fills with currentColor and inherit color on the widget so math matches editor text in light and dark themes. Co-authored-by: J. Simon Richard <jsimonrichard@gmail.com>
Strip unrelated sample content from typstInitDoc. Add /demo/typst link under the LaTeX math section in the standard demo document. Co-authored-by: J. Simon Richard <jsimonrichard@gmail.com>
Remove typst y-inset that added extra slack below math. After mounting SVG widgets, detect the typst math baseline from glyph translate transforms (fallback to ink bbox for fractions) and apply a negative vertical-align em offset so the math baseline meets surrounding text. Co-authored-by: J. Simon Richard <jsimonrichard@gmail.com>
Co-authored-by: J. Simon Richard <jsimonrichard@gmail.com>
Co-authored-by: J. Simon Richard <jsimonrichard@gmail.com>
typst.ts often emits 8pt-tall viewBoxes while subscripts and fractions extend farther. After mount, grow each inline SVG viewBox to getBBox() (with padding) and scale height em proportionally so CodeMirror reserves enough line space and glyphs are not clipped. Co-authored-by: J. Simon Richard <jsimonrichard@gmail.com>
typst width/height attributes are in pt but map 1:1 to CSS px, so display formulas looked tiny next to inline math scaled to ~1.05em. Size block math from viewBox height (same em formula as inline) and stop forcing display:inline on display SVGs. Co-authored-by: J. Simon Richard <jsimonrichard@gmail.com>
Starlight sets .sl-markdown-content svg { display: block; height: auto },
which broke inline MathJax on the docs demo after shared styles went global.
Override mjx-container/svg display in @prosemark/latex.
Typst SVG height used 1.05em per 8pt viewBox (~too large). Scale by typst's
12pt-per-em ratio instead (viewHeight / 12).
Co-authored-by: J. Simon Richard <jsimonrichard@gmail.com>
Fraction bars and other rules use SVG stroke, not fill, so post-hoc
currentColor rewrites missed them. Read the editor foreground color,
pass it via #show math.equation: set text(fill: rgb("#…")), and
re-render widgets when the theme changes.
Co-authored-by: J. Simon Richard <jsimonrichard@gmail.com>
Resolve editor foreground at widget render time instead of using the
default rgb("#000000") field value on first paint. Add #show math fill
rule alongside math.equation, and restore SVG fill/stroke currentColor
fallback for any remaining black ink.
Co-authored-by: J. Simon Richard <jsimonrichard@gmail.com>
Add data-typst-widget-version on math widgets so deploy/cache issues are easier to spot. The attribute was present in source but stale ProseMarkTypstDemo bundles (old hashed JS) would not set it. Co-authored-by: J. Simon Richard <jsimonrichard@gmail.com>
Co-authored-by: J. Simon Richard <jsimonrichard@gmail.com>
Remove invalid #show math: ink rule that caused compile failures, parse typst.ts diagnostic dumps into readable tooltip messages, and use a higher-specificity error selector so red monospace source text is visible. Co-authored-by: J. Simon Richard <jsimonrichard@gmail.com>
Apply error color via inline styles and dedicated error theme rules, guard async callbacks when widgets are recreated during ink sync, and add docs demo CSS so Starlight themes do not override error red text. Co-authored-by: J. Simon Richard <jsimonrichard@gmail.com>
Replace raw formula fallback with a role=alert message element and themed error styling matching main's populateLatexMathErrorDom pattern. Co-authored-by: J. Simon Richard <jsimonrichard@gmail.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds
@prosemark/typstfor rendering$…$/$$…$$math with typst.ts, parallel to@prosemark/latex.Recent polish in this branch:
currentColortheming/demo/typstpagevertical-alignem offset from glyph transforms (with bbox fallback for fractions)Test plan
/demo/typstand confirm inline math ($x + y$,$x_i$,$frac(1,2)$) aligns with surrounding text baseline