decap-cms-widget-markdown 3.7.0 → 3.9.0

package/dist/esm/MarkdownPreview.js

@@ -29,7 +29,8 @@ class MarkdownPreview extends React.Component {
       getAsset,
       resolveWidget
     }, getRemarkPlugins?.());
-    const toRender = field?.get('sanitize_preview', false) ? DOMPurify.sanitize(html) : html;
+    const shouldSanitizePreview = field?.get('sanitize_preview') ?? true;
+    const toRender = shouldSanitizePreview ? DOMPurify.sanitize(html) : html;
     return ___EmotionJSX(WidgetPreviewContainer, {
       dangerouslySetInnerHTML: {
         __html: toRender

package/dist/esm/serializers/index.js

@@ -7,6 +7,7 @@ import remarkToRehype from 'remark-rehype';
 import rehypeToHtml from 'rehype-stringify';
 import htmlToRehype from 'rehype-parse';
 import rehypeToRemark from 'rehype-remark';
+import rehypeRemoveComments from 'rehype-remove-comments';
 import remarkToRehypeShortcodes from './remarkRehypeShortcodes';
 import rehypePaperEmoji from './rehypePaperEmoji';
 import remarkAssertParents from './remarkAssertParents';
@@ -154,10 +155,23 @@ export function markdownToHtml(markdown, {
   remarkPlugins = []
 } = {}) {
   const mdast = markdownToRemark(markdown, remarkPlugins);
+  const editorComponents = getEditorComponents();
+
+  /**
+   * Provide a `toHtml` callback so `remarkToRehypeShortcodes` can recursively
+   * render markdown/richtext sub-fields of container editor components.
+   */
+  function toHtml(md) {
+    return markdownToHtml(md, {
+      getAsset,
+      resolveWidget
+    });
+  }
   const hast = unified().use(remarkToRehypeShortcodes, {
-    plugins: getEditorComponents(),
+    plugins: editorComponents,
     getAsset,
-    resolveWidget
+    resolveWidget,
+    toHtml
   }).use(remarkToRehype, {
     allowDangerousHTML: true
   }).runSync(mdast);
@@ -180,7 +194,9 @@ export function htmlToSlate(html) {
   const hast = unified().use(htmlToRehype, {
     fragment: true
   }).parse(html);
-  const mdast = unified().use(rehypePaperEmoji).use(rehypeToRemark, {
+  const mdast = unified().use(rehypePaperEmoji).use(rehypeRemoveComments, {
+    removeConditional: true
+  }).use(rehypeToRemark, {
     minify: false
   }).runSync(hast);
   const slateRaw = unified().use(remarkAssertParents).use(remarkPaddedLinks).use(remarkWrapHtml).use(remarkToSlate).runSync(mdast);

package/dist/esm/serializers/remarkRehypeShortcodes.js

@@ -13,7 +13,8 @@ import u from 'unist-builder';
 export default function remarkToRehypeShortcodes({
   plugins,
   getAsset,
-  resolveWidget
+  resolveWidget,
+  toHtml
 }) {
   return transform;
   function transform(root) {
@@ -68,13 +69,35 @@ export default function remarkToRehypeShortcodes({
   function getPreview(plugin, shortcodeData) {
     const {
       toPreview,
-      widget,
       fields
     } = plugin;
     if (toPreview) {
       return toPreview(shortcodeData, getAsset, fields);
     }
-    const preview = resolveWidget(widget);
+
+    /**
+     * For editor components without a custom `toPreview` (e.g. container
+     * components with nested markdown/richtext fields), render each sub-field
+     * value using the appropriate widget preview.
+     */
+    if (fields && fields.size > 0 && toHtml) {
+      const htmlParts = fields.map(field => {
+        const name = field.get('name');
+        const widget = field.get('widget') || 'string';
+        const fieldValue = shortcodeData ? shortcodeData[name] : '';
+        if (!fieldValue) return '';
+        if (widget === 'markdown' || widget === 'richtext') {
+          return toHtml(fieldValue);
+        }
+        return `<p>${fieldValue}</p>`;
+      }).toArray();
+      return htmlParts.join('');
+    }
+
+    /**
+     * Last resort fallback: try resolving the widget and rendering its preview.
+     */
+    const preview = resolveWidget(plugin.widget);
     return /*#__PURE__*/React.createElement(preview.preview, {
       value: shortcodeData,
       field: plugin,

package/dist/esm/serializers/remarkShortcodes.js

@@ -9,60 +9,37 @@ export function remarkParseShortcodes({
   });
   methods.unshift('shortcode');
 }
-export function getLinesWithOffsets(value) {
-  const SEPARATOR = '\n\n';
-  const splitted = value.split(SEPARATOR);
-  const trimmedLines = splitted.reduce((acc, line) => {
-    const {
-      start: previousLineStart,
-      originalLength: previousLineOriginalLength
-    } = acc[acc.length - 1];
-    return [...acc, {
-      line: line.trimEnd(),
-      start: previousLineStart + previousLineOriginalLength + SEPARATOR.length,
-      originalLength: line.length
-    }];
-  }, [{
-    start: -SEPARATOR.length,
-    originalLength: 0
-  }]).slice(1).map(({
-    line,
-    start
-  }) => ({
-    line,
-    start
-  }));
-  return trimmedLines;
-}
 function createShortcodeTokenizer({
   plugins
 }) {
+  plugins.forEach(plugin => {
+    if (plugin.pattern.flags.includes('m')) {
+      console.warn(`Invalid RegExp: editor component '${plugin.id}' must not use the multiline flag in its pattern.`);
+    }
+  });
   return function tokenizeShortcode(eat, value, silent) {
-    // Attempt to find a regex match for each plugin's pattern, and then
-    // select the first by its occurrence in `value`. This ensures we won't
-    // skip a plugin that occurs later in the plugin registry, but earlier
-    // in the `value`.
-    const [{
-      plugin,
-      match
-    } = {}] = plugins.toArray().map(plugin => {
+    let match;
+    const potentialMatchValue = value.split('\n\n')[0].trimEnd();
+    const plugin = plugins.find(plugin => {
       let {
         pattern
       } = plugin;
-      // Plugin patterns must start with a caret (^) to match the beginning of the line.
+      // Plugin patterns must start with a caret (^) to match the beginning of the block.
       // If the pattern does not start with a caret, we add it
       // to ensure that remark consumes only the shortcode, without any leading text.
       if (!pattern.source.startsWith('^')) {
         pattern = new RegExp(`^${pattern.source}`, pattern.flags);
       }
-      return {
-        match: value.match(pattern),
-        plugin
-      };
-    }).filter(({
-      match
-    }) => !!match).sort((a, b) => a.match.index - b.match.index);
+      match = value.match(pattern);
+      if (!match) {
+        match = potentialMatchValue.match(pattern);
+      }
+      return !!match;
+    });
     if (match) {
+      if (match.index > 0) {
+        console.warn(`Invalid RegExp: editor component '${plugin.id}' must match from the beginning of the block.`);
+      }
       if (silent) {
         return true;
       }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "decap-cms-widget-markdown",
   "description": "Widget for editing markdown in Decap CMS.",
-  "version": "3.7.0",
+  "version": "3.9.0",
   "homepage": "https://www.decapcms.org/docs/widgets/#markdown",
   "repository": "https://github.com/decaporg/decap-cms/tree/main/packages/decap-cms-widget-markdown",
   "bugs": "https://github.com/decaporg/decap-cms/issues",
@@ -22,13 +22,14 @@
   },
   "dependencies": {
     "detab": "^2.0.4",
-    "dompurify": "^3.3.3",
+    "dompurify": "^3.4.0",
     "is-hotkey": "^0.2.0",
     "is-url": "^1.2.4",
     "mdast-util-definitions": "^1.2.3",
     "mdast-util-to-string": "^1.0.5",
     "rehype-parse": "^6.0.0",
     "rehype-remark": "^8.0.0",
+    "rehype-remove-comments": "^4.0.2",
     "rehype-stringify": "^7.0.0",
     "remark-parse": "^6.0.3",
     "remark-rehype": "^4.0.0",
@@ -63,5 +64,5 @@
     "commonmark": "^0.30.0",
     "commonmark-spec": "^0.30.0"
   },
-  "gitHead": "af84ddd0532948c38a9da26026404518a59d0903"
+  "gitHead": "ae01ad6f2b139f93472c8f0d049d35277d8583ca"
 }

package/src/MarkdownControl/index.js

@@ -47,7 +47,11 @@ export default class MarkdownControl extends React.Component {
     _getEditorComponents = props.getEditorComponents;
     this.state = {
       mode:
-        this.getAllowedModes().indexOf(preferredMode) !== -1
+        // When used inside a container/shortcode editor component, default to
+        // raw mode — the widget type already implies the editing surface.
+        props.isEditorComponent
+          ? 'raw'
+          : this.getAllowedModes().indexOf(preferredMode) !== -1
           ? preferredMode
           : this.getAllowedModes()[0],
       pendingFocus: false,
@@ -57,6 +61,12 @@ export default class MarkdownControl extends React.Component {
   componentDidMount() {
     // Manually validate PropTypes - React 19 breaking change
     PropTypes.checkPropTypes(MarkdownControl.propTypes, this.props, 'prop', 'MarkdownControl');
+
+    // Ensure containerised widgets start in the correct mode even if the
+    // constructor ran before the prop was available (e.g. HMR / late prop).
+    if (this.props.isEditorComponent && this.state.mode !== 'raw') {
+      this.setState({ mode: 'raw' });
+    }
   }
 
   handleMode = mode => {
@@ -92,7 +102,8 @@ export default class MarkdownControl extends React.Component {
     } = this.props;
 
     const { mode, pendingFocus } = this.state;
-    const isShowModeToggle = this.getAllowedModes().length > 1;
+    const isEditorComponent = this.props.isEditorComponent;
+    const isShowModeToggle = this.getAllowedModes().length > 1 && !isEditorComponent;
     const visualEditor = (
       <div className="cms-editor-visual" ref={this.processRef}>
         <VisualEditor

package/src/MarkdownControl/plugins/html/__tests__/withHtml.spec.js

@@ -0,0 +1,67 @@
+import { Transforms } from 'slate';
+
+import withHtml from '../withHtml';
+
+describe('withHtml', () => {
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  function createEditor() {
+    return {
+      insertData: jest.fn(),
+      isInline: jest.fn(() => false),
+      isVoid: jest.fn(() => false),
+    };
+  }
+
+  function createDataTransfer(html) {
+    return {
+      getData: jest.fn(type => (type === 'text/html' ? html : '')),
+    };
+  }
+
+  it('should unwrap links with dangerous protocols', () => {
+    const editor = withHtml(createEditor());
+    const insertFragmentSpy = jest.spyOn(Transforms, 'insertFragment').mockImplementation(() => {});
+
+    editor.insertData(createDataTransfer('<p><a href="javascript:alert(1)">click me</a></p>'));
+
+    expect(insertFragmentSpy).toHaveBeenCalledWith(editor, [
+      {
+        type: 'paragraph',
+        children: [{ text: 'click me' }],
+      },
+    ]);
+  });
+
+  it('should drop images with dangerous protocols', () => {
+    const editor = withHtml(createEditor());
+    const insertFragmentSpy = jest.spyOn(Transforms, 'insertFragment').mockImplementation(() => {});
+
+    editor.insertData(createDataTransfer('<p>before<img src="javascript:alert(1)">after</p>'));
+
+    expect(insertFragmentSpy).toHaveBeenCalledWith(editor, [
+      {
+        type: 'paragraph',
+        children: [{ text: 'beforeafter' }],
+      },
+    ]);
+  });
+
+  it('should keep safe image URLs', () => {
+    const editor = withHtml(createEditor());
+    const insertFragmentSpy = jest.spyOn(Transforms, 'insertFragment').mockImplementation(() => {});
+
+    editor.insertData(createDataTransfer('<p><img src="https://example.com/image.png"></p>'));
+
+    expect(insertFragmentSpy).toHaveBeenCalledWith(editor, [
+      {
+        type: 'paragraph',
+        children: [
+          { type: 'image', url: 'https://example.com/image.png', children: [{ text: '' }] },
+        ],
+      },
+    ]);
+  });
+});

package/src/MarkdownControl/plugins/html/withHtml.js

@@ -1,9 +1,43 @@
 // source: https://github.com/ianstormtaylor/slate/blob/main/site/examples/ts/paste-html.tsx
+import DOMPurify from 'dompurify';
 import { jsx } from 'slate-hyperscript';
 import { Transforms } from 'slate';
 
+function sanitizeElementUrl(url, { allowDataImage = false } = {}) {
+  if (!url) {
+    return null;
+  }
+
+  const trimmed = url.trim();
+
+  if (!trimmed) {
+    return null;
+  }
+
+  const normalized = trimmed.replace(/\s+/g, '').toLowerCase();
+
+  if (
+    normalized.startsWith('javascript:') ||
+    normalized.startsWith('vbscript:') ||
+    normalized.startsWith('file:')
+  ) {
+    return null;
+  }
+
+  if (normalized.startsWith('data:')) {
+    return allowDataImage && /^data:image\/(?!svg\+xml)[a-z0-9.+-]+[;,]/i.test(normalized)
+      ? trimmed
+      : null;
+  }
+
+  return trimmed;
+}
+
 const ELEMENT_TAGS = {
-  A: el => ({ type: 'link', url: el.getAttribute('href') }),
+  A: el => {
+    const url = sanitizeElementUrl(el.getAttribute('href'));
+    return url ? { type: 'link', url } : undefined;
+  },
   BLOCKQUOTE: () => ({ type: 'quote' }),
   H1: () => ({ type: 'heading-one' }),
   H2: () => ({ type: 'heading-two' }),
@@ -11,7 +45,10 @@ const ELEMENT_TAGS = {
   H4: () => ({ type: 'heading-four' }),
   H5: () => ({ type: 'heading-five' }),
   H6: () => ({ type: 'heading-six' }),
-  IMG: el => ({ type: 'image', url: el.getAttribute('src') }),
+  IMG: el => {
+    const url = sanitizeElementUrl(el.getAttribute('src'), { allowDataImage: true });
+    return url ? { type: 'image', url } : null;
+  },
   LI: () => ({ type: 'list-item' }),
   OL: () => ({ type: 'numbered-list' }),
   P: () => ({ type: 'paragraph' }),
@@ -37,7 +74,7 @@ const INLINE_STYLES = {
 
 function deserialize(el) {
   if (el.nodeType === 3) {
-    return el.textContent;
+    return el.textContent.replace(/(\r)?\n/g, '');
   } else if (el.nodeType !== 1) {
     return null;
   } else if (el.nodeName === 'BR') {
@@ -62,6 +99,15 @@ function deserialize(el) {
 
   if (ELEMENT_TAGS[nodeName]) {
     const attrs = ELEMENT_TAGS[nodeName](el);
+
+    if (attrs === undefined) {
+      return children;
+    }
+
+    if (attrs === null) {
+      return null;
+    }
+
     return jsx('element', attrs, children);
   }
 
@@ -102,7 +148,8 @@ function withHtml(editor) {
     const html = data.getData('text/html');
 
     if (html) {
-      const parsed = new DOMParser().parseFromString(html, 'text/html');
+      const sanitizedHtml = DOMPurify.sanitize(html);
+      const parsed = new DOMParser().parseFromString(sanitizedHtml, 'text/html');
       const fragment = deserialize(parsed.body);
       Transforms.insertFragment(editor, fragment);
       return;

package/src/MarkdownControl/plugins/shortcodes/insertShortcode.js

@@ -6,8 +6,7 @@ function insertShortcode(editor, pluginConfig) {
   const defaultValues = pluginConfig.fields
     .toMap()
     .mapKeys((_, field) => field.get('name'))
-    .filter(field => field.has('default'))
-    .map(field => field.get('default'));
+    .map(field => field.get('default', ''));
 
   const nodeData = {
     type: 'shortcode',

package/src/MarkdownControl/renderers.js

@@ -97,7 +97,7 @@ const StyledTable = styled.table`
 `;
 
 const StyledTd = styled.td`
-  border: 2px solid black;
+  border: 1px solid black;
   padding: 8px;
   text-align: left;
 `;

package/src/MarkdownPreview.js

@@ -4,6 +4,7 @@ import { WidgetPreviewContainer } from 'decap-cms-ui-default';
 import DOMPurify from 'dompurify';
 
 import { markdownToHtml } from './serializers';
+
 class MarkdownPreview extends React.Component {
   static propTypes = {
     getAsset: PropTypes.func.isRequired,
@@ -23,7 +24,8 @@ class MarkdownPreview extends React.Component {
     }
 
     const html = markdownToHtml(value, { getAsset, resolveWidget }, getRemarkPlugins?.());
-    const toRender = field?.get('sanitize_preview', false) ? DOMPurify.sanitize(html) : html;
+    const shouldSanitizePreview = field?.get('sanitize_preview') ?? true;
+    const toRender = shouldSanitizePreview ? DOMPurify.sanitize(html) : html;
 
     return <WidgetPreviewContainer dangerouslySetInnerHTML={{ __html: toRender }} />;
   }

package/src/__tests__/renderer.spec.js

@@ -208,6 +208,16 @@ I get 10 times more traffic from [Google] than from [Yahoo] or [MSN].
       expect(img).not.toHaveAttribute('onerror');
     });
 
+    it('should sanitize dangerous link protocols', () => {
+      const value = '<a href="javascript:alert(1)">click</a>';
+
+      const { container } = render(
+        <MarkdownPreview value={value} getAsset={jest.fn()} resolveWidget={jest.fn()} />,
+      );
+      const link = container.querySelector('a');
+      expect(link).not.toHaveAttribute('href');
+    });
+
     it('should not sanitize HTML', async () => {
       const value = `<img src="foobar.png" onerror="alert('hello')">`;
       const field = Map({ sanitize_preview: false });

package/src/serializers/__tests__/index.spec.js

@@ -49,4 +49,19 @@ describe('htmlToSlate', () => {
       ],
     });
   });
+
+  it('should remove HTML comments', () => {
+    const html = `<!--[if gte mso 9]><xml><o:OfficeDocumentSettings><o:AllowPNG/></o:OfficeDocumentSettings></xml><![endif]--><span>regular text</span>`;
+
+    const actual = htmlToSlate(html);
+    expect(actual).toEqual({
+      type: 'root',
+      children: [
+        {
+          type: 'paragraph',
+          children: [{ text: 'regular text' }],
+        },
+      ],
+    });
+  });
 });

package/src/serializers/__tests__/remarkShortcodes.spec.js

@@ -2,7 +2,7 @@ import { Map, OrderedMap } from 'immutable';
 import unified from 'unified';
 import markdownToRemarkPlugin from 'remark-parse';
 
-import { remarkParseShortcodes, getLinesWithOffsets } from '../remarkShortcodes';
+import { remarkParseShortcodes } from '../remarkShortcodes';
 
 function process(value, plugins) {
   return unified()
@@ -33,30 +33,29 @@ describe('remarkParseShortcodes', () => {
         expect.arrayContaining(['foo\n\nbar']),
       );
     });
-    it('should match shortcodes based on order of occurrence in value', () => {
-      const fooEditorComponent = EditorComponent({ id: 'foo', pattern: /foo/ });
-      const barEditorComponent = EditorComponent({ id: 'bar', pattern: /bar/ });
+    it('should match shortcodes by first matching plugin', () => {
+      const fooEditorComponent = EditorComponent({ id: 'foo', pattern: /^foo/ });
+      const barEditorComponent = EditorComponent({ id: 'bar', pattern: /^bar/ });
       process(
-        'foo\n\nbar',
+        'bar\n\nfoo',
         OrderedMap([
-          [barEditorComponent.id, barEditorComponent],
           [fooEditorComponent.id, fooEditorComponent],
-        ]),
-      );
-      expect(fooEditorComponent.fromBlock).toHaveBeenCalledWith(expect.arrayContaining(['foo']));
-    });
-    it('should match shortcodes based on order of occurrence in value even when some use line anchors', () => {
-      const barEditorComponent = EditorComponent({ id: 'bar', pattern: /bar/ });
-      const bazEditorComponent = EditorComponent({ id: 'baz', pattern: /^baz$/ });
-      process(
-        'foo\n\nbar\n\nbaz',
-        OrderedMap([
-          [bazEditorComponent.id, bazEditorComponent],
           [barEditorComponent.id, barEditorComponent],
         ]),
       );
+      // 'bar' is the first block, but 'foo' plugin is first in registry,
+      // so 'foo' doesn't match 'bar'. 'bar' plugin matches 'bar'.
       expect(barEditorComponent.fromBlock).toHaveBeenCalledWith(expect.arrayContaining(['bar']));
     });
+    it('should warn when pattern uses multiline flag', () => {
+      const warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+      const editorComponent = EditorComponent({ pattern: /^foo$/m });
+      process('foo', Map({ [editorComponent.id]: editorComponent }));
+      expect(warnSpy).toHaveBeenCalledWith(
+        expect.stringContaining('must not use the multiline flag'),
+      );
+      warnSpy.mockRestore();
+    });
   });
   describe('parse', () => {
     describe('pattern with leading caret', () => {
@@ -122,24 +121,3 @@ describe('remarkParseShortcodes', () => {
     return obj;
   }
 });
-
-describe('getLinesWithOffsets', () => {
-  test('should split into lines', () => {
-    const value = ' line1\n\nline2 \n\n    line3   \n\n';
-
-    const lines = getLinesWithOffsets(value);
-    expect(lines).toEqual([
-      { line: ' line1', start: 0 },
-      { line: 'line2', start: 8 },
-      { line: '    line3', start: 16 },
-      { line: '', start: 30 },
-    ]);
-  });
-
-  test('should return single item on no match', () => {
-    const value = ' line1    ';
-
-    const lines = getLinesWithOffsets(value);
-    expect(lines).toEqual([{ line: ' line1', start: 0 }]);
-  });
-});

package/src/serializers/index.js

@@ -7,6 +7,7 @@ import remarkToRehype from 'remark-rehype';
 import rehypeToHtml from 'rehype-stringify';
 import htmlToRehype from 'rehype-parse';
 import rehypeToRemark from 'rehype-remark';
+import rehypeRemoveComments from 'rehype-remove-comments';
 
 import remarkToRehypeShortcodes from './remarkRehypeShortcodes';
 import rehypePaperEmoji from './rehypePaperEmoji';
@@ -157,8 +158,23 @@ export function remarkToMarkdown(obj, remarkPlugins) {
 export function markdownToHtml(markdown, { getAsset, resolveWidget, remarkPlugins = [] } = {}) {
   const mdast = markdownToRemark(markdown, remarkPlugins);
 
+  const editorComponents = getEditorComponents();
+
+  /**
+   * Provide a `toHtml` callback so `remarkToRehypeShortcodes` can recursively
+   * render markdown/richtext sub-fields of container editor components.
+   */
+  function toHtml(md) {
+    return markdownToHtml(md, { getAsset, resolveWidget });
+  }
+
   const hast = unified()
-    .use(remarkToRehypeShortcodes, { plugins: getEditorComponents(), getAsset, resolveWidget })
+    .use(remarkToRehypeShortcodes, {
+      plugins: editorComponents,
+      getAsset,
+      resolveWidget,
+      toHtml,
+    })
     .use(remarkToRehype, { allowDangerousHTML: true })
     .runSync(mdast);
 
@@ -183,6 +199,7 @@ export function htmlToSlate(html) {
 
   const mdast = unified()
     .use(rehypePaperEmoji)
+    .use(rehypeRemoveComments, { removeConditional: true })
     .use(rehypeToRemark, { minify: false })
     .runSync(hast);
 
@@ -222,5 +239,6 @@ export function markdownToSlate(markdown, { voidCodeBlock, remarkPlugins = [] }
 export function slateToMarkdown(raw, { voidCodeBlock, remarkPlugins = [] } = {}) {
   const mdast = slateToRemark(raw, { voidCodeBlock });
   const markdown = remarkToMarkdown(mdast, remarkPlugins);
+
   return markdown;
 }

package/src/serializers/remarkRehypeShortcodes.js

@@ -10,7 +10,7 @@ import u from 'unist-builder';
  * conversion by replacing the shortcode text with stringified HTML for
  * previewing the shortcode output.
  */
-export default function remarkToRehypeShortcodes({ plugins, getAsset, resolveWidget }) {
+export default function remarkToRehypeShortcodes({ plugins, getAsset, resolveWidget, toHtml }) {
   return transform;
 
   function transform(root) {
@@ -54,11 +54,40 @@ export default function remarkToRehypeShortcodes({ plugins, getAsset, resolveWid
    * Retrieve the shortcode preview component.
    */
   function getPreview(plugin, shortcodeData) {
-    const { toPreview, widget, fields } = plugin;
+    const { toPreview, fields } = plugin;
     if (toPreview) {
       return toPreview(shortcodeData, getAsset, fields);
     }
-    const preview = resolveWidget(widget);
+
+    /**
+     * For editor components without a custom `toPreview` (e.g. container
+     * components with nested markdown/richtext fields), render each sub-field
+     * value using the appropriate widget preview.
+     */
+    if (fields && fields.size > 0 && toHtml) {
+      const htmlParts = fields
+        .map(field => {
+          const name = field.get('name');
+          const widget = field.get('widget') || 'string';
+          const fieldValue = shortcodeData ? shortcodeData[name] : '';
+
+          if (!fieldValue) return '';
+
+          if (widget === 'markdown' || widget === 'richtext') {
+            return toHtml(fieldValue);
+          }
+
+          return `<p>${fieldValue}</p>`;
+        })
+        .toArray();
+
+      return htmlParts.join('');
+    }
+
+    /**
+     * Last resort fallback: try resolving the widget and rendering its preview.
+     */
+    const preview = resolveWidget(plugin.widget);
     return React.createElement(preview.preview, {
       value: shortcodeData,
       field: plugin,