Story 2458: Webpage Integration: Edit User Profile - Bio and tagline

[javiercoronadonarvaez]

Issue: #2458

Summary & Context

Adds editable tagline (plain text, 70-char limit and counter, saved on "Save Changes") and biography (rich-text editor with local auto-save, and 20,000 character limit and counter) to the user profile, persists both to the User record, and renders the saved biography on the public profile.

• Figma link: https://www.figma.com/design/5j0fQssrV9ipoU16P7hfKy/Website-Deliverables?node-id=1644-125597
• Link to components/page: http://localhost:8000/users/me/?edit=True (edit) · http://localhost:8000/users/me/ (display)

Changes

• Add tagline (CharField, max 70) and biography (TextField) to the User model via migration 0022.
• Edit profile page: tagline input with live character counter and Saving/Saved indicator; biography rich-text editor (bold, italic, underline, ordered list, link, markdown; undo/redo greyed when there's no history) with character counter and a local auto-save indicator.
• Persist tagline and biography on Save Changes via PATCH /api/v1/users/me/ (reused the existing CurrentUserAPIView; added both fields to CurrentUserSerializer).
• Pre fill the edit form with the user's saved tagline and biography on load.
• Implement character limit enforcement for both tagline and biography.
• Render the saved biography as rich text on the public profile (markdown → HTML), falling back to name and role when empty.
• Fix: the tagline "Saved" indicator now hides when the field is empty (matching biography behavior).
• "Edit Profile" actions link to /users/me/?edit=True.
• Add an optional alpine_click to the shared _button.html include.

‼️ Risks & Considerations ‼️

Please list any potential risks or areas that need extra attention during review/testing

Kept PATCH /api/v1/users/me/ instead of the ticket's POST /api/user/profile endpoints.

• PATCH is the correct verb for updating a few fields on the current user. It's a partial, idempotent update; POST for an update is weaker and non-idempotent.
• The endpoint already exists and is tested (CurrentUserAPIView). I only added two serializer fields, so no need for new view, URL, or save logic.
• It keeps the codebase's /api/v1/ versioning convention (the ticket's path was unversioned).

Biography is stored as markdown, not HTML. The existing WYSIWYG editor serializes to markdown and the bio card renders markdown → HTML, so I kept that pipeline. (The ticket's "HTML" backend note doesn't match the existing infrastructure.)

Meet Boost Core homepage tagline display is intentionally deferred (out of scope for this PR).

• That section is still mock data. Showing real taglines would first require switching it to real users, which is a separate content/product decision.
• It renders through the shared _user_profile.html (used by many other cards), so changing it there has wide repercussions.
• Tagline-setting isn't live yet, so every author would render the empty state (name and role) regardless.

Screenshots

Local Storage Persistence and correct endpoint redirection

ProfileLocalStoragePersistance.mov

On Save Persistence Functionality

Funcionality.mov

Character Limiting

CharacterLimitEnforced.mov

Self-review Checklist

• Tag at least one team member from each team to review this PR
• Link this PR to the related GitHub Project ticket

Frontend

• UI implementation matches Figma design
• Tested in light and dark mode
• Responsive / mobile verified
• Accessibility checked (keyboard navigation, etc.)
• Ensure design tokens are used for colors, spacing, typography, etc. – No hardcoded values
• Test without JavaScript (if applicable)
• No console errors or warnings

Summary by CodeRabbit

• New Features

  • Added editable profile bios, taglines, and public profile links.
  • Added character limits and live character counts for profile text fields.
  • Improved the WYSIWYG editor with a bio-specific toolbar and clearer save feedback.

• Bug Fixes

  • Disabled editor buttons now reflect unavailable actions more clearly.
  • Profile link handling now better supports Slack-style links and validation.
  • Updated the Edit Profile link destination and improved avatar path consistency.

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: c263c7cf-013e-4c2d-8667-00343f754a69

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

• @coderabbitai resume to resume automatic reviews.
• @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

• ▶️ Resume reviews
• 🔍 Trigger review

📝 Walkthrough

Walkthrough

This PR adds biography, tagline, and profile-links fields to the User model with related migrations, serializer validation, and admin/form/view wiring. It introduces a WYSIWYG editor "bio" preset with disabled-button styling and character-limit enforcement, and reworks the profile edit page into an Alpine-driven async save flow. A testimonial asset path is also corrected.

