decap-cms-widget-markdown 3.12.0 → 3.13.0

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

@@ -0,0 +1,106 @@
+import { createEditor, Editor, Transforms } from 'slate';
+import { withReact } from 'slate-react';
+
+import withShortcodes from '../withShortcodes';
+import insertShortcode from '../insertShortcode';
+
+function makeEditor(
+  initialChildren = [{ type: 'paragraph', children: [{ text: 'Sample text' }] }],
+) {
+  const editor = withReact(withShortcodes(createEditor()));
+  editor.children = initialChildren;
+  return editor;
+}
+
+describe('insertShortcode', () => {
+  it('should insert inline shortcode with onInsert resolving data', async () => {
+    const editor = makeEditor();
+    editor.selection = {
+      anchor: { path: [0, 0], offset: 0 },
+      focus: { path: [0, 0], offset: 6 },
+    }; // Selected "Sample"
+
+    const onInsertMock = jest.fn().mockResolvedValue({ target: 'doc-page', label: 'Sample' });
+
+    const pluginConfig = {
+      id: 'wikilink',
+      type: 'inline',
+      onInsert: onInsertMock,
+    };
+
+    await insertShortcode(editor, pluginConfig, { contextKey: 'val' });
+
+    expect(onInsertMock).toHaveBeenCalledWith({
+      selectedText: 'Sample',
+      cmsContext: { contextKey: 'val' },
+    });
+
+    const insertedNode = editor.children[0].children.find(
+      child => child.type === 'inline-shortcode',
+    );
+    expect(insertedNode).toBeDefined();
+    expect(insertedNode.data).toEqual({
+      shortcode: 'wikilink',
+      shortcodeNew: true,
+      shortcodeData: { target: 'doc-page', label: 'Sample' },
+      isVoid: true,
+    });
+  });
+
+  it('should cancel inline shortcode insertion when onInsert resolves null', async () => {
+    const editor = makeEditor();
+    editor.selection = {
+      anchor: { path: [0, 0], offset: 0 },
+      focus: { path: [0, 0], offset: 6 },
+    };
+
+    const onInsertMock = jest.fn().mockResolvedValue(null);
+
+    const pluginConfig = {
+      id: 'wikilink',
+      type: 'inline',
+      onInsert: onInsertMock,
+    };
+
+    await insertShortcode(editor, pluginConfig);
+
+    expect(onInsertMock).toHaveBeenCalled();
+    const insertedNode = editor.children[0].children.find(
+      child => child.type === 'inline-shortcode',
+    );
+    expect(insertedNode).toBeUndefined();
+  });
+
+  it('should insert at the captured selection after onInsert changes focus', async () => {
+    const editor = makeEditor();
+    Transforms.select(editor, {
+      anchor: { path: [0, 0], offset: 0 },
+      focus: { path: [0, 0], offset: 6 },
+    });
+    let resolveInsert;
+    const onInsert = jest.fn(
+      () =>
+        new Promise(resolve => {
+          resolveInsert = resolve;
+        }),
+    );
+
+    const insertion = insertShortcode(editor, {
+      id: 'wikilink',
+      type: 'inline',
+      onInsert,
+    });
+    Transforms.select(editor, { path: [0, 0], offset: 11 });
+    resolveInsert({ target: 'doc-page' });
+    await insertion;
+
+    expect(editor.children[0].children[1].type).toBe('inline-shortcode');
+    expect(Editor.string(editor, [0])).toBe(' text');
+  });
+
+  it('should keep inline shortcodes atomic when isVoid is false', () => {
+    const editor = makeEditor();
+
+    expect(editor.isVoid({ type: 'inline-shortcode', data: { isVoid: false } })).toBe(true);
+  });
+});

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

@@ -1,12 +1,65 @@
-import { Transforms } from 'slate';
+import { Editor, Range, Transforms } from 'slate';
 
 import isCursorInEmptyParagraph from './locations/isCursorInEmptyParagraph';
 
