feat(apollo-react): add formatting toolbar to sticky notes (2/3) [MST-7636]

[david-rios-uipath]

Summary

NOTE: this PR is focused on the UI that consumes the logic added in the bottom PR.

Adds an opinionated markdown editor UI for sticky notes.

It supports bold, italic, strikethrough, bullet lists, and numbered lists.

Interaction modes:

• Toolbar
• Keyboard

2026-03-30.17.37.18.mp4

Changes

• FormattingToolbar component — toolbar with icon buttons for bold, italic, strikethrough, bullet list, and numbered list
• Keyboard shortcuts — Cmd+B (bold), Cmd+I (italic), Cmd+Shift+X (strikethrough)
• Smart toggle — clicking a format button when cursor is inside a formatted region removes the markers instead of inserting redundant ones
• Bold+italic detection — correctly detects and toggles ***combined*** markers in toolbar state
• List-aware formatting — applies inline formatting per-line in lists, protecting - and N. prefixes from being wrapped
• Enter key list continuation — auto-inserts next bullet/number on Enter; exits list on empty item
• Line-scoped detection — format detection respects line boundaries to prevent cross-line false positives
• Double-click guard — prevents toolbar double-clicks from selecting all textarea content
• Toolbar styling — adjusted spacing and padding for editing mode

Flow

flowchart TD
    A[User action: click toolbar / keyboard shortcut] --> B{Has selection?}
    B -->|No| C{Cursor inside formatted region?}
    C -->|Yes| D[Remove surrounding markers]
    C -->|No| E{On list line?}
    E -->|Yes| F[Wrap line content after prefix]
    E -->|No| G[Insert empty markers at cursor]
    B -->|Yes| H{Multi-line with list items?}
    H -->|Yes| I[Apply formatting per-line, protect prefixes]
    H -->|No| J[Wrap/unwrap selection]
    D --> K[Update activeFormats + set cursor via rAF]
    F --> K
    G --> K
    I --> K
    J --> K

Loading

Testing

• pnpm run test passes (67 suites, 1344 tests)
• pnpm run typecheck passes
• pnpm run lint passes
• Manual testing performed
• Unit tests added (61 tests for markdownFormatting, 10 for FormattingToolbar component)

[david-rios-uipath]

Current Stack

• main
  • feat(apollo-react): add markdown formatting utilities for sticky notes (1/3) [MST-7636] #427 feat/sticky-note-markdown-formatting
    • feat(apollo-react): add formatting toolbar to sticky notes (2/3) [MST-7636] #429 feat/sticky-note-formatting-toolbar-v2 ← THIS PR
      • feat(apollo-react): add remark-breaks to sticky note markdown rendering, scroll improvements (3/3) [MST-7636] #430 feat/sticky-note-formatting-next

---

Managed with UiPath/stacked-prs

[github-actions]

Dependency License Review

• ✅ 1924 package(s) scanned
• ✅ No license issues found
• ⚠️ 3 package(s) excluded (see details below)

License distribution

License	Packages
MIT	1689
ISC	89
Apache-2.0	56
BSD-3-Clause	28
BSD-2-Clause	23
BlueOak-1.0.0	8
MPL-2.0	5
MIT OR Apache-2.0	3
MIT-0	3
CC0-1.0	3
LGPL-3.0-or-later	2
(MIT OR Apache-2.0)	2
Unlicense	2
Python-2.0	1
CC-BY-4.0	1
(MPL-2.0 OR Apache-2.0)	1
Unknown	1
Artistic-2.0	1
(WTFPL OR MIT)	1
(BSD-2-Clause OR MIT OR Apache-2.0)	1
CC-BY-3.0	1
0BSD	1
(MIT OR CC0-1.0)	1
MIT AND ISC	1

Excluded packages

Package	Version	License	Reason
@img/sharp-libvips-linux-x64	1.2.4	LGPL-3.0-or-later	LGPL pre-built binary, not linked
@img/sharp-libvips-linuxmusl-x64	1.2.4	LGPL-3.0-or-later	LGPL pre-built binary, not linked
khroma	2.1.0	Unknown	MIT per GitHub repo, missing license field in package.json

[snuziale]

need plan for localization..
also the icons need to be platform specific, not all on ⌘

[snuziale]

some util..

/**
 * Returns true if the current platform is macOS
 */
export const isMac = (): boolean => {
  return typeof navigator !== 'undefined' && navigator.platform.includes('Mac');
};

/**
 * Returns the platform-specific modifier key symbol
 * - Mac: ⌘ (Command)
 * - Windows/Linux: Ctrl
 */
export const getModifierKey = (): string => {
  return isMac() ? '⌘' : 'Ctrl';
};

[david-rios-uipath]

Thanks for the guidance here (added platform-specific logic).

I created an exploratory PR (link here) adding localization scaffolding to apollo-react canvas components in general as a potential follow-up task, since we don't have any atm.

A Lingui config change was needed to ensure compatibility w/ Storybook (changing compilation from cjs -> esm so it's more readily compatible w/ Vite).

These changes are quite invasive; while this doesn't break/affect the ApChat component (only Lingui consumer atm), I want to understand why we had Lingui configured to compile to cjs to make sure I'm not introducing any regressions (can probably sync w/ Cristi on this next week, since it's not urgent imo).