[EuiMarkdownEditor] Markdown mentions

[chandlerprall]

DRAFT PROPOSAL

SPEC: #5829

Curent statuses:

• in design
• api exploration
• ux exploration
• did I mention (ha!) exploration

Temporary caveats:

• can't customize anchor ("@" is hard coded right now)
• text cursor has to be inside the name to trigger (due to avoiding fancy logic in the parser, or maybe the selectednode detection, to handle this)
• only the most basic styling in place, because Elizabet is going to work magic that I cannot
• the popover is positioned at the bottom of the editor instead of at the cursor position (needs https://stackoverflow.com/questions/9012835/find-caret-position-in-textarea-in-pixels or similar)
• options list must be present at build, and hard-typed to EuiSelectableProps['options'] - we'll need to allow async discovery and not tie it directory to that prop type

Summary

markdown_mentions_prototype.mov

Given a configuration,

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

const parsingPlugins = getDefaultEuiMarkdownParsingPlugins();
const processingPlugins = getDefaultEuiMarkdownProcessingPlugins();
const uiPlugins = getDefaultEuiMarkdownUiPlugins();

const mentionsConfig = {
  options: [
    { label: 'miukimiu', data: { first: 'Elizabet' } },
    { label: 'chandlerprall', data: { first: 'Chandler' } },
    { label: 'thompsongl', data: { first: 'Greg' } },
    { label: 'cchaos', data: { first: 'Caroline' } },
    { label: '1copenut', data: { first: 'Trevor' } },
    { label: 'constancecchen', data: { first: 'Constance' } },
    { label: 'snide', data: { first: 'Dave' } },
  ],
};

parsingPlugins.push([MarkdownMentions.parser, mentionsConfig]);
processingPlugins[1][1].components.mentionsPlugin = MarkdownMentions.renderer;
uiPlugins.push(MarkdownMentions.plugin);

this parses @... as a mentionsPlugin node, passing the configuration options to an EuiSelectable while the textarea retains focus. The popover component attaches keyboard listeners to the textarea to handle up/down arrows, enter, and escape keys to manipulate the selectable component. The renderer renders the mentioned name and, if it matches a config option, adds the first name value as a tooltip.

Checklist

Checklist

• Checked in both light and dark modes
• Checked in mobile
• Checked in Chrome, Safari, Edge, and Firefox
• Props have proper autodocs and playground toggles
• Added documentation
• Checked Code Sandbox works for any docs examples
• Added or updated jest and cypress tests
• Checked for breaking changes and labeled appropriately
• Checked for accessibility including keyboard-only and screenreader modes
• Updated the Figma library counterpart
• A changelog entry exists and is marked appropriately

[kibanamachine]

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

[kibanamachine]

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

[kibanamachine]

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

[kibanamachine]

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