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

Conversation

chandlerprall
Copy link
Contributor

@chandlerprall chandlerprall commented Jun 12, 2020

Summary

Added onParse callback to provide stop-the-world error, info messages, and parse results to the consuming application. I've updated the sole markdown example to display this information until we split it up into multiple examples.

Stop-the-world-error

Unified immediately stops all parsing and halts, no parsing result is generated. I've added this to the chart plugin, if you have a malformed JSON configuration object e.g. !{chart{"palette": ,"height":300}}. As another example, I encountered a parsing failure from one of the 3rd party modules, if you use the malformed tag !{tooltip[])}.

If it does fail to parse, the markdown formatter component now renders the markdown string with no processing.

Info messages

Plugins can also generate info messages which do not prevent further parsing. I've given the checkbox plugin 2, one for each of the anchor and tooltip text if no text is provided.

info messages

Future

Decisions

We should establish a pattern for what qualifies for info vs failure messages. Traditionally, markdown does not fail - but unified supports the behaviour and we should handle it at least a little gracefully.

Design

If there is a catastrophic stop-the-world error, we probably want to message it in the editor itself.

…ssages to tooltip plugin and fail message to chart configuration parsing
@chandlerprall chandlerprall changed the title Added AST & info/fail message reporting to application; added info me… Pass markdown parse results to application Jun 12, 2020
@kibanamachine
Copy link

Preview documentation changes for this PR: https://eui.elastic.co/pr_3602/

Copy link
Contributor

@thompsongl thompsongl left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code LGTM. The shape of onParse makes sense

@snide
Copy link
Contributor

snide commented Jun 16, 2020

I think it makes sense for this to be baked into the editor itself rather than through a form row. Reasoning is that we'll likely want the editor to be fullscreen or in composition modes. Thought something simple like this might work?

image

@chandlerprall
Copy link
Contributor Author

I think it makes sense for this to be baked into the editor itself rather than through a form row. Reasoning is that we'll likely want the editor to be fullscreen or in composition modes. Thought something simple like this might work?

  • the original designs had the help (?) button in that spot; would that still be the case, but be replaced if there are errors?
  • in most cases the editor would have line (and column) information and can be formatted as you have in the design, however this is not a guarantee and at times will need to fallback to a plain string
  • mind if we move the design/display of this to a separate PR?

@snide
Copy link
Contributor

snide commented Jun 16, 2020

mind if we move the design/display of this to a separate PR?

Yes. That's fine. Just make sure to add it as a todo to the feature branch PR>

Copy link
Contributor

@snide snide left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested functionality. We can handle the design in another PR.

Copy link
Contributor

@elizabetdev elizabetdev left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested the functionality and it looks good! I left a note to handle the design/display in our feature branch PR todo list.

@chandlerprall chandlerprall merged commit a35fc03 into elastic:feature/markdown-editor Jun 16, 2020
@chandlerprall chandlerprall deleted the markdown-editor-feedback branch June 16, 2020 17:57
chandlerprall added a commit that referenced this pull request Aug 12, 2020
* WIP: Add markdown_editor component

* WIP: commit auto-added i18n tokens

* Adding button toggle for previewing

* Adding toolbar component

* Adding file picker initial structure

* Adding text area component

* Buttons order

* Moving markdown editor to docs form section

* Improving file picker

* Adding dropZone component and preview styles

* Fixing height issue while resizing textarea

* Small UI fix

* Improving markdown example

* remove showdown, since it wasn't being used

* Adding code highlight

* Better coding highlight

* Replacing UglifyJsPlugin with TerserPlugin

* Adding button enter key and buttons tooltips

* More code highlight fixes

