[DRAFT] New Perseus Preview component

[jeremywiebe]

Summary:

Today, the Perseus editor preview component uses a complex <iframe /> based system that depends on a live website providing the iframe source. This makes it challenging to mimic the preview system in Storybook and has its own set of issues in production.

Added to that, the mechanism to communicate between the Perseus Editor and the preview frame is not at all easy to understand and is split between this repo (Khan/perseus) and our main webapp repo. This makes maintaining the preview system tricky and error prone (basically, we don't touch it!)

This PR introduces a new preview component that simply renders the ServerItemRenderer using the current PerseusItem. This eliminates all of the cross-frame communication that was needed and seems to work just as good as the iframe system.

A few notes before we commit to this:

• We need preview components that support hints and articles (either we make the preview component more flexible or render different preview components where they're needed - I think I'd lean towards the latter as I don't think there's a need to have One Master Preview Component To Rule Them All™️ )

• The expression widget when simulating mobile can display the math keypad, but it doesn't automatically dismiss when the field is blurred. In testing, Nisha and I found that this is actually semi-broken in production anyways so this wouldn't be a regression.

• The old iframe preview system uses a helper tool from the HammerJS library, which is vendored in, to simulate touches when previewing for Phone and Tablet. This isn't possible with a non-iframe preview system because that library "mutates" the global env, so we'd have to reload the page to switch between preview devices. I think a way forward might be to change the math keypad to support Pointer Events instead of being so touch-centric.

• Linting: I haven't figured out exactly how this all works, but there is a LinterContextProps prop on some top-level editor components that seems involved. Also, the simple-markdown package is the place where we actually render the <Lint /> component that surfaces lint errors beside the preview. It seems like triggerPreviewUpdate() call in the EditorPage is related (here). You can see an example of a linter error and how it's shown in the screenshot below.

  

  Linting is somewhat working! :) @mpolyak

  

Issue: LEMS-1809

Test plan:

yarn start
Navigate to the Editor Page story and add any widgets. The preview should update in near realtime as you edit the content and widget configs.

[github-actions]

Size Change: +1.26 kB (+0.15%)

Total Size: 857 kB

Filename	Size	Change
packages/math-input/dist/es/index.js	78.2 kB	-2.04 kB (-2.54%)
packages/math-input/dist/es/strings.js	1.79 kB	+61 B (+3.53%)
packages/perseus-editor/dist/es/index.js	278 kB	+3.27 kB (+1.19%)
packages/perseus/dist/es/index.js	414 kB	-39 B (-0.01%)

ℹ️ View Unchanged

Filename	Size
packages/kas/dist/es/index.js	38.3 kB
packages/kmath/dist/es/index.js	4.27 kB
packages/perseus-core/dist/es/index.js	1.48 kB
packages/perseus-linter/dist/es/index.js	21.6 kB
packages/perseus/dist/es/strings.js	3.29 kB
packages/pure-markdown/dist/es/index.js	3.67 kB
packages/simple-markdown/dist/es/index.js	12.4 kB

_{compressed-size-action}

[mpolyak]

Very cool, thank you for working on this!

In this approach of rendering ServerItemRenderer directly, would we still be able to highlight content lint warnings/errors in the editor?

[jeremywiebe]

Very cool, thank you for working on this!

In this approach of rendering ServerItemRenderer directly, would we still be able to highlight content lint warnings/errors in the editor?

Yes, linting, good call! I've added that to the PR description as something we'd need to figure out!

[khan-actions-bot]

Gerald

Required Reviewers

• @Khan/perseus for changes to .changeset/hungry-seals-refuse.md, .storybook/preview-head.html, dev/vite.config.ts, packages/perseus-editor/tsconfig-build.json, packages/perseus/src/dependencies.ts, packages/perseus-editor/src/article-editor.tsx, packages/perseus-editor/src/editor-page.tsx, packages/perseus-editor/src/editor.tsx, packages/perseus-editor/src/hint-editor.tsx, packages/perseus-editor/src/iframe-renderer.tsx, packages/perseus-editor/src/index.ts, packages/perseus-editor/src/item-editor.tsx, packages/perseus/src/__testdata__/article-renderer.testdata.ts, packages/perseus/src/components/lint.tsx, packages/perseus-editor/src/__stories__/article-editor.stories.tsx, packages/perseus-editor/src/__stories__/editor-page-with-storybook-preview.tsx, packages/perseus-editor/src/__stories__/editor-page.stories.tsx, packages/perseus-editor/src/__stories__/iframe-renderer.stories.tsx, packages/perseus-editor/src/__stories__/interactive-graph-editor.stories.tsx, packages/perseus-editor/src/components/device-framer.tsx, packages/perseus-editor/src/components/viewport-resizer.tsx, packages/perseus-editor/src/preview/content-renderer.tsx, packages/perseus-editor/src/preview/iframe-content-renderer.tsx, packages/perseus-editor/src/widgets/group-editor.tsx, packages/perseus/src/components/__stories__/lint.stories.tsx, packages/perseus-editor/src/preview/__stories__/content-renderer.stories.tsx

---

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

[github-actions]

npm Snapshot: Published

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

Example:

yarn add @khanacademy/perseus@PR1304

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

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