[EuiMarkdownEditor] Highlight relevant toolbar button when in a matching text node

src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap

@@ -191,11 +191,30 @@ exports[`EuiMarkdownEditor custom plugins are excluded and popover is rendered 1
         }
       }
       onClickPreview={[Function]}
+      selectedNode={
+        Object {
+          "children": Array [],
+          "position": Object {
+            "end": Object {
+              "column": 1,
+              "line": 1,
+              "offset": 0,
+            },
+            "start": Object {
+              "column": 1,
+              "line": 1,
+              "offset": 0,
+            },
+          },
+          "type": "root",
+        }
+      }
       uiPlugins={Array []}
       viewMode="editing"
     >
       <div
         className="euiMarkdownEditorToolbar"
+        data-test-subj="euiMarkdownEditorToolbar"
       >
         <div
           className="euiMarkdownEditorToolbar__buttons"
@@ -214,6 +233,7 @@ exports[`EuiMarkdownEditor custom plugins are excluded and popover is rendered 1
             >
               <EuiButtonIcon
                 aria-label="Bold"
+                aria-pressed={false}
                 color="text"
                 iconType="editorBold"
                 isDisabled={false}
@@ -223,6 +243,7 @@ exports[`EuiMarkdownEditor custom plugins are excluded and popover is rendered 1
               >
                 <button
                   aria-label="Bold"
+                  aria-pressed={false}
                   className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
                   onBlur={[Function]}
                   onClick={[Function]}
@@ -262,6 +283,7 @@ exports[`EuiMarkdownEditor custom plugins are excluded and popover is rendered 1
             >
               <EuiButtonIcon
                 aria-label="Italic"
+                aria-pressed={false}
                 color="text"
                 iconType="editorItalic"
                 isDisabled={false}
@@ -271,6 +293,7 @@ exports[`EuiMarkdownEditor custom plugins are excluded and popover is rendered 1
               >
                 <button
                   aria-label="Italic"
+                  aria-pressed={false}
                   className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
                   onBlur={[Function]}
                   onClick={[Function]}
@@ -313,6 +336,7 @@ exports[`EuiMarkdownEditor custom plugins are excluded and popover is rendered 1
             >
               <EuiButtonIcon
                 aria-label="Unordered list"
+                aria-pressed={false}
                 color="text"
                 iconType="editorUnorderedList"
                 isDisabled={false}
@@ -322,6 +346,7 @@ exports[`EuiMarkdownEditor custom plugins are excluded and popover is rendered 1
               >
                 <button
                   aria-label="Unordered list"
+                  aria-pressed={false}
                   className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
                   onBlur={[Function]}
                   onClick={[Function]}
@@ -361,6 +386,7 @@ exports[`EuiMarkdownEditor custom plugins are excluded and popover is rendered 1
             >
               <EuiButtonIcon
                 aria-label="Ordered list"
+                aria-pressed={false}
                 color="text"
                 iconType="editorOrderedList"
                 isDisabled={false}
@@ -370,6 +396,7 @@ exports[`EuiMarkdownEditor custom plugins are excluded and popover is rendered 1
               >
                 <button
                   aria-label="Ordered list"
+                  aria-pressed={false}
                   className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
                   onBlur={[Function]}
                   onClick={[Function]}
@@ -409,6 +436,7 @@ exports[`EuiMarkdownEditor custom plugins are excluded and popover is rendered 1
             >
               <EuiButtonIcon
                 aria-label="Task list"
+                aria-pressed={false}
                 color="text"
                 iconType="editorChecklist"
                 isDisabled={false}
@@ -418,6 +446,7 @@ exports[`EuiMarkdownEditor custom plugins are excluded and popover is rendered 1
               >
                 <button
                   aria-label="Task list"
+                  aria-pressed={false}
                   className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
                   onBlur={[Function]}
                   onClick={[Function]}
@@ -460,6 +489,7 @@ exports[`EuiMarkdownEditor custom plugins are excluded and popover is rendered 1
             >
               <EuiButtonIcon
                 aria-label="Quote"
+                aria-pressed={false}
                 color="text"
                 iconType="quote"
                 isDisabled={false}
@@ -469,6 +499,7 @@ exports[`EuiMarkdownEditor custom plugins are excluded and popover is rendered 1
               >
                 <button
                   aria-label="Quote"
+                  aria-pressed={false}
                   className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
                   onBlur={[Function]}
                   onClick={[Function]}
@@ -508,6 +539,7 @@ exports[`EuiMarkdownEditor custom plugins are excluded and popover is rendered 1
             >
               <EuiButtonIcon
                 aria-label="Code"
+                aria-pressed={false}
                 color="text"
                 iconType="editorCodeBlock"
                 isDisabled={false}
@@ -517,6 +549,7 @@ exports[`EuiMarkdownEditor custom plugins are excluded and popover is rendered 1
               >
                 <button
                   aria-label="Code"
+                  aria-pressed={false}
                   className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
                   onBlur={[Function]}
                   onClick={[Function]}
@@ -556,6 +589,7 @@ exports[`EuiMarkdownEditor custom plugins are excluded and popover is rendered 1
             >
               <EuiButtonIcon
                 aria-label="Link"
+                aria-pressed={false}
                 color="text"
                 iconType="editorLink"
                 isDisabled={false}
@@ -565,6 +599,7 @@ exports[`EuiMarkdownEditor custom plugins are excluded and popover is rendered 1
               >
                 <button
                   aria-label="Link"
+                  aria-pressed={false}
                   className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
                   onBlur={[Function]}
                   onClick={[Function]}
@@ -690,6 +725,7 @@ exports[`EuiMarkdownEditor custom plugins are excluded and popover is rendered 1
               <textarea
                 aria-label="aria-label"
                 className="euiMarkdownEditorTextArea"
+                data-test-subj="euiMarkdownEditorTextArea"
                 id="editorId"
                 onChange={[Function]}
                 onFocus={[Function]}
@@ -1153,6 +1189,7 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
 >
   <div
     class="euiMarkdownEditorToolbar"
+    data-test-subj="euiMarkdownEditorToolbar"
   >
     <div
       class="euiMarkdownEditorToolbar__buttons"
@@ -1341,6 +1378,7 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
       <textarea
         aria-label="aria-label"
         class="euiMarkdownEditorTextArea"
+        data-test-subj="euiMarkdownEditorTextArea"
         id="editorId"
         placeholder="placeholder"
         rows="6"
@@ -1388,6 +1426,7 @@ exports[`EuiMarkdownEditor props autoExpandPreview is rendered with false 1`] =
 >
   <div
     class="euiMarkdownEditorToolbar"
+    data-test-subj="euiMarkdownEditorToolbar"
   >
     <div
       class="euiMarkdownEditorToolbar__buttons"
@@ -1576,6 +1615,7 @@ exports[`EuiMarkdownEditor props autoExpandPreview is rendered with false 1`] =
       <textarea
         aria-label="aria-label"
         class="euiMarkdownEditorTextArea"
+        data-test-subj="euiMarkdownEditorTextArea"
         id="editorId"
         rows="6"
         style="height:calc(250px);max-height:500px"
@@ -1622,6 +1662,7 @@ exports[`EuiMarkdownEditor props height is rendered in full mode 1`] = `
 >
   <div
     class="euiMarkdownEditorToolbar"
+    data-test-subj="euiMarkdownEditorToolbar"
   >
     <div
       class="euiMarkdownEditorToolbar__buttons"
@@ -1810,6 +1851,7 @@ exports[`EuiMarkdownEditor props height is rendered in full mode 1`] = `
       <textarea
         aria-label="aria-label"
         class="euiMarkdownEditorTextArea"
+        data-test-subj="euiMarkdownEditorTextArea"
         id="editorId"
         rows="6"
         style="height:100%;max-height:"
@@ -1856,6 +1898,7 @@ exports[`EuiMarkdownEditor props height is rendered with a custom size 1`] = `
 >
   <div
     class="euiMarkdownEditorToolbar"
+    data-test-subj="euiMarkdownEditorToolbar"
   >
     <div
       class="euiMarkdownEditorToolbar__buttons"
@@ -2044,6 +2087,7 @@ exports[`EuiMarkdownEditor props height is rendered with a custom size 1`] = `
       <textarea
         aria-label="aria-label"
         class="euiMarkdownEditorTextArea"
+        data-test-subj="euiMarkdownEditorTextArea"
         id="editorId"
         rows="6"
         style="height:calc(400px);max-height:500px"
@@ -2090,6 +2134,7 @@ exports[`EuiMarkdownEditor props maxHeight is rendered with a custom size 1`] =
 >
   <div
     class="euiMarkdownEditorToolbar"
+    data-test-subj="euiMarkdownEditorToolbar"
   >
     <div
       class="euiMarkdownEditorToolbar__buttons"
@@ -2278,6 +2323,7 @@ exports[`EuiMarkdownEditor props maxHeight is rendered with a custom size 1`] =
       <textarea
         aria-label="aria-label"
         class="euiMarkdownEditorTextArea"
+        data-test-subj="euiMarkdownEditorTextArea"
         id="editorId"
         rows="6"
         style="height:calc(250px);max-height:600px"
@@ -2324,6 +2370,7 @@ exports[`EuiMarkdownEditor props readOnly is set to true 1`] = `
 >
   <div
     class="euiMarkdownEditorToolbar"
+    data-test-subj="euiMarkdownEditorToolbar"
   >
     <div
       class="euiMarkdownEditorToolbar__buttons"
@@ -2522,6 +2569,7 @@ exports[`EuiMarkdownEditor props readOnly is set to true 1`] = `
       <textarea
         aria-label="aria-label"
         class="euiMarkdownEditorTextArea euiMarkdownEditorTextArea-isReadOnly"
+        data-test-subj="euiMarkdownEditorTextArea"
         id="editorId"
         readonly=""
         rows="6"

src/components/markdown_editor/markdown_editor.spec.tsx

@@ -0,0 +1,84 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+/// <reference types="../../../cypress/support"/>
+
+import React from 'react';
+import { EuiMarkdownEditor } from './index';
+
+describe('EuiMarkdownEditor', () => {
+  describe('toolbar interactions', () => {
+    it('keeps focus on the input box when clicking a disabled item', () => {
+      const value = `**bold**
+
+_italic_
+
+> quote
+
+\`inline codeblock\`
+
+[link](https://elastic.co)
+
+!{tooltip[text](help)}`;
+      cy.realMount(
+        <EuiMarkdownEditor
+          data-test-subj="test-editor"
+          aria-label="editor for cypress test"
+          value={value}
+          onChange={() => {}}
+        />
+      );
+
+      // verify all of the toolbar buttons are not selected
+      cy.get(
+        '[data-test-subj=test-editor] [data-test-subj=euiMarkdownEditorToolbar] button[aria-pressed=true]'
+      ).should('not.exist');
+
+      // Focus the editor text area for key events
+      cy.get(
+        '[data-test-subj=test-editor] [data-test-subj=euiMarkdownEditorTextArea]'
+      ).focus();
+
+      // Enter the bold node & verify
+      cy.realPress('ArrowRight');
+      cy.get(
+        '[data-test-subj=test-editor] [data-test-subj=euiMarkdownEditorToolbar] button[aria-label=Bold][aria-pressed=true]'
+      ).should('exist');
+
+      // Enter the italic node & verify
+      cy.repeatRealPress('ArrowDown', 2);
+      cy.get(
+        '[data-test-subj=test-editor] [data-test-subj=euiMarkdownEditorToolbar] button[aria-label=Italic][aria-pressed=true]'
+      ).should('exist');
+
+      // Enter the quote node & verify
+      cy.repeatRealPress('ArrowDown', 2);
+      cy.get(
+        '[data-test-subj=test-editor] [data-test-subj=euiMarkdownEditorToolbar] button[aria-label=Quote][aria-pressed=true]'
+      ).should('exist');
+
+      // Enter the inline code node & verify
+      cy.repeatRealPress('ArrowDown', 2);
+      cy.get(
+        '[data-test-subj=test-editor] [data-test-subj=euiMarkdownEditorToolbar] button[aria-label=Code][aria-pressed=true]'
+      ).should('exist');
+
+      // Enter the link node & verify
+      cy.repeatRealPress('ArrowDown', 2);
+      cy.get(
+        '[data-test-subj=test-editor] [data-test-subj=euiMarkdownEditorToolbar] button[aria-label=Link][aria-pressed=true]'
+      ).should('exist');
+
+      // Enter the tooltip node & verify
+      cy.repeatRealPress('ArrowDown', 2);
+      cy.get(
+        '[data-test-subj=test-editor] [data-test-subj=euiMarkdownEditorToolbar] button[aria-label=Tooltip][aria-pressed=true]'
+      ).should('exist');
+    });
+  });
+});

src/components/markdown_editor/markdown_editor.tsx

@@ -320,6 +320,9 @@ export const EuiMarkdownEditor = forwardRef<
 
         setSelectedNode(node);
       };
+      // `parsed` changed, which means the node at the cursor may be different
+      // e.g. from clicking a toolbar button
+      getCursorNode();
 
       const textarea = textareaRef.current!;
 

src/components/markdown_editor/markdown_editor_text_area.tsx

@@ -49,6 +49,7 @@ export const EuiMarkdownEditorTextArea = forwardRef<
     return (
       <textarea
         ref={ref}
+        data-test-subj="euiMarkdownEditorTextArea"
         style={{ height, maxHeight }}
         className={classes}
         {...rest}