Medusa Product Content Plugin

Enhanced product content management with rich text editor and i18n specifications for Medusa Admin.

Features

• Rich Text Editor: TipTap-based editor for long product descriptions
• i18n Specifications: Multilingual key-value product specifications
• Version History: Automatic versioning of content changes
• Import/Export: CSV/JSON import and export for specifications
• SEO-Friendly: HTML sanitization and auto-excerpt generation
• Drag & Drop: Reorder specification groups and items
• Locale Support: Full internationalization support

Installation

npm install @medusajs/admin-product-content
# or
yarn add @medusajs/admin-product-content

Configuration

Add the plugin to your medusa-config.js:

module.exports = {
  // ... other config
  plugins: [
    {
      resolve: '@medusajs/admin-product-content',
      options: {
        locales: [
          { code: 'th-TH', label: 'ไทย', isDefault: true },
          { code: 'en-US', label: 'English' }
        ],
        defaultLocale: 'th-TH',
        versioning: {
          enabled: true,
          maxVersions: 10
        }
      }
    }
  ]
}

Usage

Admin Interface

1. Navigate to any product in Medusa Admin
2. Find the "Product Content" widget on the product detail page
3. Click "Manage Content" to open the content editor
4. Use the tabs to manage:
   • Overview: View product information and content status
   • Long Description: Edit rich text content
   • Specifications: Manage i18n product specs
   • Versions: View and restore content history

Storefront Integration

Fetch product content via the Store API:

// Fetch product with metadata
const product = await fetch('/store/products/prod_123?expand=metadata')
  .then(res => res.json())

// Access long description
const longDescription = product.metadata?.long_description

// Access specifications
const specs = product.metadata?.specs

// Helper function for locale fallback
function getSpecValue(item, locale, fallbackLocale) {
  return item.i18n[locale]?.value ||
         item.i18n[fallbackLocale]?.value ||
         ''
}

Data Structure

Long Description

{
  "metadata": {
    "long_description": {
      "html": "<h1>Product Title</h1><p>...</p>",
      "richjson": { /* TipTap JSON */ },
      "locale": "th-TH",
      "updated_at": "2025-01-01T00:00:00Z",
      "updated_by": "[email protected]"
    }
  }
}

Specifications

{
  "metadata": {
    "specs": {
      "default_locale": "th-TH",
      "groups": [
        {
          "key": "electrical",
          "position": 1,
          "i18n": {
            "th-TH": { "label": "ข้อมูลไฟฟ้า" },
            "en-US": { "label": "Electrical" }
          },
          "items": [
            {
              "position": 1,
              "i18n": {
                "th-TH": { "key": "กำลังไฟ", "value": "18 วัตต์" },
                "en-US": { "key": "Power", "value": "18 W" }
              },
              "visible": true
            }
          ]
        }
      ]
    }
  }
}

Import/Export

CSV Format

group_key,group_position,group_label.th-TH,group_label.en-US,item_position,key.th-TH,value.th-TH,key.en-US,value.en-US,visible
electrical,1,ข้อมูลไฟฟ้า,Electrical,1,กำลังไฟ,18 วัตต์,Power,18 W,true
electrical,1,ข้อมูลไฟฟ้า,Electrical,2,ความสว่าง,1800 ลูเมน,Brightness,1800 lm,true

JSON Format

Export and import full specification structure as JSON for complete data preservation.

API

Hooks

import { useProductContent } from '@medusajs/admin-product-content'

const {
  product,
  longDescription,
  specs,
  versions,
  updateLongDescription,
  updateSpecs,
  restoreVersion
} = useProductContent({ productId: 'prod_123' })

Utilities

import {
  sanitizeHTML,
  generateExcerpt,
  localeUtils,
  getLocalizedSpec
} from '@medusajs/admin-product-content'

// Sanitize HTML
const clean = sanitizeHTML(dirtyHtml)

// Generate excerpt
const excerpt = generateExcerpt(html, 160)

// Get localized value
const value = getLocalizedSpec(item, 'en-US', 'th-TH', 'value')

// Calculate completeness
const completeness = localeUtils.calculateLocaleCompleteness(specs, 'en-US')

Security

• All HTML content is sanitized using DOMPurify
• Scripts and dangerous attributes are removed
• Only admin users with product:update permission can edit content

License

MIT

Support

For issues and feature requests, please visit the GitHub repository.