-
Notifications
You must be signed in to change notification settings - Fork 0
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
Add RichTextEditor component #972
Merged
Merged
Changes from 3 commits
Commits
Show all changes
13 commits
Select commit
Hold shift + click to select a range
4008449
Add RichTextEditor component
gabescarbrough 987d346
Make focus match Input
gabescarbrough 0e3ebf2
Make menu bar and input more cohesive
gabescarbrough effd230
Add aria labels and textbox role
gabescarbrough 3221bcd
Fix snapshot
gabescarbrough 2d9f166
Simplify border-radius
gabescarbrough 64276f1
Use SCSS variables and mixins
gabescarbrough b907dec
Don't abbreviate rich text editor in variables
gabescarbrough c8b00bb
Switch menu bar actions to IconButton
gabescarbrough 0d4c698
Add examples to docs
gabescarbrough 40e1b7a
Use regex for URL protocol check
gabescarbrough f44fa48
Linter method chain formatting
gabescarbrough 6e2ca8a
Spread named prop for ARIA attributes
gabescarbrough File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains 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
This file contains 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
Oops, something went wrong.
Oops, something went wrong.
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can we get a sense of scale here? I imagine these extensions are pretty lightweight, but would like to confirm that we aren't increasing the size of our dependencies by an order of magnitude with this work
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm not sure how to compare bundle size to be honest. How would you go about measuring that?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
https://www.npmjs.com/package/webpack-bundle-analyzer
You can see how it's implemented in RS here, though the implementation will be different as RS config is built from shaka: https://github.com/user-interviews/rails-server/blob/main/config/webpack/base.js#L117-L129
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Does the bundle size affect whether this PR can be merged?
We're already importing only the TipTap packages that we actually use so we wouldn't be able to build the same component with less dependencies.
This PR also blocks removing Plate, Slate and TipTap from RS so merging this PR will cause our overall bundle size to go down for the main repo.
Measuring bundle size for the DS is a great idea but I think editing our Webpack config is out of scope for this PR.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm not suggesting that you commit changes to our webpack config in this PR, but I think understanding the consequence of adding a new dependency is absolutely within scope of the PR that introduces it, and this one is adding 17. If you don't want to tinker with webpack to get this information, you can probably use something like https://bundlephobia.com/ to do the job. I don't know a ton about that site, I just did a little googling.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
According to Bundlephobia:
DS without TipTap
DS with TipTap
So between 2 to 2.5x the bundle size.
Slate and Plate dependencies in RS are:
So the entire DS with TipTap is less or equal to just the size of our Plate/Slate dependencies that it allows us to get rid of.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Awesome, thank you. This is exactly what I was hoping to confirm. If it were significantly larger than our deps before, it'd probably be something to give a little more thought before we double down on TipTap.
Just for clarity: does this data comparison includes the extensions for TipTap in addition to
@tiptap/core
?There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It includes all TipTap packages we are using.