diff --git a/CHANGELOG.md b/CHANGELOG.md index ae33aff8b1d..d2ca11fe922 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ - Fixed the `title` prop `EuiButtonGroup` to automatically display the `label` provided ([#5199](https://github.com/elastic/eui/pull/5199)) - Updated `barSeriesStyle.displayValue` of the elastic-charts `Theme` for better default styles ([#4845](https://github.com/elastic/eui/pull/4845)) +- Added a configuration parameter to the `EuiMarkdownEditor` plugin functions to exclude custom plugins ([#5147](https://github.com/elastic/eui/pull/5147)) - Added `auto` as value for `defaultHeight` in prop `rowHeightsOptions` in `EuiDataGrid` that allows to content auto-fit to row ([#4958](https://github.com/elastic/eui/pull/4958)) - Updated `titleProps` and `descriptionProps` on `EuiDescriptionList` to extend `CommonProps` ([#5166](https://github.com/elastic/eui/pull/5166)) - Added the ability to return `visibleOptions` from `EuiSelectable` by using `onSearch` ([#5178](https://github.com/elastic/eui/pull/5178)) @@ -10,6 +11,7 @@ - Fixed `EuiDataGrid` focus ring to be contained in the cell ([#5194](https://github.com/elastic/eui/pull/5194)) - Fixed `EuiDataGrid` cells when focused getting a higher `z-index` which was causing long content to overlap surrounding cells ([#5194](https://github.com/elastic/eui/pull/5194)) +- Replaced the `EuiMarkdownEditor` help syntax modal with a popover when no custom plugins are available ([#5147](https://github.com/elastic/eui/pull/5147)) - Fixed multiple components unnecessarily rerendering generated IDs on every update ([#5195](https://github.com/elastic/eui/pull/5195), [#5196](https://github.com/elastic/eui/pull/5196), [#5197](https://github.com/elastic/eui/pull/5197), [#5200](https://github.com/elastic/eui/pull/#5200), [#5201](https://github.com/elastic/eui/pull/#5201)) **Theme: Amsterdam** diff --git a/src-docs/src/views/markdown_editor/mardown_editor_example.js b/src-docs/src/views/markdown_editor/mardown_editor_example.js index 680143e4cbc..e37a1417c5d 100644 --- a/src-docs/src/views/markdown_editor/mardown_editor_example.js +++ b/src-docs/src/views/markdown_editor/mardown_editor_example.js @@ -1,20 +1,14 @@ import React, { Fragment } from 'react'; - -import { renderToHtml } from '../../services'; - import { GuideSectionTypes } from '../../components'; - import { EuiMarkdownEditor, EuiText, EuiCode, } from '../../../../src/components'; - import { Link } from 'react-router-dom'; import MarkdownEditor from './markdown_editor'; const markdownEditorSource = require('!!raw-loader!./markdown_editor'); -const markdownEditorHtml = renderToHtml(MarkdownEditor); const markdownEditorSnippet = ``, ]; +import MarkdownEditorNoPlugins from './markdown_editor_no_plugins'; +const markdownEditorNoPluginsSource = require('!!raw-loader!./markdown_editor_no_plugins'); +const markdownEditorNoPluginsSnippet = `const { + parsingPlugins, + processingPlugins, + uiPlugins, +} = getDefaultEuiMarkdownPlugins({ exclude: ['tooltip'] }); + + +`; + export const MarkdownEditorExample = { title: 'Markdown editor', beta: true, @@ -90,10 +99,6 @@ export const MarkdownEditorExample = { type: GuideSectionTypes.JS, code: markdownEditorSource, }, - { - type: GuideSectionTypes.HTML, - code: markdownEditorHtml, - }, ], title: 'Base editor', text: ( @@ -112,11 +117,36 @@ export const MarkdownEditorExample = { source: [ { type: GuideSectionTypes.JS, - code: markdownEditorErrorsSource, + code: markdownEditorNoPluginsSource, }, + ], + title: 'Unregistering plugins', + text: ( +

+ The EuiMarkdownEditor comes with a default plugin for{' '} + tooltip support. However, this may be unfamiliar or + unnecessary in some contexts, and you can unregister this plugin by + excluding it from the + parsingPlugins,{' '} + processingPlugins and uiPlugins{' '} + options with a single exclude parameter passed to{' '} + getDefaultEuiMarkdownPlugins(). This will ensure + the syntax won't be identified or rendered and no additional UI, + like the button and help syntax, will be displayed. +

+ ), + props: { + EuiMarkdownEditor, + }, + snippet: markdownEditorNoPluginsSnippet, + demo: , + }, + + { + source: [ { - type: GuideSectionTypes.HTML, - code: markdownEditorErrorsHtml, + type: GuideSectionTypes.JS, + code: markdownEditorErrorsSource, }, ], title: 'Error handling and feedback', @@ -142,10 +172,6 @@ export const MarkdownEditorExample = { type: GuideSectionTypes.JS, code: markdownEditorHeightSource, }, - { - type: GuideSectionTypes.HTML, - code: markdownEditorHeightHtml, - }, ], title: 'Controlling the height', text: ( diff --git a/src-docs/src/views/markdown_editor/markdown_editor.js b/src-docs/src/views/markdown_editor/markdown_editor.js index 4c5b4157239..48d32275af2 100644 --- a/src-docs/src/views/markdown_editor/markdown_editor.js +++ b/src-docs/src/views/markdown_editor/markdown_editor.js @@ -9,7 +9,7 @@ import { const initialContent = `## Hello world! -Basic "github flavored" markdown will work as you'd expect. +Basic "GitHub flavored" markdown will work as you'd expect. The editor also ships with some built in plugins. For example it can handle checkboxes. Notice how they toggle state even in the preview mode. diff --git a/src-docs/src/views/markdown_editor/markdown_editor_no_plugins.js b/src-docs/src/views/markdown_editor/markdown_editor_no_plugins.js new file mode 100644 index 00000000000..09c85890662 --- /dev/null +++ b/src-docs/src/views/markdown_editor/markdown_editor_no_plugins.js @@ -0,0 +1,38 @@ +import React, { useState } from 'react'; + +import { + EuiMarkdownEditor, + getDefaultEuiMarkdownPlugins, +} from '../../../../src/components'; + +const initialContent = `## This is how we do it :smile: + +In this example, we unregistered the built in **tooltip** plugin. So the button in the toolbar and the help syntax won't be displayed. + +And the following syntax no longer works. + +!{tooltip[anchor text](Tooltip content)} +`; + +const { + parsingPlugins, + processingPlugins, + uiPlugins, +} = getDefaultEuiMarkdownPlugins({ exclude: ['tooltip'] }); + +export default () => { + const [value, setValue] = useState(initialContent); + + return ( + <> + + + ); +}; diff --git a/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap b/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap index bfc613bfa98..a18c1cf4bfb 100644 --- a/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap +++ b/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap @@ -1,5 +1,1155 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`EuiMarkdownEditor custom plugins are excluded and popover is rendered 1`] = ` + +
+ ", + "surroundWithNewlines": true, + }, + "name": "mdQuote", + }, + "mdTl": Object { + "button": Object { + "iconType": "", + "label": "", + }, + "formatting": Object { + "multiline": true, + "prefix": "- [ ] ", + "surroundWithNewlines": true, + }, + "name": "mdTl", + }, + "mdUl": Object { + "button": Object { + "iconType": "", + "label": "", + }, + "formatting": Object { + "multiline": true, + "prefix": "- ", + "surroundWithNewlines": true, + }, + "name": "mdUl", + }, + }, + } + } + onClickPreview={[Function]} + uiPlugins={Array []} + viewMode="editing" + > +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + +
+ +
+ +
+ + +