feat(ui): composer formatting toolbar - bold/italic/code/link (LC-254) #305

Merged

longjacksonle merged 1 commit from feat/lc-254-composer-format-toolbar into main

2026-06-14 03:21:10 +02:00

longjacksonle commented

2026-06-14 02:19:02 +02:00

Owner

What

Adds a Markdown formatting toolbar above the composer textarea (LC-254). Bold, Italic, Code, and Link buttons help users who do not know Markdown format their messages. Ctrl/Cmd+B and Ctrl/Cmd+I mirror the Bold/Italic buttons.

How

server/templates/room/composer.html: a small toolbar row (type="button" buttons, data-lc-fmt="bold|italic|code|link") above the input row, reusing the existing muted-button styling. A new IIFE wraps the selection (or a localized placeholder) in the right Markdown and re-selects the inner text; Link is special-cased to [text](url) with url selected. Bold **, Italic *, Code backtick.
After every action the handler dispatches a synthetic input event, so the auto-resize (LC-229), draft autosave (LC-64), and send-enable (__lcRefreshSend) all run, identical to the mention/slash insert path. The IIFE shares #composer as cleanup-root and removes its listeners on form swap.
Ctrl/Cmd+B / Ctrl/Cmd+I keydown on the textarea (ignored during IME composition / with Alt; never submits). The mention/slash capture-phase handlers only stopPropagation for Arrow/Enter/Tab/Escape, so they never swallow these.
The LC-252 shortcuts overlay now lists Bold and Italic.

Pure front-end: the body is already rendered as Markdown server-side. No route, DB, or env change. Not operator-visible.

Tests

routes_drafts::room_page_ships_formatting_toolbar asserts the room page ships the toolbar buttons and handler. just test and just test-saas pass.

QA note

The wrap/link transforms, selection handling, and Ctrl/Cmd+B/I are JS-driven, so they want a quick manual click-through before merge: select text and click each button; click with no selection (placeholder inserted + selected); confirm Link selects url; confirm the send button enables and the box resizes after an action; confirm Ctrl+B/Ctrl+I apply without submitting.

## What Adds a Markdown formatting toolbar above the composer textarea (LC-254). Bold, Italic, Code, and Link buttons help users who do not know Markdown format their messages. `Ctrl/Cmd+B` and `Ctrl/Cmd+I` mirror the Bold/Italic buttons. ## How - `server/templates/room/composer.html`: a small toolbar row (`type="button"` buttons, `data-lc-fmt="bold|italic|code|link"`) above the input row, reusing the existing muted-button styling. A new IIFE wraps the selection (or a localized placeholder) in the right Markdown and re-selects the inner text; Link is special-cased to `[text](url)` with `url` selected. Bold `**`, Italic `*`, Code backtick. - After every action the handler dispatches a synthetic `input` event, so the auto-resize (LC-229), draft autosave (LC-64), and send-enable (`__lcRefreshSend`) all run, identical to the mention/slash insert path. The IIFE shares `#composer` as cleanup-root and removes its listeners on form swap. - `Ctrl/Cmd+B` / `Ctrl/Cmd+I` keydown on the textarea (ignored during IME composition / with Alt; never submits). The mention/slash capture-phase handlers only `stopPropagation` for Arrow/Enter/Tab/Escape, so they never swallow these. - The LC-252 shortcuts overlay now lists Bold and Italic. Pure front-end: the body is already rendered as Markdown server-side. No route, DB, or env change. Not operator-visible. ## Tests `routes_drafts::room_page_ships_formatting_toolbar` asserts the room page ships the toolbar buttons and handler. `just test` and `just test-saas` pass. ## QA note The wrap/link transforms, selection handling, and `Ctrl/Cmd+B/I` are JS-driven, so they want a quick manual click-through before merge: select text and click each button; click with no selection (placeholder inserted + selected); confirm Link selects `url`; confirm the send button enables and the box resizes after an action; confirm `Ctrl+B`/`Ctrl+I` apply without submitting.

longjacksonle added 1 commit

2026-06-14 02:19:02 +02:00

feat(ui): composer formatting toolbar - bold/italic/code/link (LC-254)

check-secrets / Kingfisher (pull_request) Successful in 6s

Details

check-secrets / Nosey parker (push) Successful in 4s

Details

check-secrets / Kingfisher (push) Successful in 4s

Details

check-secrets / TruffleHog (push) Successful in 5s

Details

check-secrets / Nosey parker (pull_request) Successful in 3s

Details

check-secrets / TruffleHog (pull_request) Successful in 5s

Details

Check / clippy + fmt + tests (pull_request) Successful in 2m12s

Details

Create release / Create release from merged PR (pull_request) Has been skipped

Details

a4498dffa2

Adds a Markdown formatting toolbar above the composer textarea. Bold, Italic, Code, and Link buttons wrap the current selection (or insert a localized placeholder when nothing is selected) in the matching Markdown; Link inserts [text](url) and selects the url token. Ctrl/Cmd+B and Ctrl/Cmd+I mirror the Bold/Italic buttons.

The body is already rendered as Markdown server-side, so this is a pure client string transform: no route, DB, or env change. After every action the handler dispatches a synthetic input event so the auto-resize (LC-229), draft autosave (LC-64), and send-enable (__lcRefreshSend) all run, exactly like the mention/slash insert path. The toolbar IIFE shares #composer as its cleanup-root and tears its listeners down on form swap.

The LC-252 shortcuts overlay now lists Ctrl/Cmd+B and Ctrl/Cmd+I. Strings localized in en + es. Test asserts the room page ships the toolbar markup and handler.

#LC-254
#LC-255

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>