[markdown] chart & tooltip plugins #3479

chandlerprall · 2020-05-14T15:21:02Z

Example Plugins

chart

!{chart}

Experimenting with syntax we'll need for more complex embeddings. Can be configured with a json string

!{chart {"palette": 2, "height": 400}}

tooltip

!{tooltip[tooltip text][anchor]}

Demonstrates re-parsing content consumed by a plugin - in this case, the anchor text can contain further markdown. I played with also re-parsing the tooltip text, and while it can be parsed without difficulty there is a limitation during the AST->rehype->React conversion where only content in the children nodes are processed. There are potential ways around this, but I'm leaving it as-is for now, and it's likely fine for the foreseeable future anyway.

!{tooltip[This is the tooltip][_Emphasized trigger text_]}

Next Steps

Consumption

Right now, a consuming app has to jump through a few hoops to add a custom plugin. It's nearly impossible to do so without injecting the plugin's parser into the default set (mutation). Now that there's a concrete example to work with I'll continue iterating on this.

Plugin architecture

As we figure out what the common configuration format we want to use, that can be better codified and some helper utilities can be created.

UI interaction

The plugin system right now supports adding a static icon button that inserts the plugin's basic markdown. Next steps is making this more interactive:

change the button's UI when the text cursor is in that plugin's markdown string
allow an intermediate step between clicking the button and injecting the content (allows for configuration)
if the text cursor is inside an existing markdown tag, allow clicking on its button to re-trigger the configuration step

chandlerprall · 2020-05-14T15:23:07Z

src/components/markdown_editor/markdown_editor.tsx

@@ -129,6 +143,40 @@ export const EuiMarkdownEditor: FunctionComponent<EuiMarkdownEditorProps> = ({
    [parsingPluginList, processingPluginList]
  );

+  // const Compiler = (tree, file) => {


this commented-out block likely transforms into something useful soon

kibanamachine · 2020-05-14T15:42:42Z

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

miukimiu

This looks great! 🎉

I just have one question. When I click the tooltip icon a !{tooltip} is added. Shouldn't be added !{tooltip[tooltip text][anchor]} instead?

chandlerprall · 2020-05-15T14:35:38Z

Good catch @miukimiu !

I've changed the internal format from [tip text][anchor] -> [anchor](tip text) as this feels a little more markdown-y to me. I've also updated the template, but left out any "autocomplete" text so it can still be injected around an existing blurb.

kibanamachine · 2020-05-15T14:54:49Z

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

snide · 2020-05-15T15:16:05Z

src-docs/src/views/markdown_editor/markdown_editor.js

+import * as MarkdownChart from './plugins/markdown_chart';
+import * as MarkdownTooltip from './plugins/markdown_tooltip';


I know this is just docs, but this wouldn't expose the plugin examples in the docs no? I know they're pretty big. Should we start making separate examples?

I'm likely thinking about docs too early. We can likely clean this up in the later PRs.

I'm likely thinking about docs too early. We can likely clean this up in the later PRs.

That ^. Tooltips likely moves to be a "default" plugin in the codebase, charts can't unless we make @elastic/charts a dependency. Finding the right boundaries & organization, then these docs can follow without a lot of re-writing.

this wouldn't expose the plugin examples in the docs no?

These imports are for the plugin definitions themselves, not doc sections. They are enabling the plugins for use within the existing docs section.

The reason I ask is because they live in src-docs. So right now you can't see how they work from the built docs site, you just see the import, but all the code you could learn from is hidden away.

Gotcha. That'll be better captured through helper utils & specific documentation. I left them in src-docs for now more as a "this isn't finalized yet" indicator than anything, so kinda purposefully obscuring 😀

thompsongl

Leaving the default tooltip (!{tooltip[]()}) unedited results in an Infinite loop error when previewed.

Probably still an open question, but what's the pattern for handling errors and/or misconfiguration? Rendering the plain text seems like an ok option. I also understand if you're not to the point where the API is settled.

chandlerprall · 2020-05-15T21:01:09Z

Empty tooltip tag error fixed.

what's the pattern for handling errors and/or misconfiguration

We'll render the plain text (how other markdown editors work), but we can emit warnings when we know why something failed like misconfigurations. Should be getting to those details before too long.

chandlerprall · 2020-05-15T21:02:11Z

src-docs/src/views/markdown_editor/plugins/markdown_chart.js

+  };
+
+  tokenizers.chart = tokenizeChart;
+  methods.splice(methods.indexOf('text'), 0, 'chart');