Changes

Profile editing

Layer / File(s)	Summary
Profile data contracts and backend wiring users/models.py, users/migrations/0022...0025_*, users/serializers.py, users/admin.py, users/forms.py, users/views.py, core/context_processors.py, templates/v3/includes/header/_header_avatar.html, users/tests/test_serializers.py, users/tests/test_forms.py	Adds tagline, biography, and profile_links fields/constants to User with matching migrations, validates profile_links (including Slack/URL checks) in the serializer, exposes fields in admin, derives form limits from model constants, adds Slack display-link handling, and wires edit_profile_url() through views/context processors/header link; covered by new tests.
Editor and maxlength support frontend/wysiwyg-editor.js, static/css/v3/wysiwyg-editor.css, templates/v3/includes/_wysiwyg_editor.html, templates/v3/includes/_field_text.html, package.json	Adds a bio toolbar preset with disabled undo/redo styling, a MarkdownLengthLimit TipTap extension gated by data-wysiwyg-maxlength, emits markdownCharacters in wysiwyg-update, adds matching CSS and template attribute support, and reorders package.json dependencies.
Profile form save flow templates/v3/user_profile_edit.html, templates/v3/includes/_button.html	Wraps the profile card in x-data="profileForm", adds window.profileForm for async PATCH /api/v1/users/me/ with link/biography validation, updates the biography counter/error UI, adjusts tagline autosave for empty input, and adds an optional alpine_click attribute on buttons.

Estimated code review effort: 4 (Complex) | ~60 minutes

Mock data cleanup

Layer / File(s)	Summary
Testimonial asset path core/mock_data.py	Updates a testimonial avatar path from demo_page to demo-page.

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant ProfileEditPage as templates/v3/user_profile_edit.html
  participant ProfileForm as window.profileForm
  participant WysiwygEditor as frontend/wysiwyg-editor.js
  participant UsersApi as /api/v1/users/me/

  User->>ProfileEditPage: edit tagline, biography, links
  WysiwygEditor->>ProfileEditPage: wysiwyg-update (markdownCharacters)
  User->>ProfileForm: click "Save Changes"
  ProfileForm->>WysiwygEditor: currentBiography()
  ProfileForm->>ProfileForm: validate links and biography length
  ProfileForm->>UsersApi: PATCH tagline, biography, profile_links
  UsersApi-->>ProfileForm: success/error response
  ProfileForm-->>ProfileEditPage: update saveStatus/saveError

Loading

Possibly related issues

• Webpage Integration: Edit User Profile - Bio and tagline #2458: Implements the edit profile bio/tagline flow described, including the 20k biography limit, 70-char tagline, and profile save UI/backend wiring.

Possibly related PRs

• boostorg/website-v2#2473: Both PRs modify the WYSIWYG editor's wysiwyg-update event/host-page bridge behavior in frontend/wysiwyg-editor.js.
• boostorg/website-v2#2477: Both PRs touch the wysiwyg-update event contract in frontend/wysiwyg-editor.js, including the markdownCharacters detail added here.
• boostorg/website-v2#2478: Both PRs modify createToolbarButton/toolbar logic in frontend/wysiwyg-editor.js.

Suggested reviewers: jlchilders11, ycanales, herzog0

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Title check	✅ Passed	The title clearly names the main change: adding bio and tagline editing to the user profile.
Description check	✅ Passed	The description follows the template with issue, summary/context, changes, risks, screenshots, and checklist sections filled in.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch javiercoronarv/edit-user-profile-with-bio-tagline

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[jlchilders11]

In addition to a few nits that I'd like updated, I notice that the submit functionality doesn't seem to have a non javascript version?

[javiercoronadonarvaez]

In addition to a few nits that I'd like updated, I notice that the submit functionality doesn't seem to have a non javascript version?

Got it! Made changes in accordance with your comments, which I think they were all correct.

With respect to the submit functionality not having a non-JS version, however, I consider this could be handled separately because it requires a page-wide change. We don't currently have any <form> elements in this version of the page, not just for the tagline and 'biography' fields for this version. I could take this task on.

What do you think? Sorry if I missed this part. I didn't get it from the ticket's descripton.

[jlchilders11]

In addition to a few nits that I'd like updated, I notice that the submit functionality doesn't seem to have a non javascript version?

Got it! Made changes in accordance with your comments, which I think they were all correct.

