decap-cms-widget-markdown 3.8.0 → 3.10.0

package/dist/esm/MarkdownControl/plugins/html/withHtml.js

@@ -1,11 +1,34 @@
 // 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'
   }),
@@ -27,10 +50,15 @@ const ELEMENT_TAGS = {
   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'
   }),
@@ -106,6 +134,12 @@ 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);
   }
   if (TEXT_TAGS[nodeName]) {
@@ -143,7 +177,8 @@ function withHtml(editor) {
   editor.insertData = data => {
     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/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/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.8.0",
+  "version": "3.10.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",
@@ -21,10 +21,8 @@
     "build:esm": "cross-env NODE_ENV=esm babel src --out-dir dist/esm --ignore \"**/__tests__\" --root-mode upward"
   },
   "dependencies": {
-    "detab": "^2.0.4",
     "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",
@@ -33,21 +31,15 @@
     "rehype-stringify": "^7.0.0",
     "remark-parse": "^6.0.3",
     "remark-rehype": "^4.0.0",
-    "remark-slate": "^1.8.6",
-    "remark-slate-transformer": "^0.7.4",
     "remark-stringify": "^6.0.4",
     "slate": "^0.118.1",
-    "slate-base64-serializer": "^0.2.107",
     "slate-dom": "^0.118.1",
     "slate-history": "^0.113.1",
     "slate-hyperscript": "^0.100.0",
-    "slate-plain-serializer": "^0.7.3",
     "slate-react": "^0.117.4",
-    "slate-soft-break": "^0.9.0",
     "unified": "^9.2.0",
     "unist-builder": "^1.0.3",
-    "unist-util-visit-parents": "^2.0.1",
-    "vfile-location": "^2.0.6"
+    "unist-util-visit-parents": "^2.0.1"
   },
   "peerDependencies": {
     "@emotion/react": "^11.11.1",
@@ -64,5 +56,5 @@
     "commonmark": "^0.30.0",
     "commonmark-spec": "^0.30.0"
   },
-  "gitHead": "45c9f5b9a1a12f74321ce4658b71ec88d6365ec1"
+  "gitHead": "567a80101f4846853701ad7d8abdc29b5e4fab56"
 }

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' }),
@@ -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/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__/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/remarkShortcodes.js

@@ -8,57 +8,40 @@ export function remarkParseShortcodes({ plugins }) {
   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 { pattern } = plugin;
-        // Plugin patterns must start with a caret (^) to match the beginning of the line.
-        // 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);
-        }
+    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 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;
       }