Skip to content

feat(editor): implement contextual floating markdown toolbar (#129) - #152

Merged
Dyu20705 merged 2 commits into
devfrom
issue/129-floating-toolbar
Aug 30, 2026
Merged

feat(editor): implement contextual floating markdown toolbar (#129)#152
Dyu20705 merged 2 commits into
devfrom
issue/129-floating-toolbar

Conversation

@Dyu20705

Copy link
Copy Markdown
Owner

Summary

Implements Issue #129: Contextual Floating Markdown Toolbar as the first child package of Epic #128.

Changes

  1. Pure transformation functions (core/markdownActions.js):
    • wrapSelection, insertBold, insertItalic, insertStrikethrough, insertInlineCode, insertLink, cycleHeading, insertTaskItem with defensive copy and cursor/selection handling.
  2. Accessible Toolbar Component (ui/editorToolbar.js):
    • Formatting buttons for bold, italic, strikethrough, code, link, heading, task, and kanji drawing.
    • Contextual selection synchronization (shows when text is selected or when interacting with toolbar, dismisses on Escape/blur).
    • Keyboard traversal (ArrowLeft/ArrowRight, Home/End, Escape to return to editor textarea).
  3. Markup & CSS Tokens (index.html, editor.css):
    • Mounted #editorToolbar directly above #contentInput within the editor panel.
    • Applied --mn-* semantic token variables.
  4. App & Command Wiring (app.js):
    • Hooked up toolbar actions with textarea selection manipulation and debounced autosave.
    • Registered editor formatting commands in command registry.
    • Integrated lifecycle with note editor overlay and commandRuntime destroy.

Verification

  • npm run test:content: 3/3 passed
  • npm run lint: 0 errors
  • npm run test:unit: 283/283 passed
  • npm run test:integration: 107/107 passed
  • npm run test:perf: 4/4 passed
  • npm run test:e2e: 124/124 passed (including tests/e2e/editor-toolbar.spec.mjs)
  • git diff --check: clean

Closes #129

)

- Add core/markdownActions.js with pure text transformation helpers
- Add ui/editorToolbar.js with accessible formatting buttons and keyboard navigation
- Mount #editorToolbar above textarea in index.html with CSS token styling in editor.css
- Wire toolbar action handling, selection sync, and editor commands in app.js
- Add unit and E2E regression test suites
Copilot AI lite review requested due to automatic review settings August 30, 2026 10:02

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

…ng, and lifecycle cleanup

- P1-1: Remove Ctrl+I shortcut from editor.italic to preserve reservation for Issue #130 details inspector toggle
- P1-2: Make link insertion naming truthful (Insert link placeholder) and remove modifier conflict with global command palette
- P1-3: Explicitly document and model inline contextual toolbar architecture with strict selection synchronization
- P1-4: Use named blur event handler and deterministically unregister all textarea/container listeners on destroy()
@Dyu20705
Dyu20705 merged commit 9cddebb into dev Aug 30, 2026
1 check passed
@Dyu20705
Dyu20705 deleted the issue/129-floating-toolbar branch August 31, 2026 14:46
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.

2 participants