With respect to the submit functionality not having a non-JS version, however, I consider this could be handled separately because it requires a page-wide change. We don't currently have any <form> elements in this version of the page, not just for the tagline and 'biography' fields for this version. I could take this task on.

What do you think? Sorry if I missed this part. I didn't get it from the ticket's descripton.

So the form elements were not added to the UI, since it was assumed the integrator would put those elements where they believed they would work best. I do believe there may be a larger discussion about how we want to handle the full page submission, since it seems the integration tickets don't handle that case/non js version.

[jlchilders11]

Per discussion with Teo, the JS-less submit will be spun off into its own ticket, to be completed once all other sections are complete: #2509

[julhoang]

Hi @javiercoronadonarvaez , I've added a couple of request below. Additionally, would you mind adding a top margin/padding above the "This tagline is displayed next..." help text to better match Figma? Thanks a lot!

[julhoang]

Would you mind helping me understand why we're adding icons for just this Bio section? I thought the const ICONS above should already have these as well 🤔

[javiercoronadonarvaez]

Hey Julia, using BIO_ICONS is intentional rather than a duplicate. The main reason is that bio design employs a different icon style than the existing ICONS set. In that sense, the news/examples editors read from ICONS, so if I folded the bio glyphs into ICONS, I'd silently change the toolbar appearance of other wysiwyg instance in the app.

Please note that wysiwyg for bio is different than how it's render in other places, like that for posts, for example. You could say that the bio wysiwyg is a more bare bones version. You only have a few of the total number of options to edit the text.

[julhoang]

Very well-spotted and thanks for flagging this! I've flagged this to Glauber and we can handle consolidating the icon set in a follow-up ticket.

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

users/views.py (1)

368-371: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

Ambiguous unicode apostrophe in fallback string.

Static analysis flags the ’ (right single quotation mark, U+2019) in this fallback copy vs. a plain ASCII apostrophe. Cosmetic only, but worth normalizing for consistency with other fallback strings in this file.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@users/views.py` around lines 368 - 371, The fallback bio copy in the user
context setup uses a non-ASCII apostrophe, which should be normalized for
consistency with the other strings in this file. Update the fallback string in
the logic that assigns ctx["bio"] within the user view to use a plain ASCII
apostrophe instead of the curly apostrophe, keeping the message otherwise
unchanged.

Source: Linters/SAST tools

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@templates/v3/includes/_field_text.html`:
- Around line 100-101: The Alpine state for the text field is still initializing
value to an empty string, so prefilled server-rendered text is not preserved and
the counter starts incorrectly. Update the x-data initialization in the field
text template so the value state is seeded from the rendered input value when
max_chars/x-model="value" is used, and make sure the character counter derives
from that initial value in the same component.

---

Nitpick comments:
In `@users/views.py`:
- Around line 368-371: The fallback bio copy in the user context setup uses a
non-ASCII apostrophe, which should be normalized for consistency with the other
strings in this file. Update the fallback string in the logic that assigns
ctx["bio"] within the user view to use a plain ASCII apostrophe instead of the
curly apostrophe, keeping the message otherwise unchanged.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: bb4ef39e-1e82-4281-9aad-9111ef1ff4ea

📥 Commits

Reviewing files that changed from the base of the PR and between 90693e0 and d735e20.

⛔ Files ignored due to path filters (1)

