IframeContentRenderer: formalize iframe communication

[jeremywiebe]

Summary:

This PR introduces a formal messaging system with Typescript types to define each message passing between the editor and iframe preview page. This enables us to more easily see how the communication flows and ensures we know what data is expected on both ends.

Issue: LEMS-1809

Test plan:

yarn tsc
yarn test

[khan-actions-bot]

Gerald

Required Reviewers

• @Khan/perseus for changes to .changeset/proud-baboons-warn.md, packages/perseus-editor/src/article-editor.tsx, packages/perseus-editor/src/hint-editor.tsx, packages/perseus-editor/src/iframe-content-renderer.tsx, packages/perseus-editor/src/iframe-utils.ts, packages/perseus-editor/src/index.ts, packages/perseus-editor/src/item-editor.tsx, packages/perseus-editor/src/__tests__/iframe-content-renderer.test.tsx, packages/perseus-editor/src/__tests__/iframe-utils.test.ts, packages/perseus-editor/src/__tests__/__snapshots__/iframe-content-renderer.test.tsx.snap

---

Don't want to be involved in this pull request? Comment #removeme and we won't notify you of further changes.

[github-actions]

Size Change: +977 B (+0.11%)

Total Size: 860 kB

Filename	Size	Change
packages/perseus-editor/dist/es/index.js	276 kB	+977 B (+0.35%)

ℹ️ View Unchanged

Filename	Size
packages/kas/dist/es/index.js	38.3 kB
packages/keypad-context/dist/es/index.js	760 B
packages/kmath/dist/es/index.js	4.27 kB
packages/math-input/dist/es/index.js	78 kB
packages/math-input/dist/es/strings.js	1.79 kB
packages/perseus-core/dist/es/index.js	1.48 kB
packages/perseus-linter/dist/es/index.js	22.2 kB
packages/perseus/dist/es/index.js	417 kB
packages/perseus/dist/es/strings.js	3.36 kB
packages/pure-markdown/dist/es/index.js	3.66 kB
packages/simple-markdown/dist/es/index.js	12.4 kB

_{compressed-size-action}

[codecov]

Codecov Report

Attention: Patch coverage is 87.69231% with 32 lines in your changes missing coverage. Please review.

Project coverage is 71.27%. Comparing base (b4b9430) to head (3a0a245).

Files with missing lines	Patch %	Lines
packages/perseus-editor/src/iframe-utils.ts	88.95%	19 Missing ⚠️
...ges/perseus-editor/src/iframe-content-renderer.tsx	85.89%	11 Missing ⚠️
packages/perseus-editor/src/article-editor.tsx	0.00%	1 Missing ⚠️
packages/perseus-editor/src/item-editor.tsx	50.00%	1 Missing ⚠️

Additional details and impacted files

@@                        Coverage Diff                         @@
##           feature/editor-preview-cleanup    #1565      +/-   ##
==================================================================
+ Coverage                           70.31%   71.27%   +0.95%     
==================================================================
  Files                                 521      525       +4     
  Lines                              107245   107437     +192     
  Branches                             7799    11062    +3263     
==================================================================
+ Hits                                75408    76571    +1163     
+ Misses                              31652    30866     -786     
+ Partials                              185        0     -185     

Files with missing lines	Coverage Δ
packages/perseus-editor/src/hint-editor.tsx	87.19% <100.00%> (-0.03%)	⬇️
packages/perseus-editor/src/index.ts	100.00% <100.00%> (ø)
packages/perseus-editor/src/article-editor.tsx	13.22% <0.00%> (+0.03%)	⬆️
packages/perseus-editor/src/item-editor.tsx	30.18% <50.00%> (+0.18%)	⬆️
...ges/perseus-editor/src/iframe-content-renderer.tsx	86.57% <85.89%> (+8.98%)	⬆️
packages/perseus-editor/src/iframe-utils.ts	88.95% <88.95%> (ø)

... and 140 files with indirect coverage changes

---

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update b4b9430...3a0a245. Read the comment docs.

[github-actions]

npm Snapshot: Published

Good news!! We've packaged up the latest commit from this PR (12ecccd) and published it to npm. You
can install it using the tag PR1565.

Example:

yarn add @khanacademy/perseus@PR1565

If you are working in Khan Academy's webapp, you can run:

./dev/tools/bump_perseus_version.sh -t PR1565

[jeremywiebe]

We only ever passed "mobile" here, so I've encoded that as a single prop instead of this generic key/value pair. This will make it easier to understand on the consuming side also (webapp).