feat(翻译): 添加data-translate属性支持以跳过翻译

[SummerRay160]

Summary by CodeRabbit

• New Features

  • Added interactive image viewer with zoom, pan (mouse/touch/scroll), full-screen modal display, keyboard shortcuts (Esc to close), and download functionality

• Improvements

  • Enhanced translation handling to respect granular content exclusions

[coderabbitai]

📝 Walkthrough

Walkthrough

Enhanced the MarkdownImage component with an interactive zoom viewer featuring a full-screen modal, pan/zoom controls (mouse, touch, wheel), keyboard support, and download capability. Updated domTextScanner to skip translation processing for elements marked with data-translate="false" to suppress translation of UI captions.

Changes

Image Interaction & Translation Suppression

Layer / File(s)	Summary
Translation Suppression Mechanism src/utils/domTextScanner.ts	Added guards to skip elements with data-translate="false" in extractTextPreservingInlineCode and to skip text nodes with translation-suppressed ancestors in wrapTextNodesWithAttr.
Image Viewer Enhancement src/components/MarkdownRenderer.tsx	Implemented zoomable image viewer with React Portal modal supporting pan (mouse drag, touch), zoom (wheel), keyboard (Esc to close), download, and optional link-bar UI. Captions marked with data-translate="false" to prevent translation.
UI Integration src/components/MarkdownRenderer.tsx	Added "Click to zoom" caption prompt, dimension display, link-bar for images inside links (showing truncated URL and open action), and modal controls (zoom in/out, reset to 1:1, download, close).

Sequence Diagram

sequenceDiagram
    actor User
    participant MarkdownRenderer
    participant MarkdownImage
    participant Modal as Modal<br/>(React Portal)
    participant domTextScanner

    User->>MarkdownRenderer: Render markdown with images
    MarkdownRenderer->>MarkdownImage: Pass image data
    MarkdownImage->>domTextScanner: Skip caption text<br/>(data-translate="false")
    MarkdownImage->>MarkdownImage: Render small/large image<br/>+ caption
    
    User->>MarkdownImage: Click image
    MarkdownImage->>Modal: Open full-screen zoom modal
    Modal->>Modal: Display image + controls<br/>(zoom, pan, download, close)
    
    User->>Modal: Mouse drag / touch / wheel
    Modal->>Modal: Pan or zoom image
    
    User->>Modal: Click download / open link
    Modal->>Modal: Trigger download or navigate
    
    User->>Modal: Press Esc / click background
    Modal->>MarkdownImage: Close modal

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• AmintaCCCP/GithubStarsManager#130: Directly related; introduced wrapTextNodesWithAttr and scanDomForTranslation functions in domTextScanner.ts that this PR extends with translation-suppression guards.

Poem

🐇 Behold, dear images now zoom and dance,
With modal portals they take their chance,
Pan and wheel, keyboard's gentle call,
Download glory, captions suppress them all!
The scanner learns to skip what's marked "false"—
Translation tamed, no more translation waltz! 🎨✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly describes the main changes: adding data-translate attribute support to skip translation processing in the codebase, which is reflected in both modified files.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

🧹 Nitpick comments (1)

src/utils/domTextScanner.ts (1)

59-61: 💤 Low value

Inconsistent ancestor handling between extractTextPreservingInlineCode and wrapTextNodesWithAttr.

wrapTextNodesWithAttr (line 142) uses parent.closest('[data-translate="false"]'), which checks the element and all ancestors. The new guard here only inspects the current element. As a result, if data-translate="false" is placed on an ancestor of a block element matched by BLOCK_SELECTOR (e.g. <div data-translate="false"><p>…</p></div>), scanDomForTranslation will still pick up the inner <p> via querySelectorAll, extract its text, and return a segment — while wrapTextNodesWithAttr will correctly skip all of its text nodes. The two functions then disagree about whether the segment is translatable.

This isn't triggered by the current MarkdownRenderer usage (the marked <div>s only contain <span>s, no block elements), so it's not a live bug, but it's worth aligning to avoid surprises if the attribute is later applied to wrapper elements.

♻️ Proposed alignment in `scanDomForTranslation`

   for (const element of elements) {
     if (isInsideSkippedElement(element, container)) continue;
+    if (element.closest('[data-translate="false"]')) continue;

     const extracted = extractTextPreservingInlineCode(element);

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/utils/domTextScanner.ts` around lines 59 - 61, The guard that skips
elements only checks the current element (el.hasAttribute/data-translate) which
differs from wrapTextNodesWithAttr's ancestor-aware check; update the guard in
scanDomForTranslation/extractTextPreservingInlineCode to use
el.closest('[data-translate="false"]') (same selector logic as
wrapTextNodesWithAttr) and return when that returns non-null so ancestors with
data-translate="false" are respected consistently across
extractTextPreservingInlineCode, scanDomForTranslation, and
wrapTextNodesWithAttr.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@src/utils/domTextScanner.ts`:
- Around line 59-61: The guard that skips elements only checks the current
element (el.hasAttribute/data-translate) which differs from
wrapTextNodesWithAttr's ancestor-aware check; update the guard in
scanDomForTranslation/extractTextPreservingInlineCode to use
el.closest('[data-translate="false"]') (same selector logic as
wrapTextNodesWithAttr) and return when that returns non-null so ancestors with
data-translate="false" are respected consistently across
extractTextPreservingInlineCode, scanDomForTranslation, and
wrapTextNodesWithAttr.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: f072110e-de6f-44ac-a931-85d77d8bf6e3

📥 Commits

Reviewing files that changed from the base of the PR and between 7592dce and 8d9f5ad.

📒 Files selected for processing (2)

• src/components/MarkdownRenderer.tsx
• src/utils/domTextScanner.ts

[AmintaCCCP]

能合了吗

[SummerRay160]

可以了

…

---- 回复的原邮件 ---- | 发件人 | ***@***.***> | | 日期 | 2026年05月06日 20:34 | | 收件人 | ***@***.***> | | 抄送至 | ***@***.***>***@***.***> | | 主题 | Re: [AmintaCCCP/GithubStarsManager] feat(翻译): 添加data-translate属性支持以跳过翻译 (PR #134) | AmintaCCCP left a comment (AmintaCCCP/GithubStarsManager#134) 能合了吗 — Reply to this email directly, view it on GitHub, or unsubscribe. Triage notifications on the go with GitHub Mobile for iOS or Android. You are receiving this because you authored the thread.Message ID: ***@***.***>