Add Markdown editing and preview to the profile bio field #972

New issue

Open

opened 2026-10-15 08:12:47 -05:00 by Codex · 0 comments

Codex commented

2026-10-15 08:12:47 -05:00

Member

The profile settings page is a Livewire settings surface, and the requested change concerns the user profile bio field.

The application already centralizes Markdown rendering in app/Support, so the editor preview should reuse that rendering path rather than introduce a separate formatter.

The requested textarea sizing and resize behavior are presentation improvements for the user profile settings UI.

Scope

Add a basic Markdown toolbar for the profile bio textarea on the Profile tab at /settings/profile.
Support common formatting actions including bold, italic, and headings without changing the existing bio persistence contract.
Add an in-place preview that renders the current bio through the existing Markdown rendering abstraction.
Make the bio textarea full width and disable manual resizing.
Preserve the existing profile authorization, validation, and save behavior.

Acceptance Criteria

The Profile tab at /settings/profile provides controls for inserting bold, italic, and heading Markdown into the bio field.
Users can switch between editing the bio and previewing the current Markdown content without losing unsaved text.
Preview output uses the application's existing Markdown rendering behavior and does not introduce a second Markdown implementation.
The bio textarea occupies the available width and cannot be manually resized.
Saving the profile continues to persist the bio using the existing settings flow.
Existing profile settings behavior remains unchanged when the editor controls and preview are not used.

Test Coverage Required

Add feature coverage for rendering the profile settings bio editor and its preview controls.
Add browser-facing component coverage for the formatting controls updating the bio input and previewing unsaved Markdown, using the repository's existing Livewire test conventions.
Add coverage that the existing profile save flow persists the edited bio unchanged.
Add regression coverage for empty and plain-text bios.

Progress Checklist

Inspect and update the Livewire profile settings component and its Blade view.
Reuse app/Support/MarkdownRenderer.php for preview rendering.
Add the editor and preview interaction using the repository's existing frontend conventions.
Apply full-width and non-resizable textarea styling in the profile settings view or its existing stylesheet.
Add focused tests for editor interactions, preview output, and persistence.
Run the repository's prescribed focused tests, Pint, PHPStan, and asset build after implementation.

The profile settings page is a Livewire settings surface, and the requested change concerns the user profile bio field. The application already centralizes Markdown rendering in app/Support, so the editor preview should reuse that rendering path rather than introduce a separate formatter. The requested textarea sizing and resize behavior are presentation improvements for the user profile settings UI. ## Scope - Add a basic Markdown toolbar for the profile bio textarea on the Profile tab at /settings/profile. - Support common formatting actions including bold, italic, and headings without changing the existing bio persistence contract. - Add an in-place preview that renders the current bio through the existing Markdown rendering abstraction. - Make the bio textarea full width and disable manual resizing. - Preserve the existing profile authorization, validation, and save behavior. ## Acceptance Criteria - The Profile tab at /settings/profile provides controls for inserting bold, italic, and heading Markdown into the bio field. - Users can switch between editing the bio and previewing the current Markdown content without losing unsaved text. - Preview output uses the application's existing Markdown rendering behavior and does not introduce a second Markdown implementation. - The bio textarea occupies the available width and cannot be manually resized. - Saving the profile continues to persist the bio using the existing settings flow. - Existing profile settings behavior remains unchanged when the editor controls and preview are not used. ## Test Coverage Required - Add feature coverage for rendering the profile settings bio editor and its preview controls. - Add browser-facing component coverage for the formatting controls updating the bio input and previewing unsaved Markdown, using the repository's existing Livewire test conventions. - Add coverage that the existing profile save flow persists the edited bio unchanged. - Add regression coverage for empty and plain-text bios. ## Progress Checklist - [ ] Inspect and update the Livewire profile settings component and its Blade view. - [ ] Reuse app/Support/MarkdownRenderer.php for preview rendering. - [ ] Add the editor and preview interaction using the repository's existing frontend conventions. - [ ] Apply full-width and non-resizable textarea styling in the profile settings view or its existing stylesheet. - [ ] Add focused tests for editor interactions, preview output, and persistence. - [ ] Run the repository's prescribed focused tests, Pint, PHPStan, and asset build after implementation.

Codex added the

status

needs codex review

label

2026-10-15 08:12:47 -05:00

Codex changed title from ~~Improve Bio Text Area on Edit Account Settings Page~~ to Add Markdown editing and preview to the profile bio field

2026-10-15 09:13:29 -05:00

Codex added

component: user profiles

component: web design

priority

medium