Skip to content

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

Merged
chandlerprall merged 2 commits intoelastic:markdown-editorfrom
chandlerprall:markdown-editor-plugin-ui-interactive-buttons
May 27, 2020
Merged

[Markdown] Allow toolbar buttons to present modals to create/edit tags#3506
chandlerprall merged 2 commits intoelastic:markdown-editorfrom
chandlerprall:markdown-editor-plugin-ui-interactive-buttons

Conversation

@chandlerprall
Copy link
Copy Markdown
Contributor

Summary

Adds the ability for UI buttons to trigger modals when creating or editing their markdown tags.

chart modal

Core modifications

  • Plugins are allowed to pass either a formatting object or an editor React component
  • Plugin recommended practice no longer to include a configuration object, instead applying those values directly on the markdown node
  • Method to directly set the markdown text no longer provided to the markdown renderers, instead they are given a replaceNode
  • Editor now tracks which markdown node the text cursor is in
    • currently it walks until it finds a text node, but this likely needs to be smarter in the future, for example if I'm in a bold section within a tooltip's anchor text, what should happen?
    • the implementation to update this knowledge is intentionally buggy (for now), e.g. there's no handling for when focus is lost

Chart example plugin

  • converted from an inline tag to block (the line of text must start with its tag, is no longer rendered within a p element)
  • syntax no longer has a whitespace between !{chart and the JSON configuration

Next steps

  • lots of documentation
    • technical overview of the markdown editor
    • plugin architecture & how to build them
    • text editing concerns, interactions
  • meeting with Brandon K. and Stacey G. next Wednesday to get a start on how the integration with Kibana could look
  • revisit the formatting instructions processing, there's some bugs floating around
  • be a stool pidgin to the consuming app
    • collect error/info messages
      • [probably] feed this back into the editor's UX, as well
    • provide current selected node/tree

Copy link
Copy Markdown
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 locally and LGTM! 🎉

Copy link
Copy Markdown
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.

Looking good, but there are build failures related to TS

16:52:21 Unhandled rejection EmitterError: Declaration generation failed

@chandlerprall
Copy link
Copy Markdown
Contributor Author

PUPPETEER_SKIP_CHROMIUM_DOWNLOAD

jenkins test this

@kibanamachine
Copy link
Copy Markdown

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

@chandlerprall chandlerprall merged commit c1c0857 into elastic:markdown-editor May 27, 2020
@chandlerprall chandlerprall deleted the markdown-editor-plugin-ui-interactive-buttons branch May 27, 2020 20:55
chandlerprall added a commit that referenced this pull request Jun 1, 2020
* [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
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 <elizabet.oliveira@elastic.co>
Co-authored-by: Dave Snider <dave.snider@gmail.com>

* [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 <elizabet.oliveira@elastic.co>

* 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 <ian@union.io>
Co-authored-by: Dave Snider <dave.snider@gmail.com>
Co-authored-by: Chandler Prall <chandler.prall@gmail.com>
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 <elizabet.oliveira@elastic.co>
Co-authored-by: Dave Snider <dave.snider@gmail.com>

* [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 <elizabet.oliveira@elastic.co>

* 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 <ian@union.io>
Co-authored-by: Dave Snider <dave.snider@gmail.com>
Co-authored-by: Chandler Prall <chandler.prall@gmail.com>
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.

4 participants