Skip to content

chat: Slack-level composer markup + fix clipped inline toolbar (F-385/F-386)#95

Merged
th3-br41n merged 1 commit into
mainfrom
chat-rich-composer
Jul 3, 2026
Merged

chat: Slack-level composer markup + fix clipped inline toolbar (F-385/F-386)#95
th3-br41n merged 1 commit into
mainfrom
chat-rich-composer

Conversation

@th3-br41n

Copy link
Copy Markdown
Contributor

What

Two user-reported chat issues (screenshot: selecting text popped a broken clipped shard of a toolbar; no way to write lists in a message), fixed at the shared <CompactEditor> level so chat, comments and the Agent composer all inherit it.

Fix — clipped/stacked selection toolbar (F-385)

The toolbar borrows the fancy-menus .fm-menu glass, which ships flex-direction: column; overflow: hidden. editor-theme.css pinned row/visible at equal specificity (0,1,0), so whichever stylesheet an app's bundle emits last wins — Notes happened to order them safely, chat didn't, and the toolbar painted as a clipped vertical stack. Now the order-proof compound .fm-menu.notes__inline-toolbar (0,2,0) — the exact pattern the toolbar's own colour/overflow dropdowns already carried for the same reason.

Feature — Slack composer vocabulary (F-386)

  • Blocks: bulleted / numbered / to-do lists, quote, code block (ListNode/ListItemNode/QuoteNode/CodeNode + ListPlugin/CheckListPlugin).
  • Markdown shortcuts: - · 1. · [] · > · fenced code · inline marks · [text](url) — deliberately no headings (a message is not a document).
  • Enter semantics: Enter sends (unchanged); Shift+Enter is a soft newline, or the next list item when the caret is in a list (Slack model).
  • Toolbar: opt-in bullet/numbered/to-do toggles on the shared InlineToolbarPlugin (lists prop, on for every CompactEditor; Notes/full editors unchanged).
  • Autolink: typed/pasted bare URLs link as you type; www. hosts get https:// prepended.
  • Read path: baseline theme + compact-editor.css carry the checklist face; the Lexical-free renderEditorState now renders check lists with checked state, so sent messages match the draft. Inline @-mentions already rendered in-text (PR feat(mentions): Slack-style inline @-mentions in chat + agent composers, avatar circle fix #74).

Verification

  • packages/editor 589 tests green (new: composer node round-trip, curated markdown vocabulary incl. no-headings, Enter-submit vs Shift+Enter-next-item); apps/chat 39 green; apps/agent green; typecheck + lint (incl. css-token check) clean.
  • New real-shell visual spec tests/visual/specs/chat-rich-composer.spec.ts: asserts the toolbar's computed horizontal geometry (regression for the cascade bug), toolbar list toggle, Shift+Enter next item, and [ ] / 1. send round-trips.
toolbar (was a clipped 2-button stack) sent lists
horizontal B/I/U/S/code + list toggles + colour/link pill bullets, unchecked to-do, numbered — rendered in transcript

Friction log F-385/F-386 + the implementation-plan Chats-slice rung land in the docs repo alongside this.

🤖 Generated with Claude Code

…/F-386)

Two user-reported chat issues, fixed at the shared-surface level so
comments and the Agent composer inherit everything:

- Fix the selection toolbar rendering as a clipped vertical stack in
  chat: the fancy-menus `.fm-menu` base (column + overflow:hidden) beat
  `.notes__inline-toolbar` at equal specificity whenever an app's bundle
  emitted the runtime CSS later. Order-proof compound selector
  `.fm-menu.notes__inline-toolbar`, the same pattern the toolbar's own
  dropdowns already used.
- CompactEditor grows the message-sized blocks: bulleted / numbered /
  to-do lists, quote and code block, via a curated Markdown shortcut
  vocabulary (`- ` `1. ` `[] ` `> ` fenced code, inline marks, links —
  deliberately no headings), plus typed-URL autolink. Enter still
  sends; Shift+Enter starts the NEXT list item when the caret is in a
  list (Slack model).
- InlineToolbarPlugin gains opt-in bullet/numbered/to-do toggles (on
  for every CompactEditor); three new editor.inline.* strings.
- Baseline theme + compact-editor.css carry the checklist face; the
  Lexical-free renderEditorState renders `check` lists with their
  checked state so a sent message matches the draft.
- Real-shell visual spec (chat-rich-composer.spec.ts): asserts the
  toolbar's computed horizontal geometry, toolbar list toggle,
  Shift+Enter next-item, and `[ ] ` / `1. ` send round-trips.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@th3-br41n th3-br41n merged commit 566a85a into main Jul 3, 2026
3 checks passed
@th3-br41n th3-br41n deleted the chat-rich-composer branch July 3, 2026 22:19
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant