decap-cms-widget-markdown 3.3.0 → 3.4.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "decap-cms-widget-markdown",
   "description": "Widget for editing markdown in Decap CMS.",
-  "version": "3.3.0",
+  "version": "3.4.1",
   "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",
@@ -21,6 +21,7 @@
     "build:esm": "cross-env NODE_ENV=esm babel src --out-dir dist/esm --ignore \"**/__tests__\" --root-mode upward"
   },
   "dependencies": {
+    "detab": "^2.0.4",
     "dompurify": "^2.2.6",
     "is-hotkey": "^0.2.0",
     "is-url": "^1.2.4",
@@ -37,12 +38,14 @@
     "slate": "^0.91.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-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",
@@ -51,14 +54,13 @@
     "immutable": "^3.7.6",
     "lodash": "^4.17.11",
     "prop-types": "^15.7.2",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
     "react-immutable-proptypes": "^2.1.0"
   },
   "devDependencies": {
     "commonmark": "^0.30.0",
-    "commonmark-spec": "^0.30.0",
-    "slate-hyperscript": "^0.77.0"
+    "commonmark-spec": "^0.30.0"
   },
-  "gitHead": "e2165450e5963b2a8d76d4cf331319bf91f05d45"
+  "gitHead": "bfe122aee875ceaaf9f132110db7f8797eedfc5b"
 }

package/src/MarkdownControl/Toolbar.js

@@ -80,6 +80,11 @@ export default class Toolbar extends React.Component {
     t: PropTypes.func.isRequired,
   };
 
+  componentDidMount() {
+    // Manually validate PropTypes - React 19 breaking change
+    PropTypes.checkPropTypes(Toolbar.propTypes, this.props, 'prop', 'Toolbar');
+  }
+
   isVisible = button => {
     const { buttons } = this.props;
     return !List.isList(buttons) || buttons.includes(button);

package/src/MarkdownControl/VisualEditor.js

@@ -9,7 +9,7 @@ import { createEditor, Transforms, Editor as SlateEditor } from 'slate';
 import { Editable, ReactEditor, Slate, withReact } from 'slate-react';
 import { withHistory } from 'slate-history';
 import { fromJS } from 'immutable';
-import { isEqual } from 'lodash';
+import isEqual from 'lodash/isEqual';
 
 import { editorStyleVars, EditorControlBar } from '../styles';
 import Toolbar from './Toolbar';

package/src/MarkdownControl/components/Shortcode.js

@@ -2,7 +2,7 @@
 import React, { useState } from 'react';
 import { css } from '@emotion/react';
 import { fromJS } from 'immutable';
-import { omit } from 'lodash';
+import omit from 'lodash/omit';
 import { ReactEditor, useSlate } from 'slate-react';
 import { Range, Transforms } from 'slate';
 

package/src/MarkdownControl/index.js

@@ -54,6 +54,11 @@ export default class MarkdownControl extends React.Component {
     };
   }
 
+  componentDidMount() {
+    // Manually validate PropTypes - React 19 breaking change
+    PropTypes.checkPropTypes(MarkdownControl.propTypes, this.props, 'prop', 'MarkdownControl');
+  }
+
   handleMode = mode => {
     this.setState({ mode, pendingFocus: true });
     localStorage.setItem(MODE_STORAGE_KEY, mode);

package/src/MarkdownControl/plugins/CommandsAndQueries.js

@@ -1,4 +1,6 @@
-import { isArray, tail, castArray } from 'lodash';
+import isArray from 'lodash/isArray';
+import tail from 'lodash/tail';
+import castArray from 'lodash/castArray';
 
 function CommandsAndQueries({ defaultType }) {
   return {

package/src/MarkdownControl/plugins/util.js

@@ -1,4 +1,5 @@
-import { castArray, isArray } from 'lodash';
+import castArray from 'lodash/castArray';
+import isArray from 'lodash/isArray';
 
 export function assertType(nodes, type) {
   const nodesArray = castArray(nodes);

package/src/MarkdownPreview.js

@@ -11,6 +11,11 @@ class MarkdownPreview extends React.Component {
     value: PropTypes.string,
   };
 
+  componentDidMount() {
+    // Manually validate PropTypes - React 19 breaking change
+    PropTypes.checkPropTypes(MarkdownPreview.propTypes, this.props, 'prop', 'MarkdownPreview');
+  }
+
   render() {
     const { value, getAsset, resolveWidget, field, getRemarkPlugins } = this.props;
     if (value === null) {

package/src/__tests__/renderer.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { create, act } from 'react-test-renderer';
-import { padStart } from 'lodash';
+import { render, screen } from '@testing-library/react';
+import padStart from 'lodash/padStart';
 import { Map } from 'immutable';
 
 import MarkdownPreview from '../MarkdownPreview';
@@ -40,14 +40,21 @@ Text with **bold** & _em_ elements
 `;
         const html = await markdownToHtml(value);
 
-        let root;
-        await act(async () => {
-          root = create(
-            <MarkdownPreview value={html} getAsset={jest.fn()} resolveWidget={jest.fn()} />,
-          );
-        });
-
-        expect(root.toJSON()).toMatchSnapshot();
+        const { container } = render(
+          <MarkdownPreview value={html} getAsset={jest.fn()} resolveWidget={jest.fn()} />,
+        );
+        expect(screen.getByRole('heading', { level: 1 })).toHaveTextContent('H1');
+        expect(screen.getByRole('heading', { level: 2 })).toHaveTextContent('H2');
+        expect(screen.getByRole('heading', { level: 3 })).toHaveTextContent('H3');
+        expect(screen.getByRole('heading', { level: 4 })).toHaveTextContent('H4');
+        expect(screen.getByRole('heading', { level: 5 })).toHaveTextContent('H5');
+        expect(screen.getByRole('heading', { level: 6 })).toHaveTextContent('H6');
+        expect(container).toHaveTextContent('Text with bold & em elements');
+        expect(screen.getByRole('link', { name: 'link title' })).toHaveAttribute(
+          'href',
+          'http://google.com',
+        );
+        expect(screen.getAllByRole('img').length).toBe(2);
       });
     });
 
@@ -57,14 +64,8 @@ Text with **bold** & _em_ elements
           const value = padStart(' Title', heading + 7, '#');
           const html = await markdownToHtml(value);
 
-          let root;
-          await act(async () => {
-            root = create(
-              <MarkdownPreview value={html} getAsset={jest.fn()} resolveWidget={jest.fn()} />,
-            );
-          });
-
-          expect(root.toJSON()).toMatchSnapshot();
+          render(<MarkdownPreview value={html} getAsset={jest.fn()} resolveWidget={jest.fn()} />);
+          expect(screen.getByRole('heading', { level: heading + 1 })).toHaveTextContent('Title');
         });
       }
     });
@@ -84,39 +85,15 @@ Text with **bold** & _em_ elements
 `;
         const html = await markdownToHtml(value);
 
-        let root;
-        await act(async () => {
-          root = create(
-            <MarkdownPreview value={html} getAsset={jest.fn()} resolveWidget={jest.fn()} />,
-          );
-        });
-
-        expect(root.toJSON()).toMatchInlineSnapshot(`
-.emotion-0 {
-  margin: 15px 2px;
-}
-
-<div
-  className="emotion-0 emotion-1"
-  dangerouslySetInnerHTML={
-    Object {
-      "__html": "<ol>
-<li>ol item 1</li>
-<li>ol item 2<ul>
-<li>Sublist 1</li>
-<li>Sublist 2</li>
-<li>Sublist 3<ol>
-<li>Sub-Sublist 1</li>
-<li>Sub-Sublist 2</li>
-<li>Sub-Sublist 3</li>
-</ol></li>
-</ul></li>
-<li>ol item 3</li>
-</ol>",
-    }
-  }
-/>
-`);
+        const { container } = render(
+          <MarkdownPreview value={html} getAsset={jest.fn()} resolveWidget={jest.fn()} />,
+        );
+        // Check for ordered and unordered lists
+        expect(container.querySelectorAll('ol').length).toBeGreaterThan(0);
+        expect(container.querySelectorAll('ul').length).toBeGreaterThan(0);
+        expect(screen.getByText('ol item 1')).toBeInTheDocument();
+        expect(screen.getByText('Sublist 1')).toBeInTheDocument();
+        expect(screen.getByText('Sub-Sublist 1')).toBeInTheDocument();
       });
     });
 
@@ -131,14 +108,19 @@ I get 10 times more traffic from [Google] than from [Yahoo] or [MSN].
 `;
         const html = await markdownToHtml(value);
 
-        let root;
-        await act(async () => {
-          root = create(
-            <MarkdownPreview value={html} getAsset={jest.fn()} resolveWidget={jest.fn()} />,
-          );
-        });
-
-        expect(root.toJSON()).toMatchSnapshot();
+        render(<MarkdownPreview value={html} getAsset={jest.fn()} resolveWidget={jest.fn()} />);
+        expect(screen.getByRole('link', { name: 'Google' })).toHaveAttribute(
+          'href',
+          'http://google.com/',
+        );
+        expect(screen.getByRole('link', { name: 'Yahoo' })).toHaveAttribute(
+          'href',
+          'http://search.yahoo.com/',
+        );
+        expect(screen.getByRole('link', { name: 'MSN' })).toHaveAttribute(
+          'href',
+          'http://search.msn.com/',
+        );
       });
     });
 
@@ -147,28 +129,22 @@ I get 10 times more traffic from [Google] than from [Yahoo] or [MSN].
         const value = 'Use the `printf()` function.';
         const html = await markdownToHtml(value);
 
-        let root;
-        await act(async () => {
-          root = create(
-            <MarkdownPreview value={html} getAsset={jest.fn()} resolveWidget={jest.fn()} />,
-          );
-        });
-
-        expect(root.toJSON()).toMatchSnapshot();
+        const { container } = render(
+          <MarkdownPreview value={html} getAsset={jest.fn()} resolveWidget={jest.fn()} />,
+        );
+        expect(container.querySelector('code')).toHaveTextContent('printf()');
       });
 
       it('should render code 2', async () => {
         const value = '``There is a literal backtick (`) here.``';
         const html = await markdownToHtml(value);
 
-        let root;
-        await act(async () => {
-          root = create(
-            <MarkdownPreview value={html} getAsset={jest.fn()} resolveWidget={jest.fn()} />,
-          );
-        });
-
-        expect(root.toJSON()).toMatchSnapshot();
+        const { container } = render(
+          <MarkdownPreview value={html} getAsset={jest.fn()} resolveWidget={jest.fn()} />,
+        );
+        expect(container.querySelector('code')).toHaveTextContent(
+          'There is a literal backtick (`) here.',
+        );
       });
     });
 
