[codex] add rich product description editor#396
Conversation
|
Review changes with Changed Files
|
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning Rate limit exceeded
You’ve run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Organization UI Review profile: ASSERTIVE Plan: Pro Run ID: ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (5)
WalkthroughThis pull request introduces a product description editor widget using MDX Editor in the Medusa admin, adds HTML↔Markdown conversion support, and improves the SafeHtmlContent component with stronger typing and expanded sanitisation rules. The feature includes comprehensive styling, API integration via React Query, and a patch for the medusa-plugin-content dependency to align endpoint routing. ChangesProduct Description MDX Editor Feature
SafeHtmlContent Component Type Safety
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
✨ Simplify code
Tip 💬 Introducing Slack Agent: The best way for teams to turn conversations into code.Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.
Built for teams:
One agent for your entire SDLC. Right inside Slack. 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 |
![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: 5fe2dd007f
ℹ️ 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".
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 0f6c0ad4f2
ℹ️ 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".
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 6
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
apps/frontend-demo/src/components/safe-html-content.tsx (1)
77-78:⚠️ Potential issue | 🟡 Minor | ⚡ Quick windocs(config): misleading "merge" comment — shallow spread replaces arrays, not extends them
If a caller passes
config: { ALLOWED_TAGS: ['p'] }, the spread will completely replacedefaultConfig.ALLOWED_TAGSrather than appending to it, contrary to what the comment implies. This is likely acceptable intentional behaviour (full override), but the comment should be corrected to avoid confusion.📝 Proposed fix
- // Merge custom config with defaults + // Override defaults with any custom config (array fields like ALLOWED_TAGS are fully replaced, not merged) const finalConfig = { ...defaultConfig, ...config }🤖 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 `@apps/frontend-demo/src/components/safe-html-content.tsx` around lines 77 - 78, The comment above the assignment to finalConfig is misleading: the spread "{ ...defaultConfig, ...config }" performs a shallow override (replacing arrays/objects) rather than merging/concatenating nested arrays like ALLOWED_TAGS; update the comment to state that defaultConfig values are overridden by config (shallow merge/replace) and, if desired, document how to extend arrays (e.g., by explicitly concatenating defaultConfig.ALLOWED_TAGS and config.ALLOWED_TAGS) and reference the variables finalConfig, defaultConfig, and config so readers can find the code.
🤖 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.
Inline comments:
In `@apps/frontend-demo/src/components/safe-html-content.tsx`:
- Line 71: The ALLOWED_ATTR currently permits "target" which allows <a
target="_blank"> without a protective rel; add a
DOMPurify.afterSanitizeAttributes hook at module scope (outside the
SafeHtmlContent component and after the ALLOWED_ATTR/constants) that inspects
anchor elements and, when el.target === "_blank", ensures el.rel contains
"noopener noreferrer" (appending if needed) so every DOMPurify.sanitize call
enforces the protection; no changes to the existing useMemo-based sanitize calls
are required because the hook runs globally for all sanitizations.
In `@apps/medusa-be/package.json`:
- Line 80: The dependency "medusa-plugin-content" in package.json is using a
caret range ("^0.2.0") which prevents the pnpm patch keyed to the exact version
"medusa-plugin-content@0.2.0" from applying; change the version specifier for
medusa-plugin-content in apps/medusa-be/package.json to the exact version
"0.2.0" so the patch key matches and the patch will be applied at install time.
In `@apps/medusa-be/src/admin/widgets/product-description-editor.css`:
- Around line 20-26: The CSS block defining custom properties ends with
--accentTextContrast; Stylelint's declaration-empty-line-before requires an
empty line before the next non-custom declaration, so add a single blank line
before the isolation: isolate; declaration (and any subsequent non-custom
declarations like background and color) in the same rule to satisfy the rule in
product-description-editor.css; locate the declarations by the custom properties
(--accentSolidHover, --accentText, --accentTextContrast) and insert the empty
line immediately before isolation.
In `@apps/medusa-be/src/admin/widgets/product-description-editor.tsx`:
- Around line 233-235: Replace the use of the logical OR in the body object
(currently setting body.description via description || null) with an explicit
falsy check: detect the empty-string case and set null only when description ===
"" (otherwise keep description); update the assignment for body.description (the
variable named description in this component/product-description-editor)
accordingly so it no longer uses || and complies with the ??-over-|| guideline.
- Around line 212-226: The MutationObserver callback should be debounced with
requestAnimationFrame to avoid repeated DOM queries: wrap the direct call to
hideNativeProductDescriptionField passed into new MutationObserver with a small
rAF-based coalescer (e.g., maintain a local let rafId: number | null = null; the
observer callback should if (rafId == null) rafId = requestAnimationFrame(() =>
{ rafId = null; hideNativeProductDescriptionField(); })); also cancel any
pending frame in the cleanup (if (rafId != null) cancelAnimationFrame(rafId));
update references to hideNativeProductDescriptionField and
restoreNativeProductDescriptionField accordingly so the same logic is used when
disconnecting the observer.
- Around line 157-174: The htmlToMarkdown renderer (renderNode) currently falls
back to returning children for unknown tags which strips tables and code blocks;
update renderNode (used by htmlToMarkdown and referenced in onSuccess) to
explicitly handle table, thead, tbody, tr, td/th by converting to Markdown table
rows (generate header row from thead or first tr, separate header with
|---|---|, join cells with |) and to handle code and pre by emitting fenced code
blocks (```language\n...```) for block <pre><code> and inline backticks for
<code> inside text; ensure li/ol/ul handling still trims correctly and that
child rendering is recursively applied when building rows and code block content
so roundtrip load/save doesn't lose structure.
---
Outside diff comments:
In `@apps/frontend-demo/src/components/safe-html-content.tsx`:
- Around line 77-78: The comment above the assignment to finalConfig is
misleading: the spread "{ ...defaultConfig, ...config }" performs a shallow
override (replacing arrays/objects) rather than merging/concatenating nested
arrays like ALLOWED_TAGS; update the comment to state that defaultConfig values
are overridden by config (shallow merge/replace) and, if desired, document how
to extend arrays (e.g., by explicitly concatenating defaultConfig.ALLOWED_TAGS
and config.ALLOWED_TAGS) and reference the variables finalConfig, defaultConfig,
and config so readers can find the code.
🪄 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: ASSERTIVE
Plan: Pro
Run ID: 5395e78a-f3fb-49a9-b392-7679a9c39f2e
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (7)
apps/frontend-demo/src/components/safe-html-content.tsxapps/medusa-be/medusa-config.tsapps/medusa-be/package.jsonapps/medusa-be/src/admin/widgets/product-description-editor.cssapps/medusa-be/src/admin/widgets/product-description-editor.tsxpackage.jsonpatches/medusa-plugin-content@0.2.0.patch
📜 Review details
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: main
- GitHub Check: Analyze (javascript-typescript)
🧰 Additional context used
📓 Path-based instructions (8)
**/package.json
📄 CodeRabbit inference engine (CLAUDE.md)
Use pnpm CLI to add dependencies; never edit package.json directly
Files:
package.jsonapps/medusa-be/package.json
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Import UI components using the pattern
import { ComponentName } from '@libs/ui/atoms/component-name'or'@libs/ui/molecules/component-name'
Files:
apps/frontend-demo/src/components/safe-html-content.tsxapps/medusa-be/medusa-config.tsapps/medusa-be/src/admin/widgets/product-description-editor.tsx
apps/medusa-be/src/admin/**/*
📄 CodeRabbit inference engine (CLAUDE.md)
Place admin panel customizations under apps/medusa-be/src/admin
Files:
apps/medusa-be/src/admin/widgets/product-description-editor.cssapps/medusa-be/src/admin/widgets/product-description-editor.tsx
apps/medusa-be/src/{api,modules,workflows,admin,subscribers,jobs}/**
📄 CodeRabbit inference engine (AGENTS.md)
In Medusa backend applications, organize custom code using the directory structure: api/, modules/, workflows/, admin/, subscribers/, jobs/
Files:
apps/medusa-be/src/admin/widgets/product-description-editor.cssapps/medusa-be/src/admin/widgets/product-description-editor.tsx
apps/medusa-be/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (apps/medusa-be/CLAUDE.md)
apps/medusa-be/**/*.{ts,tsx,js,jsx}: Always use braces for if/else statements, even for single statements
Declare one variable per const/let statement; do not use multiple declarations on one line
Use nullish coalescing operator (??) instead of logical OR (||) for null/undefined defaults
Write comments explaining why code exists, not what it does; rely on self-documenting code with clear naming
Always validate data before type casting; do not use 'as Type' without prior validation
Files:
apps/medusa-be/medusa-config.tsapps/medusa-be/src/admin/widgets/product-description-editor.tsx
apps/medusa-be/**/*.{ts,tsx}
📄 CodeRabbit inference engine (apps/medusa-be/CLAUDE.md)
apps/medusa-be/**/*.{ts,tsx}: Do not use non-null assertion operator (!) in TypeScript code
Annotate the type of generic field access (e.g., result[field]) as unknown before type guards
Use Modules.* and ContainerRegistrationKeys.* constants instead of hardcoding strings for container resolution
Files:
apps/medusa-be/medusa-config.tsapps/medusa-be/src/admin/widgets/product-description-editor.tsx
apps/medusa-be/**/medusa-config.ts
📄 CodeRabbit inference engine (apps/medusa-be/CLAUDE.md)
apps/medusa-be/**/medusa-config.ts: Conditional module loading must be evaluated at BUILD time via environment variables, not runtime
Cross-module provider dependencies must declare 'dependencies' array in module config for injection into provider container
Files:
apps/medusa-be/medusa-config.ts
apps/medusa-be/src/admin/**/*.{ts,tsx}
📄 CodeRabbit inference engine (apps/medusa-be/CLAUDE.md)
Import admin environment variables using import.meta.env.VITE_* and .DEV, .PROD suffixes
Files:
apps/medusa-be/src/admin/widgets/product-description-editor.tsx
🧠 Learnings (5)
📚 Learning: 2026-02-05T14:43:17.404Z
Learnt from: KaiUweCZE
Repo: NMIT-WR/new-engine PR: 324
File: apps/medusa-be/package.json:0-0
Timestamp: 2026-02-05T14:43:17.404Z
Learning: Validate and enforce React 19 compatibility across monorepo workspaces. Since Medusa UI supports React 19 via root package.json overrides and Medusa Cloud prerequisites show React 19 overrides for npm workspaces, ensure workspace root and all relevant package.json files align with React 19 (18+ requirement is satisfied). When reviewing, verify that overrides exist in the root package.json and that dependent packages in apps or packages directories declare React 19 (or compatible) in their peerDependencies or dependencies as appropriate for workspace usage.
Applied to files:
package.jsonapps/medusa-be/package.json
📚 Learning: 2026-05-07T19:05:58.339Z
Learnt from: redeyecz
Repo: TechsioCZ/new-engine PR: 390
File: apps/medusa-be/package.json:78-81
Timestamp: 2026-05-07T19:05:58.339Z
Learning: When reviewing changes to `package.json`, do not automatically flag dependency additions/removals as "manually edited" or as "bypassing the pnpm lockfile" just because the `package.json` diff shows only that file changed. First verify whether `pnpm-lock.yaml` is missing the corresponding entries. Since `pnpm add` updates both `package.json` and `pnpm-lock.yaml` together, legitimate changes can appear in the `package.json` diff while still being properly tracked in the lockfile.
Applied to files:
package.jsonapps/medusa-be/package.json
📚 Learning: 2025-12-16T19:45:17.746Z
Learnt from: BleedingDev
Repo: NMIT-WR/new-engine PR: 207
File: libs/ui/src/molecules/select.tsx:50-50
Timestamp: 2025-12-16T19:45:17.746Z
Learning: When reviewing Tailwind classes in TSX/TS files, prefer using square brackets for arbitrary CSS values and complex expressions. Specifically: - Do not use the parentheses syntax (z-(--z-index)) for anything beyond simple CSS variable references; this syntax auto-wraps in var() and cannot handle calc or complex functions. - Use the square brackets syntax (e.g., h-[calc(var(--available-height)-var(--spacing-content))]) for calc expressions, var with calc, and any complex CSS expressions. This rule applies broadly to Tailwind v4 usage in TSX code across the project.
Applied to files:
apps/frontend-demo/src/components/safe-html-content.tsxapps/medusa-be/src/admin/widgets/product-description-editor.tsx
📚 Learning: 2026-02-10T15:19:38.125Z
Learnt from: KaiUweCZE
Repo: NMIT-WR/new-engine PR: 328
File: apps/frontend-demo/src/components/molecules/header-search.tsx:75-99
Timestamp: 2026-02-10T15:19:38.125Z
Learning: In apps/frontend-demo/src/components/molecules/header-search.tsx, the dataset invariant is that every product has a handle property. The current fallback in handleSelect calls handleSearch(selected) when a product exists but lacks a handle, and this is acceptable only if that invariant always holds. Actionable guidance: 1) Document the invariant and rely on it in code reviews. 2) Add a defensive guard or a test to verify no product arrives without a handle. For future-proofing, consider guarding the fallback (e.g., if (product?.handle) { handleSearch(product) } else { log/throw or skip }) and ensure a log message when the invariant is violated.
Applied to files:
apps/frontend-demo/src/components/safe-html-content.tsx
📚 Learning: 2026-05-07T12:06:55.558Z
Learnt from: redeyecz
Repo: TechsioCZ/new-engine PR: 375
File: apps/medusa-be/src/admin/widgets/order-payment-reminder.tsx:3-11
Timestamp: 2026-05-07T12:06:55.558Z
Learning: In Medusa admin code under `apps/medusa-be/src/admin/` (admin widgets/routes), UI components must be imported from `medusajs/ui` (the Medusa admin UI kit). Do not apply the project-wide `libs/ui/atoms/*` and `libs/ui/molecules/*` import conventions to these files, and never flag `medusajs/ui` imports in this admin directory as violating the `libs/ui` convention.
Applied to files:
apps/medusa-be/src/admin/widgets/product-description-editor.tsx
🪛 ast-grep (0.42.1)
apps/frontend-demo/src/components/safe-html-content.tsx
[warning] 95-95: Usage of dangerouslySetInnerHTML detected. This bypasses React's built-in XSS protection. Always sanitize HTML content using libraries like DOMPurify before injecting it into the DOM to prevent XSS attacks.
Context: dangerouslySetInnerHTML
Note: [CWE-79] Improper Neutralization of Input During Web Page Generation [REFERENCES]
- https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml
- https://cwe.mitre.org/data/definitions/79.html
(react-unsafe-html-injection)
🪛 Stylelint (17.10.0)
apps/medusa-be/src/admin/widgets/product-description-editor.css
[error] 23-23: Expected empty line before declaration (declaration-empty-line-before)
(declaration-empty-line-before)
🔇 Additional comments (5)
apps/frontend-demo/src/components/safe-html-content.tsx (1)
6-6: Type extraction is correct for DOMPurify 3.3.0.The catch-all overload
sanitize(source: string | Node, config?: Config): stringis indeed the last (and widest) signature in DOMPurify's type definitions, soParameters<typeof DOMPurify.sanitize>[1]correctly resolves toConfig | undefined. TheNonNullableextraction yields the fullConfiginterface as intended. The pattern is sound for the project's DOMPurify version and the implementation uses the type correctly.apps/medusa-be/medusa-config.ts (1)
76-79: LGTM!The plugin registration is straightforward and consistent with the other entries in the
pluginsarray.package.json (1)
89-91: LGTM!The
patchedDependenciesentry correctly points to the patch file using the exact version key, which is the required format for pnpm patches. React 19 overrides are already in place.patches/medusa-plugin-content@0.2.0.patch (1)
14-27: ⚡ Quick winNo issue - the
content_collection_idremoval is correct and justified.The patch restructures the API from a flat to a nested resource design:
- Old API:
/admin/content-items/:itemId(collection ID required in request body)- New API:
/admin/content/:collectionId/items/:itemId(collection ID in URL path)The loader function was updated to extract
collectionIdfrom URL parameters and use it in the nested path, which is the standard REST pattern for hierarchical resources. The removal ofcontent_collection_idfrom request payloads is correct because the backend now derives the collection association from the URL path itself, not from the request body. This design eliminates the risk of orphaned items and aligns with the plugin's upstream API evolution.apps/medusa-be/src/admin/widgets/product-description-editor.tsx (1)
183-184: ⚡ Quick winConfirmed:
markeddoes not sanitise HTML – verified that frontend renders safely via DOMPurifyYou're correct that
marked.parsewith no sanitisation options passes raw HTML through unchanged. However, the risk is mitigated on the storefront: theSafeHtmlContentcomponent inapps/frontend-demo/src/components/safe-html-content.tsxsanitises product descriptions at render time using DOMPurify v3.3.0 with a strict allowlist (forbids<script>,<iframe>,<form>, event handlers likeonerror/onclick). Bothproduct-info.tsxandproduct-tabs.tsxuseSafeHtmlContentwhen displayingproduct.description.The architecture stores unsanitised HTML in the database and sanitises at render time per context (e.g., the n1 app escapes HTML entities for XML feeds at line 96 of
apps/n1/src/app/api/feed/products/route.ts). This is a valid pattern when client-side sanitisation is consistently applied.The original concern about the PR description stating "sanitized, product-safe HTML" is partially valid—sanitisation happens on the frontend, not during storage, which differs from the stated expectation.
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 3d786f8ef2
ℹ️ 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".
…description-editor # Conflicts: # apps/medusa-be/package.json # pnpm-lock.yaml
Blacksmith Account SuspendedThis Blacksmith account requires additional verification. Jobs targeting Blacksmith runners will not be picked up and will remain queued until they timeout. Please contact Blacksmith Support for assistance. |
|
Review follow-up status:
Remaining visible bot comments are top-level status/walkthrough comments, not unresolved review conversations. |
1 participant
Problem
Product descriptions were still edited through Medusa's default plain textarea, which makes rich HTML content hard to maintain and easy to corrupt. This is especially risky for product descriptions because users can accidentally replace structured content with raw text from the default Edit Product drawer.
The content plugin also needed small compatibility fixes in this app so its admin widgets and routes can run reliably inside the Medusa admin shell.
Changes
medusa-plugin-contentfor the Medusa backend and patch the plugin where needed for this project.product.descriptionfield as sanitized product-safe HTML.Validation
bunx biome check --write apps/medusa-be/src/admin/widgets/product-description-editor.tsx apps/medusa-be/src/admin/widgets/product-description-editor.css apps/frontend-demo/src/components/safe-html-content.tsx apps/medusa-be/package.json package.jsonbunx nx run medusa-be:buildNEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY=<local key> bunx nx run frontend-demo:build/admin/products/:idas HTML.Edit Productdrawer no longer exposes Description.Deployment
No Zane/test deployment was performed in this change.
Summary by CodeRabbit
New Features
Improvements