Skip to content

feat(remark): inline mark highlighting, config system, and UX refinements#89

Open
liyuankui wants to merge 1 commit into
markdown-viewer:mainfrom
liyuankui:feat/remark-annotation-granularity
Open

feat(remark): inline mark highlighting, config system, and UX refinements#89
liyuankui wants to merge 1 commit into
markdown-viewer:mainfrom
liyuankui:feat/remark-annotation-granularity

Conversation

@liyuankui

@liyuankui liyuankui commented May 23, 2026

Copy link
Copy Markdown
Contributor

Summary

Refactors Remark Mode from block-level highlighting to precise inline <mark> wrapping, adds a full config system, and improves UX with smooth animations.

Inline Mark Highlighting (V3)

  • Precise text selection: wraps selected text in <mark> elements instead of block-level highlighting
  • Multi-strategy fallback: extractContents for simple ranges, per-text-node wrap for cross-block selections
  • Block boundary detection: prevents DOM corruption when selection spans <li>, <td>, etc.
  • Structural whitespace marks hidden: (ul > mark, ol > mark, etc.)

Click-to-Annotate

  • Sentence-aware: auto-selects surrounding sentence on click
  • Table-aware: selection clamped to single cell via selectionchange listener (prevents layout breakage)
  • List guard: prevents splitting <li> items

Config System (⚙️)

  • Highlight style: Background / Underline / Wavy / Border (4-side outline)
  • Default color: 🟡 Suggestion / 🟢 Keep / 🔵 Question / 🩷 Concern (semantic labels shown)
  • Font size: 12–16px slider for sidebar notes
  • Auto-delete empty: toggle + 3s double-fade animation
  • Close after copy: with countdown (Copied → Closing 3…2…1)
  • Persistence: chrome.storage.local with localStorage fallback
  • Reset to defaults + Done button

UX Improvements

  • Smooth auto-delete: double fade-show-fade animation (3s total)
  • Landing pulse on sidebar items when clicking marks
  • Exit choreography: toolbar → sidebar slide → marks fade
  • Direct DOM manipulation for delete/color-change (no sidebar re-render flash)
  • Undo toast for delete-all (non-destructive until timeout)

Code Quality

  • Pure function extraction for testability: generateHighlightCSS, findSentenceBounds, locateOffsetInNodes, locateSubstringInNodes in remark-utils.ts
  • 96 unit tests passing (npx tsx --test test/remark-mode.test.ts)

i18n

All 15 new config keys added to all 28 locales with proper translations (not English fallback).


Remarker config panel and inline highlighting demo

@liyuankui liyuankui marked this pull request as draft May 23, 2026 13:53
@liyuankui liyuankui force-pushed the feat/remark-annotation-granularity branch 8 times, most recently from ac84d13 to 598b103 Compare May 23, 2026 14:39
@liyuankui liyuankui marked this pull request as ready for review May 23, 2026 14:45
@xicilion

Copy link
Copy Markdown
Member
Screenshot 2026-05-24 at 03 16 20

把设置挪到这一页,加一个卡片吧

@liyuankui liyuankui force-pushed the feat/remark-annotation-granularity branch from 598b103 to 19ed13e Compare May 25, 2026 01:56
@liyuankui

Copy link
Copy Markdown
Contributor Author

Done! Added a Remark Mode settings card to the Settings tab. Config changes sync bi-directionally between the popup card and the sidebar panel via chrome.storage.onChanged.

@liyuankui liyuankui marked this pull request as draft May 25, 2026 02:11
…e guards

V3 refactor: block-level → precise inline <mark> wrapping

Highlights:
- Inline <mark> wrap with multi-strategy fallback (extractContents + per-node)
- Click-to-annotate: click = annotate sentence, selection = annotate selected text
- Table cell guard: selection clamped to single cell via selectionchange listener
- Config system: ⚙️ panel with highlight style, default color, font size, auto-delete, close-after-copy
- Config persistence: chrome.storage.local with localStorage fallback
- Close-after-copy: 1s 'Copied!' then 3-2-1 countdown before closing tab
- 4 highlight styles: background, underline, wavy, border (deep saturated line colors)
- Smooth auto-delete: 3s double-fade animation for empty remarks
- Landing pulse on sidebar item when clicking marks
- Exit choreography: fade marks before clearing
- Structural whitespace marks hidden (ul/ol/table direct children)
- Direct DOM manipulation for remove/color-change (no full sidebar re-render)
- i18n: all config keys added to 8 locales (en/de/es/fr/ja/ko/zh_CN/zh_TW)

Tests: 56/56 passing

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@liyuankui liyuankui force-pushed the feat/remark-annotation-granularity branch from 19ed13e to a2eb756 Compare May 25, 2026 09:26
@liyuankui liyuankui marked this pull request as ready for review May 25, 2026 09:30
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