decap-cms-widget-markdown 3.12.1 → 3.13.0

package/dist/esm/serializers/remarkRehypeShortcodes.js

@@ -1,4 +1,3 @@
-import map from 'lodash/map';
 import has from 'lodash/has';
 import { renderToString } from 'react-dom/server';
 import u from 'unist-builder';
@@ -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);
   }
 
   /**

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,7 +1,7 @@
 {
   "name": "decap-cms-widget-markdown",
   "description": "Widget for editing markdown in Decap CMS.",
-  "version": "3.12.1",
+  "version": "3.13.0",
   "homepage": "https://www.decapcms.org/docs/widgets/#markdown",
   "repository": {
     "type": "git",
@@ -56,7 +56,7 @@
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-immutable-proptypes": "^2.1.0",
-    "decap-cms-ui-default": "3.9.1"
+    "decap-cms-ui-default": "3.9.2"
   },
   "devDependencies": {
     "commonmark": "^0.30.0",

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/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: '' }],
   };