fix(preview): render JSXGraph diagrams against the live DOM (#68) - #88
Merged
Conversation
JSXGraph's initBoard() resolves its container via document.getElementById and sizes the board from the laid-out element. The preview rendered all diagrams into a detached <article> buffer before swapping it into the DOM, so every JSXGraph block failed with "HTML container element 'zen-jxg-…' not found" and zero-size boards. Mermaid (inline SVG) and function-plot (handed the element directly) were unaffected. Attach the rendered content to the live document before running the diagram renderers; Mermaid still renders in the buffer. As a side effect, note text now paints immediately instead of waiting for every diagram library to load. The PDF export window reuses <Preview>, so it is fixed too. Fixes #68
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
1 participant
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.
Fixes #68 — JSXGraph diagrams failed to render in the preview with "JSXGraph: HTML container element 'zen-jxg-…' not found."
Cause
The preview renders a note into a detached
<article>buffer, runs every diagram renderer on it, then swaps it into the live DOM. JSXGraph'sinitBoard(id)resolves its container viadocument.getElementById(the live document) and sizes the board from the laid-out element — so against a detached buffer it can't find the container and would get a zero-size board. Mermaid (inline SVG) and function-plot (handed the element directly) were unaffected, which is why only JSXGraph broke.Fix
Attach the rendered content to the live document before running the diagram renderers (
Preview.tsx). Mermaid still renders in the buffer (inline SVG). Side benefit: note text now paints immediately instead of waiting for every diagram library to load. The PDF export window reuses<Preview>, so it's fixed there too.Verification
Preview.tsx.05b — Math Diagrams(3 JSXGraph blocks); confirmed they now render and are draggable, no console errors.npm run typecheckpasses.