fix(theme): add remark plugin to tag wide table columns#238
fix(theme): add remark plugin to tag wide table columns#238jp-ayyappan wants to merge 7 commits intomainfrom
Conversation
Add a remark plugin that detects columns with long text content and applies a `wide-cell` CSS class for targeted word-wrapping, keeping short columns compact while preventing wide columns from overflowing. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Summary of ChangesHello, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request enhances the display of markdown tables within Docusaurus documentation by intelligently handling long cell content. It introduces a mechanism to identify and style wide table columns, ensuring text wraps appropriately without affecting the compactness of other columns, while maintaining overall table responsiveness through horizontal scrolling. This improves readability and user experience for tables containing extensive data. Highlights
🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console. Changelog
Activity
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces a new Remark plugin, remark-table-wide-cells, to improve the readability of markdown tables with long content. The plugin identifies columns containing cells that exceed a character threshold and applies a wide-cell CSS class to them. Accompanying CSS changes then enable word wrapping for these specific columns, while keeping other columns compact. The implementation is solid. I've added a couple of suggestions to the plugin to improve performance and robustness.
Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
copilot suggestion Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
|
📄 Preview deployed to https://opentdf-docs-pr-238.surge.sh |
📝 WalkthroughWalkthroughAdds a Remark plugin and CSS to mark table columns whose cell text exceeds a configured threshold as Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
plugins/remark-table-wide-cells.js (1)
56-57: NormalizeclassNamebefore spreading to avoid character-splitting if upstream provides a string.The hast specification allows
classNameto be either an array or string. Ifcell.data.hProperties.classNamereceives a string from upstream (possible via other remark plugins), spreading it with[...existing, 'wide-cell']will split it into individual characters rather than combining class names.Suggested fix
- const existing = cell.data.hProperties.className || []; - cell.data.hProperties.className = Array.from(new Set([...existing, 'wide-cell'])); + const rawClassName = cell.data.hProperties.className; + const existing = Array.isArray(rawClassName) + ? rawClassName + : rawClassName + ? [rawClassName] + : []; + cell.data.hProperties.className = Array.from(new Set([...existing, 'wide-cell']));🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@plugins/remark-table-wide-cells.js` around lines 56 - 57, Normalize and dedupe the className before spreading: ensure cell.data and cell.data.hProperties exist, coerce cell.data.hProperties.className to an array (if it's a string, split on whitespace and filter empty entries; if it's already an array use it; otherwise use []), then set cell.data.hProperties.className = Array.from(new Set([...existingArray, 'wide-cell'])). Refer to cell.data.hProperties.className and the local variable existing (or replace it) when making this change.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/css/custom.css`:
- Around line 615-619: The CSS rule for the selectors .markdown table
td.wide-cell and .markdown table th.wide-cell uses the deprecated word-break:
break-word; update this rule to set word-break: normal; and add overflow-wrap:
anywhere; (or overflow-wrap: anywhere; word-break: normal;) to preserve the
intended wrapping behavior across browsers while removing the deprecated value.
---
Nitpick comments:
In `@plugins/remark-table-wide-cells.js`:
- Around line 56-57: Normalize and dedupe the className before spreading: ensure
cell.data and cell.data.hProperties exist, coerce
cell.data.hProperties.className to an array (if it's a string, split on
whitespace and filter empty entries; if it's already an array use it; otherwise
use []), then set cell.data.hProperties.className = Array.from(new
Set([...existingArray, 'wide-cell'])). Refer to cell.data.hProperties.className
and the local variable existing (or replace it) when making this change.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: c0917075-6be1-441e-aaf9-33f4cea2c0fc
📒 Files selected for processing (3)
docusaurus.config.tsplugins/remark-table-wide-cells.jssrc/css/custom.css
jp-ayyappan
changed the title
- Lower threshold from 100 → 40 to match DSP (more aggressively catches wide columns) - Add string guard for className to match DSP's defensive handling - Replace deprecated word-break: break-word with overflow-wrap: anywhere per CSS Text Level 4 spec (CodeRabbit DSPX-2800) Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
jp-ayyappan
changed the title
1 participant
Summary
remark-table-wide-cells) that detects markdown table columns where any cell exceeds 100 characters and tags all cells in those columns with awide-cellCSS classwhite-space: normal; word-break: break-wordso long text wraps, while short columns stay compact withnowrapoverflow-x: autoso genuinely wide tables still scroll horizontallyTest plan
npm startand confirm the build succeeds🤖 Generated with Claude Code
Summary by CodeRabbit
New Features
Style