[NOT READY FOR REVIEW!!] Introduce EditorWithLayout

[jeremywiebe]

THIS PR IS NOT IN DRAFT STATE BECAUSE I WANTED AN NPM SNAPSHOT.

!!NOT READY FOR REVIEWING YET!!

Summary:

This PR introduces a new Perseus Editor component that allows the host to control layout of individual editor pieces. It does this by using a callback function for the children prop. This is a similar approach to how the MultiRenderer works today.

The associated Story for the EditrorWithLayout component provides an example of placing each piece of the editor wherever is needed.

What's next?

This PR can be thought of as a proof-of-concept for how this could be built. There are components that are nested inside other, high-level components (such as inside the Editor) that would need to be raised up to the EditorWithLayout so that they can be exposed individually.

The preview component IframeContentRenderer is also likely to be problematic as it uses an iframe that is typically pointed at production webapp. The LEMS team has ticket https://khanacademy.atlassian.net/browse/LEMS-1809 to fix this, but it is not on our near-term roadmap. We could adjust that if necessary.

Issue: LEMS-1972

Test plan:

yarn
yarn start
Navigate to http://localhost:6006/?path=/story/perseuseditor-editorwithlayout--controlled and test things out.

Open packages/perseus-editor/src/__stories__/editor-with-layout.stories.tsx and move things around and note that the layout can be adjusted without making any changes to the EditorWithLayout component.

[github-actions]

Size Change: -402 B (0%)

Total Size: 835 kB

Filename	Size	Change
packages/perseus-editor/dist/es/index.js	268 kB	+396 B (0%)
packages/perseus/dist/es/index.js	400 kB	-798 B (0%)

ℹ️ View Unchanged

Filename	Size
packages/kas/dist/es/index.js	38.1 kB
packages/kmath/dist/es/index.js	4.27 kB
packages/math-input/dist/es/index.js	80.5 kB
packages/math-input/dist/es/strings.js	1.73 kB
packages/perseus-core/dist/es/index.js	908 B
packages/perseus-error/dist/es/index.js	878 B
packages/perseus-linter/dist/es/index.js	21.8 kB
packages/perseus/dist/es/strings.js	3.22 kB
packages/pure-markdown/dist/es/index.js	3.68 kB
packages/simple-markdown/dist/es/index.js	12.4 kB

_{compressed-size-action}

[khan-actions-bot]

Gerald

Required Reviewers

• @Khan/perseus for changes to packages/perseus-editor/src/editor-page.tsx, packages/perseus-editor/src/editor-with-layout.tsx, packages/perseus-editor/src/editor.tsx, packages/perseus-editor/src/hint-editor.tsx, packages/perseus-editor/src/index.ts, packages/perseus-editor/src/item-editor.tsx, packages/perseus-editor/src/types.ts, packages/perseus/src/components/hud.tsx, packages/perseus-editor/src/__stories__/editor-with-layout.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 (c5eb659) and published it to npm. You
can install it using the tag PR1257.

Example:

yarn add @khanacademy/perseus@PR1257

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

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

[codecov]

Codecov Report

Attention: Patch coverage is 38.94967% with 279 lines in your changes are missing coverage. Please review.

Project coverage is 70.23%. Comparing base (db04157) to head (c5eb659).
Report is 22 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1257      +/-   ##
==========================================
+ Coverage   68.75%   70.23%   +1.48%     
==========================================
  Files         468      477       +9     
  Lines      100702   101506     +804     
  Branches     7141    10271    +3130     
==========================================
+ Hits        69233    71289    +2056     
+ Misses      31354    30217    -1137     
+ Partials      115        0     -115     

Files	Coverage Δ
packages/perseus-editor/src/editor.tsx	48.77% <100.00%> (+0.04%)	⬆️
packages/perseus-editor/src/index.ts	100.00% <100.00%> (ø)
packages/perseus-editor/src/editor-page.tsx	22.69% <50.00%> (+0.23%)	⬆️
packages/perseus-editor/src/hint-editor.tsx	84.78% <96.87%> (-0.51%)	⬇️
packages/perseus-editor/src/item-editor.tsx	28.12% <50.00%> (+0.45%)	⬆️
packages/perseus/src/components/hud.tsx	78.88% <42.85%> (+33.97%)	⬆️
packages/perseus-editor/src/editor-with-layout.tsx	33.65% <33.65%> (ø)

... and 151 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 db04157...c5eb659. Read the comment docs.