Add enableSoftLineBreaks to shared-ux-markdown (#182635)

## Summary

This PR adds an enableSoftLineBreaks parameter to the `<Markdown>`
component in shared-ux, which enables it to fill the gap in line
breaking between the legacy React `<Markdown>` component.


![enableSoftLineBreaks](https://github.com/elastic/kibana/assets/721858/f7b9b97a-e327-480b-aab9-f54419607669)

The parameter defaults to `false` not to change the current behavior in
existing use cases. Furthermore, there is currently no case where the
parameter is set to `true` because of
#180906.

Closes #180576

### Checklist

- [x] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)

### For maintainers

- [x] 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/markdown.tsx

@@ -11,7 +11,6 @@ import {
   EuiMarkdownEditor,
   EuiMarkdownEditorProps,
   EuiMarkdownFormat,
-  euiMarkdownLinkValidator,
   getDefaultEuiMarkdownPlugins,
 } from '@elastic/eui';
 import React, { useState } from 'react';
@@ -30,6 +29,10 @@ export type MarkdownProps = Partial<
    * allow opt in to default EUI link validation behavior, see {@link https://eui.elastic.co/#/editors-syntax/markdown-plugins#link-validation-security}
    */
   validateLinks?: boolean;
+  /**
+   * enables regular line breaks to be rendered in HTML without `<br />` tags, see {@link https://github.github.com/gfm/#soft-line-breaks}
+   */
+  enableSoftLineBreaks?: boolean;
   /**
    * provides a way to signal to a parent component that the component rendered successfully
    */
@@ -57,6 +60,7 @@ export const Markdown = ({
   readOnly = false,
   enableTooltipSupport = false,
   validateLinks = false,
+  enableSoftLineBreaks = false,
   ...restProps
 }: MarkdownProps) => {
   const [value, setValue] = useState(defaultValue);
@@ -66,20 +70,18 @@ export const Markdown = ({
     onRender?.();
   }, [onRender]);
 
+  const excludingPlugins = Array<'lineBreaks' | 'linkValidator' | 'tooltip'>();
+  if (!enableTooltipSupport) excludingPlugins.push('tooltip');
+  if (!validateLinks) excludingPlugins.push('linkValidator');
+  if (enableSoftLineBreaks) excludingPlugins.push('lineBreaks');
+
   const { parsingPlugins, processingPlugins, uiPlugins } = getDefaultEuiMarkdownPlugins({
-    exclude: enableTooltipSupport ? undefined : ['tooltip'],
+    exclude: excludingPlugins,
   });
 
   // openLinksInNewTab functionality from https://codesandbox.io/s/relaxed-yalow-hy69r4?file=/demo.js:482-645
   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) {
@@ -91,7 +93,7 @@ export const Markdown = ({
         color={'inherit'}
         className={className}
         aria-label={ariaLabelContent ?? 'markdown component'}
-        parsingPluginList={_parsingPlugins}
+        parsingPluginList={parsingPlugins}
         processingPluginList={openLinksInNewTab ? processingPlugins : undefined}
         data-test-subj={restProps['data-test-subj']}
         // There was a trick to pass style as a part of props in the legacy React <Markdown> component
@@ -112,7 +114,7 @@ export const Markdown = ({
       onChange={setValue}
       height={height}
       uiPlugins={uiPlugins}
-      parsingPluginList={_parsingPlugins}
+      parsingPluginList={parsingPlugins}
       processingPluginList={openLinksInNewTab ? processingPlugins : undefined}
       data-test-subj={restProps['data-test-subj']}
     />

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

@@ -37,9 +37,11 @@ export const MarkdownStoryComponent = (params: MarkdownStorybookParams) => {
           markdownContent={'My content in **markdown** format set as the *markdownContent prop*'}
         />
         <Markdown {...params} readOnly={true}>
-          {
-            'My content in **markdown** format passed as *children* [test link to open in new tab or not](https://www.elastic.co)'
-          }
+          {`My content in **markdown** format passed as *children*
+            \`openLinksInNewTab\` [test link to open in new tab or not](https://www.elastic.co)
+            \`enableTooltipSupport\` !{tooltip[anchor text](Tooltip content)}
+            \`validateLinks\` [link with non-standard scheme](testing-testing-this-is-a-non-standatd-scheme://)
+           `}
         </Markdown>
       </EuiFlexItem>
     </EuiFlexGroup>

packages/shared-ux/markdown/mocks/storybook.ts

@@ -66,6 +66,18 @@ export class MarkdownStorybookMock extends AbstractStorybookMock<
         options: [0, 20, 50, 'full'],
       },
     },
+    enableTooltipSupport: {
+      control: 'boolean',
+      defaultValue: false,
+    },
+    validateLinks: {
+      control: 'boolean',
+      defaultValue: false,
+    },
+    enableSoftLineBreaks: {
+      control: 'boolean',
+      defaultValue: false,
+    },
   };
 
   serviceArguments = {};