[EuiMarkdownEditor] Add readOnly prop

CHANGELOG.md

@@ -1,6 +1,6 @@
 ## [`main`](https://github.com/elastic/eui/tree/main)
 
-No public interface changes since `49.0.0`.
+- Added `readOnly` prop to `EuiMarkdownEditor` ([#5627](https://github.com/elastic/eui/pull/5627))
 
 ## [`49.0.0`](https://github.com/elastic/eui/tree/v49.0.0)
 

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

@@ -102,10 +102,23 @@ export const MarkdownEditorExample = {
       ],
       title: 'Base editor',
       text: (
-        <p>
-          The base editor can render basic markdown along with some built-in
-          plugins.
-        </p>
+        <>
+          <p>
+            Use the base editor to produce technical content in markdown which
+            can contain text, code, and images. Besides this default markdown
+            content, the base editor comes with built-in plugins that let you
+            add emojis, to-do lists, and tooltips.
+          </p>
+          <p>
+            Producing technical content is one of its main use cases. Another
+            one might be adding comments to a{' '}
+            <Link to="/display/comment-list">EuiCommentList</Link>. When dealing
+            with asynchronous events consider using the{' '}
+            <EuiCode>readOnly</EuiCode> prop to restrict editing during the
+            submit events. This will ensure users understand that the content
+            can no longer be changed while the comment is being submitted.
+          </p>
+        </>
       ),
       props: {
         EuiMarkdownEditor,

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

@@ -5,6 +5,9 @@ import {
   EuiSpacer,
   EuiCodeBlock,
   EuiButton,
+  EuiSwitch,
+  EuiFlexGroup,
+  EuiFlexItem,
 } from '../../../../src/components';
 
 const initialContent = `## Hello world!
@@ -16,6 +19,10 @@ The editor also ships with some built in plugins. For example it can handle chec
 - [ ] Checkboxes
 - [x] Can be filled
 - [ ] Or empty
+
+It can also handle emojis! :smile:
+
+And it can render !{tooltip[tooltips like this](Look! I'm a very helpful tooltip content!)}
 `;
 
 const dropHandlers = [
@@ -46,6 +53,13 @@ export default () => {
     setMessages(err ? [err] : messages);
     setAst(JSON.stringify(ast, null, 2));
   }, []);
+
+  const [isReadOnly, setIsReadOnly] = useState(false);
+
+  const onChange = (e) => {
+    setIsReadOnly(e.target.checked);
+  };
+
   return (
     <>
       <EuiMarkdownEditor
@@ -57,18 +71,32 @@ export default () => {
         onParse={onParse}
         errors={messages}
         dropHandlers={dropHandlers}
+        readOnly={isReadOnly}
+        initialViewMode="viewing"
       />
       <EuiSpacer size="s" />
-      <div className="eui-textRight">
-        <EuiButton
-          size="s"
-          iconType={isAstShowing ? 'eyeClosed' : 'eye'}
-          onClick={() => setIsAstShowing(!isAstShowing)}
-          fill={isAstShowing}
-        >
-          {isAstShowing ? 'Hide editor AST' : 'Show editor AST'}
-        </EuiButton>
-      </div>
+      <EuiFlexGroup alignItems="center">
+        <EuiFlexItem grow={true}>
+          <EuiSwitch
+            label="Read-only"
+            checked={isReadOnly}
+            onChange={onChange}
+          />
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiButton
+            size="s"
+            iconType={isAstShowing ? 'eyeClosed' : 'eye'}
+            onClick={() => setIsAstShowing(!isAstShowing)}
+            fill={isAstShowing}
+          >
+            {isAstShowing ? 'Hide editor AST' : 'Show editor AST'}
+          </EuiButton>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+
+      <EuiSpacer size="s" />
+
       {isAstShowing && <EuiCodeBlock language="json">{ast}</EuiCodeBlock>}
     </>
   );

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

@@ -4385,3 +4385,249 @@ exports[`EuiMarkdownEditor props maxHeight is rendered with a custom size 1`] =
   </div>
 </div>
 `;
+
+exports[`EuiMarkdownEditor props readOnly is set to true 1`] = `
+<div
+  class="euiMarkdownEditor testClass1 testClass2"
+  data-test-subj="test subject string"
+>
+  <div
+    class="euiMarkdownEditorToolbar"
+  >
+    <div
+      class="euiMarkdownEditorToolbar__buttons"
+    >
+      <span
+        class="euiToolTipAnchor"
+      >
+        <button
+          aria-label="Bold"
+          class="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
+          disabled=""
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            color="inherit"
+            data-euiicon-type="editorBold"
+          />
+        </button>
+      </span>
+      <span
+        class="euiToolTipAnchor"
+      >
+        <button
+          aria-label="Italic"
+          class="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
+          disabled=""
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            color="inherit"
+            data-euiicon-type="editorItalic"
+          />
+        </button>
+      </span>
+      <span
+        class="euiMarkdownEditorToolbar__divider"
+      />
+      <span
+        class="euiToolTipAnchor"
+      >
+        <button
+          aria-label="Unordered list"
+          class="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
+          disabled=""
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            color="inherit"
+            data-euiicon-type="editorUnorderedList"
+          />
+        </button>
+      </span>
+      <span
+        class="euiToolTipAnchor"
+      >
+        <button
+          aria-label="Ordered list"
+          class="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
+          disabled=""
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            color="inherit"
+            data-euiicon-type="editorOrderedList"
+          />
+        </button>
+      </span>
+      <span
+        class="euiToolTipAnchor"
+      >
+        <button
+          aria-label="Task list"
+          class="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
+          disabled=""
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            color="inherit"
+            data-euiicon-type="MarkdownCheckmark"
+          />
+        </button>
+      </span>
+      <span
+        class="euiMarkdownEditorToolbar__divider"
+      />
+      <span
+        class="euiToolTipAnchor"
+      >
+        <button
+          aria-label="Quote"
+          class="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
+          disabled=""
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            color="inherit"
+            data-euiicon-type="quote"
+          />
+        </button>
+      </span>
+      <span
+        class="euiToolTipAnchor"
+      >
+        <button
+          aria-label="Code"
+          class="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
+          disabled=""
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            color="inherit"
+            data-euiicon-type="editorCodeBlock"
+          />
+        </button>
+      </span>
+      <span
+        class="euiToolTipAnchor"
+      >
+        <button
+          aria-label="Link"
+          class="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
+          disabled=""
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            color="inherit"
+            data-euiicon-type="editorLink"
+          />
+        </button>
+      </span>
+      <span
+        class="euiMarkdownEditorToolbar__divider"
+      />
+      <span
+        class="euiToolTipAnchor"
+      >
+        <button
+          aria-label="Tooltip"
+          class="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
+          disabled=""
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            color="inherit"
+            data-euiicon-type="editorComment"
+          />
+        </button>
+      </span>
+    </div>
+    <button
+      class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiButtonEmpty-isDisabled"
+      disabled=""
+      type="button"
+    >
+      <span
+        class="euiButtonContent euiButtonEmpty__content"
+      >
+        <span
+          class="euiButtonContent__icon"
+          color="inherit"
+          data-euiicon-type="eye"
+        />
+        <span
+          class="euiButtonEmpty__text"
+        >
+          Preview
+        </span>
+      </span>
+    </button>
+  </div>
+  <div
+    class="euiMarkdownEditor__toggleContainer"
+    style="height:calc(100% - 0px)"
+  >
+    <div
+      class="euiMarkdownEditorDropZone"
+    >
+      <textarea
+        aria-label="aria-label"
+        class="euiMarkdownEditorTextArea euiMarkdownEditorTextArea-isReadOnly"
+        id="editorId"
+        readonly=""
+        rows="6"
+        style="height:calc(250px);max-height:500px"
+      />
+      <div
+        class="euiMarkdownEditorFooter"
+      >
+        <div
+          class="euiMarkdownEditorFooter__actions"
+        />
+        <span
+          class="euiToolTipAnchor"
+        >
+          <button
+            aria-label="Show markdown help"
+            class="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--small euiMarkdownEditorFooter__helpButton"
+            disabled=""
+            type="button"
+          >
+            <span
+              aria-hidden="true"
+              class="euiButtonIcon__icon"
+              color="inherit"
+              data-euiicon-type="MarkdownLogo"
+            />
+          </button>
+        </span>
+      </div>
+      <input
+        autocomplete="off"
+        multiple=""
+        style="display:none"
+        tabindex="-1"
+        type="file"
+      />
+    </div>
+  </div>
+</div>
+`;

src/components/markdown_editor/_markdown_editor_preview.scss

@@ -6,3 +6,15 @@
   border: $euiBorderThin;
   padding: $euiSizeM;
 }
+
+.euiMarkdownEditorPreview-isReadOnly {
+  // overrides cursor pointer to better indicate that checkboxes are not clickable
+  .euiCheckbox__input ~ .euiCheckbox__label {
+    cursor: default;
+  }
+
+  // maintains the initial color on click to enforce that clicks are not doing anything
+  .euiCheckbox__input:focus:not(:checked) + .euiCheckbox__square {
+    border-color: $euiFormCustomControlBorderColor;
+  }
+}

src/components/markdown_editor/_markdown_editor_text_area.scss

@@ -32,3 +32,13 @@
     background-size: 100% 100%;
   }
 }
+
+.euiMarkdownEditorTextArea-isReadOnly {
+  background: $euiFormBackgroundReadOnlyColor;
+  cursor: unset;
+
+  &:focus,
+  .euiMarkdownEditor:focus-within & {
+    background: none;
+  }
+}