• yarn.lock is excluded by !**/yarn.lock, !**/*.lock

📒 Files selected for processing (15)

• core/mock_data.py
• frontend/wysiwyg-editor.js
• package.json
• static/css/v3/wysiwyg-editor.css
• static/js/v3/wysiwyg-editor.js
• templates/v3/includes/_button.html
• templates/v3/includes/_field_text.html
• templates/v3/includes/_wysiwyg_editor.html
• templates/v3/includes/header/_header_avatar.html
• templates/v3/user_profile_edit.html
• users/admin.py
• users/migrations/0022_user_biography_user_tagline.py
• users/models.py
• users/serializers.py
• users/views.py

✅ Files skipped from review due to trivial changes (1)

• core/mock_data.py

🚧 Files skipped from review as they are similar to previous changes (9)

• templates/v3/includes/_button.html
• users/admin.py
• templates/v3/includes/header/_header_avatar.html
• users/serializers.py
• static/css/v3/wysiwyg-editor.css
• users/models.py
• package.json
• templates/v3/user_profile_edit.html
• frontend/wysiwyg-editor.js

[julhoang]

Hi @herzog0 ! I have 2 more suggestions for this PR and would love to hear your thoughts!

1. Right now, saving changes to the tagline + bio doesn't wipe the localStorage data, so returning to the User Profile page always renders from localStorage instead of the actual DB state. This makes it a bit confusing to tell whether the data we see is temporary or has actually been saved. Can we clear out the localStorage keys upon saving the fields?
   Edit: Oh actually, I forgot user can see the saved data at: http://localhost:8000/users/me/, so maybe this localStorage persistence is beneficial to save drafts 🤔. We can probably just disregard my comment above!
2. Right now, the tagline has a check that prevents users from typing past the character limit, but biography allows over-typing. I'm wondering if we can pick one behaviour and make it consistent across both fields?
3. Nit UI: The help text of the tagline field is missing a margin top (--space-default)

[julhoang]

Since this biography field is added in this PR, can we fold this change into the 0022 migration?

[coderabbitai]

🧹 Nitpick comments (1)

users/forms.py (1)

189-196: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

Consider moving SLACK_TEAM_ID to Django settings.

SLACK_TEAM_ID is hardcoded as a module-level constant. If this value varies per environment (e.g., staging vs. production Slack workspaces), it would require a code change rather than a configuration change. Moving it to settings.py would improve deployability.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@users/forms.py` around lines 189 - 196, Move the hardcoded SLACK_TEAM_ID in
users/forms.py into Django settings and read it from there when building
SLACK_APP_REDIRECT_URL_PREFIX. Update the Slack link construction in the module
so it uses the configured settings value instead of a module-level constant, and
ensure any related usage in user_profile_edit.html stays aligned with the same
setting.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@users/forms.py`:
- Around line 189-196: Move the hardcoded SLACK_TEAM_ID in users/forms.py into
Django settings and read it from there when building
SLACK_APP_REDIRECT_URL_PREFIX. Update the Slack link construction in the module
so it uses the configured settings value instead of a module-level constant, and
ensure any related usage in user_profile_edit.html stays aligned with the same
setting.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 242428b9-eec2-4346-a977-a83b908f2830

📥 Commits

Reviewing files that changed from the base of the PR and between 8ed2a8f and 0ad7fca.

📒 Files selected for processing (22)

• core/context_processors.py
• core/mock_data.py
• frontend/wysiwyg-editor.js
• package.json
• static/css/v3/wysiwyg-editor.css
• static/js/v3/wysiwyg-editor.js
• templates/v3/includes/_button.html
• templates/v3/includes/_field_text.html
• templates/v3/includes/_wysiwyg_editor.html
• templates/v3/includes/header/_header_avatar.html
• templates/v3/user_profile_edit.html
• users/admin.py
• users/forms.py
• users/migrations/0022_user_profile_links.py
• users/migrations/0023_user_biography_user_tagline.py
• users/migrations/0024_add_biography_max_length.py
• users/migrations/0025_alter_user_biography_alter_user_profile_links.py
• users/models.py
• users/serializers.py
• users/tests/test_forms.py
• users/tests/test_serializers.py
• users/views.py

✅ Files skipped from review due to trivial changes (1)

• package.json

🚧 Files skipped from review as they are similar to previous changes (8)

• templates/v3/includes/_button.html
• users/admin.py
• core/mock_data.py
• templates/v3/includes/_field_text.html
• templates/v3/includes/header/_header_avatar.html
• static/css/v3/wysiwyg-editor.css
• frontend/wysiwyg-editor.js
• templates/v3/user_profile_edit.html

[julhoang]

Hi @herzog0 ! Thanks for all of your updates. I just have a few super nit UI/UX suggestions that I'll mention below, none are blockers though – approving now! 🙌

--
1/ I've just happened to come across this UI issue where if I keep typing a ridiculous long word, the page layout will break since the textarea width keep expanding 😅 I think adding a simple word-break will resolve this issue.

2/ I noticed that the Biography still allow going over the character limit if you paste in the text, while the Tagline truncate the pasted-text. It'd be great if the UX can be a bit more consistent here.

3/ Upon saving the data and refresh the page, the Biography field still "Saved to draft" while Tagline correctly doesn't have it. I think the Biography's "Saved to draft" shouldn't be there.