diff --git a/CHANGELOG.md b/CHANGELOG.md index 89885316cb4..a8c3c30933d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,7 @@ - Refactored `EuiFlyout` types ([#4940](https://github.com/elastic/eui/pull/4940)) - Updated `pause` icon ([#4947](https://github.com/elastic/eui/pull/4947)) - Changed multi-line `EuiDataGrid` cells to `break-word` instead of `break-all` ([#4955](https://github.com/elastic/eui/pull/4955)) +- Refactored `MarkdownEditor` plugins into separate files ([#4970](https://github.com/elastic/eui/pull/4970)) **Bug fixes** diff --git a/src/components/markdown_editor/plugins/markdown_checkbox/index.ts b/src/components/markdown_editor/plugins/markdown_checkbox/index.ts new file mode 100644 index 00000000000..bc774180281 --- /dev/null +++ b/src/components/markdown_editor/plugins/markdown_checkbox/index.ts @@ -0,0 +1,11 @@ +/* + * 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. + */ + +export { CheckboxParser as parser } from './parser'; +export { CheckboxMarkdownRenderer as renderer } from './renderer'; +export * from './types'; diff --git a/src/components/markdown_editor/plugins/markdown_checkbox.tsx b/src/components/markdown_editor/plugins/markdown_checkbox/parser.ts similarity index 61% rename from src/components/markdown_editor/plugins/markdown_checkbox.tsx rename to src/components/markdown_editor/plugins/markdown_checkbox/parser.ts index db792be2618..ef856b5af0e 100644 --- a/src/components/markdown_editor/plugins/markdown_checkbox.tsx +++ b/src/components/markdown_editor/plugins/markdown_checkbox/parser.ts @@ -6,21 +6,11 @@ * Side Public License, v 1. */ -import React, { FunctionComponent, useContext } from 'react'; -import { EuiCheckbox } from '../../form/checkbox'; -import { EuiMarkdownContext } from '../markdown_context'; -import { htmlIdGenerator } from '../../../services/accessibility'; -import { EuiMarkdownAstNodePosition, RemarkTokenizer } from '../markdown_types'; import { Plugin } from 'unified'; +import { RemarkTokenizer } from '../../markdown_types'; +import { CheckboxNodeDetails } from './types'; -interface CheckboxNodeDetails { - type: 'checkboxPlugin'; - lead: string; - label: string; - isChecked: boolean; -} - -const CheckboxParser: Plugin = function CheckboxParser() { +export const CheckboxParser: Plugin = function CheckboxParser() { const Parser = this.Parser; const tokenizers = Parser.prototype.blockTokenizers; const methods = Parser.prototype.blockMethods; @@ -64,23 +54,3 @@ const CheckboxParser: Plugin = function CheckboxParser() { tokenizers.checkbox = tokenizeCheckbox; methods.splice(methods.indexOf('list'), 0, 'checkbox'); // Run it just before default `list` plugin to inject our own idea of checkboxes. }; - -const CheckboxMarkdownRenderer: FunctionComponent< - CheckboxNodeDetails & { - position: EuiMarkdownAstNodePosition; - } -> = ({ position, lead, label, isChecked, children }) => { - const { replaceNode } = useContext(EuiMarkdownContext); - return ( - { - replaceNode(position, `${lead}[${isChecked ? ' ' : 'x'}]${label}`); - }} - /> - ); -}; - -export { CheckboxParser as parser, CheckboxMarkdownRenderer as renderer }; diff --git a/src/components/markdown_editor/plugins/markdown_checkbox/renderer.tsx b/src/components/markdown_editor/plugins/markdown_checkbox/renderer.tsx new file mode 100644 index 00000000000..2d3f8dc9887 --- /dev/null +++ b/src/components/markdown_editor/plugins/markdown_checkbox/renderer.tsx @@ -0,0 +1,32 @@ +/* + * 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. + */ + +import React, { FunctionComponent, useContext } from 'react'; +import { EuiCheckbox } from '../../../form/checkbox'; +import { EuiMarkdownContext } from '../../markdown_context'; +import { htmlIdGenerator } from '../../../../services/accessibility'; +import { EuiMarkdownAstNodePosition } from '../../markdown_types'; +import { CheckboxNodeDetails } from './types'; + +export const CheckboxMarkdownRenderer: FunctionComponent< + CheckboxNodeDetails & { + position: EuiMarkdownAstNodePosition; + } +> = ({ position, lead, label, isChecked, children }) => { + const { replaceNode } = useContext(EuiMarkdownContext); + return ( + { + replaceNode(position, `${lead}[${isChecked ? ' ' : 'x'}]${label}`); + }} + /> + ); +}; diff --git a/src/components/markdown_editor/plugins/markdown_checkbox/types.ts b/src/components/markdown_editor/plugins/markdown_checkbox/types.ts new file mode 100644 index 00000000000..47c3544332f --- /dev/null +++ b/src/components/markdown_editor/plugins/markdown_checkbox/types.ts @@ -0,0 +1,14 @@ +/* + * 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. + */ + +export interface CheckboxNodeDetails { + type: 'checkboxPlugin'; + lead: string; + label: string; + isChecked: boolean; +} diff --git a/src/components/markdown_editor/plugins/markdown_default_plugins/index.ts b/src/components/markdown_editor/plugins/markdown_default_plugins/index.ts new file mode 100644 index 00000000000..fd01fced6d7 --- /dev/null +++ b/src/components/markdown_editor/plugins/markdown_default_plugins/index.ts @@ -0,0 +1,11 @@ +/* + * 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. + */ + +export * from './ui_plugins'; +export * from './parsing_plugins'; +export * from './processing_plugins'; diff --git a/src/components/markdown_editor/plugins/markdown_default_plugins/parsing_plugins.ts b/src/components/markdown_editor/plugins/markdown_default_plugins/parsing_plugins.ts new file mode 100644 index 00000000000..e328b90223c --- /dev/null +++ b/src/components/markdown_editor/plugins/markdown_default_plugins/parsing_plugins.ts @@ -0,0 +1,41 @@ +/* + * 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. + */ + +// Importing seemingly unused types from `unified` because the definitions +// are exported for two versions of TypeScript (3.4, 4.0) and implicit +// imports during eui.d.ts generation default to the incorrect version (3.4). +// Explicit imports here resolve the version mismatch. +import { + PluggableList, + // @ts-ignore See above comment + // eslint-disable-next-line @typescript-eslint/no-unused-vars + Attacher, + // @ts-ignore See above comment + // eslint-disable-next-line @typescript-eslint/no-unused-vars + Pluggable, + // @ts-ignore See above comment + // eslint-disable-next-line @typescript-eslint/no-unused-vars + Settings, +} from 'unified'; +import markdown from 'remark-parse'; +import emoji from 'remark-emoji'; +import highlight from '../remark/remark_prismjs'; +import * as MarkdownTooltip from '../markdown_tooltip'; +import * as MarkdownCheckbox from '../markdown_checkbox'; +import { markdownLinkValidator } from '../markdown_link_validator'; + +export const getDefaultEuiMarkdownParsingPlugins = (): PluggableList => [ + [markdown, {}], + [highlight, {}], + [emoji, { emoticon: true }], + [MarkdownTooltip.parser, {}], + [MarkdownCheckbox.parser, {}], + [markdownLinkValidator, {}], +]; + +export const defaultParsingPlugins = getDefaultEuiMarkdownParsingPlugins(); diff --git a/src/components/markdown_editor/plugins/markdown_default_plugins.tsx b/src/components/markdown_editor/plugins/markdown_default_plugins/processing_plugins.tsx similarity index 69% rename from src/components/markdown_editor/plugins/markdown_default_plugins.tsx rename to src/components/markdown_editor/plugins/markdown_default_plugins/processing_plugins.tsx index 589b64f8b6c..0b9d35d2d5d 100644 --- a/src/components/markdown_editor/plugins/markdown_default_plugins.tsx +++ b/src/components/markdown_editor/plugins/markdown_default_plugins/processing_plugins.tsx @@ -27,27 +27,11 @@ import { import { Options as Remark2RehypeOptions, Handler } from 'mdast-util-to-hast'; import all from 'mdast-util-to-hast/lib/all'; import rehype2react from 'rehype-react'; -import markdown from 'remark-parse'; -import emoji from 'remark-emoji'; import remark2rehype from 'remark-rehype'; -import highlight from './remark/remark_prismjs'; -import * as MarkdownTooltip from './markdown_tooltip'; -import * as MarkdownCheckbox from './markdown_checkbox'; -import { markdownLinkValidator } from './markdown_link_validator'; -import { EuiMarkdownEditorUiPlugin } from './../markdown_types'; -import { EuiLink } from '../../link'; -import { EuiCodeBlock, EuiCode } from '../../code'; - -export const getDefaultEuiMarkdownParsingPlugins = (): PluggableList => [ - [markdown, {}], - [highlight, {}], - [emoji, { emoticon: true }], - [MarkdownTooltip.parser, {}], - [MarkdownCheckbox.parser, {}], - [markdownLinkValidator, {}], -]; - -export const defaultParsingPlugins = getDefaultEuiMarkdownParsingPlugins(); +import * as MarkdownTooltip from '../markdown_tooltip'; +import * as MarkdownCheckbox from '../markdown_checkbox'; +import { EuiLink } from '../../../link'; +import { EuiCodeBlock, EuiCode } from '../../../code'; const unknownHandler: Handler = (h, node) => { return h(node, node.type, node, all(h, node)); @@ -92,12 +76,3 @@ export const getDefaultEuiMarkdownProcessingPlugins = (): [ ]; export const defaultProcessingPlugins = getDefaultEuiMarkdownProcessingPlugins(); - -export const getDefaultEuiMarkdownUiPlugins = (): EuiMarkdownEditorUiPlugin[] => { - const array = [MarkdownTooltip.plugin]; - // @ts-ignore __originatedFromEui is a custom property - array.__originatedFromEui = true; - return array; -}; - -export const defaultUiPlugins = getDefaultEuiMarkdownUiPlugins(); diff --git a/src/components/markdown_editor/plugins/markdown_default_plugins/ui_plugins.ts b/src/components/markdown_editor/plugins/markdown_default_plugins/ui_plugins.ts new file mode 100644 index 00000000000..0c747c4f1b7 --- /dev/null +++ b/src/components/markdown_editor/plugins/markdown_default_plugins/ui_plugins.ts @@ -0,0 +1,19 @@ +/* + * 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. + */ + +import * as MarkdownTooltip from '../markdown_tooltip'; +import { EuiMarkdownEditorUiPlugin } from './../../markdown_types'; + +export const getDefaultEuiMarkdownUiPlugins = (): EuiMarkdownEditorUiPlugin[] => { + const array = [MarkdownTooltip.plugin]; + // @ts-ignore __originatedFromEui is a custom property + array.__originatedFromEui = true; + return array; +}; + +export const defaultUiPlugins = getDefaultEuiMarkdownUiPlugins(); diff --git a/src/components/markdown_editor/plugins/markdown_tooltip/index.ts b/src/components/markdown_editor/plugins/markdown_tooltip/index.ts new file mode 100644 index 00000000000..5243d17b8cd --- /dev/null +++ b/src/components/markdown_editor/plugins/markdown_tooltip/index.ts @@ -0,0 +1,12 @@ +/* + * 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. + */ + +export { TooltipParser as parser } from './parser'; +export { tooltipPlugin as plugin } from './plugin'; +export { tooltipMarkdownRenderer as renderer } from './renderer'; +export * from './types'; diff --git a/src/components/markdown_editor/plugins/markdown_tooltip.tsx b/src/components/markdown_editor/plugins/markdown_tooltip/parser.ts similarity index 65% rename from src/components/markdown_editor/plugins/markdown_tooltip.tsx rename to src/components/markdown_editor/plugins/markdown_tooltip/parser.ts index 73da893cdec..8f83da8bd16 100644 --- a/src/components/markdown_editor/plugins/markdown_tooltip.tsx +++ b/src/components/markdown_editor/plugins/markdown_tooltip/parser.ts @@ -6,37 +6,11 @@ * Side Public License, v 1. */ -import React, { FunctionComponent } from 'react'; -import { EuiMarkdownAstNodePosition, RemarkTokenizer } from '../markdown_types'; -import { EuiToolTip } from '../../tool_tip'; -import { EuiIcon } from '../../icon'; -import { EuiCodeBlock } from '../../code'; import { Plugin } from 'unified'; +import { RemarkTokenizer } from '../../markdown_types'; +import { TooltipNodeDetails } from './types'; -interface TooltipNodeDetails { - type: 'tooltipPlugin'; - content: string; -} - -const tooltipPlugin = { - name: 'tooltipPlugin', - button: { - label: 'Tooltip', - iconType: 'editorComment', - }, - formatting: { - prefix: '!{tooltip[', - suffix: ']()}', - trimFirst: true, - }, - helpText: ( - - {'!{tooltip[anchor text](helpful description)}'} - - ), -}; - -const TooltipParser: Plugin = function TooltipParser() { +export const TooltipParser: Plugin = function TooltipParser() { const Parser = this.Parser; const tokenizers = Parser.prototype.inlineTokenizers; const methods = Parser.prototype.inlineMethods; @@ -120,29 +94,3 @@ const TooltipParser: Plugin = function TooltipParser() { tokenizers.tooltip = tokenizeTooltip; methods.splice(methods.indexOf('text'), 0, 'tooltip'); }; - -const tooltipMarkdownRenderer: FunctionComponent< - TooltipNodeDetails & { - position: EuiMarkdownAstNodePosition; - } -> = ({ content, children }) => { - return ( - - - - {children} - - - - - ); -}; - -export { - tooltipPlugin as plugin, - TooltipParser as parser, - tooltipMarkdownRenderer as renderer, -}; diff --git a/src/components/markdown_editor/plugins/markdown_tooltip/plugin.tsx b/src/components/markdown_editor/plugins/markdown_tooltip/plugin.tsx new file mode 100644 index 00000000000..dcfda59f61f --- /dev/null +++ b/src/components/markdown_editor/plugins/markdown_tooltip/plugin.tsx @@ -0,0 +1,28 @@ +/* + * 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. + */ + +import React from 'react'; +import { EuiCodeBlock } from '../../../code'; + +export const tooltipPlugin = { + name: 'tooltipPlugin', + button: { + label: 'Tooltip', + iconType: 'editorComment', + }, + formatting: { + prefix: '!{tooltip[', + suffix: ']()}', + trimFirst: true, + }, + helpText: ( + + {'!{tooltip[anchor text](helpful description)}'} + + ), +}; diff --git a/src/components/markdown_editor/plugins/markdown_tooltip/renderer.tsx b/src/components/markdown_editor/plugins/markdown_tooltip/renderer.tsx new file mode 100644 index 00000000000..0110cf2ea56 --- /dev/null +++ b/src/components/markdown_editor/plugins/markdown_tooltip/renderer.tsx @@ -0,0 +1,33 @@ +/* + * 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. + */ + +import React, { FunctionComponent } from 'react'; +import { EuiMarkdownAstNodePosition } from '../../markdown_types'; +import { EuiToolTip } from '../../../tool_tip'; +import { EuiIcon } from '../../../icon'; +import { TooltipNodeDetails } from './types'; + +export const tooltipMarkdownRenderer: FunctionComponent< + TooltipNodeDetails & { + position: EuiMarkdownAstNodePosition; + } +> = ({ content, children }) => { + return ( + + + + {children} + + + + + ); +}; diff --git a/src/components/markdown_editor/plugins/markdown_tooltip/types.ts b/src/components/markdown_editor/plugins/markdown_tooltip/types.ts new file mode 100644 index 00000000000..376da748dea --- /dev/null +++ b/src/components/markdown_editor/plugins/markdown_tooltip/types.ts @@ -0,0 +1,12 @@ +/* + * 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. + */ + +export interface TooltipNodeDetails { + type: 'tooltipPlugin'; + content: string; +}