Editor: formatting toolbar too long, mixed icon styles; block hover actions sit one line above the block and dismiss before reachable #604

Open
opened 2026-10-01 09:38:25 +00:00 by kayg · 0 comments
Owner

Owner report (2026-10-01, Notes editor screenshot)

  1. "This formatting toolbar is longer than it needs to be." It has 15 buttons in one bar (B, I, U, S, highlight, code, link, H1, H2, H3, bullets, numbers, checklist, quote, code block).
  2. "The right side thing appears one line above the hovered line, which has the problem that I can't reach any buttons because they correctly auto-dismiss when I go to the line above." The block hover actions (→, clock, ⋯) are offset one line up from the hovered block, so moving the pointer to them leaves the block and dismisses them.
  3. "The icons in the formatting toolbar also look super weird!" The glyph styles are mixed: a solid B, a slanted I drawn as a line, text "H1/H2/H3", and different stroke weights.
    Fix (packages/editor + the shared toolbar/icon set):
  • Shorter toolbar (Apple Notes / Craft / Notion conventions; cite them): inline marks only (Bold, Italic, Underline, Strike, Highlight, Code, Link) + one "Text style" menu (Body, H1, H2, H3, lists, checklist, quote, code block) as a single button with the current style shown. Turn-into actions live in the block ⋯ menu as well. Overflow goes into ⋯ at narrow widths.
  • Block actions are vertically centred on the hovered block's first line, with a hover bridge (a padded hit area or safe triangle) from the block to the actions so moving the pointer there never dismisses them. They stay while the pointer is over the block or the actions.
  • Icons: one consistent icon set at one stroke weight and size from the shared icon tokens (the same set as the rest of the app). Heading items use the icon set's heading glyphs or the text in the type tokens, never mixed. Zoom-check at 3×.
    Tests: e2e: hover a block, move to each action and click it (it must not dismiss); the toolbar width at 1440 ≤ a fixed budget; a screenshot of the toolbar in both themes at 3×.
## Owner report (2026-10-01, Notes editor screenshot) 1. "This formatting toolbar is longer than it needs to be." It has 15 buttons in one bar (B, I, U, S, highlight, code, link, H1, H2, H3, bullets, numbers, checklist, quote, code block). 2. "The right side thing appears one line above the hovered line, which has the problem that I can't reach any buttons because they correctly auto-dismiss when I go to the line above." The block hover actions (→, clock, ⋯) are offset one line up from the hovered block, so moving the pointer to them leaves the block and dismisses them. 3. "The icons in the formatting toolbar also look super weird!" The glyph styles are mixed: a solid **B**, a slanted *I* drawn as a line, text "H1/H2/H3", and different stroke weights. **Fix (packages/editor + the shared toolbar/icon set):** - **Shorter toolbar** (Apple Notes / Craft / Notion conventions; cite them): inline marks only (Bold, Italic, Underline, Strike, Highlight, Code, Link) + one **"Text style" menu** (Body, H1, H2, H3, lists, checklist, quote, code block) as a single button with the current style shown. Turn-into actions live in the block ⋯ menu as well. Overflow goes into ⋯ at narrow widths. - **Block actions** are vertically centred on the hovered block's first line, with a hover bridge (a padded hit area or safe triangle) from the block to the actions so moving the pointer there never dismisses them. They stay while the pointer is over the block or the actions. - **Icons:** one consistent icon set at one stroke weight and size from the shared icon tokens (the same set as the rest of the app). Heading items use the icon set's heading glyphs or the text in the type tokens, never mixed. Zoom-check at 3×. **Tests:** e2e: hover a block, move to each action and click it (it must not dismiss); the toolbar width at 1440 ≤ a fixed budget; a screenshot of the toolbar in both themes at 3×.
Sign in to join this conversation.
No labels
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference
kayg/calternal#604
No description provided.