[Feature Branch] EuiMarkdownEditor #3522

miukimiu · 2020-05-28T17:48:55Z

Markdown Editor Specification

The Markdown Editor Specification can be found here

Figma Prototype / Design

The Figma Prototype can be found in Figma

Build Preview (WIP)

The Build Preview can be found here

Sync Notes

The sync notes can be found here

Left todo

Future

ideas for syntax highlight/compression/etc

Changelog and PR's

As part of #3457

Created initial code structure for EuiMarkdownEditor.
Split the EuiMarkdownEditor unified plugins structure into two passes (parse, process/render) and used them as defaults

As part of #3479

Created a chart and a tooltip plugin

As part of #3493

Added a checkbox plugin

As part of #3506

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

As part of #3525

Improved fonts styles and make sure text and preview areas use the Inter UI font.

As part of #3531

Re-enable default markdown list parsing

As part of #3602

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

As part of #3534

Improved markdown format styles

As part of #3697

Added better styles and class names for the EuiMarkdownEditor

As part of #3703

Added and corrected types within the markdown editor and its dependencies.

As part of #3802

Fixed firefox textArea margin

As part of #3696

Separated EuiMarkdownFormat into it's own component.
Reworked plugin API to share a common set of plugins. Added documentation.

As part of #3748

Added proper drag&drop handling to the markdown editor.

As part of #3830

Sorted the supported file extensions when displaying in the drag&drop tooltip
Allowed consuming app to specify the editor's initial mode (editing vs preview)
Got the Props tab to render for EuiMarkdownEditor

As part of #3842

Moved the default parsing&processing plugin arrays behind a constructor function

As part of #3843

Implemented a default unknownHandler for plugin node processing, simplifying custom plugin setup

As part of #3867

Added license information for markdown tag formatting code
Added support for markdown insertion to be block-level (testable via the chart plugin example and drag&drop)
Corrected a documentation bug

Checklist

Check against all themes for compatibility in both light and dark modes
Checked in mobile
Checked in Chrome, Firefox, Safari, and Edge
Props have proper autodocs
Added documentation examples
- [ ] Added or updated jest tests
Checked for breaking changes and labeled appropriately
Checked for accessibility including keyboard-only and screenreader modes
A changelog entry exists and is marked appropriately

…o markdown-editor

* Refactored EuiMarkdownEditor and EuiMarkdownFormat to prep for future work * pr feedback

* chart & tooltip plugins * Change tooltip markdown plugin markdown format * Fixed error with empty tooltip tag

* Checkbox plugin * Better checkbox interaction formatting * Use monospace font in markdown editor

kibanamachine · 2020-07-14T12:18:38Z

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

kibanamachine · 2020-07-28T09:17:30Z

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

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

kibanamachine · 2020-07-28T19:06:55Z

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

* 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>

kibanamachine · 2020-07-29T20:01:24Z

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

* 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

kibanamachine · 2020-07-30T22:02:46Z

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

…3842)

kibanamachine · 2020-07-31T19:08:45Z

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

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

kibanamachine · 2020-08-04T16:53:21Z

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

…tag insertions (#3867)

kibanamachine · 2020-08-11T16:24:12Z

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

myasonik · 2020-08-11T22:34:44Z

Trying to attach a file with an unsupported file type is never read out (the button has an aria-label on it that's never updated or removed)
The example of providing more errors under the textarea using EuiFromRow isn't wired up to associate the errors with the textare

…ream apps (#3893)

kibanamachine · 2020-08-12T15:34:56Z

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

* Support aria-describedby to link errors. Include file support message in upload button's aria-label * Change markdown footer element to a div

kibanamachine · 2020-08-12T19:12:55Z

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

* 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>

i-a-n and others added 30 commits February 12, 2020 00:43

WIP: Add markdown_editor component

f620292

WIP: commit auto-added i18n tokens

edd7816

Adding button toggle for previewing

f1a2cab

Adding toolbar component

37e1f23

Adding file picker initial structure

e489f11

Adding text area component

cf99ece

Buttons order

7568dfb

Moving markdown editor to docs form section

7b6c69e

Improving file picker

e5e5e1a

Merge remote-tracking branch 'upstream/master' into markdown-editor

a1cc078

Adding dropZone component and preview styles

ab7833b

Fixing height issue while resizing textarea

3b30207

Small UI fix

0b28523

Improving markdown example

fb284ce

Merge remote-tracking branch 'upstream/master' into markdown-editor

e94b213

remove showdown, since it wasn't being used

3831407

Adding code highlight

2f95bbc

Merge branch 'markdown-editor' of https://github.com/miukimiu/eui int…

76a6962

…o markdown-editor

Better coding highlight

7583186

Merge remote-tracking branch 'upstream/master' into markdown-editor

9acf563

Replacing UglifyJsPlugin with TerserPlugin

8aa5b7f

Adding button enter key and buttons tooltips

b877378

Merge remote-tracking branch 'upstream/master' into markdown-editor

71c34dc

More code highlight fixes

d1b9223

Merge remote-tracking branch 'upstream/master' into markdown-editor

2fd8a6d

Merge branch 'master' into markdown-editor

57ed734

Markdown editor plugins (#3457)

c652d1c

* Refactored EuiMarkdownEditor and EuiMarkdownFormat to prep for future work * pr feedback

[markdown] chart & tooltip plugins (#3479)

40f9642

* chart & tooltip plugins * Change tooltip markdown plugin markdown format * Fixed error with empty tooltip tag

[Markdown] Checkbox plugin (#3493)

2d468c3

* Checkbox plugin * Better checkbox interaction formatting * Use monospace font in markdown editor

Merge branch 'master' into markdown-editor

212bc8c

Fixing firefox text area margin (#3802)

942595c

Markdown Format / Editor documentation + features (#3696)

a520c68

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

chandlerprall and others added 2 commits July 28, 2020 14:47

Merge branch 'master' into feature/markdown-editor

b61c2e4

Feature/markdown editor cleanup (#3830)

7f73c82

* 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

chandlerprall added the markdown editor label Jul 31, 2020

Prevent markdown plugin extensions from interacting with each other (#…

b111e01

…3842)

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

252467b

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

chandlerprall added 3 commits August 10, 2020 10:54

Add license info around markdown tag processing; Support block-level …

fb65ab3

…tag insertions (#3867)

Merge branch 'master' into feature/markdown-editor

0cf3b90

changelog

004fb4a

Improved, and proper, types for the markdown editor's usage in downst…

dead485

…ream apps (#3893)

chandlerprall mentioned this pull request Aug 12, 2020

Fixes some ARIA issues in EuiMarkdownEditor #3899

Merged

Fixes some ARIA issues in EuiMarkdownEditor (#3899)

d7c15bf

* Support aria-describedby to link errors. Include file support message in upload button's aria-label * Change markdown footer element to a div

chandlerprall merged commit 81f22fe into master Aug 12, 2020

chandlerprall deleted the feature/markdown-editor branch August 12, 2020 19:32

thompsongl mentioned this pull request Aug 21, 2020

Upgrade EUI to v28.2.0 elastic/kibana#75700

Merged

kpatticha mentioned this pull request Sep 20, 2022

[APM] Agent configuration - EuiMarkdownFormat when rendering setting description elastic/kibana#141086

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Feature Branch] EuiMarkdownEditor #3522

[Feature Branch] EuiMarkdownEditor #3522

miukimiu commented May 28, 2020 •

edited by chandlerprall

Loading

kibanamachine commented Jul 14, 2020

kibanamachine commented Jul 28, 2020

kibanamachine commented Jul 28, 2020

kibanamachine commented Jul 29, 2020

kibanamachine commented Jul 30, 2020

kibanamachine commented Jul 31, 2020

kibanamachine commented Aug 4, 2020

kibanamachine commented Aug 11, 2020

myasonik commented Aug 11, 2020

kibanamachine commented Aug 12, 2020

kibanamachine commented Aug 12, 2020

[Feature Branch] EuiMarkdownEditor #3522

[Feature Branch] EuiMarkdownEditor #3522

Conversation

miukimiu commented May 28, 2020 • edited by chandlerprall Loading

Markdown Editor Specification

Figma Prototype / Design

Build Preview (WIP)

Sync Notes

Left todo

Future

Changelog and PR's

Checklist

kibanamachine commented Jul 14, 2020

kibanamachine commented Jul 28, 2020

kibanamachine commented Jul 28, 2020

kibanamachine commented Jul 29, 2020

kibanamachine commented Jul 30, 2020

kibanamachine commented Jul 31, 2020

kibanamachine commented Aug 4, 2020

kibanamachine commented Aug 11, 2020

myasonik commented Aug 11, 2020

kibanamachine commented Aug 12, 2020

kibanamachine commented Aug 12, 2020

miukimiu commented May 28, 2020 •

edited by chandlerprall

Loading