decap-cms-widget-markdown 3.12.0 → 3.13.0

package/dist/esm/MarkdownPreview.js

@@ -1,10 +1,44 @@
-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';
+
+// 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.
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-class MarkdownPreview extends React.Component {
+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,
@@ -30,7 +64,7 @@ class MarkdownPreview extends React.Component {
       resolveWidget
     }, getRemarkPlugins?.());
     const shouldSanitizePreview = field?.get('sanitize_preview') ?? true;
-    const toRender = shouldSanitizePreview ? DOMPurify.sanitize(html) : html;
+    const toRender = shouldSanitizePreview ? sanitizePreviewHtml(html) : html;
     return _jsx(WidgetPreviewContainer, {
       dangerouslySetInnerHTML: {
         __html: toRender

package/dist/esm/serializers/remarkRehypeShortcodes.js

@@ -1,8 +1,7 @@
-import React from 'react';
-import map from 'lodash/map';
 import has from 'lodash/has';
 import { renderToString } from 'react-dom/server';
 import u from 'unist-builder';
+import { createElement } from 'react';
 
 /**
  * This plugin doesn't actually transform Remark (MDAST) nodes to Rehype
@@ -18,11 +17,20 @@ export default function remarkToRehypeShortcodes({
 }) {
   return transform;
   function transform(root) {
-    const transformedChildren = map(root.children, processShortcodes);
-    return {
-      ...root,
-      children: transformedChildren
-    };
+    function walk(node) {
+      if (!node) return node;
+      if (has(node, ['data', 'shortcode'])) {
+        return processShortcodes(node);
+      }
+      if (Array.isArray(node.children)) {
+        return {
+          ...node,
+          children: node.children.map(walk)
+        };
+      }
+      return node;
+    }
+    return walk(root);
   }
 
   /**
@@ -43,6 +51,7 @@ export default function remarkToRehypeShortcodes({
       shortcodeData
     } = node.data;
     const plugin = plugins.get(shortcode);
+    if (!plugin) return node;
 
     /**
      * Run the shortcode plugin's `toPreview` method, which will return either
@@ -55,12 +64,7 @@ export default function remarkToRehypeShortcodes({
     /**
      * Return a new 'html' type node containing the shortcode preview markup.
      */
-    const textNode = u('html', valueHtml);
-    const children = [textNode];
-    return {
-      ...node,
-      children
-    };
+    return u('html', valueHtml);
   }
 
   /**
@@ -74,7 +78,6 @@ export default function remarkToRehypeShortcodes({
     if (toPreview) {
       return toPreview(shortcodeData, getAsset, fields);
     }
-
     /**
      * For editor components without a custom `toPreview` (e.g. container
      * components with nested markdown/richtext fields), render each sub-field
@@ -98,7 +101,7 @@ export default function remarkToRehypeShortcodes({
      * Last resort fallback: try resolving the widget and rendering its preview.
      */
     const preview = resolveWidget(plugin.widget);
-    return /*#__PURE__*/React.createElement(preview.preview, {
+    return /*#__PURE__*/createElement(preview.preview, {
       value: shortcodeData,
       field: plugin,
       getAsset

package/dist/esm/serializers/remarkShortcodes.js

@@ -2,18 +2,35 @@ export function remarkParseShortcodes({
   plugins
 }) {
   const Parser = this.Parser;
-  const tokenizers = Parser.prototype.blockTokenizers;
-  const methods = Parser.prototype.blockMethods;
-  tokenizers.shortcode = createShortcodeTokenizer({
+  const blockTokenizers = Parser.prototype.blockTokenizers;
+  const blockMethods = Parser.prototype.blockMethods;
+  const inlineTokenizers = Parser.prototype.inlineTokenizers;
+  const inlineMethods = Parser.prototype.inlineMethods;
+  blockTokenizers.shortcode = createShortcodeTokenizer({
     plugins
   });
-  methods.unshift('shortcode');
+  blockMethods.unshift('shortcode');
+  inlineTokenizers.inlineShortcode = createInlineShortcodeTokenizer({
+    plugins
+  });
+  inlineMethods.unshift('inlineShortcode');
+}
+function createPattern(pattern, {
+  anchored = false
+} = {}) {
+  let source = pattern.source;
+  if (anchored && !source.startsWith('^')) {
+    source = `^${source}`;
+  } else if (!anchored && source.startsWith('^')) {
+    source = source.slice(1);
+  }
+  return new RegExp(source, pattern.flags.replace(/[gy]/g, ''));
 }
 function createShortcodeTokenizer({
   plugins
 }) {
   plugins.forEach(plugin => {
-    if (plugin.pattern.flags.includes('m')) {
+    if (plugin.pattern && plugin.pattern.flags.includes('m')) {
       console.warn(`Invalid RegExp: editor component '${plugin.id}' must not use the multiline flag in its pattern.`);
     }
   });
@@ -21,18 +38,21 @@ function createShortcodeTokenizer({
     let match;
     const potentialMatchValue = value.split('\n\n')[0].trimEnd();
     const plugin = plugins.find(plugin => {
+      if (plugin.type === 'inline') {
+        return false;
+      }
       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);
-      }
-      match = value.match(pattern);
+      pattern = createPattern(pattern, {
+        anchored: true
+      });
+      match = pattern.exec(value);
       if (!match) {
-        match = potentialMatchValue.match(pattern);
+        match = pattern.exec(potentialMatchValue);
       }
       return !!match;
     });
@@ -43,7 +63,7 @@ function createShortcodeTokenizer({
       if (silent) {
         return true;
       }
-      const shortcodeData = plugin.fromBlock(match);
+      const shortcodeData = plugin.fromBlock ? plugin.fromBlock(match) : plugin.fromInline ? plugin.fromInline(match) : match;
       try {
         return eat(match[0])({
           type: 'shortcode',
@@ -59,6 +79,82 @@ function createShortcodeTokenizer({
     }
   };
 }
+function createInlineShortcodeTokenizer({
+  plugins
+}) {
+  plugins.forEach(plugin => {
+    if (plugin.type === 'inline' && plugin.pattern) {
+      if (plugin.pattern.flags.includes('m')) {
+        console.warn(`Invalid RegExp: inline editor component '${plugin.id}' must not use the multiline flag in its pattern.`);
+      }
+      if (/(\.\*|\.\+)(?!\?)/.test(plugin.pattern.source)) {
+        console.warn(`Potentially greedy RegExp in inline component '${plugin.id}': consider using non-greedy quantifier (e.g. .*? or .+?) or specific character classes to prevent overmatching within paragraphs.`);
+      }
+    }
+  });
+  function tokenizeInlineShortcode(eat, value, silent) {
+    let match;
+    const plugin = plugins.find(plugin => {
+      if (plugin.type !== 'inline') {
+        return false;
+      }
+      let {
+        pattern
+      } = plugin;
+      // Inline patterns must match at the current offset (leading ^)
+      pattern = createPattern(pattern, {
+        anchored: true
+      });
+      match = pattern.exec(value);
+      return !!match;
+    });
+    if (match) {
+      if (silent) {
+        return true;
+      }
+      const shortcodeData = plugin.fromInline ? plugin.fromInline(match) : plugin.fromBlock ? plugin.fromBlock(match) : match;
+      try {
+        return eat(match[0])({
+          type: 'inline-shortcode',
+          data: {
+            shortcode: plugin.id,
+            shortcodeData,
+            isVoid: true
+          }
+        });
+      } catch (e) {
+        console.warn(`Sent invalid data to remark. Inline plugin: ${plugin.id}. Value: ${match[0]}. Data: ${JSON.stringify(shortcodeData)}`);
+        return false;
+      }
+    }
+  }
+  tokenizeInlineShortcode.locator = function locateInlineShortcode(value, fromIndex) {
+    let minIndex = -1;
+    plugins.forEach(plugin => {
+      if (plugin.type !== 'inline') {
+        return;
+      }
+      if (plugin.trigger) {
+        const triggerIndex = value.indexOf(plugin.trigger, fromIndex);
+        if (triggerIndex !== -1 && (minIndex === -1 || triggerIndex < minIndex)) {
+          minIndex = triggerIndex;
+        }
+      } else {
+        const searchPattern = createPattern(plugin.pattern);
+        const slice = value.slice(fromIndex);
+        const match = searchPattern.exec(slice);
+        if (match && typeof match.index === 'number') {
+          const foundIndex = fromIndex + match.index;
+          if (minIndex === -1 || foundIndex < minIndex) {
+            minIndex = foundIndex;
+          }
+        }
+      }
+    });
+    return minIndex;
+  };
+  return tokenizeInlineShortcode;
+}
 export function createRemarkShortcodeStringifier({
   plugins
 }) {
@@ -66,12 +162,22 @@ export function createRemarkShortcodeStringifier({
     const Compiler = this.Compiler;
     const visitors = Compiler.prototype.visitors;
     visitors.shortcode = shortcode;
+    visitors['inline-shortcode'] = inlineShortcode;
     function shortcode(node) {
       const {
         data
       } = node;
       const plugin = plugins.find(plugin => data.shortcode === plugin.id);
-      return plugin.toBlock(data.shortcodeData);
+      if (!plugin) return '';
+      return plugin.toBlock ? plugin.toBlock(data.shortcodeData) : plugin.toInline ? plugin.toInline(data.shortcodeData) : '';
+    }
+    function inlineShortcode(node) {
+      const {
+        data
+      } = node;
+      const plugin = plugins.find(plugin => data.shortcode === plugin.id);
+      if (!plugin) return '';
+      return plugin.toInline ? plugin.toInline(data.shortcodeData) : plugin.toBlock ? plugin.toBlock(data.shortcodeData) : '';
     }
   };
 }

package/dist/esm/serializers/remarkSlate.js

@@ -20,7 +20,8 @@ const typeMap = {
   thematicBreak: 'thematic-break',
   link: 'link',
   image: 'image',
-  shortcode: 'shortcode'
+  shortcode: 'shortcode',
+  'inline-shortcode': 'inline-shortcode'
 };
 
 /**
@@ -306,6 +307,18 @@ export default function remarkToSlate({
             data
           });
         }
+      case 'inline-shortcode':
+        {
+          const nodes = [createText('')];
+          const data = {
+            ...node.data,
+            id: node.data.shortcode,
+            shortcodeNew: true
+          };
+          return createInline(typeMap[node.type], {
+            data
+          }, nodes);
+        }
       case 'text':
         {
           const text = node.value;

package/dist/esm/serializers/slateRemark.js

@@ -31,7 +31,8 @@ const typeMap = {
   'thematic-break': 'thematicBreak',
   link: 'link',
   image: 'image',
-  shortcode: 'shortcode'
+  shortcode: 'shortcode',
+  'inline-shortcode': 'inline-shortcode'
 };
 
 /**
@@ -44,7 +45,7 @@ const markMap = {
   code: 'inlineCode'
 };
 const blockTypes = ['paragraph', 'quote', 'heading-one', 'heading-two', 'heading-three', 'heading-four', 'heading-five', 'heading-six', 'bulleted-list', 'numbered-list', 'list-item', 'shortcode', 'table', 'table-row', 'table-cell'];
-const inlineTypes = ['link', 'image', 'break'];
+const inlineTypes = ['link', 'image', 'break', 'inline-shortcode'];
 const leadingWhitespaceExp = /^\s+\S/;
 const trailingWhitespaceExp = /(?!\S)\s+$/;
 export default function slateToRemark(value, {
@@ -93,6 +94,7 @@ export default function slateToRemark(value, {
           }
         case 'image':
         case 'break':
+        case 'inline-shortcode':
           {
             const data = omit(node.data, 'marks');
             return {
@@ -135,6 +137,7 @@ export default function slateToRemark(value, {
         }
       case 'break':
       case 'image':
+      case 'inline-shortcode':
         return map(get(node, ['data', 'marks']), mark => mark.type);
       default:
         return getNodeMarkArray(node);
@@ -501,6 +504,19 @@ export default function slateToRemark(value, {
             data
           });
         }
+
+      /**
+       * Inline Shortcodes
+       */
+      case 'inline-shortcode':
+        {
+          const {
+            data
+          } = node;
+          return u(typeMap[node.type], {
+            data
+          });
+        }
     }
   }
 }

package/package.json

@@ -1,9 +1,12 @@
 {
   "name": "decap-cms-widget-markdown",
   "description": "Widget for editing markdown in Decap CMS.",
-  "version": "3.12.0",
+  "version": "3.13.0",
   "homepage": "https://www.decapcms.org/docs/widgets/#markdown",
-  "repository": "https://github.com/decaporg/decap-cms/tree/main/packages/decap-cms-widget-markdown",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/decaporg/decap-cms/tree/main/packages/decap-cms-widget-markdown"
+  },
   "bugs": "https://github.com/decaporg/decap-cms/issues",
   "module": "dist/esm/index.js",
   "main": "dist/decap-cms-widget-markdown.js",
@@ -15,14 +18,11 @@
     "editor"
   ],
   "sideEffects": false,
-  "scripts": {
-    "develop": "npm run build:esm -- --watch",
-    "build": "cross-env NODE_ENV=production webpack",
-    "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.13",
     "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",
@@ -31,30 +31,40 @@
     "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"
+    "unist-util-visit-parents": "^2.0.1",
+    "vfile-location": "^2.0.6"
   },
   "peerDependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "decap-cms-ui-default": "^3.0.0",
-    "immutable": "^3.7.6",
+    "immutable": "^4.3.9",
     "lodash": "^4.17.11",
     "prop-types": "^15.7.2",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "react-immutable-proptypes": "^2.1.0"
+    "react-immutable-proptypes": "^2.1.0",
+    "decap-cms-ui-default": "3.9.2"
   },
   "devDependencies": {
     "commonmark": "^0.30.0",
     "commonmark-spec": "^0.30.0"
   },
-  "gitHead": "63c8abdbd1f5c530d6f3d78dccca3379d0370c3e"
-}
+  "scripts": {
+    "develop": "pnpm run build:esm --watch",
+    "build": "cross-env NODE_ENV=production webpack",
+    "build:esm": "cross-env NODE_ENV=esm babel src --out-dir dist/esm --ignore \"**/__tests__\" --root-mode upward"
+  }
+}

package/src/MarkdownControl/Toolbar.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import styled from '@emotion/styled';
@@ -59,7 +59,7 @@ const ToolbarToggleLabel = styled.span`
     `};
 `;
 
-export default class Toolbar extends React.Component {
+export default class Toolbar extends Component {
   static propTypes = {
     buttons: ImmutablePropTypes.list,
     editorComponents: ImmutablePropTypes.list,

package/src/MarkdownControl/VisualEditor.js

@@ -164,7 +164,11 @@ function Editor(props) {
   }
 
   function handleInsertShortcode(pluginConfig) {
-    insertShortcode(editor, pluginConfig);
+    insertShortcode(editor, pluginConfig, {
+      getAsset: props.getAsset,
+      resolveWidget: props.resolveWidget,
+      t: props.t,
+    });
   }
 
   function handleKeyDown(event) {

package/src/MarkdownControl/components/InlineShortcode.js

@@ -0,0 +1,77 @@
+/* eslint-disable react/prop-types */
+import { css } from '@emotion/react';
+import { useSelected, ReactEditor, useSlate } from 'slate-react';
+import { Editor, Transforms } from 'slate';
+import { colors, lengths } from 'decap-cms-ui-default';
+
+import { getEditorComponents } from '../index';
+
+function InlineShortcode(props) {
+  const { attributes, children, element } = props;
+  const editor = useSlate();
+  const isSelected = useSelected();
+  const plugin = getEditorComponents().get(element.data?.shortcode);
+  const shortcodeData = element.data?.shortcodeData || {};
+
+  async function handleClick(e) {
+    if (plugin && typeof plugin.onEdit === 'function') {
+      e.preventDefault();
+      e.stopPropagation();
+      const pathRef = Editor.pathRef(editor, ReactEditor.findPath(editor, element));
+      try {
+        const updatedData = await plugin.onEdit({ data: shortcodeData });
+        const path = pathRef.current;
+        if (updatedData && path) {
+          Transforms.setNodes(
+            editor,
+            {
+              data: {
+                ...element.data,
+                shortcodeData: updatedData,
+              },
+            },
+            { at: path },
+          );
+        }
+      } catch (err) {
+        console.error(
+          `Error executing onEdit for inline component '${element.data?.shortcode}':`,
+          err,
+        );
+      } finally {
+        pathRef.unref();
+      }
+    }
+  }
+
+  let previewContent;
+  if (plugin && typeof plugin.toPreview === 'function') {
+    previewContent = plugin.toPreview(shortcodeData);
+  } else if (plugin && typeof plugin.toInline === 'function') {
+    previewContent = plugin.toInline(shortcodeData);
+  } else {
+    previewContent = `[${element.data?.shortcode || 'inline'}]`;
+  }
+
+  const inlineStyles = css`
+    display: inline-flex;
+    align-items: center;
+    vertical-align: baseline;
+    cursor: ${plugin?.onEdit ? 'pointer' : 'default'};
+    border-radius: ${lengths.borderRadius || '3px'};
+    padding: 0 2px;
+    background-color: ${isSelected ? 'rgba(30, 144, 255, 0.15)' : 'transparent'};
+    box-shadow: ${isSelected ? `0 0 0 1px ${colors.active || '#3a69c7'}` : 'none'};
+  `;
+
+  return (
+    <span {...attributes} css={inlineStyles} onClick={handleClick}>
+      <span contentEditable={false} style={{ userSelect: 'none' }}>
+        {previewContent}
+      </span>
+      {children}
+    </span>
+  );
+}
+
+export default InlineShortcode;

package/src/MarkdownControl/components/__tests__/InlineShortcode.spec.js

@@ -0,0 +1,81 @@
+import { act, fireEvent, render, screen } from '@testing-library/react';
+import { Map } from 'immutable';
+import { createEditor, Transforms } from 'slate';
+import { Editable, Slate, withReact } from 'slate-react';
+
+import { getEditorComponents } from '../../index';
+import withShortcodes from '../../plugins/shortcodes/withShortcodes';
+import InlineShortcode from '../InlineShortcode';
+
+jest.mock('../../index', () => ({
+  getEditorComponents: jest.fn(),
+}));
+
+describe('InlineShortcode', () => {
+  it('should not update another node when the edited node is deleted', async () => {
+    let resolveEdit;
+    const onEdit = jest.fn(
+      () =>
+        new Promise(resolve => {
+          resolveEdit = resolve;
+        }),
+    );
+    getEditorComponents.mockReturnValue(
+      Map({
+        wikilink: {
+          id: 'wikilink',
+          onEdit,
+          toPreview: data => data.target,
+        },
+      }),
+    );
+
+    const editor = withReact(withShortcodes(createEditor()));
+    const initialValue = [
+      {
+        type: 'paragraph',
+        children: [
+          { text: '' },
+          {
+            type: 'inline-shortcode',
+            data: { shortcode: 'wikilink', shortcodeData: { target: 'first' } },
+            children: [{ text: '' }],
+          },
+          { text: ' ' },
+          {
+            type: 'inline-shortcode',
+            data: { shortcode: 'wikilink', shortcodeData: { target: 'second' } },
+            children: [{ text: '' }],
+          },
+          { text: '' },
+        ],
+      },
+    ];
+
+    render(
+      <Slate editor={editor} initialValue={initialValue}>
+        <Editable
+          renderElement={props =>
+            props.element.type === 'inline-shortcode' ? (
+              <InlineShortcode {...props} />
+            ) : (
+              <p {...props.attributes}>{props.children}</p>
+            )
+          }
+        />
+      </Slate>,
+    );
+
+    fireEvent.click(screen.getByText('first'));
+    await act(async () => {
+      Transforms.removeNodes(editor, { at: [0, 1] });
+      resolveEdit({ target: 'updated' });
+      await Promise.resolve();
+    });
+
+    const remainingInline = editor.children[0].children.find(
+      child => child.type === 'inline-shortcode',
+    );
+    expect(remainingInline.data.shortcodeData).toEqual({ target: 'second' });
+  });
+});

package/src/MarkdownControl/index.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { List, Map } from 'immutable';
@@ -22,7 +22,7 @@ export function getEditorComponents() {
   return _getEditorComponents();
 }
 
-export default class MarkdownControl extends React.Component {
+export default class MarkdownControl extends Component {
   static propTypes = {
     onChange: PropTypes.func.isRequired,
     onAddAsset: PropTypes.func.isRequired,