Pass markdown parse results to application

src-docs/src/views/markdown_editor/markdown_editor.js

@@ -1,7 +1,13 @@
-/* eslint-disable prettier/prettier */
-import React, { useState } from 'react';
+import React, { useCallback, useState } from 'react';
 
-import { defaultParsingPlugins, defaultProcessingPlugins, EuiMarkdownEditor } from '../../../../src';
+import {
+  defaultParsingPlugins,
+  defaultProcessingPlugins,
+  EuiMarkdownEditor,
+  EuiSpacer,
+  EuiText,
+  EuiCodeBlock,
+} from '../../../../src';
 import * as MarkdownChart from './plugins/markdown_chart';
 import * as MarkdownTooltip from './plugins/markdown_tooltip';
 import * as MarkdownCheckbox from './plugins/markdown_checkbox';
@@ -23,9 +29,33 @@ exampleProcessingList[0][1].handlers.tooltipPlugin = MarkdownTooltip.handler;
 exampleProcessingList[1][1].components.tooltipPlugin = MarkdownTooltip.renderer;
 
 exampleProcessingList[0][1].handlers.checkboxPlugin = MarkdownCheckbox.handler;
-exampleProcessingList[1][1].components.checkboxPlugin = MarkdownCheckbox.renderer;
+exampleProcessingList[1][1].components.checkboxPlugin =
+  MarkdownCheckbox.renderer;
 
 export default () => {
   const [value, setValue] = useState(markdownExample);
-  return <EuiMarkdownEditor value={value} onChange={setValue} height={400} uiPlugins={[MarkdownChart.plugin, MarkdownTooltip.plugin]} parsingPluginList={exampleParsingList} processingPluginList={exampleProcessingList} />;
+  const [messages, setMessages] = useState([]);
+  const [ast, setAst] = useState(null);
+  const onParse = useCallback((err, { messages, ast }) => {
+    setMessages(err ? [err] : messages);
+    setAst(JSON.stringify(ast, null, 2));
+  }, []);
+  return (
+    <>
+      <EuiMarkdownEditor
+        value={value}
+        onChange={setValue}
+        height={400}
+        uiPlugins={[MarkdownChart.plugin, MarkdownTooltip.plugin]}
+        parsingPluginList={exampleParsingList}
+        processingPluginList={exampleProcessingList}
+        onParse={onParse}
+      />
+      <EuiSpacer />
+      {messages.map((message, idx) => (
+        <EuiText key={idx}>{message.toString()}</EuiText>
+      ))}
+      <EuiCodeBlock language="json">{ast}</EuiCodeBlock>
+    </>
+  );
 };

src-docs/src/views/markdown_editor/plugins/markdown_chart.js

@@ -155,8 +155,13 @@ function ChartParser() {
       match += configurationString;
       try {
         configuration = JSON.parse(configurationString);
-        // eslint-disable-next-line no-empty
-      } catch (e) {}
+      } catch (e) {
+        const now = eat.now();
+        this.file.fail(`Unable to parse chart JSON configuration: ${e}`, {
+          line: now.line,
+          column: now.column + 7,
+        });
+      }
     }
 
     match += '}';

src-docs/src/views/markdown_editor/plugins/markdown_tooltip.js

@@ -55,13 +55,27 @@ function TooltipParser() {
     const tooltipAnchor = readArg('[', ']');
     const tooltipText = readArg('(', ')');
 
+    const now = eat.now();
+
+    if (!tooltipAnchor) {
+      this.file.info('No tooltip anchor found', {
+        line: now.line,
+        column: now.column + 10,
+      });
+    }
+    if (!tooltipText) {
+      this.file.info('No tooltip text found', {
+        line: now.line,
+        column: now.column + 12 + tooltipAnchor.length,
+      });
+    }
+
     if (!tooltipText || !tooltipAnchor) return false;
 
     if (silent) {
       return true;
     }
 
-    const now = eat.now();
     now.column += 10;
     now.offset += 10;
     const children = this.tokenizeInline(tooltipAnchor, now);

src/components/markdown_editor/markdown_editor.tsx

@@ -26,6 +26,7 @@ import React, {
   useState,
 } from 'react';
 import unified, { PluggableList, Processor } from 'unified';
+import { VFileMessage } from 'vfile-message';
 import classNames from 'classnames';
 // @ts-ignore
 import emoji from 'remark-emoji';
@@ -105,7 +106,17 @@ export type EuiMarkdownEditorProps = HTMLAttributes<HTMLDivElement> &
     /** array of unified plugins to convert the AST into a ReactNode */
     processingPluginList?: PluggableList;
 
+    /** array of toolbar plugins **/
     uiPlugins?: EuiMarkdownEditorUiPlugin[];
+
+    /** callback triggered when parsing results are available **/
+    onParse?: (
+      error: any | null,
+      data: {
+        messages: VFileMessage[];
+        ast: any;
+      }
+    ) => void;
   };
 
 export const EuiMarkdownEditor: FunctionComponent<EuiMarkdownEditorProps> = ({
@@ -117,6 +128,7 @@ export const EuiMarkdownEditor: FunctionComponent<EuiMarkdownEditorProps> = ({
   parsingPluginList = defaultParsingPlugins,
   processingPluginList = defaultProcessingPlugins,
   uiPlugins = [],
+  onParse,
   ...rest
 }) => {
   const [viewMode, setViewMode] = useState<MARKDOWN_MODE>(MODE_EDITING);
@@ -148,7 +160,16 @@ export const EuiMarkdownEditor: FunctionComponent<EuiMarkdownEditorProps> = ({
       .use(identityCompiler);
   }, [parsingPluginList]);
 
-  const parsed = useMemo(() => parser.processSync(value), [parser, value]);
+  const [parsed, parseError] = useMemo<
+    [any | null, VFileMessage | null]
+  >(() => {
+    try {
+      const parsed = parser.processSync(value);
+      return [parsed, null];
+    } catch (e) {
+      return [null, e];
+    }
+  }, [parser, value]);
 
   const processor = useMemo(
     () =>
@@ -180,6 +201,7 @@ export const EuiMarkdownEditor: FunctionComponent<EuiMarkdownEditorProps> = ({
   );
   useEffect(() => {
     if (textareaRef == null) return;
+    if (parsed == null) return;
 
     const getCursorNode = () => {
       const { selectionStart } = textareaRef;
@@ -215,6 +237,14 @@ export const EuiMarkdownEditor: FunctionComponent<EuiMarkdownEditorProps> = ({
     };
   }, [textareaRef, parsed]);
 
+  useEffect(() => {
+    if (onParse) {
+      const messages = parsed ? parsed.messages : [];
+      const ast = parsed ? parsed.contents : null;
+      onParse(parseError, { messages, ast });
+    }
+  }, [onParse, parsed, parseError]);
+
   return (
     <EuiMarkdownContext.Provider value={contextValue}>
       <div className={classes} {...rest}>

src/components/markdown_editor/markdown_format.tsx

@@ -29,9 +29,12 @@ export const EuiMarkdownFormat: FunctionComponent<EuiMarkdownFormatProps> = ({
   children,
   processor,
 }) => {
-  const result = useMemo(() => processor.processSync(children), [
-    processor,
-    children,
-  ]);
-  return <div className="euiMarkdownFormat">{result.contents}</div>;
+  const result = useMemo(() => {
+    try {
+      return processor.processSync(children).contents;
+    } catch (e) {
+      return children;
+    }
+  }, [processor, children]);
+  return <div className="euiMarkdownFormat">{result}</div>;
 };