decap-cms-widget-markdown 3.4.1 → 3.6.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "decap-cms-widget-markdown",
   "description": "Widget for editing markdown in Decap CMS.",
-  "version": "3.4.1",
+  "version": "3.6.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",
@@ -22,7 +22,7 @@
   },
   "dependencies": {
     "detab": "^2.0.4",
-    "dompurify": "^2.2.6",
+    "dompurify": "^3.2.6",
     "is-hotkey": "^0.2.0",
     "is-url": "^1.2.4",
     "mdast-util-definitions": "^1.2.3",
@@ -35,12 +35,13 @@
     "remark-slate": "^1.8.6",
     "remark-slate-transformer": "^0.7.4",
     "remark-stringify": "^6.0.4",
-    "slate": "^0.91.1",
+    "slate": "^0.118.1",
     "slate-base64-serializer": "^0.2.107",
-    "slate-history": "^0.93.0",
-    "slate-hyperscript": "^0.77.0",
-    "slate-plain-serializer": "^0.7.1",
-    "slate-react": "^0.91.2",
+    "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",
@@ -62,5 +63,5 @@
     "commonmark": "^0.30.0",
     "commonmark-spec": "^0.30.0"
   },
-  "gitHead": "bfe122aee875ceaaf9f132110db7f8797eedfc5b"
+  "gitHead": "826a300143ead63bd7515db66938a6b9ff8319ce"
 }

package/src/MarkdownControl/RawEditor.js

@@ -57,7 +57,7 @@ function RawEditor(props) {
   }
 
   return (
-    <Slate editor={editor} value={value} onChange={handleChange}>
+    <Slate editor={editor} value={value} initialValue={value} onChange={handleChange}>
       <RawEditorContainer>
         <EditorControlBar>
           <Toolbar

package/src/MarkdownControl/Toolbar.js

@@ -160,6 +160,16 @@ export default class Toolbar extends React.Component {
               disabled={disabled}
             />
           )}
