fix(translation): force block translation for Reddit post text body#1180
Merged
mengxi-ream merged 1 commit intomainfrom Mar 21, 2026
Merged
fix(translation): force block translation for Reddit post text body#1180mengxi-ream merged 1 commit intomainfrom
mengxi-ream merged 1 commit intomainfrom
Conversation
🦋 Changeset detectedLatest commit: cd7a1ee The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
dosubot
bot
added
the
size:S
|
Documentation Updates 2 document(s) were updated by changes in this PR: Auto Translation FeaturesView Changes@@ -362,6 +362,7 @@
**Examples:**
- On `github.com`, the selector `.react-directory-row-commit-cell *` ensures that commit messages are always translated as blocks below the original text.
- On `engoo.com`, the selector `#windowexercise-2 > div > div > div.css-ep7xq6 > div > div > div.css-19m2fbm *` forces block translation for article paragraphs in the exercise-2 section, ensuring translations are rendered as separate blocks for better readability.
+- On `www.reddit.com`, the selector `shreddit-post-text-body` forces block translation for Reddit post text bodies, ensuring they render as proper block paragraphs instead of being squeezed into inline translation areas.
- On `www.youtube.com`, the selector `yt-attributed-string > span` forces block translation for YouTube comments, ensuring comment text is translated as blocks for better readability.
**Configuration:**
@@ -375,6 +376,9 @@
'engoo.com': [
'#windowexercise-2 > div > div > div.css-ep7xq6 > div > div > div.css-19m2fbm *',
],
+ 'www.reddit.com': [
+ 'shreddit-post-text-body',
+ ],
'www.youtube.com': [
'yt-attributed-string > span',
],
@@ -443,6 +447,7 @@
**Site-Specific Block Translation Selector Reference:**
- `github.com`: `.react-directory-row-commit-cell *`
- `engoo.com`: `#windowexercise-2 > div > div > div.css-ep7xq6 > div > div > div.css-19m2fbm *`
+- `www.reddit.com`: `shreddit-post-text-body`
- `www.youtube.com`: `yt-attributed-string > span`
These selectors ensure translations are rendered as blocks for improved readability and layout integrity on supported sites.Translation Toggle Logic and Content DetectionView Changes@@ -39,6 +39,14 @@
- `table.diff-table` - PR review diff tables (to prevent code diffs in review comments from being translated)
These site-specific exclusions ensure that UI elements, navigation, metadata, and code snippets are not translated, preventing visual misalignment and maintaining the intended user experience on each platform.
+
+**Site-Specific Block Translation Rules:**
+In addition to exclusions, certain sites have custom rules that force specific elements to be translated as block-level paragraphs rather than inline text. This ensures proper translation presentation and prevents visual rendering issues.
+
+For www.reddit.com, the following element is forced to block translation:
+- `shreddit-post-text-body` - Post text body content (to ensure post bodies are translated as block paragraphs rather than being squeezed into a single inline translation area)
+
+These force-block rules use the `CUSTOM_FORCE_BLOCK_TRANSLATION_SELECTOR_MAP` and ensure that content is rendered with appropriate spacing and formatting, improving readability and maintaining the intended layout of translated content.
**Exclusion of Structural Elements in Main Content Mode:**
In main content mode (when `config.translate.page.range` is not set to `'all'`), top-level structural elements such as `<header>`, `<footer>`, `<nav>`, and `<aside>` are excluded from translation to avoid translating site-wide navigation and structural elements. However, when these same elements appear inside content containers like `<article>` or `<main>`, they are included in translation, as they are likely to be content-specific (such as article titles within a `<header>` inside an `<article>`).
@@ -122,6 +130,9 @@
**Site-Specific Exclusion Tests:**
Unit tests verify that site-specific elements in the `CUSTOM_DONT_WALK_INTO_ELEMENT_SELECTOR_MAP` are correctly excluded. For www.reddit.com, tests confirm that `shreddit-post-flair` elements are identified by `isCustomDontWalkIntoElement` and excluded by `isDontWalkIntoAndDontTranslateAsChildElement`, preventing flair tag misalignment during Reddit translations. For github.com, tests confirm that `table.diff-table` elements are correctly identified and excluded, ensuring that PR review code snippets are not translated and maintaining the integrity of code diffs displayed in review comments.
+**Site-Specific Block Translation Tests:**
+Unit tests verify that site-specific force-block translation rules in the `CUSTOM_FORCE_BLOCK_TRANSLATION_SELECTOR_MAP` work correctly. For www.reddit.com, tests confirm that `shreddit-post-text-body` elements are identified by `isCustomForceBlockTranslation`, ensuring that Reddit post text bodies are translated as block paragraphs rather than inline text, preventing visual rendering issues where post content would be squeezed into a single inline translation area.
+
**Content Container Context Tests:**
Unit tests verify that structural elements like `<header>`, `<footer>`, and `<nav>` are correctly excluded or included based on their context. The tests confirm that:
- Top-level `<header>` elements are skipped in main content modeHow did I do? Any feedback? |
|
Related Documentation 4 document(s) may need updating based on files changed in this PR: Read Frog - Open Source Immersive Translate Auto Translation FeaturesView Suggested Changes@@ -362,6 +362,7 @@
**Examples:**
- On `github.com`, the selector `.react-directory-row-commit-cell *` ensures that commit messages are always translated as blocks below the original text.
- On `engoo.com`, the selector `#windowexercise-2 > div > div > div.css-ep7xq6 > div > div > div.css-19m2fbm *` forces block translation for article paragraphs in the exercise-2 section, ensuring translations are rendered as separate blocks for better readability.
+- On `www.reddit.com`, the selector `shreddit-post-text-body` forces block translation for Reddit post body content, ensuring post text is translated as block paragraphs instead of being squeezed into a single inline translation area.
- On `www.youtube.com`, the selector `yt-attributed-string > span` forces block translation for YouTube comments, ensuring comment text is translated as blocks for better readability.
**Configuration:**
@@ -375,6 +376,9 @@
'engoo.com': [
'#windowexercise-2 > div > div > div.css-ep7xq6 > div > div > div.css-19m2fbm *',
],
+ 'www.reddit.com': [
+ 'shreddit-post-text-body',
+ ],
'www.youtube.com': [
'yt-attributed-string > span',
],
@@ -443,6 +447,7 @@
**Site-Specific Block Translation Selector Reference:**
- `github.com`: `.react-directory-row-commit-cell *`
- `engoo.com`: `#windowexercise-2 > div > div > div.css-ep7xq6 > div > div > div.css-19m2fbm *`
+- `www.reddit.com`: `shreddit-post-text-body`
- `www.youtube.com`: `yt-attributed-string > span`
These selectors ensure translations are rendered as blocks for improved readability and layout integrity on supported sites.Auto Translation Features — ✅ AcceptedTranslation Toggle Logic and Content DetectionView Suggested Changes@@ -39,6 +39,10 @@
- `table.diff-table` - PR review diff tables (to prevent code diffs in review comments from being translated)
These site-specific exclusions ensure that UI elements, navigation, metadata, and code snippets are not translated, preventing visual misalignment and maintaining the intended user experience on each platform.
+
+**Site-Specific Force-Block Translation:**
+In addition to exclusion rules, certain elements on specific sites require force-block translation to maintain proper layout and readability. For www.reddit.com, the following elements use force-block translation rules via `CUSTOM_FORCE_BLOCK_TRANSLATION_SELECTOR_MAP`:
+- `shreddit-post-text-body` - Reddit post text bodies are translated and rendered as block paragraphs rather than inline, ensuring translations are properly formatted and preventing layout issues where content would otherwise be squeezed into a single inline translation area.
**Exclusion of Structural Elements in Main Content Mode:**
In main content mode (when `config.translate.page.range` is not set to `'all'`), top-level structural elements such as `<header>`, `<footer>`, `<nav>`, and `<aside>` are excluded from translation to avoid translating site-wide navigation and structural elements. However, when these same elements appear inside content containers like `<article>` or `<main>`, they are included in translation, as they are likely to be content-specific (such as article titles within a `<header>` inside an `<article>`).
@@ -122,6 +126,9 @@
**Site-Specific Exclusion Tests:**
Unit tests verify that site-specific elements in the `CUSTOM_DONT_WALK_INTO_ELEMENT_SELECTOR_MAP` are correctly excluded. For www.reddit.com, tests confirm that `shreddit-post-flair` elements are identified by `isCustomDontWalkIntoElement` and excluded by `isDontWalkIntoAndDontTranslateAsChildElement`, preventing flair tag misalignment during Reddit translations. For github.com, tests confirm that `table.diff-table` elements are correctly identified and excluded, ensuring that PR review code snippets are not translated and maintaining the integrity of code diffs displayed in review comments.
+**Site-Specific Force-Block Translation Tests:**
+Unit tests verify that site-specific force-block translation rules work as expected. For www.reddit.com, tests confirm that `shreddit-post-text-body` elements are correctly identified by `isCustomForceBlockTranslation`, ensuring that Reddit post text bodies are translated and rendered as block paragraphs to maintain proper layout and readability.
+
**Content Container Context Tests:**
Unit tests verify that structural elements like `<header>`, `<footer>`, and `<nav>` are correctly excluded or included based on their context. The tests confirm that:
- Top-level `<header>` elements are skipped in main content modeTranslation Toggle Logic and Content Detection — ✅ AcceptedNote: You must be authenticated to accept/decline updates. How did I do? Any feedback? |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: cd7a1ee248
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
Comment on lines
+164
to
+165
| "www.reddit.com": [ | ||
| "shreddit-post-text-body", |
There was a problem hiding this comment.
On Reddit's current post-body markup, shreddit-post-text-body is just a wrapper around nested block <div>/<p> nodes. In walkAndLabelElement/translateWalkedElement, those inner block descendants become the translation targets, so the new shreddit-post-text-body selector is never the node passed to isCustomForceBlockTranslation(). I verified this with a jsdom case matching the live nesting: the bilingual wrappers were still inserted under the inner paragraphs, not under the custom element. That means this change does not actually fix the “single inline translation area” layout for real Reddit posts; the selector needs to hit the inner content container(s), or the force-block state needs to propagate upward.
Useful? React with 👍 / 👎.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Type of Changes
Description
shreddit-post-text-bodyRelated Issue
Closes #1177
How Has This Been Tested?
Additional local verification:
pnpm vitest run src/utils/host/dom/__tests__/custom-force-block.test.tslint,type-check,vitest runScreenshots
N/A
Checklist
Additional Information
@read-frog/extension