[Preview NG] Introduce hooks to manage preview communication#3495
Draft
jeremywiebe wants to merge 3 commits intomainfrom
Draft
[Preview NG] Introduce hooks to manage preview communication#3495jeremywiebe wants to merge 3 commits intomainfrom
jeremywiebe wants to merge 3 commits intomainfrom
Conversation
Contributor
🗄️ Schema Change: No Changes ✅ |
Contributor
|
Size Change: 0 B Total Size: 499 kB ℹ️ View Unchanged
|
Contributor
🛠️ Item Splitting: No Changes ✅ |
Contributor
npm Snapshot: PublishedGood news!! We've packaged up the latest commit from this PR (b8f19ac) and published it to npm. You Example: pnpm add @khanacademy/perseus@PR3495If you are working in Khan Academy's frontend, you can run the below command. ./dev/tools/bump_perseus_version.ts -t PR3495If you are working in Khan Academy's webapp, you can run the below command. ./dev/tools/bump_perseus_version.js -t PR3495 |
jeremywiebe
force-pushed
the
jer/preview-ng-5-hooks
branch
from
16904a3 to
818c218
Compare
jeremywiebe
force-pushed
the
jer/preview-ng-4-sanitize-api-options
branch
from
d534a50 to
0419ad1
Compare
jeremywiebe
force-pushed
the
jer/preview-ng-5-hooks
branch
from
818c218 to
feb3f11
Compare
This was referenced Apr 15, 2026
…sePreviewClient hooks with tests
jeremywiebe
force-pushed
the
jer/preview-ng-5-hooks
branch
from
feb3f11 to
9b6a03d
Compare
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.
Summary:
This PR is part of a series building a typed, hook-based preview system for the Perseus editor. The new system replaces the untyped
window.iframeDataStore+ rawpostMessage(string)communication with structured, validated message passing viausePreviewControllerandusePreviewPresenterhooks. The new system is being built alongside the old one — no existing behavior changes until the final PR in the series flips the switch.Previous PRs in this series:
Adds the two core hooks that implement the new preview communication protocol.
usePreviewController(iframeRef)is used on the editor/parent side. It sends sanitized preview data to an iframe via typedpostMessage, listens for height updates back, and filters incoming messages byevent.sourceto ensure they come from the correct iframe. Returns{sendData, height}.usePreviewPresenter()is used inside the preview iframe. It listens for content data from the parent, sends back height reports and data requests via the typed message protocol. Throws if used outside an iframe. Returns{data, reportHeight}.Both hooks use the message types and validators from #3474 and the data sanitizer from #3492. Purely additive — no existing behaviour is changed.
Issue: LEMS-3741
Test plan:
pnpm test packages/perseus-editor/src/preview/use-preview-controller.test.ts packages/perseus-editor/src/preview/use-preview-presenter.test.ts— 48 tests covering initialization, message sending/receiving, sanitization, event.source filtering, iframe validation, height reporting, error handling, and cleanup.