@@ -191,14 +167,12 @@ I get 10 times more traffic from [Google] than from [Yahoo] or [MSN].
 `;
         const html = await markdownToHtml(value);
 
-        let root;
-        await act(async () => {
-          root = create(
-            <MarkdownPreview value={html} getAsset={jest.fn()} resolveWidget={jest.fn()} />,
-          );
-        });
-
-        expect(root.toJSON()).toMatchSnapshot();
+        const { container } = render(
+          <MarkdownPreview value={html} getAsset={jest.fn()} resolveWidget={jest.fn()} />,
+        );
+        expect(container.querySelector('form')).toBeInTheDocument();
+        expect(container.querySelector('dl')).toBeInTheDocument();
+        expect(container.querySelector('h1[style]')).toHaveTextContent('Test');
       });
     });
   });
@@ -208,14 +182,11 @@ I get 10 times more traffic from [Google] than from [Yahoo] or [MSN].
       const value = '<p>Paragraph with <em>inline</em> element</p>';
       const html = await markdownToHtml(value);
 
-      let root;
-      await act(async () => {
-        root = create(
-          <MarkdownPreview value={html} getAsset={jest.fn()} resolveWidget={jest.fn()} />,
-        );
-      });
-
-      expect(root.toJSON()).toMatchSnapshot();
+      const { container } = render(
+        <MarkdownPreview value={html} getAsset={jest.fn()} resolveWidget={jest.fn()} />,
+      );
+      expect(container.querySelector('p')).toHaveTextContent('Paragraph with inline element');
+      expect(container.querySelector('em')).toHaveTextContent('inline');
     });
   });
 
@@ -224,38 +195,34 @@ I get 10 times more traffic from [Google] than from [Yahoo] or [MSN].
       const value = `<img src="foobar.png" onerror="alert('hello')">`;
       const field = Map({ sanitize_preview: true });
 
-      let root;
-      await act(async () => {
-        root = create(
-          <MarkdownPreview
-            value={value}
-            getAsset={jest.fn()}
-            resolveWidget={jest.fn()}
-            field={field}
-          />,
-        );
-      });
-
-      expect(root.toJSON()).toMatchSnapshot();
+      const { container } = render(
+        <MarkdownPreview
+          value={value}
+          getAsset={jest.fn()}
+          resolveWidget={jest.fn()}
+          field={field}
+        />,
+      );
+      const img = container.querySelector('img');
+      expect(img).toHaveAttribute('src', 'foobar.png');
+      expect(img).not.toHaveAttribute('onerror');
     });
 
     it('should not sanitize HTML', async () => {
       const value = `<img src="foobar.png" onerror="alert('hello')">`;
       const field = Map({ sanitize_preview: false });
 
-      let root;
-      await act(async () => {
-        root = create(
-          <MarkdownPreview
-            value={value}
-            getAsset={jest.fn()}
-            resolveWidget={jest.fn()}
-            field={field}
-          />,
-        );
-      });
-
-      expect(root.toJSON()).toMatchSnapshot();
+      const { container } = render(
+        <MarkdownPreview
+          value={value}
+          getAsset={jest.fn()}
+          resolveWidget={jest.fn()}
+          field={field}
+        />,
+      );
+      const img = container.querySelector('img');
+      expect(img).toHaveAttribute('src', 'foobar.png');
+      expect(img).toHaveAttribute('onerror', "alert('hello')");
     });
   });
 });

package/src/regexHelper.js

@@ -1,4 +1,4 @@
-import { last } from 'lodash';
+import last from 'lodash/last';
 
 /**
  * Joins an array of regular expressions into a single expression, without

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

@@ -1,4 +1,4 @@
-import { flow } from 'lodash';
+import flow from 'lodash/flow';
 import { tests as commonmarkSpec } from 'commonmark-spec';
 import * as commonmark from 'commonmark';
 

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

@@ -1,6 +1,6 @@
 /** @jsx h */
 
-import { flow } from 'lodash';
+import flow from 'lodash/flow';
 
 import h from '../../../test-helpers/h';
 import { markdownToSlate, slateToMarkdown } from '../index';

package/src/serializers/index.js

@@ -1,4 +1,4 @@
-import { trimEnd } from 'lodash';
+import trimEnd from 'lodash/trimEnd';
 import unified from 'unified';
 import u from 'unist-builder';
 import markdownToRemarkPlugin from 'remark-parse';

package/src/serializers/remarkAssertParents.js

@@ -1,4 +1,7 @@
-import { concat, last, nth, isEmpty } from 'lodash';
+import concat from 'lodash/concat';
+import last from 'lodash/last';
+import nth from 'lodash/nth';
+import isEmpty from 'lodash/isEmpty';
 import visitParents from 'unist-util-visit-parents';
 
 /**

package/src/serializers/remarkEscapeMarkdownEntities.js

@@ -1,4 +1,7 @@
-import { has, flow, partial, map } from 'lodash';
+import has from 'lodash/has';
+import flow from 'lodash/flow';
+import partial from 'lodash/partial';
+import map from 'lodash/map';
 
 import { joinPatternSegments, combinePatterns, replaceWhen } from '../regexHelper';
 

package/src/serializers/remarkPaddedLinks.js

@@ -1,4 +1,10 @@
-import { find, findLast, startsWith, endsWith, trimStart, trimEnd, flatMap } from 'lodash';
+import find from 'lodash/find';
+import findLast from 'lodash/findLast';
+import startsWith from 'lodash/startsWith';
+import endsWith from 'lodash/endsWith';
+import trimStart from 'lodash/trimStart';
+import trimEnd from 'lodash/trimEnd';
+import flatMap from 'lodash/flatMap';
 import u from 'unist-builder';
 import toString from 'mdast-util-to-string';
 

package/src/serializers/remarkRehypeShortcodes.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import { map, has } from 'lodash';
+import map from 'lodash/map';
+import has from 'lodash/has';
 import { renderToString } from 'react-dom/server';
 import u from 'unist-builder';
 

package/src/serializers/remarkSlate.js

@@ -1,4 +1,9 @@
-import { isEmpty, isArray, flatMap, map, flatten, isEqual } from 'lodash';
+import isEmpty from 'lodash/isEmpty';
+import isArray from 'lodash/isArray';
+import flatMap from 'lodash/flatMap';
+import map from 'lodash/map';
+import flatten from 'lodash/flatten';
+import isEqual from 'lodash/isEqual';
 
 /**
  * Map of MDAST node types to Slate node types.

package/src/serializers/remarkSquashReferences.js

@@ -1,4 +1,5 @@
-import { without, flatten } from 'lodash';
+import without from 'lodash/without';
+import flatten from 'lodash/flatten';
 import u from 'unist-builder';
 import mdastDefinitions from 'mdast-util-definitions';
 

package/src/serializers/slateRemark.js

@@ -1,4 +1,9 @@
-import { get, without, last, map, intersection, omit } from 'lodash';
+import get from 'lodash/get';
+import without from 'lodash/without';
+import last from 'lodash/last';
+import map from 'lodash/map';
+import intersection from 'lodash/intersection';
+import omit from 'lodash/omit';
 import u from 'unist-builder';
 import mdastToString from 'mdast-util-to-string';