Major version dependency upgrades, pt. V

CHANGELOG.md

@@ -1,5 +1,8 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Updated types associated with `EuiMarkdownEditor` plugin dependencies ([4124](https://github.com/elastic/eui/pull/4124))
+- Upgraded dependencies related to `EuiMarkdownEditor`: `react-dropzone`, `rehype-*`, `remark-*`, and `unified` ([#4124](https://github.com/elastic/eui/pull/4124))
+
 **Theme: Amsterdam**
 
 - Tightened `line-height` for some `EuiTitle` sizes ([4133](https://github.com/elastic/eui/pull/4133))

package.json

@@ -62,22 +62,22 @@
     "prop-types": "^15.6.0",
     "react-ace": "^7.0.5",
     "react-beautiful-dnd": "^13.0.0",
-    "react-dropzone": "^10.2.1",
+    "react-dropzone": "^11.2.0",
     "react-focus-on": "^3.5.0",
     "react-input-autosize": "^2.2.2",
     "react-is": "~16.3.0",
     "react-virtualized-auto-sizer": "^1.0.2",
     "react-window": "^1.8.5",
-    "rehype-raw": "^4.0.1",
+    "rehype-raw": "^5.0.0",
     "rehype-react": "^6.0.0",
-    "rehype-stringify": "^6.0.1",
+    "rehype-stringify": "^8.0.0",
     "remark-emoji": "^2.1.0",
-    "remark-highlight.js": "^5.2.0",
-    "remark-parse": "^7.0.2",
-    "remark-rehype": "^7.0.0",
+    "remark-highlight.js": "^6.0.0",
+    "remark-parse": "^8.0.3",
+    "remark-rehype": "^8.0.0",
     "tabbable": "^3.0.0",
     "text-diff": "^1.0.1",
-    "unified": "^8.4.2",
+    "unified": "^9.2.0",
     "uuid": "^8.3.0",
     "vfile": "^4.2.0"
   },

src/components/markdown_editor/markdown_editor.tsx

@@ -240,7 +240,7 @@ export const EuiMarkdownEditor = forwardRef<
       const getCursorNode = () => {
         const { selectionStart } = textareaRef.current!;
 
-        let node: EuiMarkdownAstNode = parsed.contents;
+        let node: EuiMarkdownAstNode = parsed.result ?? parsed.contents;
 
         outer: while (true) {
           if (node.children) {
@@ -276,7 +276,7 @@ export const EuiMarkdownEditor = forwardRef<
     useEffect(() => {
       if (onParse) {
         const messages = parsed ? parsed.messages : [];
-        const ast = parsed ? parsed.contents : null;
+        const ast = parsed ? parsed.result ?? parsed.contents : null;
         onParse(parseError, { messages, ast });
       }
     }, [onParse, parsed, parseError]);

src/components/markdown_editor/markdown_format.tsx

@@ -19,6 +19,7 @@
 
 import React, { FunctionComponent, useMemo } from 'react';
 import unified, { PluggableList } from 'unified';
+import { VFileContents } from 'vfile';
 import {
   defaultProcessingPlugins,
   defaultParsingPlugins,
@@ -43,7 +44,10 @@ export const EuiMarkdownFormat: FunctionComponent<EuiMarkdownFormatProps> = ({
   );
   const result = useMemo(() => {
     try {
-      return processor.processSync(children).contents;
+      const processed = processor.processSync(children);
+      // `.result` is intentionally `unknown` (https://github.com/vfile/vfile/pull/53)
+      // cast to something expected.
+      return (processed.result as VFileContents) ?? processed.contents;
     } catch (e) {
       return children;
     }

src/components/markdown_editor/plugins/markdown_default_plugins.tsx

@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import { PluggableList } from 'unified';
+import { PluggableList, Plugin } from 'unified';
 import remark2rehype from 'remark-rehype';
 import rehype2react from 'rehype-react';
 import * as MarkdownTooltip from './markdown_tooltip';
@@ -28,8 +28,8 @@ import { EuiCodeBlock, EuiCode } from '../../code';
 import markdown from 'remark-parse';
 import highlight from 'remark-highlight.js';
 import emoji from 'remark-emoji';
-import { RemarkRehypeHandler } from '../markdown_types';
 import all from 'mdast-util-to-hast/lib/all';
+import { Options as Remark2RehypeOptions, Handler } from 'mdast-util-to-hast';
 
 export const getDefaultEuiMarkdownParsingPlugins = (): PluggableList => [
   [markdown, {}],
@@ -41,23 +41,17 @@ export const getDefaultEuiMarkdownParsingPlugins = (): PluggableList => [
 
 export const defaultParsingPlugins = getDefaultEuiMarkdownParsingPlugins();
 
-const unknownHandler: RemarkRehypeHandler = (h, node) => {
-  return h(node.position!, node.type, node, all(h, node));
+const unknownHandler: Handler = (h, node) => {
+  return h(node, node.type, node, all(h, node));
 };
 
-interface Remark2RehypeOptions {
-  allowDangerousHtml: boolean;
-  handlers: { [key: string]: RemarkRehypeHandler };
-  [key: string]: any;
-}
-
 interface Rehype2ReactOptions {
   components: { [key: string]: React.ComponentType<any> };
   [key: string]: any;
 }
 
 export const getDefaultEuiMarkdownProcessingPlugins = (): [
-  [typeof remark2rehype, Remark2RehypeOptions], // first is well known
+  [Plugin, Remark2RehypeOptions], // first is well known
   [typeof rehype2react, Rehype2ReactOptions], // second is well known
   ...PluggableList // any additional are generic
 ] => [

src/components/markdown_editor/unified-plugins.d.ts

@@ -32,18 +32,9 @@ declare module 'remark-highlight.js' {
 
 declare module 'mdast-util-to-hast/lib/all' {
   // eslint-disable-next-line import/no-unresolved
-  import { Node as UnistNode, Position as UnistPosition } from 'unist';
+  import { Node } from 'unist';
+  import { H } from 'mdast-util-to-hast';
 
-  interface RehypeNode {}
-  interface RemarkRehypeHandlerCallback {
-    (
-      node: UnistPosition,
-      tagName: string,
-      props: Object,
-      children: RehypeNode[]
-    ): RehypeNode;
-  }
-
-  const all: (h: RemarkRehypeHandlerCallback, node: UnistNode) => RehypeNode[];
+  const all: (h: H, node: Node) => Node[];
   export = all;
 }