migrate to new shared ux markdown (#176478)

## Summary

Closes https://github.com/elastic/kibana/issues/174290

*Breaking Changes*
- Markdown document will only render valid markdown markup, this implies
that previous behaviour where html tags would render as text is no
longer supported and such html tag will be stripped out.

<!-- ### Checklist

Delete any items that are not applicable to this PR.

- [ ] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)
- [ ]
[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)
was added for features that require explanation or tutorials
- [ ] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [ ] [Flaky Test
Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was
used on any tests changed
- [ ] Any UI touched in this PR is usable by keyboard only (learn more
about [keyboard accessibility](https://webaim.org/techniques/keyboard/))
- [ ] Any UI touched in this PR does not create any new axe failures
(run axe in browser:
[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),
[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))
- [ ] If a plugin configuration key changed, check if it needs to be
allowlisted in the cloud and added to the [docker
list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)
- [ ] This renders correctly on smaller devices using a responsive
layout. (You can test this [in your
browser](https://www.browserstack.com/guide/responsive-testing-on-local-server))
- [ ] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)


### Risk Matrix

Delete this section if it is not applicable to this PR.

Before closing this PR, invite QA, stakeholders, and other developers to
identify risks that should be tested prior to the change/feature
release.

When forming the risk matrix, consider some of the following examples
and how they may potentially impact the change:

| Risk | Probability | Severity | Mitigation/Notes |

|---------------------------|-------------|----------|-------------------------|
| Multiple Spaces&mdash;unexpected behavior in non-default Kibana Space.
| Low | High | Integration tests will verify that all features are still
supported in non-default Kibana Space and when user switches between
spaces. |
| Multiple nodes&mdash;Elasticsearch polling might have race conditions
when multiple Kibana nodes are polling for the same tasks. | High | Low
| Tasks are idempotent, so executing them multiple times will not result
in logical error, but will degrade performance. To test for this case we
add plenty of unit tests around this logic and document manual testing
procedure. |
| Code should gracefully handle cases when feature X or plugin Y are
disabled. | Medium | High | Unit tests will verify that any feature flag
or plugin combination still results in our service operational. |
| [See more potential risk
examples](https://github.com/elastic/kibana/blob/main/RISK_MATRIX.mdx) |


### For maintainers

- [ ] This was checked for breaking API changes and was [labeled
appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)
-->

packages/shared-ux/markdown/impl/__snapshots__/markdown.test.tsx.snap

@@ -1,247 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`shared ux markdown component renders for editor 1`] = `
-<div
-  class="euiMarkdownEditor euiMarkdownEditor--fullHeight"
->
-  <div
-    class="euiMarkdownEditorToolbar"
-    data-test-subj="euiMarkdownEditorToolbar"
-  >
-    <div
-      class="euiMarkdownEditorToolbar__buttons"
-    >
-      <span
-        class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
-      >
-        <button
-          aria-label="Bold"
-          class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
-          data-test-subj="euiMarkdownEditorToolbarButton"
-          type="button"
-        >
-          <span
-            aria-hidden="true"
-            class="euiButtonIcon__icon"
-            color="inherit"
-            data-euiicon-type="editorBold"
-          />
-        </button>
-      </span>
-      <span
-        class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
-      >
-        <button
-          aria-label="Italic"
-          class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
-          data-test-subj="euiMarkdownEditorToolbarButton"
-          type="button"
-        >
-          <span
-            aria-hidden="true"
-            class="euiButtonIcon__icon"
-            color="inherit"
-            data-euiicon-type="editorItalic"
-          />
-        </button>
-      </span>
-      <span
-        class="euiMarkdownEditorToolbar__divider"
-      />
-      <span
-        class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
-      >
-        <button
-          aria-label="Unordered list"
-          class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
-          data-test-subj="euiMarkdownEditorToolbarButton"
-          type="button"
-        >
-          <span
-            aria-hidden="true"
-            class="euiButtonIcon__icon"
-            color="inherit"
-            data-euiicon-type="editorUnorderedList"
-          />
-        </button>
-      </span>
-      <span
-        class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
-      >
-        <button
-          aria-label="Ordered list"
-          class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
-          data-test-subj="euiMarkdownEditorToolbarButton"
-          type="button"
-        >
-          <span
-            aria-hidden="true"
-            class="euiButtonIcon__icon"
-            color="inherit"
-            data-euiicon-type="editorOrderedList"
-          />
-        </button>
-      </span>
-      <span
-        class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
-      >
-        <button
-          aria-label="Task list"
-          class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
-          data-test-subj="euiMarkdownEditorToolbarButton"
-          type="button"
-        >
-          <span
-            aria-hidden="true"
-            class="euiButtonIcon__icon"
-            color="inherit"
-            data-euiicon-type="editorChecklist"
-          />
-        </button>
-      </span>
-      <span
-        class="euiMarkdownEditorToolbar__divider"
-      />
-      <span
-        class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
-      >
-        <button
-          aria-label="Quote"
-          class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
-          data-test-subj="euiMarkdownEditorToolbarButton"
-          type="button"
-        >
-          <span
-            aria-hidden="true"
-            class="euiButtonIcon__icon"
-            color="inherit"
-            data-euiicon-type="quote"
-          />
-        </button>
-      </span>
-      <span
-        class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
-      >
-        <button
-          aria-label="Code"
-          class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
-          data-test-subj="euiMarkdownEditorToolbarButton"
-          type="button"
-        >
-          <span
-            aria-hidden="true"
-            class="euiButtonIcon__icon"
-            color="inherit"
-            data-euiicon-type="editorCodeBlock"
-          />
-        </button>
-      </span>
-      <span
-        class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
-      >
-        <button
-          aria-label="Link"
-          class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
-          data-test-subj="euiMarkdownEditorToolbarButton"
-          type="button"
-        >
-          <span
-            aria-hidden="true"
-            class="euiButtonIcon__icon"
-            color="inherit"
-            data-euiicon-type="editorLink"
-          />
-        </button>
-      </span>
-      <span
-        class="euiMarkdownEditorToolbar__divider"
-      />
-      <span
-        class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
-      >
-        <button
-          aria-label="Tooltip"
-          class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
-          data-test-subj="euiMarkdownEditorToolbarButton"
-          type="button"
-        >
-          <span
-            aria-hidden="true"
-            class="euiButtonIcon__icon"
-            color="inherit"
-            data-euiicon-type="editorComment"
-          />
-        </button>
-      </span>
-    </div>
-    <button
-      class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-s-empty-text"
-      data-test-subj="markdown_editor_preview_button"
-      type="button"
-    >
-      <span
-        class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
-      >
-        <span
-          color="inherit"
-          data-euiicon-type="eye"
-        />
-        <span
-          class="eui-textTruncate euiButtonEmpty__text"
-        >
-          Preview
-        </span>
-      </span>
-    </button>
-  </div>
-  <div
-    class="euiMarkdownEditor__toggleContainer"
-    style="height:calc(100% - 0px)"
-  >
-    <div
-      class="euiMarkdownEditorDropZone"
-      role="button"
-    >
-      <textarea
-        aria-label="markdown component"
-        class="euiMarkdownEditorTextArea"
-        data-test-subj="euiMarkdownEditorTextArea"
-        id="generated-id"
-        placeholder=""
-        rows="6"
-        style="height:100%"
-      />
-      <div
-        class="euiMarkdownEditorFooter"
-      >
-        <div
-          class="euiMarkdownEditorFooter__actions"
-        />
-        <span
-          class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
-        >
-          <button
-            aria-label="Show markdown help"
-            class="euiButtonIcon euiMarkdownEditorFooter__helpButton emotion-euiButtonIcon-s-empty-text"
-            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>
-`;

packages/shared-ux/markdown/impl/jest.config.js

@@ -10,4 +10,5 @@ module.exports = {
   preset: '@kbn/test',
   rootDir: '../../../..',
   roots: ['<rootDir>/packages/shared-ux/markdown/impl'],
+  setupFilesAfterEnv: ['<rootDir>/packages/shared-ux/markdown/impl/setup_tests.ts'],
 };

packages/shared-ux/markdown/impl/markdown.test.tsx

@@ -8,24 +8,29 @@
 
 import React from 'react';
 import { Markdown } from './markdown';
-import { render } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 
 describe('shared ux markdown component', () => {
-  it('renders for editor', () => {
-    const component = render(<Markdown readOnly={false} />);
-    expect(component).toMatchSnapshot();
+  it('renders markdown editor by default', () => {
+    render(<Markdown />);
+    expect(screen.getByTestId('euiMarkdownEditorToolbar')).toBeInTheDocument();
+  });
+
+  it('renders markdown editor with tooltip action button when the prop `enableTooltipSupport` is true', () => {
+    render(<Markdown enableTooltipSupport={true} />);
+
+    expect(screen.getByLabelText('Tooltip', { selector: 'button' })).toBeInTheDocument();
   });
 
   it('renders for displaying a readonly message', () => {
-    const component = render(<Markdown readOnly markdownContent="error message" />);
-    expect(component.text()).toContain('error message');
+    render(<Markdown markdownContent="error message" readOnly />);
+    expect(screen.queryByTestId('euiMarkdownEditorToolbar')).not.toBeInTheDocument();
+    expect(screen.getByText(/error message/i)).toBeInTheDocument();
   });
 
   it('will not render EuiMarkdownFormat when readOnly false and markdownContent specified', () => {
     const exampleMarkdownContent = 'error';
-    const component = render(
-      <Markdown readOnly={false} markdownContent={exampleMarkdownContent} />
-    );
-    expect(component.has('EuiMarkdownEditor')).toBeTruthy();
+    render(<Markdown markdownContent={exampleMarkdownContent} />);
+    expect(screen.getByTestId('euiMarkdownEditorToolbar')).toBeInTheDocument();
   });
 });

packages/shared-ux/markdown/impl/markdown.tsx

@@ -11,18 +11,29 @@ import {
   EuiMarkdownEditor,
   EuiMarkdownEditorProps,
   EuiMarkdownFormat,
-  getDefaultEuiMarkdownProcessingPlugins,
+  euiMarkdownLinkValidator,
+  getDefaultEuiMarkdownPlugins,
 } from '@elastic/eui';
 import React, { useState } from 'react';
+import { useEffect } from 'react';
 
 export type MarkdownProps = Partial<
   Omit<EuiMarkdownEditorProps, 'editorId' | 'uiPlugins' | 'markdownFormatProps'>
 > & {
   /**
    * @param readOnly is needed to differentiate where markdown is used as a presentation of error messages
-   * This was previous the MarkdownSimple component
+   * This was previous the MarkdownSimple component, it's default value is false
    */
-  readOnly: boolean;
+  readOnly?: boolean;
+  enableTooltipSupport?: boolean;
+  /**
+   * allow opt in to default EUI link validation behavior, see {@link https://eui.elastic.co/#/editors-syntax/markdown-plugins#link-validation-security}
+   */
+  validateLinks?: boolean;
+  /**
+   * provides a way to signal to a parent component that the component rendered successfully
+   */
+  onRender?: () => void;
   defaultValue?: string;
   markdownContent?: string;
   ariaLabelContent?: string;
@@ -35,20 +46,40 @@ export type MarkdownProps = Partial<
 
 export const Markdown = ({
   ariaLabelContent,
-  readOnly,
   markdownContent,
   children,
+  className,
+  onRender,
   openLinksInNewTab = true,
   defaultValue = '',
   placeholder = '',
   height = 'full',
+  readOnly = false,
+  enableTooltipSupport = false,
+  validateLinks = false,
+  ...restProps
 }: MarkdownProps) => {
   const [value, setValue] = useState(defaultValue);
 
+  useEffect(() => {
+    // onRender will be called after each render to signal, that we are done with rendering.
+    onRender?.();
+  }, [onRender]);
+
+  const { parsingPlugins, processingPlugins, uiPlugins } = getDefaultEuiMarkdownPlugins({
+    exclude: enableTooltipSupport ? undefined : ['tooltip'],
+  });
+
   // openLinksInNewTab functionality from https://codesandbox.io/s/relaxed-yalow-hy69r4?file=/demo.js:482-645
-  const processingPlugins = getDefaultEuiMarkdownProcessingPlugins();
   processingPlugins[1][1].components.a = (props) => <EuiLink {...props} target="_blank" />;
 
+  const _parsingPlugins = validateLinks
+    ? parsingPlugins
+    : // @ts-expect-error
+      parsingPlugins.filter(([plugin]) => {
+        return plugin !== euiMarkdownLinkValidator;
+      });
+
   // Render EuiMarkdownFormat when readOnly set to true
   if (readOnly) {
     if (!children && !markdownContent) {
@@ -56,8 +87,11 @@ export const Markdown = ({
     }
     return (
       <EuiMarkdownFormat
+        className={className}
         aria-label={ariaLabelContent ?? 'markdown component'}
+        parsingPluginList={_parsingPlugins}
         processingPluginList={openLinksInNewTab ? processingPlugins : undefined}
+        data-test-subj={restProps['data-test-subj']}
       >
         {children ?? markdownContent!}
       </EuiMarkdownFormat>
@@ -67,12 +101,16 @@ export const Markdown = ({
   // Otherwise render the Markdown Editor if readOnly false
   return (
     <EuiMarkdownEditor
+      className={className}
       aria-label={ariaLabelContent ?? 'markdown component'}
       placeholder={placeholder}
       value={value}
       onChange={setValue}
       height={height}
+      uiPlugins={uiPlugins}
+      parsingPluginList={_parsingPlugins}
       processingPluginList={openLinksInNewTab ? processingPlugins : undefined}
+      data-test-subj={restProps['data-test-subj']}
     />
   );
 };

packages/shared-ux/markdown/impl/setup_tests.ts

@@ -0,0 +1,10 @@
+/*
+ * 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.
+ */
+
+// eslint-disable-next-line import/no-extraneous-dependencies
+import '@testing-library/jest-dom';

src/plugins/controls/public/control_group/component/control_error_component.tsx

@@ -10,7 +10,7 @@ import React, { useState } from 'react';
 
 import { EuiButtonEmpty, EuiPopover } from '@elastic/eui';
 import { FormattedMessage, I18nProvider } from '@kbn/i18n-react';
-import { Markdown } from '@kbn/kibana-react-plugin/public';
+import { Markdown } from '@kbn/shared-ux-markdown';
 
 interface ControlErrorProps {
   error: Error | string;
@@ -45,11 +45,9 @@ export const ControlError = ({ error }: ControlErrorProps) => {
         className="errorEmbeddableCompact__popover"
         closePopover={() => setPopoverOpen(false)}
       >
-        <Markdown
-          markdown={errorMessage}
-          openLinksInNewTab={true}
-          data-test-subj="errorMessageMarkdown"
-        />
+        <Markdown data-test-subj="errorMessageMarkdown" readOnly>
+          {errorMessage}
+        </Markdown>
       </EuiPopover>
     </I18nProvider>
   );

src/plugins/controls/tsconfig.json

@@ -38,6 +38,7 @@
     "@kbn/core-mount-utils-browser",
     "@kbn/react-kibana-mount",
     "@kbn/react-kibana-context-theme",
+    "@kbn/shared-ux-markdown",
   ],
   "exclude": [
     "target/**/*",

src/plugins/discover/public/application/context/hooks/use_context_app_fetch.tsx

@@ -8,7 +8,7 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import { i18n } from '@kbn/i18n';
 import { toMountPoint } from '@kbn/react-kibana-mount';
-import { MarkdownSimple } from '@kbn/kibana-react-plugin/public';
+import { Markdown } from '@kbn/shared-ux-markdown';
 import type { DataView } from '@kbn/data-views-plugin/public';
 import { SortDirection } from '@kbn/data-plugin/public';
 import type { DataTableRecord } from '@kbn/discover-utils/types';
@@ -105,7 +105,7 @@ export function useContextAppFetch({
       setState(createError('anchorStatus', FailureReason.UNKNOWN, error));
       toastNotifications.addDanger({
         title: errorTitle,
-        text: toMountPoint(<MarkdownSimple>{error.message}</MarkdownSimple>, {
+        text: toMountPoint(<Markdown readOnly>{error.message}</Markdown>, {
           theme: services.core.theme,
           i18n: services.core.i18n,
         }),
@@ -160,7 +160,7 @@ export function useContextAppFetch({
         setState(createError(statusKey, FailureReason.UNKNOWN, error));
         toastNotifications.addDanger({
           title: errorTitle,
-          text: toMountPoint(<MarkdownSimple>{error.message}</MarkdownSimple>, {
+          text: toMountPoint(<Markdown readOnly>{error.message}</Markdown>, {
             theme: services.core.theme,
             i18n: services.core.i18n,
           }),

src/plugins/discover/public/application/view_alert/view_alert_utils.tsx

@@ -16,7 +16,7 @@ import type { Rule } from '@kbn/alerting-plugin/common';
 import type { RuleTypeParams } from '@kbn/alerting-plugin/common';
 import { ISearchSource, SerializedSearchSourceFields, getTime } from '@kbn/data-plugin/common';
 import type { DataPublicPluginStart } from '@kbn/data-plugin/public';
-import { MarkdownSimple } from '@kbn/kibana-react-plugin/public';
+import { Markdown } from '@kbn/shared-ux-markdown';
 import { toMountPoint } from '@kbn/react-kibana-mount';
 import { Filter } from '@kbn/es-query';
 import { DiscoverAppLocatorParams } from '../../../common/app_locator';
@@ -84,7 +84,7 @@ export const getAlertUtils = (
       });
       toastNotifications.addDanger({
         title: errorTitle,
-        text: toMountPoint(<MarkdownSimple>{error.message}</MarkdownSimple>, {
+        text: toMountPoint(<Markdown readOnly>{error.message}</Markdown>, {
           theme: core.theme,
           i18n: core.i18n,
         }),
@@ -107,7 +107,7 @@ export const getAlertUtils = (
       });
       toastNotifications.addDanger({
         title: errorTitle,
-        text: toMountPoint(<MarkdownSimple>{error.message}</MarkdownSimple>, {
+        text: toMountPoint(<Markdown markdownContent={error.message} readOnly />, {
           theme: core.theme,
           i18n: core.i18n,
         }),

src/plugins/discover/tsconfig.json

@@ -83,7 +83,8 @@
     "@kbn/deeplinks-observability",
     "@kbn/esql-utils",
     "@kbn/managed-content-badge",
-    "@kbn/deeplinks-analytics"
+    "@kbn/deeplinks-analytics",
+    "@kbn/shared-ux-markdown"
   ],
   "exclude": ["target/**/*"]
 }

src/plugins/embeddable/public/lib/embeddables/error_embeddable.test.tsx

@@ -32,11 +32,23 @@ test('ErrorEmbeddable renders an embeddable with markdown message', async () =>
   await waitFor(() => getByTestId('errorMessageMarkdown')); // wait for lazy markdown component
   expect(getByText(/some link/i)).toMatchInlineSnapshot(`
     <a
+      class="euiLink emotion-euiLink-primary"
       href="http://localhost:5601/takeMeThere"
       rel="noopener noreferrer"
       target="_blank"
     >
       some link
+      <span
+        class="emotion-EuiExternalLinkIcon"
+        data-euiicon-type="popout"
+      >
+        External link
+      </span>
+      <span
+        class="emotion-euiScreenReaderOnly"
+      >
+        (opens in a new tab or window)
+      </span>
     </a>
   `);
 });

src/plugins/expression_error/public/components/error/error.tsx

@@ -9,7 +9,7 @@
 import React, { FC } from 'react';
 import { EuiButtonIcon, EuiCallOut } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { Markdown } from '@kbn/kibana-react-plugin/public';
+import { Markdown } from '@kbn/shared-ux-markdown';
 import { ShowDebugging } from './show_debugging';
 
 export interface Props {
@@ -47,7 +47,7 @@ export const Error: FC<Props> = ({ payload, onClose }) => {
       <p>{message ? strings.getDescription() : ''}</p>
       {message && (
         <p style={{ padding: '0 16px' }}>
-          <Markdown markdown={message} openLinksInNewTab={true} />
+          <Markdown readOnly>{message}</Markdown>
         </p>
       )}
       <ShowDebugging payload={payload} />

src/plugins/expression_error/tsconfig.json

@@ -16,6 +16,7 @@
     "@kbn/i18n",
     "@kbn/kibana-react-plugin",
     "@kbn/i18n-react",
+    "@kbn/shared-ux-markdown",
   ],
   "exclude": [
     "target/**/*",

src/plugins/kibana_react/public/markdown/markdown.test.tsx

@@ -51,19 +51,19 @@ describe('props', () => {
   });
 
   test('openLinksInNewTab', () => {
-    const component = shallow(<Markdown markdown={markdown} openLinksInNewTab={true} />);
+    const component = shallow(<Markdown openLinksInNewTab={true} markdown={markdown} />);
     expect(component).toMatchSnapshot();
   });
 
   test('whiteListedRules', () => {
     const component = shallow(
-      <Markdown markdown={markdown} whiteListedRules={['backticks', 'emphasis']} />
+      <Markdown whiteListedRules={['backticks', 'emphasis']} markdown={markdown} />
     );
     expect(component).toMatchSnapshot();
   });
 
   test('should update markdown when openLinksInNewTab prop change', () => {
-    const component = shallow(<Markdown markdown={markdown} openLinksInNewTab={false} />);
+    const component = shallow(<Markdown openLinksInNewTab={false} markdown={markdown} />);
     expect(component.render().find('a').prop('target')).not.toBe('_blank');
     component.setProps({ openLinksInNewTab: true });
     expect(component.render().find('a').prop('target')).toBe('_blank');
@@ -72,7 +72,7 @@ describe('props', () => {
   test('should update markdown when whiteListedRules prop change', () => {
     const md = '*emphasis* `backticks`';
     const component = shallow(
-      <Markdown markdown={md} whiteListedRules={['emphasis', 'backticks']} />
+      <Markdown whiteListedRules={['emphasis', 'backticks']} markdown={md} />
     );
     expect(component.render().find('em')).toHaveLength(1);
     expect(component.render().find('code')).toHaveLength(1);

src/plugins/presentation_panel/public/panel_component/presentation_panel_error.tsx

@@ -10,7 +10,7 @@ import { EuiButtonEmpty, EuiEmptyPrompt, EuiText } from '@elastic/eui';
 import React, { useEffect, useMemo, useState } from 'react';
 
 import { ErrorLike } from '@kbn/expressions-plugin/common';
-import { Markdown } from '@kbn/kibana-react-plugin/public';
+import { Markdown } from '@kbn/shared-ux-markdown';
 import { renderSearchError } from '@kbn/search-errors';
 
 import { usePanelTitle } from '@kbn/presentation-publishing';
@@ -82,11 +82,9 @@ export const PresentationPanelError = ({
       body={
         searchErrorDisplay?.body ?? (
           <EuiText size="s">
-            <Markdown
-              markdown={error.message}
-              openLinksInNewTab={true}
-              data-test-subj="errorMessageMarkdown"
-            />
+            <Markdown data-test-subj="errorMessageMarkdown" readOnly>
+              {error.message}
+            </Markdown>
           </EuiText>
         )
       }

src/plugins/presentation_panel/tsconfig.json

@@ -27,7 +27,8 @@
     "@kbn/usage-collection-plugin",
     "@kbn/data-views-plugin",
     "@kbn/panel-loader",
-    "@kbn/search-errors"
+    "@kbn/search-errors",
+    "@kbn/shared-ux-markdown"
   ],
   "exclude": ["target/**/*"]
 }

src/plugins/vis_type_markdown/kibana.jsonc

@@ -13,7 +13,6 @@
     ],
     "requiredBundles": [
       "expressions",
-      "kibanaReact",
       "visDefaultEditor",
       "visualizations"
     ]

src/plugins/vis_type_markdown/public/markdown_vis_controller.test.tsx

@@ -29,7 +29,9 @@ describe('markdown vis controller', () => {
 
     expect(getByText('markdown')).toMatchInlineSnapshot(`
       <a
+        class="euiLink emotion-euiLink-primary"
         href="http://daringfireball.net/projects/markdown"
+        rel="noreferrer"
       >
         markdown
       </a>
@@ -53,7 +55,8 @@ describe('markdown vis controller', () => {
 
     expect(getByText(/testing/i)).toMatchInlineSnapshot(`
       <p>
-        Testing &lt;a&gt;html&lt;/a&gt;
+        Testing 
+        html
       </p>
     `);
   });

src/plugins/vis_type_markdown/public/markdown_vis_controller.tsx

@@ -7,7 +7,7 @@
  */
 
 import React, { useEffect } from 'react';
-import { Markdown } from '@kbn/kibana-react-plugin/public';
+import { Markdown } from '@kbn/shared-ux-markdown';
 import { MarkdownVisParams } from './types';
 
 import './markdown_vis.scss';
@@ -28,8 +28,9 @@ const MarkdownVisComponent = ({
     <div className="mkdVis" style={{ fontSize: `${fontSize}pt` }}>
       <Markdown
         data-test-subj="markdownBody"
-        markdown={markdown}
         openLinksInNewTab={openLinksInNewTab}
+        markdownContent={markdown || ` `}
+        readOnly
       />
     </div>
   );

src/plugins/vis_type_markdown/tsconfig.json

@@ -12,11 +12,11 @@
     "@kbn/core",
     "@kbn/expressions-plugin",
     "@kbn/visualizations-plugin",
-    "@kbn/kibana-react-plugin",
     "@kbn/vis-default-editor-plugin",
     "@kbn/i18n",
     "@kbn/i18n-react",
     "@kbn/config-schema",
+    "@kbn/shared-ux-markdown",
   ],
   "exclude": [
     "target/**/*",

src/plugins/vis_types/timeseries/public/application/components/vis_types/markdown/vis.js

@@ -11,7 +11,7 @@ import React from 'react';
 import classNames from 'classnames';
 import { get } from 'lodash';
 import { ClassNames } from '@emotion/react';
-import { Markdown } from '@kbn/kibana-react-plugin/public';
+import { Markdown } from '@kbn/shared-ux-markdown';
 
 import { ErrorComponent } from '../../error';
 import { replaceVars } from '../../lib/replace_vars';
@@ -79,9 +79,11 @@ function MarkdownVisualization(props) {
                 {!markdownError && (
                   <Markdown
                     onRender={initialRender}
-                    markdown={markdownSource}
                     openLinksInNewTab={model.markdown_openLinksInNewTab}
-                  />
+                    readOnly
+                  >
+                    {markdownSource}
+                  </Markdown>
                 )}
               </div>
             </div>

src/plugins/vis_types/timeseries/public/application/components/vis_types/timeseries/vis.js

@@ -18,7 +18,7 @@ import { createTickFormatter } from '../../lib/tick_formatter';
 import { createFieldFormatter } from '../../lib/create_field_formatter';
 import { checkIfSeriesHaveSameFormatters } from '../../lib/check_if_series_have_same_formatters';
 import { TimeSeries } from '../../../visualizations/views/timeseries';
-import { MarkdownSimple } from '@kbn/kibana-react-plugin/public';
+import { Markdown } from '@kbn/shared-ux-markdown';
 import { LEGACY_TIME_AXIS } from '@kbn/charts-plugin/common';
 import { replaceVars } from '../../lib/replace_vars';
 import { getInterval } from '../../lib/get_interval';
@@ -125,7 +125,7 @@ class TimeseriesVisualization extends Component {
       this.notificationReason = this.showToastNotification.reason;
       this.notification = toastNotifications.addDanger({
         title: this.showToastNotification.title,
-        text: <MarkdownSimple>{this.showToastNotification.reason}</MarkdownSimple>,
+        text: <Markdown readOnly>{this.showToastNotification.reason}</Markdown>,
       });
     }
 

src/plugins/vis_types/timeseries/tsconfig.json

@@ -47,6 +47,7 @@
     "@kbn/tinymath",
     "@kbn/visualization-utils",
     "@kbn/code-editor",
+    "@kbn/shared-ux-markdown",
   ],
   "exclude": [
     "target/**/*",

src/plugins/visualizations/public/visualize_app/utils/use/use_visualize_app_state.tsx

@@ -13,7 +13,8 @@ import { EventEmitter } from 'events';
 import { i18n } from '@kbn/i18n';
 import { FilterStateStore } from '@kbn/es-query';
 
-import { KibanaThemeProvider, MarkdownSimple, toMountPoint } from '@kbn/kibana-react-plugin/public';
+import { KibanaThemeProvider, toMountPoint } from '@kbn/kibana-react-plugin/public';
+import { Markdown } from '@kbn/shared-ux-markdown';
 import { connectToQueryState } from '@kbn/data-plugin/public';
 import { migrateLegacyQuery } from '../migrate_legacy_query';
 import {
@@ -129,7 +130,7 @@ export const useVisualizeAppState = (
               }),
               text: toMountPoint(
                 <KibanaThemeProvider theme$={services.theme.theme$}>
-                  <MarkdownSimple>{error.message}</MarkdownSimple>
+                  <Markdown readOnly>{error.message}</Markdown>
                 </KibanaThemeProvider>
               ),
             });

src/plugins/visualizations/tsconfig.json

@@ -69,7 +69,8 @@
     "@kbn/chart-expressions-common",
     "@kbn/shared-ux-utility",
     "@kbn/managed-content-badge",
-    "@kbn/presentation-publishing"
+    "@kbn/presentation-publishing",
+    "@kbn/shared-ux-markdown"
   ],
   "exclude": [
     "target/**/*",

test/functional/apps/dashboard_elements/markdown/_markdown_vis.ts

@@ -39,10 +39,9 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
         expect(h1Txt).to.equal('Heading 1');
       });
 
-      it('should not render html in markdown as html', async function () {
-        const expected = 'Heading 1\n<h3>Inline HTML that should not be rendered as html</h3>';
+      it('should not render html in markdown', async function () {
         const actual = await PageObjects.visChart.getMarkdownText();
-        expect(actual).to.equal(expected);
+        expect(actual).to.equal('Heading 1');
       });
 
       it('should auto apply changes if auto mode is turned on', async function () {

test/functional/apps/discover/embeddable/_saved_search_embeddable.ts

@@ -125,7 +125,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       const embeddableError = await testSubjects.find('embeddableError');
       const errorMessage = await embeddableError.findByTestSubject('errorMessageMarkdown');
       expect(await errorMessage.getVisibleText()).to.equal(
-        'Expected AND, OR, end of input, whitespace but "n" found. this < is not : a valid > query ----------^'
+        'Expected AND, OR, end of input, whitespace but "n" found.\nthis < is not : a valid > query\n----------^'
       );
     });
 

test/functional/apps/visualize/group6/_tsvb_markdown.ts

@@ -80,7 +80,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) {
         const html = '<h1>hello world</h1>';
         await visualBuilder.enterMarkdown(html);
         const markdownText = await visualBuilder.getMarkdownText();
-        expect(markdownText).to.be(html);
+        expect(markdownText).to.be('');
       });
 
       it('markdown variables should be clickable', async () => {

x-pack/plugins/apm/public/components/fleet_integration/apm_agents/agent_instructions_accordion.tsx

@@ -17,7 +17,8 @@ import {
 import { i18n } from '@kbn/i18n';
 import React, { ComponentType } from 'react';
 import styled from 'styled-components';
-import { Markdown, useKibana } from '@kbn/kibana-react-plugin/public';
+import { useKibana } from '@kbn/kibana-react-plugin/public';
+import { Markdown } from '@kbn/shared-ux-markdown';
 import { AgentIcon } from '@kbn/custom-icons';
 import {
   AgentRuntimeAttachmentProps,
@@ -74,12 +75,9 @@ function AccordionButtonContent({
 
 function InstructionsContent({ markdown }: { markdown: string }) {
   return (
-    <Markdown
-      className="euiText"
-      markdown={markdown}
-      openLinksInNewTab={true}
-      whiteListedRules={['backticks', 'emphasis', 'link', 'list']}
-    />
+    <Markdown className="euiText" readOnly>
+      {markdown}
+    </Markdown>
   );
 }
 

x-pack/plugins/apm/tsconfig.json

@@ -111,6 +111,7 @@
     "@kbn/shared-svg",
     "@kbn/shared-ux-utility",
     "@kbn/management-settings-components-field-row",
+    "@kbn/shared-ux-markdown",
   ],
   "exclude": ["target/**/*"]
 }

x-pack/plugins/banners/public/components/banner.tsx

@@ -6,7 +6,7 @@
  */
 
 import React, { FC } from 'react';
-import { Markdown } from '@kbn/kibana-react-plugin/public';
+import { Markdown } from '@kbn/shared-ux-markdown';
 import { BannerConfiguration } from '../../common';
 
 import './banner.scss';
@@ -26,7 +26,7 @@ export const Banner: FC<BannerProps> = ({ bannerConfig }) => {
       }}
     >
       <div className="eui-textTruncate" data-test-subj="bannerInnerWrapper">
-        <Markdown markdown={textContent} openLinksInNewTab={true} />
+        <Markdown readOnly>{textContent}</Markdown>
       </div>
     </div>
   );

x-pack/plugins/banners/tsconfig.json

@@ -11,6 +11,7 @@
     "@kbn/licensing-plugin",
     "@kbn/config-schema",
     "@kbn/i18n",
+    "@kbn/shared-ux-markdown",
   ],
   "exclude": [
     "target/**/*",

x-pack/plugins/canvas/canvas_plugin_src/renderers/markdown/index.tsx

@@ -11,7 +11,7 @@ import { CoreTheme } from '@kbn/core/public';
 import { Observable } from 'rxjs';
 import { KibanaThemeProvider } from '@kbn/react-kibana-context-theme';
 import { defaultTheme$ } from '@kbn/presentation-util-plugin/common';
-import { Markdown } from '@kbn/kibana-react-plugin/public';
+import { Markdown } from '@kbn/shared-ux-markdown';
 import { StartInitializer } from '../../plugin';
 import { RendererStrings } from '../../../i18n';
 import { Return as Config } from '../../functions/browser/markdown';
@@ -34,9 +34,11 @@ export const getMarkdownRenderer =
           <Markdown
             className="canvasMarkdown"
             style={fontStyle as CSSProperties}
-            markdown={config.content}
             openLinksInNewTab={config.openLinksInNewTab}
-          />
+            readOnly
+          >
+            {config.content}
+          </Markdown>
         </KibanaThemeProvider>,
         domNode,
         () => handlers.done()

x-pack/plugins/canvas/tsconfig.json

@@ -87,6 +87,7 @@
     "@kbn/reporting-server",
     "@kbn/reporting-export-types-pdf-common",
     "@kbn/code-editor",
+    "@kbn/shared-ux-markdown",
   ],
   "exclude": [
     "target/**/*",

x-pack/plugins/lens/public/datasources/form_based/operations/definitions/formula/editor/formula_help.tsx

@@ -7,7 +7,7 @@
 
 import React from 'react';
 import { i18n } from '@kbn/i18n';
-import { Markdown } from '@kbn/kibana-react-plugin/public';
+import { Markdown } from '@kbn/shared-ux-markdown';
 import {
   documentationMap,
   tinymathFunctions,
@@ -43,7 +43,7 @@ function createNewSection(
           <>
             <h3>{getFunctionSignatureLabel(key, operationDefinitionMap, false)}</h3>
 
-            {fnDescription ? <Markdown markdown={fnDescription} /> : null}
+            {fnDescription ? <Markdown readOnly>{fnDescription}</Markdown> : null}
           </>
         ),
       };
@@ -85,7 +85,7 @@ export function getDocumentationSections({
     items: formulasSections.common.items.map(
       ({ label, description }: { label: string; description: string }) => ({
         label,
-        description: <Markdown markdown={description} />,
+        description: <Markdown readOnly>{description}</Markdown>,
       })
     ),
   });
@@ -154,7 +154,7 @@ export function getDocumentationSections({
 
   const sections = {
     groups: helpGroups,
-    initialSection: <Markdown markdown={formulasSections.howTo} />,
+    initialSection: <Markdown>{formulasSections.howTo}</Markdown>,
   };
 
   return sections;

x-pack/plugins/lens/tsconfig.json

@@ -111,7 +111,8 @@
     "@kbn/sort-predicates",
     "@kbn/presentation-publishing",
     "@kbn/saved-objects-finder-plugin",
-    "@kbn/unified-data-table"
+    "@kbn/unified-data-table",
+    "@kbn/shared-ux-markdown"
   ],
   "exclude": ["target/**/*"]
 }

x-pack/test_serverless/functional/test_suites/common/discover/embeddable/_saved_search_embeddable.ts

@@ -136,7 +136,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       const embeddableError = await testSubjects.find('embeddableError');
       const errorMessage = await embeddableError.findByTestSubject('errorMessageMarkdown');
       expect(await errorMessage.getVisibleText()).to.equal(
-        'Expected AND, OR, end of input, whitespace but "n" found. this < is not : a valid > query ----------^'
+        'Expected AND, OR, end of input, whitespace but "n" found.\nthis < is not : a valid > query\n----------^'
       );
     });