Feature/markdown editor cleanup

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];
 

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: (
     <Fragment>
       <EuiText>

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: (
     <Fragment>
       <EuiText>

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: (
     <Fragment>
       <EuiText>

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,32 +58,38 @@ import {
 
 type CommonMarkdownEditorProps = HTMLAttributes<HTMLDivElement> &
   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 */
+    /** 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 */
+    /** 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,14 +98,26 @@ type CommonMarkdownEditorProps = HTMLAttributes<HTMLDivElement> &
       }
     ) => void;
 
+    /** initial display mode for the editor */
+    initialViewMode?: MARKDOWN_MODE;
+
+    /** array defining any drag&drop handlers */
     dropHandlers?: EuiMarkdownDropHandler[];
   };
 export type EuiMarkdownEditorProps = OneOf<
   CommonMarkdownEditorProps,
   'aria-label' | 'aria-labelledby'
 >;
 
-export const EuiMarkdownEditor: FunctionComponent<EuiMarkdownEditorProps> = 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<EuiMarkdownEditorProps> = forw
       errors = [],
       'aria-label': ariaLabel,
       'aria-labelledby': ariaLabelledBy,
+      initialViewMode = MODE_EDITING,
       dropHandlers = [],
       ...rest
     },
     ref
   ) => {
-    const [viewMode, setViewMode] = useState<MARKDOWN_MODE>(MODE_EDITING);
+    const [viewMode, setViewMode] = useState<MARKDOWN_MODE>(initialViewMode);
     const editorId = useMemo(() => _editorId || htmlIdGenerator()(), [
       _editorId,
     ]);

src/components/markdown_editor/markdown_editor_footer.tsx

@@ -98,6 +98,7 @@ export const EuiMarkdownEditorFooter: FunctionComponent<EuiMarkdownEditorFooterP
       <EuiToolTip
         content={`Supported files: ${dropHandlers
           .map(({ supportedFiles }) => supportedFiles.join(', '))
+          .sort()
           .join(', ')}`}>
         <EuiButtonEmpty
           className="euiMarkdownEditorFooter__uploadError"

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;