* Markdown editor plugins (#3457)

* Refactored EuiMarkdownEditor and EuiMarkdownFormat to prep for future work

* pr feedback

* [markdown] chart & tooltip plugins (#3479)

* chart & tooltip plugins

* Change tooltip markdown plugin markdown format

* Fixed error with empty tooltip tag

* [Markdown] Checkbox plugin (#3493)

* Checkbox plugin

* Better checkbox interaction formatting

* Use monospace font in markdown editor

* [EuiMarkdownEditor] Improve markdown editor font (#3525)

* Improving font family and text area font styles

* Text color and text babckground

* Adding eui font family

* euiFormControlText

* Small fix

* Refactoring some styles

* Removing unecessary padding

* Re-enable default markdown list parsing (#3531)

* [Markdown] Allow toolbar buttons to present modals to create/edit tags (#3506)

* Allow EuiMarkdownEditor's ui buttons trigger interactive modals for creating & editing tags

* export two internal markdown types that are needed externally when generating eui.d.ts

* Re-enable the default markdown list parsing/display, but keep EUI's checkbox override

* Give EuiMarkdownEditorTextArea a displayName

* Enable undo/redo for markdown editor, apart from firefox (#3582)

* Enable undo/redo for markdown editor, apart from firefox

* Add test-and-retry logic to insertText to account for ability to focus the text area before brute forcing

* Added AST & info/fail message reporting to application; added info messages to tooltip plugin and fail message to chart configuration parsing (#3602)

* Add an imperative ref to EuiMarkdownEditor (#3622)

* Add an imperative ref to EuiMarkdownEditor, exposing the textarea element and replaceNode method

* Remove textareaRef from two hook dependency arrays

* eslint errors

* Add a markdown help modal, move tooltip & checkbox plugins into src (#3636)

* Move checkbox and tooltip markdown plugins into eui src, add helpText to ui plugins

* Adding footer initial styles

* Adding error popover

* Fixing uploading files icon

* wire up errors

* modal help text

* better modal text

* blerg, react color

* toggle button for editor ast

* Ignoring ts errors and fixing sass lint errors

* Displaying always error info

* Adding checkmark button

* fix markdown test

* Added aria-label and aria-labelledby props to markdown editor

* Fix i18n token name for markdown errors title

* Reverting displaying errors

Co-authored-by: miukimiu <[email protected]>
Co-authored-by: Dave Snider <[email protected]>

* [EuiMarkdownEditor] Improving markdown format styles (#3534)

* Improving markdown format styles

* Transforming px to em

* Renaming variable

* Adding descriptions and alpha values

* hr more similar to EuiHorizontalRule

* [EuiMarkdownEditor] Better styles and class names (#3697)

* Better styles and classnames

* md footer height

* snapshot

* preventing the text area of loosing focus when clicking on an action button

* Add types to markdown editor (#3703)

* Plugin types

* Rehype / hast / unist node types

* Make typescript happy with markdown editor and dependencies

* Types for markdown AST nodes and errors

* Don't scan any .d.ts file for internationalization strings

* Adding missing types and dependency

* Fixing firefox text area margin (#3802)

* Markdown Format / Editor documentation + features (#3696)

Separates `EuiMarkdownFormat` into its own component. Adds documentation.

* [Markdown editor] drag and drop api, functionality (#3748)

* Initial markdown drag-n-drop api

* Properly insert multiple drag-and-drop results

* Update logic for markdown supported files message display

* disable upload interaction if no drop handlers are provided

* Upload error button styles

* pr feedback

* Only accept supported file types in the markdown file selection dialog

* Drag and drop animation

* small changes

* Add some cross-browser stability when dealing with unsupported drop files

Co-authored-by: miukimiu <[email protected]>

* Feature/markdown editor cleanup (#3830)

* Sort drag&drop file extensions when displaying

* mark markdown components as new and in beta

* Get EuiMarkdownEditor Props to render

* Update markdown's plugin prop docs based on existing writeups

* Prevent markdown plugin extensions from interacting with each other (#3842)

* Simplify the markdown editor's plugin API (#3843)

* Add a default remark->rehype node handler to simplify plugin development

* Update documentation

* Add license info around markdown tag processing; Support block-level tag insertions (#3867)

* changelog

* Improved, and proper, types for the markdown editor's usage in downstream apps (#3893)

* Fixes some ARIA issues in EuiMarkdownEditor (#3899)

* Support aria-describedby to link errors. Include file support message in upload button's aria-label

* Change markdown footer element to a div

Co-authored-by: i-a-n <[email protected]>
Co-authored-by: Dave Snider <[email protected]>
Co-authored-by: Chandler Prall <[email protected]>
nyurik pushed a commit that referenced this pull request Aug 18, 2020
* WIP: Add markdown_editor component

* WIP: commit auto-added i18n tokens

* Adding button toggle for previewing

* Adding toolbar component

* Adding file picker initial structure

* Adding text area component

* Buttons order

* Moving markdown editor to docs form section

* Improving file picker

* Adding dropZone component and preview styles

* Fixing height issue while resizing textarea

* Small UI fix

* Improving markdown example

* remove showdown, since it wasn't being used

* Adding code highlight

* Better coding highlight

* Replacing UglifyJsPlugin with TerserPlugin

* Adding button enter key and buttons tooltips

* More code highlight fixes

* Markdown editor plugins (#3457)

* Refactored EuiMarkdownEditor and EuiMarkdownFormat to prep for future work

* pr feedback

* [markdown] chart & tooltip plugins (#3479)

* chart & tooltip plugins

* Change tooltip markdown plugin markdown format

* Fixed error with empty tooltip tag

* [Markdown] Checkbox plugin (#3493)

* Checkbox plugin

* Better checkbox interaction formatting

* Use monospace font in markdown editor

* [EuiMarkdownEditor] Improve markdown editor font (#3525)

* Improving font family and text area font styles

* Text color and text babckground

* Adding eui font family

* euiFormControlText

* Small fix

* Refactoring some styles

* Removing unecessary padding

* Re-enable default markdown list parsing (#3531)

* [Markdown] Allow toolbar buttons to present modals to create/edit tags (#3506)

* Allow EuiMarkdownEditor's ui buttons trigger interactive modals for creating & editing tags

* export two internal markdown types that are needed externally when generating eui.d.ts

* Re-enable the default markdown list parsing/display, but keep EUI's checkbox override

* Give EuiMarkdownEditorTextArea a displayName

* Enable undo/redo for markdown editor, apart from firefox (#3582)

* Enable undo/redo for markdown editor, apart from firefox

* Add test-and-retry logic to insertText to account for ability to focus the text area before brute forcing

* Added AST & info/fail message reporting to application; added info messages to tooltip plugin and fail message to chart configuration parsing (#3602)

* Add an imperative ref to EuiMarkdownEditor (#3622)

* Add an imperative ref to EuiMarkdownEditor, exposing the textarea element and replaceNode method

* Remove textareaRef from two hook dependency arrays

* eslint errors

* Add a markdown help modal, move tooltip & checkbox plugins into src (#3636)

* Move checkbox and tooltip markdown plugins into eui src, add helpText to ui plugins

* Adding footer initial styles

* Adding error popover

* Fixing uploading files icon

* wire up errors

* modal help text

* better modal text

* blerg, react color

* toggle button for editor ast

* Ignoring ts errors and fixing sass lint errors

* Displaying always error info

* Adding checkmark button

* fix markdown test

* Added aria-label and aria-labelledby props to markdown editor

* Fix i18n token name for markdown errors title

* Reverting displaying errors

Co-authored-by: miukimiu <[email protected]>
Co-authored-by: Dave Snider <[email protected]>

* [EuiMarkdownEditor] Improving markdown format styles (#3534)

* Improving markdown format styles

* Transforming px to em

* Renaming variable

* Adding descriptions and alpha values

* hr more similar to EuiHorizontalRule

* [EuiMarkdownEditor] Better styles and class names (#3697)

* Better styles and classnames

* md footer height

* snapshot

* preventing the text area of loosing focus when clicking on an action button

* Add types to markdown editor (#3703)

* Plugin types

* Rehype / hast / unist node types

* Make typescript happy with markdown editor and dependencies

* Types for markdown AST nodes and errors

* Don't scan any .d.ts file for internationalization strings

* Adding missing types and dependency

* Fixing firefox text area margin (#3802)

* Markdown Format / Editor documentation + features (#3696)

Separates `EuiMarkdownFormat` into its own component. Adds documentation.

* [Markdown editor] drag and drop api, functionality (#3748)

* Initial markdown drag-n-drop api

* Properly insert multiple drag-and-drop results

* Update logic for markdown supported files message display

* disable upload interaction if no drop handlers are provided

* Upload error button styles

* pr feedback

* Only accept supported file types in the markdown file selection dialog

* Drag and drop animation

* small changes

* Add some cross-browser stability when dealing with unsupported drop files

Co-authored-by: miukimiu <[email protected]>

* Feature/markdown editor cleanup (#3830)

* Sort drag&drop file extensions when displaying

* mark markdown components as new and in beta

* Get EuiMarkdownEditor Props to render

* Update markdown's plugin prop docs based on existing writeups

* Prevent markdown plugin extensions from interacting with each other (#3842)

* Simplify the markdown editor's plugin API (#3843)

* Add a default remark->rehype node handler to simplify plugin development

* Update documentation

* Add license info around markdown tag processing; Support block-level tag insertions (#3867)

* changelog

* Improved, and proper, types for the markdown editor's usage in downstream apps (#3893)

* Fixes some ARIA issues in EuiMarkdownEditor (#3899)

* Support aria-describedby to link errors. Include file support message in upload button's aria-label

* Change markdown footer element to a div

Co-authored-by: i-a-n <[email protected]>
Co-authored-by: Dave Snider <[email protected]>
Co-authored-by: Chandler Prall <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants