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.

Sign up for GitHub

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

Jump to bottom

Add RichTextEditor component #972

Merged
merged 13 commits into from
Jul 19, 2023
Merged

Add RichTextEditor component #972

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
4008449
Add RichTextEditor component
gabescarbrough Jul 14, 2023
987d346
Make focus match Input
gabescarbrough Jul 18, 2023
0e3ebf2
Make menu bar and input more cohesive
gabescarbrough Jul 18, 2023
effd230
Add aria labels and textbox role
gabescarbrough Jul 18, 2023
3221bcd
Fix snapshot
gabescarbrough Jul 18, 2023
2d9f166
Simplify border-radius
gabescarbrough Jul 18, 2023
64276f1
Use SCSS variables and mixins
gabescarbrough Jul 19, 2023
b907dec
Don't abbreviate rich text editor in variables
gabescarbrough Jul 19, 2023
c8b00bb
Switch menu bar actions to IconButton
gabescarbrough Jul 19, 2023
0d4c698
Add examples to docs
gabescarbrough Jul 19, 2023
40e1b7a
Use regex for URL protocol check
gabescarbrough Jul 19, 2023
f44fa48
Linter method chain formatting
gabescarbrough Jul 19, 2023
6e2ca8a
Spread named prop for ARIA attributes
gabescarbrough Jul 19, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 17 additions & 0 deletions package.json
View file
Open in desktop
Copy link
Collaborator

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

Copy link
Contributor Author

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?

Copy link
Collaborator

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

Copy link
Contributor Author

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.

Copy link
Collaborator

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.

Copy link
Contributor Author

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

  • 261.9 kB MIN
  • 86.9 kB MIN + GZIP

DS with TipTap

  • 600.6 kB MIN
  • 217.8 kB MIN + GZIP

So between 2 to 2.5x the bundle size.

Slate and Plate dependencies in RS are:

  • 679 kB MIN
  • 203.4 kB MIN + GZIP

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.

Copy link
Collaborator

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?

Copy link
Contributor Author

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.

Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,30 @@
"name": "@user-interviews/ui-design-system",
"version": "2.0.4",
"dependencies": {
"@tiptap/core": "^2.0.3",
"@tiptap/extension-bold": "^2.0.3",
"@tiptap/extension-bullet-list": "^2.0.3",
"@tiptap/extension-character-count": "^2.0.3",
"@tiptap/extension-document": "^2.0.3",
"@tiptap/extension-hard-break": "^2.0.3",
"@tiptap/extension-history": "^2.0.3",
"@tiptap/extension-italic": "^2.0.3",
"@tiptap/extension-link": "^2.0.3",
"@tiptap/extension-list-item": "^2.0.3",
"@tiptap/extension-ordered-list": "^2.0.3",
"@tiptap/extension-paragraph": "^2.0.3",
"@tiptap/extension-placeholder": "^2.0.3",
"@tiptap/extension-text": "^2.0.3",
"@tiptap/pm": "^2.0.3",
"@tiptap/react": "^2.0.3",
"react-bootstrap": "^2.5.0",
"react-currency-input-field": "^3.6.10",
"react-loading-skeleton": "^3.1.0",
"react-router-dom": "^5.2.0",
"react-select": "^5.0.0",
"react-toggle": "4.1.1",
"react-transition-group": "^4.3.0",
"sanitize-html": "^2.11.0",
"uuid": "^7.0.2"
},
"scripts": {
Expand Down
215 changes: 215 additions & 0 deletions spec/__snapshots__/Storyshots.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10559,6 +10559,221 @@ exports[`Storyshots Components/RadioButton With Description 1`] = `
</label>
`;

exports[`Storyshots Components/RichTextEditor Available Actions 1`] = `
Array [
<span
aria-busy={true}
aria-live="polite"
>
<span
className="react-loading-skeleton LoadingSkeleton"
style={
Object {
"--base-color": "#E1E1E1",
"borderRadius": "0.25rem",
"height": 40,
"width": "100%",
}
}
>
‌
</span>
<br />
</span>,
<span
aria-busy={true}
aria-live="polite"
>
<span
className="react-loading-skeleton LoadingSkeleton"
style={
Object {
"--base-color": "#E1E1E1",
"borderRadius": "0.25rem",
"height": 70,
"width": "100%",
}
}
>
‌
</span>
<br />
</span>,
]
`;

exports[`Storyshots Components/RichTextEditor Character Limit 1`] = `
Array [
<span
aria-busy={true}
aria-live="polite"
>
<span
className="react-loading-skeleton LoadingSkeleton"
style={
Object {
"--base-color": "#E1E1E1",
"borderRadius": "0.25rem",
"height": 40,
"width": "100%",
}
}
>
‌
</span>
<br />
</span>,
<span
aria-busy={true}
aria-live="polite"
>
<span
className="react-loading-skeleton LoadingSkeleton"
style={
Object {
"--base-color": "#E1E1E1",
"borderRadius": "0.25rem",
"height": 70,
"width": "100%",
}
}
>
‌
</span>
<br />
</span>,
]
`;

exports[`Storyshots Components/RichTextEditor Default 1`] = `
Array [
<span
aria-busy={true}
aria-live="polite"
>
<span
className="react-loading-skeleton LoadingSkeleton"
style={
Object {
"--base-color": "#E1E1E1",
"borderRadius": "0.25rem",
"height": 40,
"width": "100%",
}
}
>
‌
</span>
<br />
</span>,
<span
aria-busy={true}
aria-live="polite"
>
<span
className="react-loading-skeleton LoadingSkeleton"
style={
Object {
"--base-color": "#E1E1E1",
"borderRadius": "0.25rem",
"height": 70,
"width": "100%",
}
}
>
‌
</span>
<br />
</span>,
]
`;

exports[`Storyshots Components/RichTextEditor Error 1`] = `
Array [
<span
aria-busy={true}
aria-live="polite"
>
<span
className="react-loading-skeleton LoadingSkeleton"
style={
Object {
"--base-color": "#E1E1E1",
"borderRadius": "0.25rem",
"height": 40,
"width": "100%",
}
}
>
‌
</span>
<br />
</span>,
<span
aria-busy={true}
aria-live="polite"
>
<span
className="react-loading-skeleton LoadingSkeleton"
style={
Object {
"--base-color": "#E1E1E1",
"borderRadius": "0.25rem",
"height": 70,
"width": "100%",
}
}
>
‌
</span>
<br />
</span>,
]
`;

exports[`Storyshots Components/RichTextEditor One Line 1`] = `
Array [
<span
aria-busy={true}
aria-live="polite"
>
<span
className="react-loading-skeleton LoadingSkeleton"
style={
Object {
"--base-color": "#E1E1E1",
"borderRadius": "0.25rem",
"height": 40,
"width": "100%",
}
}
>
‌
</span>
<br />
</span>,
<span
aria-busy={true}
aria-live="polite"
>
<span
className="react-loading-skeleton LoadingSkeleton"
style={
Object {
"--base-color": "#E1E1E1",
"borderRadius": "0.25rem",
"height": 70,
"width": "100%",
}
}
>
‌
</span>
<br />
</span>,
]
`;

exports[`Storyshots Components/Selects/Async Default 1`] = `
<div
className="FormGroup"
Expand Down
Loading
Loading