feat: render math in reader popup by Golden-Pigeon · Pull Request #1425 · windingwind/zotero-pdf-translate

Golden-Pigeon · 2026-05-15T16:56:06Z

Summary

This PR adds LaTeX formula rendering support to the Reader selection popup, addressing #1076 (comment).

Changes

Added KaTeX rendering for translated text shown in the Reader popup.
Supports existing LaTeX delimiters: $...$ , $$...$$, $...$, and \[...\].
Makes popup formula rendering stream-safe:
- incomplete formulas are shown as plain escaped text while streaming
- formulas render automatically once the closing delimiter arrives
- invalid KaTeX content falls back to escaped source text
Reuses and throttles popup math overlay updates during streaming to reduce unnecessary re-rendering.
Keeps Reader popup width stable during streaming so the popup can grow but does not repeatedly shrink.

Known Issues

~~The Reader popup height may not fit the translated text height exactly.~~(fixed in latest commits)

Copilot

Pull request overview

This PR adds KaTeX-based LaTeX rendering to the Reader selection popup and introduces stream-safe/throttled overlay updates, aiming to render formulas once delimiters are complete and reduce UI jitter during streaming translation updates.

Changes:

Added stream-safe LaTeX detection + rendering helpers (with fallback to escaped source on KaTeX failures).
Reworked Reader popup UI to include a math-rendered overlay layered over the textarea and throttled overlay rendering via requestAnimationFrame.
Added per-task popup width tracking to reduce repeated shrinking during streaming updates.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 4 comments.

File	Description
src/utils/mathRenderer.ts	Adds helpers for determining whether math should render, overlay visibility state, and KaTeX rendering with fallback behavior.
src/modules/popup.ts	Introduces the popup math overlay/container, throttled rendering, and task-scoped width tracking to stabilize streaming UI updates.
src/elements/mathTextbox.ts	Refactors overlay lifecycle to reuse the overlay element and throttle rendering, using the new `shouldRenderMath` helper.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Golden-Pigeon · 2026-05-16T08:33:27Z

  const idPrefix = popup?.getAttribute(`${config.addonRef}-prefix`);
  const makeId = (type: string) => `${idPrefix}-${type}`;
  const audiobox = popup?.querySelector(
    `#${makeId("audiobox")}`,
  ) as HTMLDivElement;
  const translateButton = popup?.querySelector(
    `#${makeId("translate")}`,
  ) as HTMLDivElement;
+  const textContainer = popup?.querySelector(
+    `#${makeId("text-container")}`,
+  ) as HTMLDivElement;
  const textarea = popup?.querySelector(
    `#${makeId("text")}`,
  ) as HTMLTextAreaElement;
