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.

Sign up for GitHub

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

Jump to bottom

Markdown Format / Editor documentation + features #3696

Merged
merged 19 commits into from
Jul 28, 2020
Merged

Markdown Format / Editor documentation + features #3696

merged 19 commits into from
Jul 28, 2020

Conversation

snide
Copy link
Contributor

@snide snide commented Jul 3, 2020 •
edited
Loading

Summary

Adds documentation for the Markdown editor and Markdown formatter components.

It crosses off several checklist items from the feature branch

  • EuiCode is now used for regular code blocks. It does this by checking for newlines to decide.
  • EuiMarkdownFormat is now available separately from EuiMarkdownEditor. It's been refactored to be powered by the same props as the editor, which you'd need for something like side by side editing.
  • Both the editor and the formatter pull from a shared default plugin setup which is now managed by a new file markdown_default_plugns .
  • Makes a new section in the docs called Editors & syntax. I moved the code and code editor components under this header since they share very similar concepts.

Markdown format now uses the same plugin layer as the editor

Tooltip styling

Added some opinionated styling on how to handle the tooltip plugin. Previously the text looked like any other text.

Also did the following

  • Got more opinionated about the styling of the tooltip plugin

Todo for @snide

  • Fix a bunch of EuiFormat rendering issues. Likely need to utilize a singular mixin for EuiText and EuiMarkdownFormat so that we don't have overlap, and will work between themes. (can be a later PR)
  • Writeup lots of words, mostly about the plugin system
  • Restructure EuiMarkdownFormat to use a similar parse/process layer so that the plugin system works with similar props in the editor and formatter.
  • Possible break this stuff onto multiple pages.

Todo for @chandlerprall

  • Set up a props tab, likely using a custom json output similar to table and grid
  • Check over / rework @snide's changes to make EuiMarkdownFormat work. Specifically, didn't know if the passed plugins should push to the array of defaults, or only include one or the other.
  • Fill in the gaps on the plugin docs page around the parser and pluginlist.

Checklist

  • Check against all themes for compatibility in both light and dark modes
  • Checked in mobile
  • Checked in IE11 and Firefox
  • Props have proper autodocs
  • Added documentation
  • Checked Code Sandbox works for the any docs 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

@elizabetdev elizabetdev mentioned this pull request Jul 3, 2020
Merged
30 tasks
@kibanamachine
Copy link

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

@snide snide changed the title [DRAFT] Markdown Format / Editor documentation + featurs [DRAFT] Markdown Format / Editor documentation + features Jul 3, 2020
@kibanamachine
Copy link

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

@kibanamachine
Copy link

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

@kibanamachine
Copy link

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

@kibanamachine
Copy link

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

@kibanamachine
Copy link

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

@kibanamachine
Copy link

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

@kibanamachine
Copy link

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

@kibanamachine
Copy link

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

@kibanamachine
Copy link

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

@snide snide changed the title [DRAFT] Markdown Format / Editor documentation + features Markdown Format / Editor documentation + features Jul 21, 2020
@snide snide marked this pull request as ready for review July 21, 2020 20:42
@snide
Copy link
Contributor Author

snide commented Jul 21, 2020

This is ready for review, but will likely need a test layer.

@snide snide requested a review from chandlerprall July 21, 2020 20:43
chandlerprall
chandlerprall suggested changes Jul 22, 2020
View reviewed changes
Copy link
Contributor

@chandlerprall chandlerprall left a comment

Choose a reason for hiding this comment

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

Love the docs structure & related changes to the components, thanks!! Couple of small things, and I'll circle back to the parsingPluginList / processingPluginList section placeholders :)

src-docs/src/views/markdown_editor/mardown_editor_example.js Outdated Show resolved Hide resolved
src-docs/src/views/markdown_editor/mardown_editor_example.js Outdated Show resolved Hide resolved
src-docs/src/views/markdown_editor/mardown_editor_example.js Outdated Show resolved Hide resolved
src-docs/src/views/markdown_editor/mardown_editor_example.js Outdated Show resolved Hide resolved
src-docs/src/views/markdown_editor/markdown_plugin_example.js Outdated Show resolved Hide resolved
src/components/markdown_editor/markdown_default_plugins.tsx Outdated Show resolved Hide resolved
src/components/markdown_editor/markdown_default_plugins.tsx Outdated Show resolved Hide resolved
src/components/markdown_editor/markdown_editor.tsx Outdated Show resolved Hide resolved
src/components/markdown_editor/markdown_format.tsx Outdated Show resolved Hide resolved
src/components/markdown_editor/markdown_format.tsx Outdated Show resolved Hide resolved
@kibanamachine
Copy link

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

@snide
Copy link
Contributor Author

snide commented Jul 27, 2020

jenkins, test this

@kibanamachine
Copy link

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

@kibanamachine
Copy link

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

@kibanamachine
Copy link

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

@kibanamachine
Copy link

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

chandlerprall
chandlerprall approved these changes Jul 28, 2020
View reviewed changes
Copy link
Contributor

@chandlerprall chandlerprall left a comment

Choose a reason for hiding this comment

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

LGTM; will merge on passing CI

@snide snide merged commit a520c68 into elastic:feature/markdown-editor Jul 28, 2020
@snide snide deleted the docs/md branch July 28, 2020 18:41
chandlerprall added a commit that referenced this pull request Aug 12, 2020
@elizabetdev @i-a-n
@snide @chandlerprall
[Feature Branch] EuiMarkdownEditor (#3522)
81f22fe 
* 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
@elizabetdev @i-a-n
@snide @chandlerprall @nyurik
[Feature Branch] EuiMarkdownEditor (#3522)
cd97f24 
* 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
Reviewers

@chandlerprall chandlerprall chandlerprall approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@snide @kibanamachine @chandlerprall @elizabetdev