According to the docs, this is how you inject things so they run before the text parser https://www.npmjs.com/package/remark-parse#extending-the-parser

kibanamachine · 2020-05-15T21:21:03Z

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

snide

This looks good to me at the stage that it's at. I think I'll want to get into the weeds on the syntax format and some of the docs specifics, but it looks readible to me on how you construct a plugin. The functionality is fantastic!

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

chart & tooltip plugins

ba73b48

chandlerprall requested review from thompsongl and miukimiu May 14, 2020 15:21

chandlerprall commented May 14, 2020

View reviewed changes

chandlerprall changed the title ~~chart & tooltip plugins~~ [markdown] chart & tooltip plugins May 14, 2020

chandlerprall added the markdown editor label May 14, 2020

miukimiu approved these changes May 14, 2020

View reviewed changes

Change tooltip markdown plugin markdown format

53fed9b

snide reviewed May 15, 2020

View reviewed changes

thompsongl reviewed May 15, 2020

View reviewed changes

Fixed error with empty tooltip tag

94fcd90

chandlerprall commented May 15, 2020

View reviewed changes

snide approved these changes May 15, 2020

View reviewed changes

chandlerprall merged commit 40f9642 into elastic:markdown-editor May 16, 2020

chandlerprall deleted the markdown-editor-plugin-ui branch May 16, 2020 04:06

miukimiu mentioned this pull request May 28, 2020

[Feature Branch] EuiMarkdownEditor #3522

Merged

30 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[markdown] chart & tooltip plugins #3479

[markdown] chart & tooltip plugins #3479

chandlerprall commented May 14, 2020 •

edited

Loading

chandlerprall May 14, 2020

kibanamachine commented May 14, 2020

miukimiu left a comment

chandlerprall commented May 15, 2020

kibanamachine commented May 15, 2020

snide May 15, 2020

chandlerprall May 15, 2020 •

edited

Loading

snide May 15, 2020 •

edited

Loading

chandlerprall May 16, 2020 •

edited

Loading

thompsongl left a comment

chandlerprall commented May 15, 2020

chandlerprall May 15, 2020

kibanamachine commented May 15, 2020

snide left a comment

		import * as MarkdownChart from './plugins/markdown_chart';
		import * as MarkdownTooltip from './plugins/markdown_tooltip';

[markdown] chart & tooltip plugins #3479

[markdown] chart & tooltip plugins #3479

Conversation

chandlerprall commented May 14, 2020 • edited Loading

Example Plugins

chart

tooltip

Next Steps

Consumption

Plugin architecture

UI interaction

chandlerprall May 14, 2020

Choose a reason for hiding this comment

kibanamachine commented May 14, 2020

miukimiu left a comment

Choose a reason for hiding this comment

chandlerprall commented May 15, 2020

kibanamachine commented May 15, 2020

snide May 15, 2020

Choose a reason for hiding this comment

chandlerprall May 15, 2020 • edited Loading

Choose a reason for hiding this comment

snide May 15, 2020 • edited Loading

Choose a reason for hiding this comment

chandlerprall May 16, 2020 • edited Loading

Choose a reason for hiding this comment

thompsongl left a comment

Choose a reason for hiding this comment

chandlerprall commented May 15, 2020

chandlerprall May 15, 2020

Choose a reason for hiding this comment

kibanamachine commented May 15, 2020

snide left a comment

Choose a reason for hiding this comment

chandlerprall commented May 14, 2020 •

edited

Loading

chandlerprall May 15, 2020 •

edited

Loading

snide May 15, 2020 •

edited

Loading

chandlerprall May 16, 2020 •

edited

Loading