+  const mathOverlay = popup?.querySelector(
+    `#${makeId("math-overlay")}`,
+  ) as HTMLDivElement;
  const addToNoteButton = popup?.querySelector(
    `#${makeId("addtonote")}`,
  ) as HTMLDivElement;

  const updateHidden = (elem: HTMLElement, hidden: boolean) => {
    if (hidden) {
      elem.style.display = "none";
    } else {
      elem.style.removeProperty("display");
    }
  };

  if (!enablePopup) {
+    cancelPopupMathOverlayRender(mathOverlay);
+    mathOverlay.innerHTML = "";
    updateHidden(audiobox, true);
    updateHidden(translateButton, true);
+    updateHidden(textContainer, true);
    updateHidden(textarea, true);
+    updateHidden(mathOverlay, true);
    updateHidden(addToNoteButton, true);


@copilot apply changes based on this feedback

Golden-Pigeon · 2026-05-16T08:37:09Z

+function syncPopupTextContainer(
+  container: HTMLDivElement,
+  textarea: HTMLTextAreaElement,
+): void {
+  container.hidden = textarea.hidden;
+  container.style.width = textarea.style.width;
+  container.style.height = textarea.style.height;
+}


@copilot apply changes based on this feedback. Please use ResizeObserver.

+const popupMathOverlayFrames = new WeakMap<HTMLDivElement, number>();
+const popupTaskMaxWidths = new Map<string, number>();


github-actions · 2026-05-16T08:30:26Z

@Golden-Pigeon
I automatically applied lint fixes but couldn’t push to your branch—could you please run:

npm run lint

and push the results? Thanks!

github-actions · 2026-05-16T08:40:11Z

@Golden-Pigeon
I automatically applied lint fixes but couldn’t push to your branch—could you please run:

npm run lint

and push the results? Thanks!

github-actions · 2026-05-16T08:47:52Z

@Golden-Pigeon
I automatically applied lint fixes but couldn’t push to your branch—could you please run:

npm run lint

and push the results? Thanks!

Golden-Pigeon · 2026-05-16T08:55:38Z

@copilot apply changes based on the comments in this thread

github-actions · 2026-05-16T10:41:11Z

@Golden-Pigeon
I automatically applied lint fixes but couldn’t push to your branch—could you please run:

npm run lint

and push the results? Thanks!

Golden-Pigeon · 2026-05-16T10:41:12Z

Updated the Reader popup math rendering behavior to fix the height mismatch issue.

Changes included:

Removed the fixed maxHeight limit from the math overlay, so rendered content is no longer constrained to an internal scroll area.
Normalized line break handling around rendered math to avoid extra blank lines from repeated <br> elements.
Changed popup height calculation for math-rendered content to measure the rendered overlay HTML instead of relying only on the raw textarea
scrollHeight.

With this, the popup still uses the textarea measurement for plain/raw text, but switches to rendered-content measurement when the math overlay
is displayed.

windingwind · 2026-06-01T14:04:48Z

thanks. this will be pended due to planned refactor of the plugin

cislunarspace · 2026-08-26T05:32:02Z

This feature is good. I'm looking forward to this feature update!

Copilot AI review requested due to automatic review settings May 15, 2026 16:56

Copilot started reviewing on behalf of Golden-Pigeon May 15, 2026 16:56 View session

Copilot AI reviewed May 15, 2026

View reviewed changes

Golden-Pigeon force-pushed the math-rendering-reader-popup branch from c741e8b to 81787cc Compare May 16, 2026 08:47

Golden-Pigeon changed the title ~~Render LaTeX math in reader popup and stabilize streaming updates~~ feat: render math in reader popup May 16, 2026

Golden-Pigeon and others added 7 commits June 10, 2026 21:33

feat: render math in reader popup

cef2973

fix: render streaming math safely

83900b4

fix: stabilize reader popup stream width

fe29b5d

fix: handle missing reader popup elements

3012e12

fix: remove popup math overlay max height

7fe422c

fix: normalize math renderer line breaks

8ecbe88

fix: size popup from rendered math content

44f081e

Golden-Pigeon force-pushed the math-rendering-reader-popup branch from 6760690 to 44f081e Compare June 10, 2026 13:36

Navigation Menu

Uh oh!

feat: render math in reader popup - #1425

feat: render math in reader popup#1425
Golden-Pigeon wants to merge 7 commits into
windingwind:mainfrom
Golden-Pigeon:math-rendering-reader-popup

Golden-Pigeon commented May 15, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Golden-Pigeon May 16, 2026

Uh oh!

Golden-Pigeon May 16, 2026

Uh oh!

github-actions Bot commented May 16, 2026

Uh oh!

github-actions Bot commented May 16, 2026

Uh oh!

github-actions Bot commented May 16, 2026

Uh oh!

Golden-Pigeon commented May 16, 2026

Uh oh!

github-actions Bot commented May 16, 2026

Uh oh!

Golden-Pigeon commented May 16, 2026

Uh oh!

windingwind commented Jun 1, 2026

Uh oh!

cislunarspace commented Aug 26, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

		const popupMathOverlayFrames = new WeakMap<HTMLDivElement, number>();
		const popupTaskMaxWidths = new Map<string, number>();

Uh oh!

Conversation

Golden-Pigeon commented May 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes

Known Issues

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Golden-Pigeon May 16, 2026

Choose a reason for hiding this comment

Uh oh!

Golden-Pigeon May 16, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented May 16, 2026

Uh oh!

github-actions Bot commented May 16, 2026

Uh oh!

github-actions Bot commented May 16, 2026

Uh oh!

Golden-Pigeon commented May 16, 2026

Uh oh!

github-actions Bot commented May 16, 2026

Uh oh!

Golden-Pigeon commented May 16, 2026

Uh oh!

windingwind commented Jun 1, 2026

Uh oh!

cislunarspace commented Aug 26, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Golden-Pigeon commented May 15, 2026 •

edited

Loading