[codex] add rich product description editor

apps/frontend-demo/src/components/safe-html-content.tsx

@@ -3,13 +3,48 @@
 import DOMPurify from "dompurify"
 import { useMemo } from "react"
 
-interface SafeHtmlContentProps {
+type SanitizerConfig = NonNullable<Parameters<typeof DOMPurify.sanitize>[1]>
+
+type SafeHtmlContentProps = {
   content: string | null | undefined
   className?: string
   /** Custom DOMPurify config for allowed tags and attributes */
-  config?: any // DOMPurify.Config type
+  config?: SanitizerConfig
 }
 
+const HTML_TAG_PATTERN = /<[^>]*>/
+const HTML_ENTITY_PATTERN = /&#?\w+;/
+const REL_TOKEN_PATTERN = /\s+/
+const BLANK_TARGET_REL_TOKENS = ["noopener", "noreferrer"]
+
+DOMPurify.addHook("afterSanitizeAttributes", (node) => {
+  if (
+    node.nodeType !== 1 ||
+    !("tagName" in node) ||
+    typeof node.getAttribute !== "function" ||
+    typeof node.setAttribute !== "function"
+  ) {
+    return
+  }
+
+  if (
+    node.tagName.toLowerCase() !== "a" ||
+    node.getAttribute("target")?.toLowerCase() !== "_blank"
+  ) {
+    return
+  }
+
+  const relTokens = new Set(
+    (node.getAttribute("rel") ?? "").split(REL_TOKEN_PATTERN).filter(Boolean)
+  )
+
+  for (const token of BLANK_TARGET_REL_TOKENS) {
+    relTokens.add(token)
+  }
+
+  node.setAttribute("rel", Array.from(relTokens).join(" "))
+})
+
 /**
  * Safely renders HTML content with automatic detection and sanitization.
  * Detects if content contains HTML tags or entities and sanitizes accordingly.
@@ -21,11 +56,13 @@ export function SafeHtmlContent({
   config,
 }: SafeHtmlContentProps) {
   const processedContent = useMemo(() => {
-    if (!content) return { isHtml: false, content: "" }
+    if (!content) {
+      return { isHtml: false, content: "" }
+    }
 
     // Check if content contains HTML tags or HTML entities
-    const hasHtmlTags = /<[^>]*>/g.test(content)
-    const hasHtmlEntities = /&#?\w+;/.test(content)
+    const hasHtmlTags = HTML_TAG_PATTERN.test(content)
+    const hasHtmlEntities = HTML_ENTITY_PATTERN.test(content)
     const isHtml = hasHtmlTags || hasHtmlEntities
 
     if (isHtml) {
@@ -35,27 +72,43 @@ export function SafeHtmlContent({
           "p",
           "br",
           "strong",
+          "del",
           "em",
           "b",
           "i",
+          "s",
+          "strike",
           "u",
+          "hr",
           "ul",
           "ol",
           "li",
+          "h1",
+          "h2",
           "h3",
           "h4",
           "h5",
           "h6",
+          "a",
+          "blockquote",
+          "code",
+          "pre",
+          "table",
+          "thead",
+          "tbody",
+          "tr",
+          "th",
+          "td",
           "span",
           "div",
         ],
-        ALLOWED_ATTR: ["class", "style"],
+        ALLOWED_ATTR: ["class", "style", "href", "target", "rel"],
         ALLOW_DATA_ATTR: false,
         FORBID_TAGS: ["script", "iframe", "form", "input"],
         FORBID_ATTR: ["onerror", "onclick", "onload"],
       }
 
-      // Merge custom config with defaults
+      // Custom config shallow-overrides defaults; array fields are replaced.
       const finalConfig = { ...defaultConfig, ...config }
       const sanitized = DOMPurify.sanitize(content, finalConfig)
 
@@ -73,6 +126,7 @@ export function SafeHtmlContent({
     return (
       <div
         className={className}
+        // biome-ignore lint/security/noDangerouslySetInnerHtml: Product HTML is sanitized by DOMPurify immediately above.
         dangerouslySetInnerHTML={{ __html: processedContent.content }}
       />
     )

apps/medusa-be/medusa-config.ts

@@ -79,6 +79,10 @@ module.exports = defineConfig({
     redisUrl: REDIS_URL,
   },
   plugins: [
+    {
+      resolve: "medusa-plugin-content",
+      options: {},
+    },
     {
       resolve: "@medusajs/draft-order",
       options: {},

apps/medusa-be/package.json

@@ -47,6 +47,7 @@
   },
   "dependencies": {
     "@badgateway/oauth2-client": "^3.3.1",
+    "@mdxeditor/editor": "3.54.0",
     "@medusajs/admin-sdk": "^2.14.1",
     "@medusajs/admin-shared": "^2.14.1",
     "@medusajs/caching-redis": "^2.14.1",
@@ -76,6 +77,8 @@
     "escape-html": "^1.0.3",
     "jose": "^6.1.3",
     "fast-xml-parser": "^5.7.2",
+    "marked": "15.0.12",
+    "medusa-plugin-content": "0.2.0",
     "mime": "4.1.0",
     "mysql2": "^3.15.3",
     "pdf-lib": "^1.17.1",

apps/medusa-be/src/admin/widgets/product-description-editor.css

@@ -0,0 +1,181 @@
+.product-description-mdx-editor {
+  --baseBase: #ffffff;
+  --baseBg: #f7f7f8;
+  --baseBgActive: #e4e4e7;
+  --baseBgHover: #ededf0;
+  --baseBgSubtle: #fafafa;
+  --baseBorder: #d4d4d8;
+  --baseBorderHover: #a1a1aa;
+  --basePageBg: #ffffff;
+  --baseTextContrast: #18181b;
+  --baseTextSecondary: #52525b;
+  --accentBase: #eff6ff;
+  --accentBg: #dbeafe;
+  --accentBgActive: #bfdbfe;
+  --accentBgHover: #dbeafe;
+  --accentBgSubtle: #eff6ff;
+  --accentBorder: #93c5fd;
+  --accentBorderHover: #60a5fa;
+  --accentSolid: #2563eb;
+  --accentSolidHover: #1d4ed8;
+  --accentText: #1d4ed8;
+  --accentTextContrast: #ffffff;
+
+  isolation: isolate;
+  background: var(--basePageBg);
+  color: var(--baseTextContrast);
+}
+
+.dark .product-description-mdx-editor,
+.dark-theme .product-description-mdx-editor,
+[data-theme="dark"] .product-description-mdx-editor {
+  --baseBase: #18181b;
+  --baseBg: #27272a;
+  --baseBgActive: #3f3f46;
+  --baseBgHover: #313135;
+  --baseBgSubtle: #1f1f23;
+  --baseBorder: #3f3f46;
+  --baseBorderHover: #71717a;
+  --basePageBg: #111113;
+  --baseTextContrast: #f4f4f5;
+  --baseTextSecondary: #a1a1aa;
+  --accentBase: #111827;
+  --accentBg: #1e3a8a;
+  --accentBgActive: #1d4ed8;
+  --accentBgHover: #1e40af;
+  --accentBgSubtle: #172554;
+  --accentBorder: #2563eb;
+  --accentBorderHover: #3b82f6;
+  --accentSolid: #60a5fa;
+  --accentSolidHover: #93c5fd;
+  --accentText: #93c5fd;
+  --accentTextContrast: #0b1120;
+}
+
+@media (prefers-color-scheme: dark) {
+  .product-description-mdx-editor {
+    --baseBase: #18181b;
+    --baseBg: #27272a;
+    --baseBgActive: #3f3f46;
+    --baseBgHover: #313135;
+    --baseBgSubtle: #1f1f23;
+    --baseBorder: #3f3f46;
+    --baseBorderHover: #71717a;
+    --basePageBg: #111113;
+    --baseTextContrast: #f4f4f5;
+    --baseTextSecondary: #a1a1aa;
+    --accentBase: #111827;
+    --accentBg: #1e3a8a;
+    --accentBgActive: #1d4ed8;
+    --accentBgHover: #1e40af;
+    --accentBgSubtle: #172554;
+    --accentBorder: #2563eb;
+    --accentBorderHover: #3b82f6;
+    --accentSolid: #60a5fa;
+    --accentSolidHover: #93c5fd;
+    --accentText: #93c5fd;
+    --accentTextContrast: #0b1120;
+  }
+}
+
+.product-description-mdx-editor [role="toolbar"] {
+  border-bottom: 1px solid var(--baseBorder);
+  border-radius: 0;
+}
+
+body.product-description-editor-modal-open
+  .mdxeditor-popup-container.product-description-mdx-editor,
+body.product-description-editor-modal-open
+  .product-description-mdx-editor
+  [role="toolbar"] {
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.product-description-mdx-editor [role="toolbar"] button,
+.product-description-mdx-editor [role="toolbar"] [role="combobox"] {
+  color: var(--baseTextContrast);
+}
+
+.product-description-mdx-editor [role="toolbar"] button:disabled,
+.product-description-mdx-editor [role="toolbar"] button[data-disabled] {
+  color: var(--baseBorderHover);
+}
+
+.product-description-mdx-content {
+  min-height: 320px;
+  padding: 16px;
+  color: var(--baseTextContrast);
+  outline: none;
+}
+
+.product-description-mdx-content h1,
+.product-description-mdx-content h2,
+.product-description-mdx-content h3,
+.product-description-mdx-content h4 {
+  margin: 0 0 12px;
+  font-weight: 600;
+}
+
+.product-description-mdx-content h1 {
+  font-size: 24px;
+  line-height: 32px;
+}
+
+.product-description-mdx-content h2 {
+  font-size: 20px;
+  line-height: 28px;
+}
+
+.product-description-mdx-content h3 {
+  font-size: 18px;
+  line-height: 26px;
+}
+
+.product-description-mdx-content p,
+.product-description-mdx-content ul,
+.product-description-mdx-content ol,
+.product-description-mdx-content blockquote,
+.product-description-mdx-content table,
+.product-description-mdx-content pre {
+  margin: 0 0 12px;
+}
+
+.product-description-mdx-content ul,
+.product-description-mdx-content ol {
+  padding-left: 24px;
+}
+
+.product-description-mdx-content ul {
+  list-style: disc;
+}
+
+.product-description-mdx-content ol {
+  list-style: decimal;
+}
+
+.product-description-mdx-content blockquote {
+  border-left: 2px solid var(--baseBorder);
+  color: var(--baseTextSecondary);
+  padding-left: 12px;
+}
+
+.product-description-mdx-content a {
+  color: var(--accentText);
+  text-decoration: underline;
+}
+
+.product-description-mdx-editor .cm-editor,
+.product-description-mdx-editor .cm-gutters {
+  background: var(--basePageBg);
+  color: var(--baseTextContrast);
+}
+
+.product-description-mdx-editor .cm-activeLine,
+.product-description-mdx-editor .cm-activeLineGutter {
+  background: var(--baseBgSubtle);
+}
+
+.product-description-mdx-editor .cm-cursor {
+  border-left-color: var(--baseTextContrast);
+}