From 8794d50ab47961281a09b12843e098fae01a03c4 Mon Sep 17 00:00:00 2001 From: Chandler Prall Date: Thu, 30 Jul 2020 08:53:25 -0600 Subject: [PATCH 1/4] Sort drag&drop file extensions when displaying --- src/components/markdown_editor/markdown_editor_footer.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/markdown_editor/markdown_editor_footer.tsx b/src/components/markdown_editor/markdown_editor_footer.tsx index 8a2a323105a..f273a95c960 100644 --- a/src/components/markdown_editor/markdown_editor_footer.tsx +++ b/src/components/markdown_editor/markdown_editor_footer.tsx @@ -98,6 +98,7 @@ export const EuiMarkdownEditorFooter: FunctionComponent supportedFiles.join(', ')) + .sort() .join(', ')}`}> Date: Thu, 30 Jul 2020 09:13:32 -0600 Subject: [PATCH 2/4] mark markdown components as new and in beta --- src-docs/src/views/markdown_editor/mardown_editor_example.js | 2 ++ src-docs/src/views/markdown_editor/mardown_format_example.js | 2 ++ src-docs/src/views/markdown_editor/markdown_plugin_example.js | 2 ++ 3 files changed, 6 insertions(+) diff --git a/src-docs/src/views/markdown_editor/mardown_editor_example.js b/src-docs/src/views/markdown_editor/mardown_editor_example.js index 02656a92af1..98b8cd40e47 100644 --- a/src-docs/src/views/markdown_editor/mardown_editor_example.js +++ b/src-docs/src/views/markdown_editor/mardown_editor_example.js @@ -23,6 +23,8 @@ const markdownEditorErrorsHtml = renderToHtml(MarkdownEditorErrors); export const MarkdownEditorExample = { title: 'Markdown editor', + beta: true, + isNew: true, intro: ( diff --git a/src-docs/src/views/markdown_editor/mardown_format_example.js b/src-docs/src/views/markdown_editor/mardown_format_example.js index 352d45e844b..2e5852042bd 100644 --- a/src-docs/src/views/markdown_editor/mardown_format_example.js +++ b/src-docs/src/views/markdown_editor/mardown_format_example.js @@ -22,6 +22,8 @@ const markdownFormatSinkHtml = renderToHtml(MarkdownFormatSink); export const MarkdownFormatExample = { title: 'Markdown format', + beta: true, + isNew: true, intro: ( diff --git a/src-docs/src/views/markdown_editor/markdown_plugin_example.js b/src-docs/src/views/markdown_editor/markdown_plugin_example.js index 627c34d78a3..64b138d75c8 100644 --- a/src-docs/src/views/markdown_editor/markdown_plugin_example.js +++ b/src-docs/src/views/markdown_editor/markdown_plugin_example.js @@ -131,6 +131,8 @@ const uiPluginConcepts = [ export const MarkdownPluginExample = { title: 'Markdown plugins', + beta: true, + isNew: true, intro: ( From 08f26dddb0d85e60ee4bf8ae22f319e28995a829 Mon Sep 17 00:00:00 2001 From: Chandler Prall Date: Thu, 30 Jul 2020 10:38:29 -0600 Subject: [PATCH 3/4] Get EuiMarkdownEditor Props to render --- .../babel/proptypes-from-ts-props/index.js | 8 ++++ .../markdown_editor/markdown_editor.tsx | 37 ++++++++++++++----- .../markdown_editor/markdown_modes.ts | 4 +- 3 files changed, 37 insertions(+), 12 deletions(-) diff --git a/scripts/babel/proptypes-from-ts-props/index.js b/scripts/babel/proptypes-from-ts-props/index.js index c65a1cb4a32..a897520718a 100644 --- a/scripts/babel/proptypes-from-ts-props/index.js +++ b/scripts/babel/proptypes-from-ts-props/index.js @@ -156,6 +156,7 @@ function resolveArrayTypeToPropTypes(node, state) { * - Arrays * - MouseEventHandler is interpretted as functions * - ExclusiveUnion custom type + * - OneOf custom type * - defined types/interfaces (found during initial program body parsing) * Returns `null` for unresolvable types * @param node @@ -342,6 +343,13 @@ function resolveIdentifierToPropTypes(node, state) { return propTypes; } + if (identifier.name === 'OneOf') { + // the second type parameter is ignorable as it is a subset of the first, + // and the OneOf operation cannot be well-described by proptypes + const [sourceTypes] = node.typeParameters.params; + return getPropTypesForNode(sourceTypes, true, state); + } + // Lookup this identifier from types/interfaces defined in code const identifierDefinition = typeDefinitions[identifier.name]; diff --git a/src/components/markdown_editor/markdown_editor.tsx b/src/components/markdown_editor/markdown_editor.tsx index 91ea186c11c..7eae76440ca 100644 --- a/src/components/markdown_editor/markdown_editor.tsx +++ b/src/components/markdown_editor/markdown_editor.tsx @@ -19,13 +19,11 @@ import React, { createElement, - FunctionComponent, HTMLAttributes, useEffect, useImperativeHandle, useMemo, useState, - forwardRef, useCallback, useRef, } from 'react'; @@ -60,17 +58,23 @@ import { type CommonMarkdownEditorProps = HTMLAttributes & CommonProps & { - /** A unique ID to attach to the textarea. If one isn't provided, a random one + /** aria-label OR aria-labelledby must be set */ + 'aria-label'?: string; + + /** aria-label OR aria-labelledby must be set */ + 'aria-labelledby'?: string; + + /** a unique ID to attach to the textarea. If one isn't provided, a random one * will be generated */ editorId?: string; /** A markdown content */ value: string; - /** Callback function when markdown content is modified */ + /** callback function when markdown content is modified */ onChange: (value: string) => void; - /** The height of the content/preview area */ + /** height of the content/preview area */ height?: number; /** array of unified plugins to parse content into an AST */ @@ -79,13 +83,13 @@ type CommonMarkdownEditorProps = HTMLAttributes & /** array of unified plugins to convert the AST into a ReactNode */ processingPluginList?: PluggableList; - /** array of toolbar plugins **/ + /** array of toolbar plugins */ uiPlugins?: EuiMarkdownEditorUiPlugin[]; - /** Errors to bubble up */ + /** errors to bubble up */ errors?: EuiMarkdownParseError[]; - /** callback triggered when parsing results are available **/ + /** callback triggered when parsing results are available */ onParse?: ( error: EuiMarkdownParseError | null, data: { @@ -94,6 +98,10 @@ type CommonMarkdownEditorProps = HTMLAttributes & } ) => void; + /** initial display mode for the editor */ + initialViewMode?: MARKDOWN_MODE; + + /** array defining any drag&drop handlers */ dropHandlers?: EuiMarkdownDropHandler[]; }; export type EuiMarkdownEditorProps = OneOf< @@ -101,7 +109,15 @@ export type EuiMarkdownEditorProps = OneOf< 'aria-label' | 'aria-labelledby' >; -export const EuiMarkdownEditor: FunctionComponent = forwardRef( +interface EuiMarkdownEditorRef { + textarea: HTMLTextAreaElement | null; + replaceNode: ContextShape['replaceNode']; +} + +export const EuiMarkdownEditor = React.forwardRef< + EuiMarkdownEditorRef, + EuiMarkdownEditorProps +>( ( { className, @@ -116,12 +132,13 @@ export const EuiMarkdownEditor: FunctionComponent = forw errors = [], 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, + initialViewMode = MODE_EDITING, dropHandlers = [], ...rest }, ref ) => { - const [viewMode, setViewMode] = useState(MODE_EDITING); + const [viewMode, setViewMode] = useState(initialViewMode); const editorId = useMemo(() => _editorId || htmlIdGenerator()(), [ _editorId, ]); diff --git a/src/components/markdown_editor/markdown_modes.ts b/src/components/markdown_editor/markdown_modes.ts index bd3c214195b..0561630e918 100644 --- a/src/components/markdown_editor/markdown_modes.ts +++ b/src/components/markdown_editor/markdown_modes.ts @@ -17,7 +17,7 @@ * under the License. */ -export const MODE_EDITING = 'editing'; -export const MODE_VIEWING = 'viewing'; +export const MODE_EDITING = 'editing' as const; +export const MODE_VIEWING = 'viewing' as const; export type MARKDOWN_MODE = typeof MODE_EDITING | typeof MODE_VIEWING; From 1adab9b1926c0c76b287137856289f317d9c67dd Mon Sep 17 00:00:00 2001 From: Chandler Prall Date: Thu, 30 Jul 2020 12:28:19 -0600 Subject: [PATCH 4/4] Update markdown's plugin prop docs based on existing writeups --- src/components/markdown_editor/markdown_editor.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/markdown_editor/markdown_editor.tsx b/src/components/markdown_editor/markdown_editor.tsx index 7eae76440ca..799ee2cb936 100644 --- a/src/components/markdown_editor/markdown_editor.tsx +++ b/src/components/markdown_editor/markdown_editor.tsx @@ -77,13 +77,13 @@ type CommonMarkdownEditorProps = HTMLAttributes & /** height of the content/preview area */ height?: number; - /** array of unified plugins to parse content into an AST */ + /** plugins to identify new syntax and parse it into an AST node */ parsingPluginList?: PluggableList; - /** array of unified plugins to convert the AST into a ReactNode */ + /** plugins to process the markdown AST nodes into a React nodes */ processingPluginList?: PluggableList; - /** array of toolbar plugins */ + /** defines UI for plugins' buttons in the toolbar as well as any modals or extra UI that provides content to the editor */ uiPlugins?: EuiMarkdownEditorUiPlugin[]; /** errors to bubble up */