+          {isVisible('strikethrough') && (
+            <ToolbarButton
+              type="strikethrough"
+              label={t('editor.editorWidgets.markdown.strikethrough')}
+              icon="strikethrough"
+              onClick={this.handleMarkClick}
+              isActive={hasMark('delete')}
+              disabled={disabled}
+            />
+          )}
           {isVisible('code') && (
             <ToolbarButton
               type="code"

package/src/MarkdownControl/VisualEditor.js

@@ -141,7 +141,8 @@ function Editor(props) {
 
   function handleMarkClick(format) {
     ReactEditor.focus(editor);
-    toggleMark(editor, format);
+    const markFormat = format === 'strikethrough' ? 'delete' : format;
+    toggleMark(editor, markFormat);
   }
 
   function handleBlockClick(format) {
@@ -222,7 +223,7 @@ function Editor(props) {
         position: relative;
       `}
     >
-      <Slate editor={editor} value={editorValue} onChange={handleChange}>
+      <Slate editor={editor} value={editorValue} initialValue={editorValue} onChange={handleChange}>
         <EditorControlBar>
           {
             <Toolbar

package/src/schema.js

@@ -8,6 +8,7 @@ export default {
         enum: [
           'bold',
           'italic',
+          'strikethrough',
           'code',
           'link',
           'heading-one',

package/src/serializers/__tests__/__snapshots__/remarkShortcodes.spec.js.snap

@@ -0,0 +1,132 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`remarkParseShortcodes parse pattern with leading caret should be a remark shortcode node 1`] = `
+Object {
+  "children": Array [
+    Object {
+      "data": Object {
+        "shortcode": "foo",
+        "shortcodeData": Object {
+          "bar": "baz",
+        },
+      },
+      "type": "shortcode",
+    },
+  ],
+  "type": "root",
+}
+`;
+
+exports[`remarkParseShortcodes parse pattern with leading caret should parse multiple shortcodes 1`] = `
+Object {
+  "children": Array [
+    Object {
+      "children": Array [
+        Object {
+          "type": "text",
+          "value": "paragraph",
+        },
+      ],
+      "type": "paragraph",
+    },
+    Object {
+      "data": Object {
+        "shortcode": "foo",
+        "shortcodeData": Object {
+          "bar": "bar",
+        },
+      },
+      "type": "shortcode",
+    },
+    Object {
+      "data": Object {
+        "shortcode": "foo",
+        "shortcodeData": Object {
+          "bar": "baz",
+        },
+      },
+      "type": "shortcode",
+    },
+    Object {
+      "children": Array [
+        Object {
+          "type": "text",
+          "value": "next para",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "root",
+}
+`;
+
+exports[`remarkParseShortcodes parse pattern without leading caret should handle pattern without leading caret 1`] = `
+Object {
+  "children": Array [
+    Object {
+      "children": Array [
+        Object {
+          "type": "text",
+          "value": "paragraph",
+        },
+      ],
+      "type": "paragraph",
+    },
+    Object {
+      "data": Object {
+        "shortcode": "foo",
+        "shortcodeData": Object {
+          "bar": "baz",
+        },
+      },
+      "type": "shortcode",
+    },
+  ],
+  "type": "root",
+}
+`;
+
+exports[`remarkParseShortcodes parse pattern without leading caret should parse multiple shortcodes 1`] = `
+Object {
+  "children": Array [
+    Object {
+      "children": Array [
+        Object {
+          "type": "text",
+          "value": "paragraph",
+        },
+      ],
+      "type": "paragraph",
+    },
+    Object {
+      "data": Object {
+        "shortcode": "foo",
+        "shortcodeData": Object {
+          "bar": "bar",
+        },
+      },
+      "type": "shortcode",
+    },
+    Object {
+      "data": Object {
+        "shortcode": "foo",
+        "shortcodeData": Object {
+          "bar": "baz",
+        },
+      },
+      "type": "shortcode",
+    },
+    Object {
+      "children": Array [
+        Object {
+          "type": "text",
+          "value": "next para",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "root",
+}
+`;

package/src/serializers/__tests__/remarkShortcodes.spec.js

@@ -1,18 +1,14 @@
 import { Map, OrderedMap } from 'immutable';
+import unified from 'unified';
+import markdownToRemarkPlugin from 'remark-parse';
 
 import { remarkParseShortcodes, getLinesWithOffsets } from '../remarkShortcodes';
 
-// Stub of Remark Parser
-function process(value, plugins, processEat = () => {}) {
-  function eat() {
-    return processEat;
-  }
-
-  function Parser() {}
-  Parser.prototype.blockTokenizers = {};
-  Parser.prototype.blockMethods = [];
-  remarkParseShortcodes.call({ Parser }, { plugins });
-  Parser.prototype.blockTokenizers.shortcode(eat, value);
+function process(value, plugins) {
+  return unified()
+    .use(markdownToRemarkPlugin, { fences: true, commonmark: true })
+    .use(remarkParseShortcodes, { plugins })
+    .parse(value);
 }
 
 function EditorComponent({ id = 'foo', fromBlock = jest.fn(), pattern }) {
@@ -25,16 +21,6 @@ function EditorComponent({ id = 'foo', fromBlock = jest.fn(), pattern }) {
 
 describe('remarkParseShortcodes', () => {
   describe('pattern matching', () => {
-    it('should work', () => {
-      const editorComponent = EditorComponent({ pattern: /bar/ });
-      process('foo bar', Map({ [editorComponent.id]: editorComponent }));
-      expect(editorComponent.fromBlock).toHaveBeenCalledWith(expect.arrayContaining(['bar']));
-    });
-    it('should match value surrounded in newlines', () => {
-      const editorComponent = EditorComponent({ pattern: /^bar$/ });
-      process('foo\n\nbar\n', Map({ [editorComponent.id]: editorComponent }));
-      expect(editorComponent.fromBlock).toHaveBeenCalledWith(expect.arrayContaining(['bar']));
-    });
     it('should match multiline shortcodes', () => {
       const editorComponent = EditorComponent({ pattern: /^foo\nbar$/ });
       process('foo\nbar', Map({ [editorComponent.id]: editorComponent }));
@@ -72,16 +58,69 @@ describe('remarkParseShortcodes', () => {
       expect(barEditorComponent.fromBlock).toHaveBeenCalledWith(expect.arrayContaining(['bar']));
     });
   });
-  describe('output', () => {
-    it('should be a remark shortcode node', () => {
-      const processEat = jest.fn();
-      const shortcodeData = { bar: 'baz' };
-      const expectedNode = { type: 'shortcode', data: { shortcode: 'foo', shortcodeData } };
-      const editorComponent = EditorComponent({ pattern: /bar/, fromBlock: () => shortcodeData });
-      process('foo bar', Map({ [editorComponent.id]: editorComponent }), processEat);
-      expect(processEat).toHaveBeenCalledWith(expectedNode);
+  describe('parse', () => {
+    describe('pattern with leading caret', () => {
+      it('should be a remark shortcode node', () => {
+        const editorComponent = EditorComponent({
+          pattern: /^foo (?<bar>.+)$/,
+          fromBlock: ({ groups }) => ({ bar: groups.bar }),
+        });
+        const mdast = process('foo baz', Map({ [editorComponent.id]: editorComponent }));
+        expect(removePositions(mdast)).toMatchSnapshot();
+      });
+      it('should parse multiple shortcodes', () => {
+        const editorComponent = EditorComponent({
+          pattern: /foo (?<bar>.+)/,
+          fromBlock: ({ groups }) => ({ bar: groups.bar }),
+        });
+        const mdast = process(
+          'paragraph\n\nfoo bar\n\nfoo baz\n\nnext para',
+          Map({ [editorComponent.id]: editorComponent }),
+        );
+        expect(removePositions(mdast)).toMatchSnapshot();
+      });
+    });
+    describe('pattern without leading caret', () => {
+      it('should handle pattern without leading caret', () => {
+        const editorComponent = EditorComponent({
+          pattern: /foo (?<bar>.+)/,
+          fromBlock: ({ groups }) => ({ bar: groups.bar }),
+        });
+        const mdast = process(
+          'paragraph\n\nfoo baz',
+          Map({ [editorComponent.id]: editorComponent }),
+        );
+        expect(removePositions(mdast)).toMatchSnapshot();
+      });
+      it('should parse multiple shortcodes', () => {
+        const editorComponent = EditorComponent({
+          pattern: /foo (?<bar>.+)/,
+          fromBlock: ({ groups }) => ({ bar: groups.bar }),
+        });
+        const mdast = process(
+          'paragraph\n\nfoo bar\n\nfoo baz\n\nnext para',
+          Map({ [editorComponent.id]: editorComponent }),
+        );
+        expect(removePositions(mdast)).toMatchSnapshot();
+      });
     });
   });
+
+  function removePositions(obj) {
+    if (Array.isArray(obj)) {
+      return obj.map(removePositions);
+    }
+    if (obj && typeof obj === 'object') {
+      // eslint-disable-next-line no-unused-vars
+      const { position, ...rest } = obj;
+      const result = {};
+      for (const key in rest) {
+        result[key] = removePositions(rest[key]);
+      }
+      return result;
+    }
+    return obj;
+  }
 });
 
 describe('getLinesWithOffsets', () => {

package/src/serializers/remarkShortcodes.js

@@ -33,36 +33,28 @@ export function getLinesWithOffsets(value) {
   return trimmedLines;
 }
 
-function matchFromLines({ trimmedLines, plugin }) {
-  for (const { line, start } of trimmedLines) {
-    const match = line.match(plugin.pattern);
-    if (match) {
-      match.index += start;
-      return match;
-    }
-  }
-}
-
 function createShortcodeTokenizer({ plugins }) {
   return function tokenizeShortcode(eat, value, silent) {
-    // Plugin patterns may rely on `^` and `$` tokens, even if they don't
-    // use the multiline flag. To support this, we fall back to searching
-    // through each line individually, trimming trailing whitespace and
-    // newlines, if we don't initially match on a pattern. We keep track of
-    // the starting position of each line so that we can sort correctly
-    // across the full multiline matches.
-    const trimmedLines = getLinesWithOffsets(value);
-
     // 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 => ({
-        match: value.match(plugin.pattern) || matchFromLines({ trimmedLines, plugin }),
-        plugin,
-      }))
+      .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);
+        }
+
+        return {
+          match: value.match(pattern),
+          plugin,
+        };
+      })
       .filter(({ match }) => !!match)
       .sort((a, b) => a.match.index - b.match.index);