decap-cms-widget-markdown 3.12.1 → 3.13.0

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/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');
+    });
+  });
 });

package/src/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';
@@ -14,8 +13,21 @@ export default function remarkToRehypeShortcodes({ plugins, getAsset, resolveWid
   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);
   }
 
   /**
@@ -33,6 +45,7 @@ export default function remarkToRehypeShortcodes({ plugins, getAsset, resolveWid
      */
     const { shortcode, shortcodeData } = node.data;
     const plugin = plugins.get(shortcode);
+    if (!plugin) return node;
 
     /**
      * Run the shortcode plugin's `toPreview` method, which will return either
@@ -45,9 +58,7 @@ export default function remarkToRehypeShortcodes({ plugins, getAsset, resolveWid
     /**
      * 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/src/serializers/remarkShortcodes.js

@@ -1,16 +1,31 @@
 export function remarkParseShortcodes({ plugins }) {
   const Parser = this.Parser;
-  const tokenizers = Parser.prototype.blockTokenizers;
-  const methods = Parser.prototype.blockMethods;
+  const blockTokenizers = Parser.prototype.blockTokenizers;
+  const blockMethods = Parser.prototype.blockMethods;
+  const inlineTokenizers = Parser.prototype.inlineTokenizers;
+  const inlineMethods = Parser.prototype.inlineMethods;
 
-  tokenizers.shortcode = createShortcodeTokenizer({ plugins });
+  blockTokenizers.shortcode = createShortcodeTokenizer({ plugins });
+  blockMethods.unshift('shortcode');
 
-  methods.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.`,
       );
@@ -20,17 +35,18 @@ function createShortcodeTokenizer({ plugins }) {
     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);
-      }
+      pattern = createPattern(pattern, { anchored: true });
 
-      match = value.match(pattern);
+      match = pattern.exec(value);
       if (!match) {
-        match = potentialMatchValue.match(pattern);
+        match = pattern.exec(potentialMatchValue);
       }
 
       return !!match;
@@ -46,7 +62,11 @@ function createShortcodeTokenizer({ plugins }) {
         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])({
@@ -65,17 +85,125 @@ function createShortcodeTokenizer({ plugins }) {
   };
 }
 
+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 }) {
   return function remarkStringifyShortcodes() {
     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/src/serializers/remarkSlate.js

@@ -21,6 +21,7 @@ const typeMap = {
   link: 'link',
   image: 'image',
   shortcode: 'shortcode',
+  'inline-shortcode': 'inline-shortcode',
 };
 
 /**
@@ -279,6 +280,12 @@ export default function remarkToSlate({ voidCodeBlock } = {}) {
         return createBlock(typeMap[node.type], nodes, { 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;
         return createText(text);

package/src/serializers/slateRemark.js

@@ -32,6 +32,7 @@ const typeMap = {
   link: 'link',
   image: 'image',
   shortcode: 'shortcode',
+  'inline-shortcode': 'inline-shortcode',
 };
 
 /**
@@ -62,7 +63,7 @@ const blockTypes = [
   'table-cell',
 ];
 
-const inlineTypes = ['link', 'image', 'break'];
+const inlineTypes = ['link', 'image', 'break', 'inline-shortcode'];
 
 const leadingWhitespaceExp = /^\s+\S/;
 const trailingWhitespaceExp = /(?!\S)\s+$/;
@@ -114,7 +115,8 @@ export default function slateToRemark(value, { voidCodeBlock }) {
         }
 
         case 'image':
-        case 'break': {
+        case 'break':
+        case 'inline-shortcode': {
           const data = omit(node.data, 'marks');
           return { ...node, data };
         }
@@ -153,6 +155,7 @@ export default function slateToRemark(value, { voidCodeBlock }) {
 
       case 'break':
       case 'image':
+      case 'inline-shortcode':
         return map(get(node, ['data', 'marks']), mark => mark.type);
 
       default:
@@ -468,6 +471,14 @@ export default function slateToRemark(value, { voidCodeBlock }) {
         const { url, title, alt, ...data } = get(node, 'data', {});
         return u(typeMap[node.type], { url, title, alt, data });
       }
+
+      /**
+       * Inline Shortcodes
+       */
+      case 'inline-shortcode': {
+        const { data } = node;
+        return u(typeMap[node.type], { data });
+      }
     }
   }
 }