decap-cms-widget-markdown 3.7.0 → 3.8.0

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/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.8.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": "45c9f5b9a1a12f74321ce4658b71ec88d6365ec1"
 }

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/withHtml.js

@@ -37,7 +37,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') {

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/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/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,