Skip to content

Ability to format user and team bio #6572

Merged
zomars merged 28 commits intomainfrom
feat/editor-for-bio
Jan 25, 2023
Merged

Ability to format user and team bio #6572
zomars merged 28 commits intomainfrom
feat/editor-for-bio

Conversation

@CarinaWolli
Copy link
Copy Markdown
Member

What does this PR do?

Adds ability to format user and team bio (bold, italic, link and multi line) by using our already existing <Editor> component.

User bio:
Screenshot 2023-01-19 at 09 37 09

Screenshot 2023-01-19 at 09 26 01

Team bio:

Screenshot 2023-01-19 at 09 26 59

Screenshot 2023-01-19 at 09 27 31

Fixes #6204

Environment: Staging(main branch)

@vercel
Copy link
Copy Markdown

vercel bot commented Jan 19, 2023

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated
cal ✅ Ready (Inspect) Visit Preview 💬 Add your feedback Jan 24, 2023 at 8:30PM (UTC)
cal-com-storybook ✅ Ready (Inspect) Visit Preview 💬 Add your feedback Jan 24, 2023 at 8:30PM (UTC)
1 Ignored Deployment
Name Status Preview Comments Updated
ui ⬜️ Ignored (Inspect) Jan 24, 2023 at 8:30PM (UTC)

setText={(value: string) => setValue("bio", value)}
excludedToolbarItems={["blockType"]}
/>
{errors.bio && (
Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As discussed with @Jaibles, we are making 'about' optional when onboarding (also optional in settings)

@@ -0,0 +1,6 @@
export const getInnerText = (node: string | JSX.Element | JSX.Element[]): string => {
Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

helper function to get text without html tags (used to see if bio is empty)

@CarinaWolli CarinaWolli marked this pull request as ready for review January 19, 2023 18:20
@CarinaWolli CarinaWolli requested a review from a team January 19, 2023 18:20
turndownService.addRule("newLine", {
filter: ["br"],
replacement: () => {
return "<p><br></p>";
Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

allows to add blank lines

@CarinaWolli
Copy link
Copy Markdown
Member Author

PR is ready for review again @zomars The user and team bio is now saved as markdown instead of HTML

@PeerRich PeerRich requested a review from zomars January 24, 2023 19:03
Copy link
Copy Markdown
Contributor

@zomars zomars left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looking good @CarinaWolli just some nitpicks and orphan imports to merge

CarinaWolli and others added 2 commits January 24, 2023 15:08
Copy link
Copy Markdown
Contributor

@zomars zomars left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@zomars zomars merged commit 8640eb9 into main Jan 25, 2023
@zomars zomars deleted the feat/editor-for-bio branch January 25, 2023 01:08
zomars added a commit that referenced this pull request Jan 26, 2023
* use texteditor for bio

* remove block types from about editor

* add props to make editor height adjustable

* set isDirty to true when about input is edited

* add editor to getting-started

* fix editor height

* remove required error for onboarding

* add helper function to check if parsed bio has text

* add back commented code

* fix onboarding tests for optional about field

* rename function

* parse team bio for read only members

* code clean up

* fix failing e2e because of missing test id

* fix onboarding e2e test

* add missing parse of user bio

* Update apps/web/components/getting-started/steps-views/UserProfile.tsx

* Update apps/web/pages/settings/my-account/profile.tsx

Co-authored-by: Omar López <zomars@me.com>

* use css inline style for height instead of tailwind class

* fix height of editor-input

* save bio as markdown in db

* fix empty line when bio is empty

* fix hydration failed error

* Update packages/ui/components/editor/Editor.tsx

Co-authored-by: Omar López <zomars@me.com>

* remove unused import

Co-authored-by: CarinaWolli <wollencarina@gmail.com>
Co-authored-by: Omar López <zomars@me.com>
Co-authored-by: Peer Richelsen <peeroke@gmail.com>
fritterhoff pushed a commit to hm-edu/cal.com that referenced this pull request Jan 27, 2023
* use texteditor for bio

* remove block types from about editor

* add props to make editor height adjustable

* set isDirty to true when about input is edited

* add editor to getting-started

* fix editor height

* remove required error for onboarding

* add helper function to check if parsed bio has text

* add back commented code

* fix onboarding tests for optional about field

* rename function

* parse team bio for read only members

* code clean up

* fix failing e2e because of missing test id

* fix onboarding e2e test

* add missing parse of user bio

* Update apps/web/components/getting-started/steps-views/UserProfile.tsx

* Update apps/web/pages/settings/my-account/profile.tsx

Co-authored-by: Omar López <zomars@me.com>

* use css inline style for height instead of tailwind class

* fix height of editor-input

* save bio as markdown in db

* fix empty line when bio is empty

* fix hydration failed error

* Update packages/ui/components/editor/Editor.tsx

Co-authored-by: Omar López <zomars@me.com>

* remove unused import

Co-authored-by: CarinaWolli <wollencarina@gmail.com>
Co-authored-by: Omar López <zomars@me.com>
Co-authored-by: Peer Richelsen <peeroke@gmail.com>
@shirazdole
Copy link
Copy Markdown

very nice!

@PeerRich
Copy link
Copy Markdown
Member

@shirazdole casually replying to a 3 week old PR

@PeerRich PeerRich added the core area: core, team members only label Jul 24, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

core area: core, team members only

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Multiline 'about' field for profile page

5 participants