decap-cms-widget-markdown 3.12.0 → 3.13.0

package/src/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
@@ -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);
   }
 
   /**
@@ -58,7 +69,6 @@ export default function remarkToRehypeShortcodes({ plugins, getAsset, resolveWid
     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
@@ -88,7 +98,7 @@ export default function remarkToRehypeShortcodes({ plugins, getAsset, resolveWid
      * Last resort fallback: try resolving the widget and rendering its preview.
      */
     const preview = resolveWidget(plugin.widget);
-    return React.createElement(preview.preview, {
+    return createElement(preview.preview, {
       value: shortcodeData,
       field: plugin,
       getAsset,

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

package/LICENSE

@@ -1,22 +0,0 @@
-Copyright (c) 2016 Netlify <decap@p-m.si>
-
-MIT License
-
-Permission is hereby granted, free of charge, to any person obtaining
-a copy of this software and associated documentation files (the
-"Software"), to deal in the Software without restriction, including
-without limitation the rights to use, copy, modify, merge, publish,
-distribute, sublicense, and/or sell copies of the Software, and to
-permit persons to whom the Software is furnished to do so, subject to
-the following conditions:
-
-The above copyright notice and this permission notice shall be
-included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
-NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
-LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
-OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
-WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/dist/esm/MarkdownControl/plugins/BreakToDefaultBlock.js

@@ -1,26 +0,0 @@
-import isHotkey from 'is-hotkey';
-function BreakToDefaultBlock({
-  defaultType
-}) {
-  return {
-    onKeyDown(event, editor, next) {
-      const {
-        selection,
-        startBlock
-      } = editor.value;
-      const isEnter = isHotkey('enter', event);
-      if (!isEnter) {
-        return next();
-      }
-      if (selection.isExpanded) {
-        editor.delete();
-        return next();
-      }
-      if (selection.start.isAtEndOfNode(startBlock) && startBlock.type !== defaultType) {
-        return editor.insertBlock(defaultType);
-      }
-      return next();
-    }
-  };
-}
-export default BreakToDefaultBlock;

package/dist/esm/MarkdownControl/plugins/CloseBlock.js

@@ -1,28 +0,0 @@
-import isHotkey from 'is-hotkey';
-function CloseBlock({
-  defaultType
-}) {
-  return {
-    onKeyDown(event, editor, next) {
-      const {
-        selection,
-        startBlock
-      } = editor.value;
-      const isBackspace = isHotkey('backspace', event);
-      if (!isBackspace) {
-        return next();
-      }
-      if (selection.isExpanded) {
-        return editor.delete();
-      }
-      if (!selection.start.isAtStartOfNode(startBlock) || startBlock.text.length > 0) {
-        return next();
-      }
-      if (startBlock.type !== defaultType) {
-        editor.setBlocks(defaultType);
-      }
-      return next();
-    }
-  };
-}
-export default CloseBlock;

package/dist/esm/MarkdownControl/plugins/CommandsAndQueries.js

@@ -1,180 +0,0 @@
-import isArray from 'lodash/isArray';
-import tail from 'lodash/tail';
-import castArray from 'lodash/castArray';
-function CommandsAndQueries({
-  defaultType
-}) {
-  return {
-    queries: {
-      atStartOf(editor, node) {
-        const {
-          selection
-        } = editor.value;
-        return selection.isCollapsed && selection.start.isAtStartOfNode(node);
-      },
-      getAncestor(editor, firstKey, lastKey) {
-        if (firstKey === lastKey) {
-          return editor.value.document.getParent(firstKey);
-        }
-        return editor.value.document.getCommonAncestor(firstKey, lastKey);
-      },
-      getOffset(editor, node) {
-        const parent = editor.value.document.getParent(node.key);
-        return parent.nodes.indexOf(node);
-      },
-      getSelectedChildren(editor, node) {
-        return node.nodes.filter(child => editor.isSelected(child));
-      },
-      getCommonAncestor(editor) {
-        const {
-          startBlock,
-          endBlock,
-          document: doc
-        } = editor.value;
-        return doc.getCommonAncestor(startBlock.key, endBlock.key);
-      },
-      getClosestType(editor, node, type) {
-        const types = castArray(type);
-        return editor.value.document.getClosest(node.key, n => types.includes(n.type));
-      },
-      getBlockContainer(editor, node) {
-        const targetTypes = ['bulleted-list', 'numbered-list', 'list-item', 'quote', 'table-cell'];
-        const {
-          startBlock,
-          selection
-        } = editor.value;
-        const target = node ? editor.value.document.getParent(node.key) : selection.isCollapsed && startBlock || editor.getCommonAncestor();
-        if (!target) {
-          return editor.value.document;
-        }
-        if (targetTypes.includes(target.type)) {
-          return target;
-        }
-        return editor.getBlockContainer(target);
-      },
-      isSelected(editor, nodes) {
-        return castArray(nodes).every(node => {
-          return editor.value.document.isInRange(node.key, editor.value.selection);
-        });
-      },
-      isFirstChild(editor, node) {
-        return editor.value.document.getParent(node.key).nodes.first().key === node.key;
-      },
-      areSiblings(editor, nodes) {
-        if (!isArray(nodes) || nodes.length < 2) {
-          return true;
-        }
-        const parent = editor.value.document.getParent(nodes[0].key);
-        return tail(nodes).every(node => {
-          return editor.value.document.getParent(node.key).key === parent.key;
-        });
-      },
-      everyBlock(editor, type) {
-        return editor.value.blocks.every(block => block.type === type);
-      },
-      hasMark(editor, type) {
-        return editor.value.activeMarks.some(mark => mark.type === type);
-      },
-      hasBlock(editor, type) {
-        return editor.value.blocks.some(node => node.type === type);
-      },
-      hasInline(editor, type) {
-        return editor.value.inlines.some(node => node.type === type);
-      },
-      hasQuote(editor, quoteLabel) {
-        const {
-          value
-        } = editor;
-        const {
-          document,
-          blocks
-        } = value;
-        return blocks.some(node => {
-          const {
-            key: descendantNodeKey
-          } = node;
-          /* When focusing a quote block, the actual block that gets the focus is the paragraph block whose parent is a `quote` block.
-          Hence, we need to get its parent and check if its type is `quote`. This parent will always be defined because every block in the editor
-          has a Document object as parent by default.
-          */
-          const parent = document.getParent(descendantNodeKey);
-          return parent.type === quoteLabel;
-        });
-      },
-      hasListItems(editor, listType) {
-        const {
-          value
-        } = editor;
-        const {
-          document,
-          blocks
-        } = value;
-        return blocks.some(node => {
-          const {
-            key: lowestNodeKey
-          } = node;
-          /* A list block has the following structure:
-          <ol>
-            <li>
-              <p>Coffee</p>
-            </li>
-            <li>
-              <p>Tea</p>
-            </li>
-          </ol>
-          */
-          const parent = document.getParent(lowestNodeKey);
-          const grandparent = document.getParent(parent.key);
-          return parent.type === 'list-item' && grandparent?.type === listType;
-        });
-      }
-    },
-    commands: {
-      toggleBlock(editor, type) {
-        switch (type) {
-          case 'heading-one':
-          case 'heading-two':
-          case 'heading-three':
-          case 'heading-four':
-          case 'heading-five':
-          case 'heading-six':
-            return editor.setBlocks(editor.everyBlock(type) ? defaultType : type);
-          case 'quote':
-            return editor.toggleQuoteBlock();
-          case 'numbered-list':
-          case 'bulleted-list':
-            {
-              return editor.toggleList(type);
-            }
-        }
-      },
-      unwrapBlockChildren(editor, block) {
-        if (!block || block.object !== 'block') {
-          throw Error(`Expected block but received ${block}.`);
-        }
-        const index = editor.value.document.getPath(block.key).last();
-        const parent = editor.value.document.getParent(block.key);
-        editor.withoutNormalizing(() => {
-          block.nodes.forEach((node, idx) => {
-            editor.moveNodeByKey(node.key, parent.key, index + idx);
-          });
-          editor.removeNodeByKey(block.key);
-        });
-      },
-      unwrapNodeToDepth(editor, node, depth) {
-        let currentDepth = 0;
-        editor.withoutNormalizing(() => {
-          while (currentDepth < depth) {
-            editor.unwrapNodeByKey(node.key);
-            currentDepth += 1;
-          }
-        });
-      },
-      unwrapNodeFromAncestor(editor, node, ancestor) {
-        const depth = ancestor.getDepth(node.key);
-        editor.unwrapNodeToDepth(node, depth);
-      }
-    }
-  };
-}
-export default CommandsAndQueries;

package/dist/esm/MarkdownControl/plugins/ForceInsert.js

@@ -1,42 +0,0 @@
-function ForceInsert({
-  defaultType
-}) {
-  return {
-    queries: {
-      canInsertBeforeNode(editor, node) {
-        if (!editor.isVoid(node)) {
-          return true;
-        }
-        return !!editor.value.document.getPreviousSibling(node.key);
-      },
-      canInsertAfterNode(editor, node) {
-        if (!editor.isVoid(node)) {
-          return true;
-        }
-        const nextSibling = editor.value.document.getNextSibling(node.key);
-        return nextSibling && !editor.isVoid(nextSibling);
-      }
-    },
-    commands: {
-      forceInsertBeforeNode(editor, node) {
-        const block = {
-          type: defaultType,
-          object: 'block'
-        };
-        const parent = editor.value.document.getParent(node.key);
-        return editor.insertNodeByKey(parent.key, 0, block).moveToStartOfNode(parent).focus();
-      },
-      forceInsertAfterNode(editor, node) {
-        return editor.moveToEndOfNode(node).insertBlock(defaultType).focus();
-      },
-      moveToEndOfDocument(editor) {
-        const lastBlock = editor.value.document.nodes.last();
-        if (editor.isVoid(lastBlock)) {
-          editor.insertBlock(defaultType);
-        }
-        return editor.moveToEndOfNode(lastBlock).focus();
-      }
-    }
-  };
-}
-export default ForceInsert;

package/dist/esm/MarkdownControl/plugins/Hotkey.js

@@ -1,26 +0,0 @@
-import isHotkey from 'is-hotkey';
-export const HOT_KEY_MAP = {
-  bold: 'mod+b',
-  code: 'mod+shift+c',
-  italic: 'mod+i',
-  strikethrough: 'mod+shift+s',
-  'heading-one': 'mod+1',
-  'heading-two': 'mod+2',
-  'heading-three': 'mod+3',
-  'heading-four': 'mod+4',
-  'heading-five': 'mod+5',
-  'heading-six': 'mod+6',
-  link: 'mod+k'
-};
-function Hotkey(key, fn) {
-  return {
-    onKeyDown(event, editor, next) {
-      if (!isHotkey(key, event)) {
-        return next();
-      }
-      event.preventDefault();
-      editor.command(fn);
-    }
-  };
-}
-export default Hotkey;

package/dist/esm/MarkdownControl/plugins/LineBreak.js

@@ -1,13 +0,0 @@
-import isHotkey from 'is-hotkey';
-function LineBreak() {
-  return {
-    onKeyDown(event, editor, next) {
-      const isShiftEnter = isHotkey('shift+enter', event);
-      if (!isShiftEnter) {
-        return next();
-      }
-      return editor.insertInline('break').insertText('').moveToStartOfNextText();
-    }
-  };
-}
-export default LineBreak;