Update docs & changelog

changelogs/upcoming/7676.md

@@ -1,2 +1,5 @@
-- Added a way to exclude the line-breaks plugin from defaults in EuiMarkdownEditor.
-
+- Updated `getDefaultEuiMarkdownPlugins()` to allow excluding the following plugins in addition to `tooltip`:
+  - `checkbox`
+  - `linkValidator`
+  - `lineBreaks`
+  - `emoji`

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

@@ -60,7 +60,15 @@ const markdownEditorNoPluginsSnippet = `const {
   parsingPlugins,
   processingPlugins,
   uiPlugins,
-} = getDefaultEuiMarkdownPlugins({ exclude: ['tooltip', 'line-breaks'] });
+} = getDefaultEuiMarkdownPlugins({
+  exclude: [
+    'tooltip',
+    'checkbox',
+    'linkValidator',
+    'lineBreaks',
+    'emoji',
+  ],
+});
 
   <EuiMarkdownEditor
     value={value}
@@ -133,16 +141,15 @@ export const MarkdownEditorExample = {
       title: 'Unregistering plugins',
       text: (
         <p>
-          The <strong>EuiMarkdownEditor</strong> comes with default plugins such
-          as <EuiCode>tooltip</EuiCode> and <EuiCode>line-breaks</EuiCode>.{' '}
-          However, these may be unfamiliar or unnecessary in some contexts, and
-          you can unregister these plugins by excluding them from the
-          <EuiCode>parsingPlugins</EuiCode>,{' '}
+          The <strong>EuiMarkdownEditor</strong> comes with several default
+          plugins, demo'd below. If these defaults are unnecessary for your
+          use-case or context, you can unregister these plugins by excluding
+          them from the <EuiCode>parsingPlugins</EuiCode>,{' '}
           <EuiCode>processingPlugins</EuiCode> and <EuiCode>uiPlugins</EuiCode>{' '}
           options with a single <EuiCode>exclude</EuiCode> parameter passed to{' '}
           <EuiCode>getDefaultEuiMarkdownPlugins()</EuiCode>. This will ensure
-          the syntax won&apos;t be identified or rendered and no additional UI,
-          like the button and help syntax, will be displayed by the unregistered
+          the syntax won't be identified or rendered, and no additional UI (like
+          toolbar buttons or help syntax) will be displayed by the unregistered
           plugins.
         </p>
       ),

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

@@ -1,45 +1,112 @@
-import React, { useState } from 'react';
+import React, { useState, useMemo } from 'react';
 
 import {
   EuiMarkdownEditor,
   getDefaultEuiMarkdownPlugins,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiSwitch,
 } from '../../../../src/components';
 
-const initialContent = `## This is how we do it :smile:
-
-In this example, we unregistered the built in **tooltip** and **line-breaks** plugins.
-
+const initialContent = `
 ### tooltip
 
-The button in the toolbar and the help syntax won't be displayed.  
-And the following syntax no longer works.
+When disabled, the button in the toolbar and the help syntax won't be displayed, and the following syntax will no longer works.
 
 !{tooltip[anchor text](Tooltip content)}
 
-### line-breaks
+### checkbox
 
-More than two trailing spaces break consecutive lines,
-but not otherwise.
+When disabled, a EuiCheckbox will no longer render.
 
-A blank line separates sections as usual.
-`;
+- [ ] TODO: Disable some default plugins
+
+### emoji
+
+When disabled, text will render instead of an emoji.
+
+:smile:
+
+### linkValidator
+
+When disabled, all links will render as links instead of as text.
 
-const { parsingPlugins, processingPlugins, uiPlugins } =
-  getDefaultEuiMarkdownPlugins({ exclude: ['tooltip', 'line-breaks'] });
+[This is a sus link](file://)
+
+### lineBreaks
+
+When disabled, these sentence will be in the same line.
+When enabled, these sentences will be separated by a line break.
+
+Two blank lines in a row will create a new paragraph as usual.
+`;
 
 export default () => {
   const [value, setValue] = useState(initialContent);
 
+  const [tooltip, excludeTooltips] = useState(false);
+  const [checkbox, excludeCheckboxes] = useState(true);
+  const [emoji, excludeEmojis] = useState(true);
+  const [linkValidator, excludeLinkValidator] = useState(true);
+  const [lineBreaks, excludeLineBreaks] = useState(false);
+
+  const { parsingPlugins, processingPlugins, uiPlugins } = useMemo(() => {
+    const excludedPlugins = [];
+    if (!tooltip) excludedPlugins.push('tooltip');
+    if (!checkbox) excludedPlugins.push('checkbox');
+    if (!emoji) excludedPlugins.push('emoji');
+    if (!linkValidator) excludedPlugins.push('linkValidator');
+    if (!lineBreaks) excludedPlugins.push('lineBreaks');
+
+    return getDefaultEuiMarkdownPlugins({
+      exclude: excludedPlugins,
+    });
+  }, [tooltip, checkbox, emoji, linkValidator, lineBreaks]);
+
   return (
     <>
-      <EuiMarkdownEditor
-        aria-label="EUI markdown editor with no default plugins demo"
-        value={value}
-        onChange={setValue}
-        parsingPluginList={parsingPlugins}
-        processingPluginList={processingPlugins}
-        uiPlugins={uiPlugins}
-      />
+      <EuiFlexGroup>
+        <EuiFlexItem grow={false} css={{ gap: 20 }}>
+          <EuiSwitch
+            label="tooltip"
+            checked={tooltip}
+            onChange={() => excludeTooltips(!tooltip)}
+          />
+          <EuiSwitch
+            label="checkbox"
+            checked={checkbox}
+            onChange={() => excludeCheckboxes(!checkbox)}
+          />
+          <EuiSwitch
+            label="emoji"
+            checked={emoji}
+            onChange={() => excludeEmojis(!emoji)}
+          />
+          <EuiSwitch
+            label="linkValidator"
+            checked={linkValidator}
+            onChange={() => excludeLinkValidator(!linkValidator)}
+          />
+          <EuiSwitch
+            label="lineBreaks"
+            checked={lineBreaks}
+            onChange={() => excludeLineBreaks(!lineBreaks)}
+          />
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <EuiMarkdownEditor
+            aria-label="Demo with excluded default plugins"
+            value={value}
+            onChange={setValue}
+            parsingPluginList={parsingPlugins}
+            processingPluginList={processingPlugins}
+            uiPlugins={uiPlugins}
+            initialViewMode="viewing"
+            autoExpandPreview={false}
+            height={400}
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
     </>
   );
 };