Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[NOT READY FOR REVIEW!!] Introduce EditorWithLayout #1257

Open
wants to merge 8 commits into
base: main
Choose a base branch
from

Conversation

jeremywiebe
Copy link
Collaborator

@jeremywiebe jeremywiebe commented May 9, 2024

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.

image

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.

@jeremywiebe jeremywiebe self-assigned this May 9, 2024
Copy link
Contributor

github-actions bot commented May 9, 2024

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

@jeremywiebe jeremywiebe marked this pull request as ready for review May 9, 2024 21:00
@khan-actions-bot
Copy link
Contributor

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.

@khan-actions-bot khan-actions-bot requested a review from a team May 9, 2024 21:00
@jeremywiebe jeremywiebe changed the title Introduce EditorWithLayout [NOT READY FOR REVIEW!!] Introduce EditorWithLayout May 9, 2024
Copy link
Contributor

github-actions bot commented May 9, 2024

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

Copy link

codecov bot commented May 9, 2024

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     

Impacted file tree graph

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.

@benchristel benchristel removed the request for review from a team July 29, 2024 20:14
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants