[Markdown editor] drag and drop api, functionality by chandlerprall · Pull Request #3748 · elastic/eui

chandlerprall · 2020-07-15T16:46:00Z

Summary

Adds proper drag&drop handling to the markdown editor.

added support to the editor for processing drop events
example specifies a drop handler to insert image markdown for JPGs

There is some clumsiness around the text insertion as it naively injects the markdown string at the cursor location. Next steps are to properly allow e.g. block inserts

Checklist

~~- [ ] Check against all themes for compatibility in both light and dark modes~~
- [ ] Checked in mobile

Checked in Safari 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~~

kibanamachine · 2020-07-15T17:25:39Z

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

elizabetdev · 2020-07-16T17:18:52Z

Hi @chandlerprall,

What do you think of displaying the "can't accept this file / file not supported" case next to the attachment icon?

With errors

But then I was thinking what would happen if we have errors? This would create a weird interaction. The text suddenly appear in the middle of the icons and push the errors to the right... 🤔

So we could omit the errors in case there are a few.

And once the user focus the text area the "file not supported" disappears:

What do you think?

chandlerprall · 2020-07-16T21:36:20Z

I like it! Any dragndrop errors would happen apart from syntax errors, so it wouldn't suddenly be displaying both. I don't think it would provide any confusion?

Do we want to leave the message around after the drop is over? (either by moving mouse out, or by attempting the drop on the component). We would need to for that tooltip, but it feels a little off as well to just leave an error message around that the user can't dismiss.

One thing I meant to add in the original post: we can know the MIME type of the unsupported file, though not its extension. E.g. we could message "2 files unsupported: image/gif text/csv". Might be too cluttered though.

The tooltip, if we go that way, can be populated by the file handlers so listing extensions there would be okay.

elizabetdev · 2020-07-20T16:07:04Z

If we click the error, retry to attach, or focus the text area the error should go away.

chandlerprall · 2020-07-23T16:00:31Z

@miukimiu I've pushed the error display. Only issue I'm not sure how to resolve is the upload icon jumps to the right when there is an error.

kibanamachine · 2020-07-23T16:18:59Z

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

elizabetdev · 2020-07-23T16:27:34Z

@chandlerprall I'll take a look! 👍

kibanamachine · 2020-07-23T21:18:50Z

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

kibanamachine · 2020-07-27T14:56:54Z

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

chandlerprall · 2020-07-28T16:32:33Z

@miukimiu Safari & Firefox don't highlight as expected when dropping files:

Firefox highlights as green for supported files, as expected, but does not turn red for unsupported
Safari turns green for both supported & unsupported. It also remains green after the drop action if the file was unsupported.

src/components/markdown_editor/markdown_editor_footer.tsx

elizabetdev · 2020-07-28T18:51:22Z

@chandlerprall I'm taking a look.

…rag-n-drop

chandlerprall · 2020-07-28T21:02:10Z

I've merged the base markdown editor branch in, so the doc pages have moved.

…com/chandlerprall/eui into feature/markdown-editor-drag-n-drop

kibanamachine · 2020-07-28T21:31:27Z

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

myasonik

Did a quick a11y test — everything seems pretty good!

Tested dragging and dropping accepted and not accepted files. Tested keyboard controls to make sure nothing was broken. (Only tested in Chromium right now.)

Only thing I would recommend that could help the experience some, is to highlight the text that was inserted. This will make finding it much easier with a screen reader (and likely for not-screen reader users as well).

elizabetdev · 2020-07-29T09:25:05Z

@chandlerprall,
I've been playing around with the styles and created a PR with the changes. But there are a few browsers inconsistencies: chandlerprall#14

Drag and drop styles

kibanamachine · 2020-07-29T14:16:12Z

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

chandlerprall · 2020-07-29T14:28:17Z

The following code that starts on line 86 of the markdown_editor_drop_zone.tsx makes the drag and drop file not accepted don't work on Safari.

I've removed that code; it means the file selection modal doesn't limit the file choices, but now all browsers react to all combinations of supported/unsupported file drops the same.

About Safari not turning red/disabled when dragging unsupported files, turns out Safari does not provide items or files for us to inspect during the drag operation, so it's impossible to determine success/failure at that point. 😞

…iles

kibanamachine · 2020-07-29T14:55:16Z

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

thompsongl

Tested with the docs deployment in Chrome, Firefox, and Safari. Noted differences confirmed.

thompsongl · 2020-07-29T17:34:54Z

src/components/markdown_editor/markdown_editor_footer.tsx

+  const ariaLabels = {
+    uploadingFiles: useEuiI18n(
+      'euiMarkdownEditorFooter.uploadingFiles',
+      'Uploading files'
+    ),
+    openUploadModal: useEuiI18n(
+      'euiMarkdownEditorFooter.openUploadModal',
+      'Open upload files modal'
+    ),
+    showSyntaxErrors: useEuiI18n(
+      'euiMarkdownEditorFooter.showSyntaxErrors',
+      'Show errors'
+    ),
+    showMarkdownHelp: useEuiI18n(
+      'euiMarkdownEditorFooter.showMarkdownHelp',
+      'Show markdown help'
+    ),
+  };


useEuiI18n 🙌

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

chandlerprall added 2 commits July 15, 2020 10:32

Initial markdown drag-n-drop api

0b8bf90

Properly insert multiple drag-and-drop results

80aeb4a

chandlerprall added the markdown editor label Jul 15, 2020

chandlerprall changed the base branch from master to feature/markdown-editor July 15, 2020 16:47

Update logic for markdown supported files message display

1f39c01

disable upload interaction if no drop handlers are provided

5fd6766

Upload error button styles

5e1537f

chandlerprall marked this pull request as ready for review July 28, 2020 16:25

chandlerprall requested review from myasonik and thompsongl July 28, 2020 16:28

thompsongl reviewed Jul 28, 2020

View reviewed changes

src/components/markdown_editor/markdown_editor_footer.tsx Outdated Show resolved Hide resolved

src/components/markdown_editor/markdown_editor_footer.tsx Outdated Show resolved Hide resolved

chandlerprall added 2 commits July 28, 2020 14:47

Merge branch 'feature/markdown-editor' into feature/markdown-editor-d…

55aabfe

…rag-n-drop

pr feedback

5c26601

chandlerprall and others added 3 commits July 28, 2020 15:07

Only accept supported file types in the markdown file selection dialog

520ecdc

Drag and drop animation

c099e48

Merge branch 'feature/markdown-editor-drag-n-drop' of https://github.…

13102f1

…com/chandlerprall/eui into feature/markdown-editor-drag-n-drop

myasonik approved these changes Jul 28, 2020

View reviewed changes

small changes

763a09e

Merge pull request #14 from miukimiu/feature/markdown-editor-drag-n-drop

efefc77

Drag and drop styles

Add some cross-browser stability when dealing with unsupported drop f…

8edb126

…iles

elizabetdev mentioned this pull request Jul 29, 2020

[Feature Branch] EuiMarkdownEditor #3522

Merged

30 tasks

chandlerprall requested a review from thompsongl July 29, 2020 15:29

thompsongl approved these changes Jul 29, 2020

View reviewed changes

chandlerprall merged commit b84f0dd into elastic:feature/markdown-editor Jul 29, 2020

chandlerprall deleted the feature/markdown-editor-drag-n-drop branch July 29, 2020 19:35

cnasikas mentioned this pull request Apr 29, 2023

[Cases] Add the ability to upload and add images in the markdown editor elastic/kibana#155361

Open

4 tasks

Conversation

chandlerprall commented Jul 15, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Checklist

Uh oh!

kibanamachine commented Jul 15, 2020

Uh oh!

elizabetdev commented Jul 16, 2020

With errors

Uh oh!

chandlerprall commented Jul 16, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

elizabetdev commented Jul 20, 2020

Uh oh!

chandlerprall commented Jul 23, 2020

Uh oh!

kibanamachine commented Jul 23, 2020

Uh oh!

elizabetdev commented Jul 23, 2020

Uh oh!

kibanamachine commented Jul 23, 2020

Uh oh!

kibanamachine commented Jul 27, 2020

Uh oh!

chandlerprall commented Jul 28, 2020

Uh oh!

Uh oh!

Uh oh!

elizabetdev commented Jul 28, 2020

Uh oh!

chandlerprall commented Jul 28, 2020

Uh oh!

kibanamachine commented Jul 28, 2020

Uh oh!

myasonik left a comment

Choose a reason for hiding this comment

Uh oh!

elizabetdev commented Jul 29, 2020

Uh oh!

kibanamachine commented Jul 29, 2020

Uh oh!

chandlerprall commented Jul 29, 2020

Uh oh!

kibanamachine commented Jul 29, 2020

Uh oh!

thompsongl left a comment

Choose a reason for hiding this comment

Uh oh!

thompsongl Jul 29, 2020

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

chandlerprall commented Jul 15, 2020 •

edited

Loading

chandlerprall commented Jul 16, 2020 •

edited

Loading