[codex] add rich product description editor

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

@@ -3,13 +3,18 @@
 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+;/
+
 /**
  * Safely renders HTML content with automatic detection and sanitization.
  * Detects if content contains HTML tags or entities and sanitizes accordingly.
@@ -21,11 +26,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) {
@@ -42,14 +49,26 @@ export function SafeHtmlContent({
           "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"],
@@ -73,6 +92,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

@@ -73,6 +73,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",
@@ -75,6 +76,8 @@
     "drizzle-orm": "^0.45.0",
     "escape-html": "^1.0.3",
     "jose": "^6.1.3",
+    "marked": "15.0.12",
+    "medusa-plugin-content": "^0.2.0",
     "mime": "4.1.0",
     "mysql2": "^3.15.3",
     "qs": "^6.14.1",

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

@@ -0,0 +1,180 @@
+.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);
+}