Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Pass markdown parse results to application #3602

Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Added AST & info/fail message reporting to application; added info me…
…ssages to tooltip plugin and fail message to chart configuration parsing
  • Loading branch information
chandlerprall committed Jun 12, 2020
commit 693dc82bfdcb574e4d8f7ee0809a99729b0daa8a
40 changes: 35 additions & 5 deletions src-docs/src/views/markdown_editor/markdown_editor.js
Original file line number Diff line number Diff line change
@@ -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>
</>
);
};
9 changes: 7 additions & 2 deletions src-docs/src/views/markdown_editor/plugins/markdown_chart.js
Original file line number Diff line number Diff line change
@@ -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 += '}';
16 changes: 15 additions & 1 deletion src-docs/src/views/markdown_editor/plugins/markdown_tooltip.js
Original file line number Diff line number Diff line change
@@ -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);
32 changes: 31 additions & 1 deletion src/components/markdown_editor/markdown_editor.tsx
Original file line number Diff line number Diff line change
@@ -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}>
13 changes: 8 additions & 5 deletions src/components/markdown_editor/markdown_format.tsx
Original file line number Diff line number Diff line change
@@ -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>;
};