-function insertShortcode(editor, pluginConfig) {
+async function insertShortcode(editor, pluginConfig, cmsContext = {}) {
+  if (pluginConfig.type === 'inline') {
+    const selectionRef = editor.selection ? Editor.rangeRef(editor, editor.selection) : null;
+    let selectedText = '';
+    if (editor.selection && Range.isRange(editor.selection)) {
+      selectedText = Editor.string(editor, editor.selection);
+    }
+
+    let shortcodeData = {};
+
+    if (typeof pluginConfig.onInsert === 'function') {
+      try {
+        const result = await pluginConfig.onInsert({ selectedText, cmsContext });
+        if (result === null || result === undefined) {
+          selectionRef?.unref();
+          return;
+        }
+        shortcodeData = result;
+      } catch (err) {
+        selectionRef?.unref();
+        console.error(`Error in onInsert for inline component '${pluginConfig.id}':`, err);
+        return;
+      }
+    } else if (pluginConfig.fields) {
+      const defaultValues = pluginConfig.fields
+        .toMap()
+        .mapKeys((_, field) => field.get('name'))
+        .map(field => field.get('default', ''));
+      shortcodeData = defaultValues.toJS();
+    }
+
+    const nodeData = {
+      type: 'inline-shortcode',
+      id: pluginConfig.id,
+      data: {
+        shortcode: pluginConfig.id,
+        shortcodeNew: true,
+        shortcodeData,
+        isVoid: true,
+      },
+      children: [{ text: '' }],
+    };
+
+    const at = selectionRef?.unref();
+    if (selectionRef && !at) {
+      return;
+    }
+    Transforms.insertNodes(editor, nodeData, at ? { at } : undefined);
+    return;
+  }
+
   const defaultValues = pluginConfig.fields
-    .toMap()
-    .mapKeys((_, field) => field.get('name'))
-    .map(field => field.get('default', ''));
+    ? pluginConfig.fields
+        .toMap()
+        .mapKeys((_, field) => field.get('name'))
+        .map(field => field.get('default', ''))
+        .toJS()
+    : {};
 
   const nodeData = {
     type: 'shortcode',
@@ -14,7 +67,7 @@ function insertShortcode(editor, pluginConfig) {
     data: {
       shortcode: pluginConfig.id,
       shortcodeNew: true,
-      shortcodeData: defaultValues.toJS(),
+      shortcodeData: defaultValues,
     },
     children: [{ text: '' }],
   };

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

@@ -3,10 +3,20 @@ import { Editor, Transforms } from 'slate';
 import defaultEmptyBlock from '../blocks/defaultEmptyBlock';
 
 function withShortcodes(editor) {
-  const { isVoid, normalizeNode } = editor;
+  const { isVoid, isInline, normalizeNode } = editor;
 
   editor.isVoid = element => {
-    return element.type === 'shortcode' ? true : isVoid(element);
+    if (element.type === 'shortcode') {
+      return true;
+    }
+    if (element.type === 'inline-shortcode') {
+      return true;
+    }
+    return isVoid(element);
+  };
+
+  editor.isInline = element => {
+    return element.type === 'inline-shortcode' ? true : isInline(element);
   };
 
   // Prevent empty editor after deleting shortcode theat was only child

package/src/MarkdownControl/renderers.js

@@ -6,6 +6,7 @@ import { useSelected } from 'slate-react';
 
 import VoidBlock from './components/VoidBlock';
 import Shortcode from './components/Shortcode';
+import InlineShortcode from './components/InlineShortcode';
 
 const bottomMargin = '16px';
 
@@ -350,6 +351,8 @@ export function Element(props) {
           <Shortcode {...props}>{children}</Shortcode>
         </VoidBlock>
       );
+    case 'inline-shortcode':
+      return <InlineShortcode {...props} />;
     default:
       return <Paragraph style={style}>{children}</Paragraph>;
   }

package/src/MarkdownPreview.js

@@ -1,11 +1,46 @@
-import React from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { WidgetPreviewContainer } from 'decap-cms-ui-default';
 import DOMPurify from 'dompurify';
 
 import { markdownToHtml } from './serializers';
 
-class MarkdownPreview extends React.Component {
+// Editors preview a selected-but-not-yet-committed image via URL.createObjectURL(), which
+// produces a blob: URL - DOMPurify's default ALLOWED_URI_REGEXP doesn't include that scheme,
+// so it strips `src` here even though the image is entirely local and safe.
+//
+// Widening ALLOWED_URI_REGEXP itself (as an earlier version of this fix did) allows blob: on
+// every URI-bearing attribute DOMPurify checks - not just <img src>, but also <a href>,
+// <form action>, etc. - which is a materially larger relaxation than this bug needs. A
+// uponSanitizeAttribute hook scopes the exception to exactly <img src>; every other
+// attribute/tag keeps DOMPurify's default (blob:-excluding) behaviour. The hook is added and
+// removed around a single sanitize() call so it can never affect any other consumer of the
+// shared `dompurify` module import elsewhere in the app.
+//
+// The allowed value is further restricted to this document's own origin: a blob: URL embeds
+// the origin of the tab that created it (`blob:<origin>/<uuid>`) and a browser already refuses
+// to dereference one minted by a different origin, so this check cannot relax anything a
+// browser wouldn't already block - it only means a value that could not possibly be one of
+// *this* CMS instance's own not-yet-committed asset previews is rejected before ever reaching
+// the DOM, rather than being handed to the browser to fail on.
+function isSameOriginBlobUrl(value) {
+  return value.startsWith(`blob:${window.location.origin}/`);
+}
+
+function sanitizePreviewHtml(html) {
+  DOMPurify.addHook('uponSanitizeAttribute', (node, data) => {
+    if (node.nodeName === 'IMG' && data.attrName === 'src' && isSameOriginBlobUrl(data.attrValue)) {
+      data.forceKeepAttr = true;
+    }
+  });
+  try {
+    return DOMPurify.sanitize(html);
+  } finally {
+    DOMPurify.removeHook('uponSanitizeAttribute');
+  }
+}
+
+class MarkdownPreview extends Component {
   static propTypes = {
     getAsset: PropTypes.func.isRequired,
     resolveWidget: PropTypes.func.isRequired,
@@ -25,7 +60,7 @@ class MarkdownPreview extends React.Component {
 
     const html = markdownToHtml(value, { getAsset, resolveWidget }, getRemarkPlugins?.());
     const shouldSanitizePreview = field?.get('sanitize_preview') ?? true;
-    const toRender = shouldSanitizePreview ? DOMPurify.sanitize(html) : html;
+    const toRender = shouldSanitizePreview ? sanitizePreviewHtml(html) : html;
 
     return <WidgetPreviewContainer dangerouslySetInnerHTML={{ __html: toRender }} />;
   }

package/src/__tests__/renderer.spec.js

@@ -207,6 +207,74 @@ I get 10 times more traffic from [Google] than from [Yahoo] or [MSN].
       expect(img).not.toHaveAttribute('onerror');
     });
 
+    it('should preserve same-origin blob: URLs used for not-yet-committed asset previews', () => {
+      // Editors preview a selected-but-not-yet-committed image via URL.createObjectURL(),
+      // which produces a blob: URL - DOMPurify's default ALLOWED_URI_REGEXP doesn't include
+      // that scheme, so it silently stripped `src` here once sanitize_preview defaulted to
+      // true, even though the image itself is entirely local and safe. A real
+      // URL.createObjectURL() call always embeds the current document's own origin, so the
+      // fixture must too - a cross-origin value isn't something this exception should (or, per
+      // the test below, does) preserve.
+      const blobUrl = `blob:${window.location.origin}/1234-5678-90ab`;
+      const value = `<img src="${blobUrl}">`;
+      const field = Map({ sanitize_preview: true });
+
+      const { container } = render(
+        <MarkdownPreview
+          value={value}
+          getAsset={jest.fn()}
+          resolveWidget={jest.fn()}
+          field={field}
+        />,
+      );
+      const img = container.querySelector('img');
+      expect(img).toHaveAttribute('src', blobUrl);
+    });
+
+    it('should NOT preserve blob: URLs on non-<img> attributes', () => {
+      // The blob: exception above must be scoped to <img src>. Widening DOMPurify's global
+      // ALLOWED_URI_REGEXP instead of using a node-scoped hook would let blob: through on any
+      // URI-bearing attribute - including <a href> and <form action>, both of which could be
+      // used to smuggle attacker-controlled blob content (see PR review discussion). Uses a
+      // same-origin blob: URL so this test isolates the tag/attribute scoping specifically,
+      // independent of the separate cross-origin check below.
+      const blobUrl = `blob:${window.location.origin}/should-be-stripped`;
+      const value = [`<a href="${blobUrl}">click</a>`, `<form action="${blobUrl}"></form>`].join(
+        '',
+      );
+      const field = Map({ sanitize_preview: true });
+
+      const { container } = render(
+        <MarkdownPreview
+          value={value}
+          getAsset={jest.fn()}
+          resolveWidget={jest.fn()}
+          field={field}
+        />,
+      );
+      expect(container.querySelector('a')).not.toHaveAttribute('href');
+      expect(container.querySelector('form')).not.toHaveAttribute('action');
+    });
+
+    it('should NOT preserve a cross-origin blob: URL even on <img src>', () => {
+      // A blob: URL embeds the origin that created it and a browser already refuses to
+      // dereference one from a different origin, but the sanitizer should reject it outright
+      // rather than pass through a value that could not be one of this CMS instance's own
+      // asset previews.
+      const value = '<img src="blob:https://attacker.example/1234-5678-90ab">';
+      const field = Map({ sanitize_preview: true });
+
+      const { container } = render(
+        <MarkdownPreview
+          value={value}
+          getAsset={jest.fn()}
+          resolveWidget={jest.fn()}
+          field={field}
+        />,
+      );
+      expect(container.querySelector('img')).not.toHaveAttribute('src');
+    });
+
     it('should sanitize dangerous link protocols', () => {
       const value = '<a href="javascript:alert(1)">click</a>';
 

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

@@ -1,8 +1,9 @@
 import { Map, OrderedMap } from 'immutable';
 import unified from 'unified';
 import markdownToRemarkPlugin from 'remark-parse';
+import remarkToMarkdownPlugin from 'remark-stringify';
 
-import { remarkParseShortcodes } from '../remarkShortcodes';
+import { remarkParseShortcodes, createRemarkShortcodeStringifier } from '../remarkShortcodes';
 
 function process(value, plugins) {
   return unified()
@@ -11,6 +12,14 @@ function process(value, plugins) {
     .parse(value);
 }
 
+function stringify(mdast, plugins) {
+  return unified()
+    .use(remarkToMarkdownPlugin, { commonmark: true })
+    .use(createRemarkShortcodeStringifier({ plugins }))
+    .stringify(mdast)
+    .trim();
+}
+
 function EditorComponent({ id = 'foo', fromBlock = jest.fn(), pattern }) {
   return {
     id,
@@ -103,6 +112,206 @@ describe('remarkParseShortcodes', () => {
         expect(removePositions(mdast)).toMatchSnapshot();
       });
     });
+    describe('inline shortcodes', () => {
+      it('should parse inline shortcode inside paragraph without breaking paragraph into blocks', () => {
+        const inlineComponent = {
+          id: 'ref',
+          type: 'inline',
+          pattern: /\{\{<\s*ref\s+"(?<target>[^"]+)"\s*>\}\}/,
+          fromInline: match => ({ target: match.groups.target }),
+          toInline: data => `{{< ref "${data.target}" >}}`,
+        };
+
+        const mdast = process(
+          'Hello {{< ref "about" >}} world',
+          Map({ [inlineComponent.id]: inlineComponent }),
+        );
+
+        const stripped = removePositions(mdast);
+        expect(stripped).toEqual({
+          type: 'root',
+          children: [
+            {
+              type: 'paragraph',
+              children: [
+                { type: 'text', value: 'Hello ' },
+                {
+                  type: 'inline-shortcode',
+                  data: {
+                    shortcode: 'ref',
+                    shortcodeData: { target: 'about' },
+                    isVoid: true,
+                  },
+                },
+                { type: 'text', value: ' world' },
+              ],
+            },
+          ],
+        });
+      });
+
+      it('should parse adjacent CJK characters and punctuation correctly', () => {
+        const wikilinkComponent = {
+          id: 'wikilink',
+          type: 'inline',
+          trigger: '[',
+          pattern: /\[\[(?<target>[^\]]+)\]\]/,
+          fromInline: match => ({ target: match.groups.target }),
+          toInline: data => `[[${data.target}]]`,
+        };
+
+        const mdast = process(
+          '這是一個[[測試頁面]]，請點擊！',
+          Map({ [wikilinkComponent.id]: wikilinkComponent }),
+        );
+
+        const stripped = removePositions(mdast);
+        expect(stripped).toEqual({
+          type: 'root',
+          children: [
+            {
+              type: 'paragraph',
+              children: [
+                { type: 'text', value: '這是一個' },
+                {
+                  type: 'inline-shortcode',
+                  data: {
+                    shortcode: 'wikilink',
+                    shortcodeData: { target: '測試頁面' },
+                    isVoid: true,
+                  },
+                },
+                { type: 'text', value: '，請點擊！' },
+              ],
+            },
+          ],
+        });
+      });
+
+      it('should parse multiple inline shortcodes within single paragraph', () => {
+        const tagComponent = {
+          id: 'tag',
+          type: 'inline',
+          trigger: '#',
+          pattern: /#(?<name>[a-zA-Z0-9_-]+)/,
+          fromInline: match => ({ name: match.groups.name }),
+          toInline: data => `#${data.name}`,
+        };
+
+        const mdast = process(
+          'Tags: #react and #decap are cool',
+          Map({ [tagComponent.id]: tagComponent }),
+        );
+
+        const stripped = removePositions(mdast);
+        expect(stripped.children[0].children).toHaveLength(5);
+        expect(stripped.children[0].children[1]).toEqual({
+          type: 'inline-shortcode',
+          data: {
+            shortcode: 'tag',
+            shortcodeData: { name: 'react' },
+            isVoid: true,
+          },
+        });
+        expect(stripped.children[0].children[3]).toEqual({
+          type: 'inline-shortcode',
+          data: {
+            shortcode: 'tag',
+            shortcodeData: { name: 'decap' },
+            isVoid: true,
+          },
+        });
+      });
+
+      it.each([undefined, '['])(
+        'should preserve captures for global patterns with trigger %s',
+        trigger => {
+          const wikilinkComponent = {
+            id: 'wikilink',
+            type: 'inline',
+            trigger,
+            pattern: /\[\[(?<target>[^\]]+)\]\]/g,
+            fromInline: match => ({ target: match.groups.target }),
+          };
+
+          const mdast = process(
+            'Before [[target]] after',
+            Map({ [wikilinkComponent.id]: wikilinkComponent }),
+          );
+
+          expect(removePositions(mdast).children[0].children[1]).toEqual({
+            type: 'inline-shortcode',
+            data: {
+              shortcode: 'wikilink',
+              shortcodeData: { target: 'target' },
+              isVoid: true,
+            },
+          });
+        },
+      );
+
+      it('should stringify inline shortcodes correctly in round-trip', () => {
+        const inlineComponent = {
+          id: 'ref',
+          type: 'inline',
+          pattern: /\{\{<\s*ref\s+"(?<target>[^"]+)"\s*>\}\}/,
+          fromInline: match => ({ target: match.groups.target }),
+          toInline: data => `{{< ref "${data.target}" >}}`,
+        };
+
+        const input = 'Hello {{< ref "about" >}} world';
+        const plugins = Map({ [inlineComponent.id]: inlineComponent });
+        const mdast = process(input, plugins);
+        const output = stringify(mdast, plugins);
+
+        expect(output).toEqual(input);
+      });
+
+      it('should warn when inline component pattern has greedy quantifier', () => {
+        const warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+        const inlineComponent = {
+          id: 'greedy-ref',
+          type: 'inline',
+          pattern: /\{\{< ref (.+) >\}\}/,
+          fromInline: match => ({ target: match[1] }),
+          toInline: data => `{{< ref ${data.target} >}}`,
+        };
+
+        process('text', Map({ [inlineComponent.id]: inlineComponent }));
+        expect(warnSpy).toHaveBeenCalledWith(
+          expect.stringContaining('Potentially greedy RegExp in inline component'),
+        );
+        warnSpy.mockRestore();
+      });
+
+      it('should handle inline shortcodes nested inside bold text', () => {
+        const badgeComponent = {
+          id: 'badge',
+          type: 'inline',
+          pattern: /\[badge:(?<text>[^\]]+)\]/,
+          fromInline: match => ({ text: match.groups.text }),
+          toInline: data => `[badge:${data.text}]`,
+        };
+
+        const input = '**Important [badge:NEW] Note**';
+        const plugins = Map({ [badgeComponent.id]: badgeComponent });
+        const mdast = process(input, plugins);
+        const stripped = removePositions(mdast);
+
+        expect(stripped.children[0].children[0].type).toBe('strong');
+        const strongChildren = stripped.children[0].children[0].children;
+        expect(strongChildren[0]).toEqual({ type: 'text', value: 'Important ' });
+        expect(strongChildren[1]).toEqual({
+          type: 'inline-shortcode',
+          data: {
+            shortcode: 'badge',
+            shortcodeData: { text: 'NEW' },
+            isVoid: true,
+          },
+        });
+        expect(strongChildren[2]).toEqual({ type: 'text', value: ' Note' });
+      });
+    });
   });
 
   function removePositions(obj) {

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

@@ -6,6 +6,7 @@ import flow from 'lodash/flow';
 // eslint-disable-next-line no-unused-vars
 import h from '../../../test-helpers/h';
 import { markdownToSlate, slateToMarkdown } from '../index';
+import slateToRemark from '../slateRemark';
 
 const process = flow([markdownToSlate, slateToMarkdown]);
 
@@ -55,6 +56,44 @@ describe('slate', () => {
     expect(process('*a  \nb*')).toEqual('*a\\\nb*');
   });
 
+  it('should preserve marks around inline shortcodes', () => {
+    const marks = [{ type: 'bold' }];
+    const mdast = slateToRemark(
+      [
+        {
+          type: 'paragraph',
+          children: [
+            { text: 'Important ', bold: true, marks },
+            {
+              type: 'inline-shortcode',
+              data: {
+                shortcode: 'badge',
+                shortcodeData: { text: 'NEW' },
+                marks,
+              },
+              children: [{ text: '' }],
+            },
+            { text: ' Note', bold: true, marks },
+          ],
+        },
+      ],
+      {},
+    );
+
+    expect(mdast.children[0].children).toHaveLength(1);
+    expect(mdast.children[0].children[0]).toMatchObject({
+      type: 'strong',
+      children: [
+        { type: 'html', value: 'Important ' },
+        {
+          type: 'inline-shortcode',
+          data: { shortcode: 'badge', shortcodeData: { text: 'NEW' } },
+        },
+        { type: 'html', value: ' Note' },
+      ],
+    });
+  });
+
   // slateAst no longer valid
 
   it('should not output empty headers in markdown', () => {
@@ -299,4 +338,45 @@ describe('slate', () => {
       expect(slateToMarkdown(slateAst.children)).toMatchInlineSnapshot(`"*h~~e**l**l~~o*"`);
     });
   });
+
+  describe('inline-shortcode', () => {
+    it('should convert inline-shortcode between Slate and MDAST', () => {
+      const slateAst = (
+        <editor>
+          <element type="paragraph">
+            <text>Hello </text>
+            <element
+              type="inline-shortcode"
+              data={{
+                shortcode: 'ref',
+                shortcodeData: { target: 'about' },
+              }}
+            >
+              <text></text>
+            </element>
+            <text> world</text>
+          </element>
+        </editor>
+      );
+
+      const refPlugin = {
+        id: 'ref',
+        type: 'inline',
+        pattern: /\{\{<\s*ref\s+"(?<target>[^"]+)"\s*>\}\}/,
+        fromInline: match => ({ target: match.groups.target }),
+        toInline: data => `{{< ref "${data.target}" >}}`,
+      };
+
+      const markdown = slateToMarkdown(slateAst.children, {
+        remarkPlugins: [
+          function () {
+            this.Compiler.prototype.visitors['inline-shortcode'] = node =>
+              refPlugin.toInline(node.data.shortcodeData);
+          },
+        ],
+      });
+
+      expect(markdown).toEqual('Hello {{< ref "about" >}} world');
+    });
+  });
 });