From ae3a397bf1eb83015af0313764261bb91eb50fc4 Mon Sep 17 00:00:00 2001 From: K-Kumar01 Date: Tue, 15 Dec 2020 16:01:47 +0530 Subject: [PATCH 1/7] fix: Markdown editor unregister tooltip plugin Issue number 4239 Ability to unregister the tooltip plugin added Updated the editor example doc to show how to use it --- .../views/markdown_editor/mardown_editor_example.js | 3 +++ src/components/markdown_editor/markdown_editor.tsx | 10 +++++++++- 2 files changed, 12 insertions(+), 1 deletion(-) 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 98b8cd40e47..e60befd2851 100644 --- a/src-docs/src/views/markdown_editor/mardown_editor_example.js +++ b/src-docs/src/views/markdown_editor/mardown_editor_example.js @@ -61,6 +61,9 @@ export const MarkdownEditorExample = {

The base editor can render basic markdown along with some built-in plugins. +
+ Pass withTooltip = {'{false}'} prop to remove the + initial plugins.

), props: { diff --git a/src/components/markdown_editor/markdown_editor.tsx b/src/components/markdown_editor/markdown_editor.tsx index eb1dad4bb89..56ca89560a4 100644 --- a/src/components/markdown_editor/markdown_editor.tsx +++ b/src/components/markdown_editor/markdown_editor.tsx @@ -72,6 +72,9 @@ type CommonMarkdownEditorProps = Omit< /** ID of an element describing the text editor, useful for associating error messages */ 'aria-describedby'?: string; + /** Initialize the markdown editor with tooltip plugin */ + withTooltip?: boolean; + /** a unique ID to attach to the textarea. If one isn't provided, a random one * will be generated */ editorId?: string; @@ -149,6 +152,7 @@ export const EuiMarkdownEditor = forwardRef< ( { className, + withTooltip, editorId: _editorId, value, onChange, @@ -171,12 +175,16 @@ export const EuiMarkdownEditor = forwardRef< const editorId = useMemo(() => _editorId || htmlIdGenerator()(), [ _editorId, ]); + const withTooltipPlugin = withTooltip; const [pluginEditorPlugin, setPluginEditorPlugin] = useState< EuiMarkdownEditorUiPlugin | undefined >(undefined); - const toolbarPlugins = [MarkdownTooltip.plugin, ...uiPlugins]; + const toolbarPlugins = [...uiPlugins]; + if (typeof withTooltipPlugin === 'undefined' || withTooltipPlugin) { + toolbarPlugins.splice(0, 0, MarkdownTooltip.plugin); + } const markdownActions = useMemo( () => new MarkdownActions(editorId, toolbarPlugins), From a223f2d833ef28beb590c72dbd496e041da03d89 Mon Sep 17 00:00:00 2001 From: k-kumar-01 Date: Sat, 16 Jan 2021 22:15:00 +0530 Subject: [PATCH 2/7] fix:Markdown tooltip unregister Added the ability to unregsiter inbuilt UI plugins Addresses issue 4239 Signed-off-by: k-kumar-01 --- src/components/index.js | 1 + src/components/markdown_editor/index.ts | 1 + src/components/markdown_editor/markdown_editor.tsx | 5 ++++- .../markdown_editor/plugins/markdown_default_plugins.tsx | 7 +++++++ 4 files changed, 13 insertions(+), 1 deletion(-) diff --git a/src/components/index.js b/src/components/index.js index 271cc3e0db2..a57b1fe2235 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -224,6 +224,7 @@ export { EuiMarkdownFormat, getDefaultEuiMarkdownParsingPlugins, getDefaultEuiMarkdownProcessingPlugins, + getDefaultEuiMarkdownUiPlugins, } from './markdown_editor'; export { EuiMark } from './mark'; diff --git a/src/components/markdown_editor/index.ts b/src/components/markdown_editor/index.ts index 370949fbea9..0086d04ccef 100644 --- a/src/components/markdown_editor/index.ts +++ b/src/components/markdown_editor/index.ts @@ -21,6 +21,7 @@ export { EuiMarkdownEditor, EuiMarkdownEditorProps } from './markdown_editor'; export { getDefaultEuiMarkdownParsingPlugins, getDefaultEuiMarkdownProcessingPlugins, + getDefaultEuiMarkdownUiPlugins, } from './plugins/markdown_default_plugins'; export { EuiMarkdownContext } from './markdown_context'; export { EuiMarkdownFormat } from './markdown_format'; diff --git a/src/components/markdown_editor/markdown_editor.tsx b/src/components/markdown_editor/markdown_editor.tsx index eb1dad4bb89..e31725f4be7 100644 --- a/src/components/markdown_editor/markdown_editor.tsx +++ b/src/components/markdown_editor/markdown_editor.tsx @@ -176,7 +176,10 @@ export const EuiMarkdownEditor = forwardRef< EuiMarkdownEditorUiPlugin | undefined >(undefined); - const toolbarPlugins = [MarkdownTooltip.plugin, ...uiPlugins]; + const toolbarPlugins = [...uiPlugins]; + // @ts-ignore __originatedFromEui is a custom property + if (!uiPlugins.__originatedFromEui) + toolbarPlugins.unshift(MarkdownTooltip.plugin); const markdownActions = useMemo( () => new MarkdownActions(editorId, toolbarPlugins), diff --git a/src/components/markdown_editor/plugins/markdown_default_plugins.tsx b/src/components/markdown_editor/plugins/markdown_default_plugins.tsx index 68e7804b3fd..d94aecef571 100644 --- a/src/components/markdown_editor/plugins/markdown_default_plugins.tsx +++ b/src/components/markdown_editor/plugins/markdown_default_plugins.tsx @@ -86,3 +86,10 @@ export const getDefaultEuiMarkdownProcessingPlugins = (): [ ]; export const defaultProcessingPlugins = getDefaultEuiMarkdownProcessingPlugins(); + +export const getDefaultEuiMarkdownUiPlugins = () => { + const array = [MarkdownTooltip.plugin]; + // @ts-ignore __originatedFromEui is a custom property + array.__originatedFromEui = true; + return array; +}; From fee847d2cabebaebd55e307ecb475d3d3c29fc70 Mon Sep 17 00:00:00 2001 From: k-kumar-01 Date: Wed, 20 Jan 2021 15:50:51 +0530 Subject: [PATCH 3/7] fix:Markdown ToolTip Plugin Default UI Plugins initialized Warning added on injecting tooltip plugin Signed-off-by: k-kumar-01 --- src/components/health/health.tsx | 2 +- src/components/markdown_editor/markdown_editor.tsx | 9 +++++++-- .../markdown_editor/plugins/markdown_default_plugins.tsx | 2 ++ 3 files changed, 10 insertions(+), 3 deletions(-) diff --git a/src/components/health/health.tsx b/src/components/health/health.tsx index 691aa17acbb..3f53700c7e2 100644 --- a/src/components/health/health.tsx +++ b/src/components/health/health.tsx @@ -45,7 +45,7 @@ export type EuiHealthProps = CommonProps & /** * Matches the text scales of EuiText. * The `inherit` style will get its font size from the parent element - */ + */ textSize?: typeof TEXT_SIZES[number]; }; diff --git a/src/components/markdown_editor/markdown_editor.tsx b/src/components/markdown_editor/markdown_editor.tsx index e8d216c478b..e048a7edb58 100644 --- a/src/components/markdown_editor/markdown_editor.tsx +++ b/src/components/markdown_editor/markdown_editor.tsx @@ -56,6 +56,7 @@ import * as MarkdownTooltip from './plugins/markdown_tooltip'; import { defaultParsingPlugins, defaultProcessingPlugins, + defaultUiPlugins, } from './plugins/markdown_default_plugins'; import { EuiResizeObserver } from '../observer/resize_observer'; @@ -193,7 +194,7 @@ export const EuiMarkdownEditor = forwardRef< autoExpandPreview = true, parsingPluginList = defaultParsingPlugins, processingPluginList = defaultProcessingPlugins, - uiPlugins = [], + uiPlugins = defaultUiPlugins, onParse, errors = [], 'aria-label': ariaLabel, @@ -216,8 +217,12 @@ export const EuiMarkdownEditor = forwardRef< const toolbarPlugins = [...uiPlugins]; // @ts-ignore __originatedFromEui is a custom property - if (!uiPlugins.__originatedFromEui) + if (!uiPlugins.__originatedFromEui) { toolbarPlugins.unshift(MarkdownTooltip.plugin); + console.warn( + 'Deprecation warning: uiPlugins passed to EuiMarkdownEditor does not include the tooltip plugin, which has been added for you. This automatic inclusion has been deprecated and will be removed in the future, see https://github.com/elastic/eui/pull/4383' + ); + } const markdownActions = useMemo( () => new MarkdownActions(editorId, toolbarPlugins), diff --git a/src/components/markdown_editor/plugins/markdown_default_plugins.tsx b/src/components/markdown_editor/plugins/markdown_default_plugins.tsx index 0f7644ab049..83b20429a67 100644 --- a/src/components/markdown_editor/plugins/markdown_default_plugins.tsx +++ b/src/components/markdown_editor/plugins/markdown_default_plugins.tsx @@ -109,3 +109,5 @@ export const getDefaultEuiMarkdownUiPlugins = () => { array.__originatedFromEui = true; return array; }; + +export const defaultUiPlugins = getDefaultEuiMarkdownUiPlugins(); From 58920377ec2a174c7c973a936fd143d980341d17 Mon Sep 17 00:00:00 2001 From: Chandler Prall Date: Thu, 21 Jan 2021 09:46:00 -0700 Subject: [PATCH 4/7] Changelog & updated markdown plugins example --- CHANGELOG.md | 2 +- .../views/markdown_editor/markdown_editor_with_plugins.js | 6 +++++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 72ea01a4a3b..a49196fe0dd 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,6 @@ ## [`master`](https://github.com/elastic/eui/tree/master) -No public interface changes since `31.3.0`. +- Added `getDefaultEuiMarkdownProcessingPlugins` method for better control over `EuiMarkdownEditor`'s toolbar UI ([#4383](https://github.com/elastic/eui/pull/4383)) ## [`31.3.0`](https://github.com/elastic/eui/tree/v31.3.0) diff --git a/src-docs/src/views/markdown_editor/markdown_editor_with_plugins.js b/src-docs/src/views/markdown_editor/markdown_editor_with_plugins.js index dc6aa29ba8b..f14c469a98f 100644 --- a/src-docs/src/views/markdown_editor/markdown_editor_with_plugins.js +++ b/src-docs/src/views/markdown_editor/markdown_editor_with_plugins.js @@ -42,6 +42,7 @@ import { euiPalettePositive, euiPaletteWarm, } from '../../../../src/services/color'; +import { getDefaultEuiMarkdownUiPlugins } from '../../../../src/components/markdown_editor'; const paletteData = { euiPaletteForStatus, @@ -261,6 +262,9 @@ exampleParsingList.push(ChartMarkdownParser); const exampleProcessingList = getDefaultEuiMarkdownProcessingPlugins(); exampleProcessingList[1][1].components.chartDemoPlugin = ChartMarkdownRenderer; +const exampleUiPlugins = getDefaultEuiMarkdownUiPlugins(); +exampleUiPlugins.push(chartDemoPlugin); + const initialExample = `## Chart plugin Notice the toolbar above has a new chart button. Click it to add a chart. @@ -286,7 +290,7 @@ export default () => { value={value} onChange={setValue} height={400} - uiPlugins={[chartDemoPlugin]} + uiPlugins={exampleUiPlugins} parsingPluginList={exampleParsingList} processingPluginList={exampleProcessingList} onParse={onParse} From 5a84818dc6861f0e16d2e5431d1ea91b6fe5c695 Mon Sep 17 00:00:00 2001 From: k-kumar-01 Date: Wed, 27 Jan 2021 21:48:39 +0530 Subject: [PATCH 5/7] fix: EuiFieldText properties exposed Issue Number - 4330 Signed-off-by: k-kumar-01 --- src/components/suggest/suggest_input.tsx | 35 ++++++++++++------------ 1 file changed, 18 insertions(+), 17 deletions(-) diff --git a/src/components/suggest/suggest_input.tsx b/src/components/suggest/suggest_input.tsx index 3781ada7642..1302be2c4e1 100644 --- a/src/components/suggest/suggest_input.tsx +++ b/src/components/suggest/suggest_input.tsx @@ -21,32 +21,33 @@ import React, { useState, FunctionComponent } from 'react'; import { CommonProps } from '../common'; import classNames from 'classnames'; -import { EuiFieldText } from '../form'; +import { EuiFieldText, EuiFieldTextProps } from '../form'; import { EuiToolTip } from '../tool_tip'; import { EuiIcon } from '../icon'; import { EuiInputPopover } from '../popover'; import { EuiSuggestItemProps } from './suggest_item'; -export type EuiSuggestInputProps = CommonProps & { - tooltipContent?: string; +export type EuiSuggestInputProps = CommonProps & + EuiFieldTextProps & { + tooltipContent?: string; - /** - * Status of the current query 'unsaved', 'saved', 'unchanged' or 'loading'. - */ - status?: 'unsaved' | 'saved' | 'unchanged' | 'loading'; + /** + * Status of the current query 'unsaved', 'saved', 'unchanged' or 'loading'. + */ + status?: 'unsaved' | 'saved' | 'unchanged' | 'loading'; - /** - * Element to be appended to the input bar. - */ - append?: JSX.Element; + /** + * Element to be appended to the input bar. + */ + append?: JSX.Element; - /** - * List of suggestions to display using 'suggestItem'. - */ - suggestions: JSX.Element[] | EuiSuggestItemProps[]; + /** + * List of suggestions to display using 'suggestItem'. + */ + suggestions: JSX.Element[] | EuiSuggestItemProps[]; - sendValue?: Function; -}; + sendValue?: Function; + }; interface Status { icon?: string; From 94d494fc8c2eb9c80269114373256c8b978706f1 Mon Sep 17 00:00:00 2001 From: k-kumar-01 Date: Thu, 28 Jan 2021 18:40:34 +0530 Subject: [PATCH 6/7] Changelog entry added Signed-off-by: k-kumar-01 --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 6267ee9d34c..a0c3cf20be8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ - Added `getDefaultEuiMarkdownProcessingPlugins` method for better control over `EuiMarkdownEditor`'s toolbar UI ([#4383](https://github.com/elastic/eui/pull/4383)) - Changed `EuiOutsideClickDetector` events to be standard event types ([#4434](https://github.com/elastic/eui/pull/4434)) +- Added `EuiFieldTextProps` in type definitions for better suggestions ([#4452](https://github.com/elastic/eui/pull/4452)) **Bug fixes** From 0fb8ee991be8b12ba527332d747bc7ce2682c855 Mon Sep 17 00:00:00 2001 From: Caroline Horn <549577+cchaos@users.noreply.github.com> Date: Thu, 28 Jan 2021 10:31:05 -0500 Subject: [PATCH 7/7] Update CHANGELOG.md --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index a0c3cf20be8..3b348a6ca65 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,7 +2,7 @@ - Added `getDefaultEuiMarkdownProcessingPlugins` method for better control over `EuiMarkdownEditor`'s toolbar UI ([#4383](https://github.com/elastic/eui/pull/4383)) - Changed `EuiOutsideClickDetector` events to be standard event types ([#4434](https://github.com/elastic/eui/pull/4434)) -- Added `EuiFieldTextProps` in type definitions for better suggestions ([#4452](https://github.com/elastic/eui/pull/4452)) +- Added `EuiFieldTextProps` in type definitions for `EuiSuggestInput` ([#4452](https://github.com/elastic/eui/pull/4452)) **Bug fixes**