[Markdown editor] Split plugin files

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**
 

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';

src/components/markdown_editor/plugins/markdown_checkbox.tsx → 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 (
-    <EuiCheckbox
-      id={htmlIdGenerator()()}
-      checked={isChecked}
-      label={children}
-      onChange={() => {
-        replaceNode(position, `${lead}[${isChecked ? ' ' : 'x'}]${label}`);
-      }}
-    />
-  );
-};
-
-export { CheckboxParser as parser, CheckboxMarkdownRenderer as renderer };

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 (
+    <EuiCheckbox
+      id={htmlIdGenerator()()}
+      checked={isChecked}
+      label={children}
+      onChange={() => {
+        replaceNode(position, `${lead}[${isChecked ? ' ' : 'x'}]${label}`);
+      }}
+    />
+  );
+};

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;
+}

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';

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();

src/components/markdown_editor/plugins/markdown_default_plugins.tsx → 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();

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();

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';

src/components/markdown_editor/plugins/markdown_tooltip.tsx → 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: (
-    <EuiCodeBlock language="md" paddingSize="s" fontSize="l">
-      {'!{tooltip[anchor text](helpful description)}'}
-    </EuiCodeBlock>
-  ),
-};
-
-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 (
-    <span>
-      <EuiToolTip content={content}>
-        <span>
-          <strong>{children}</strong>
-          <EuiIcon
-            type="questionInCircle"
-            className="euiMarkdownTooltip__icon"
-          />
-        </span>
-      </EuiToolTip>
-    </span>
-  );
-};
-
-export {
-  tooltipPlugin as plugin,
-  TooltipParser as parser,
-  tooltipMarkdownRenderer as renderer,
-};

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: (
+    <EuiCodeBlock language="md" paddingSize="s" fontSize="l">
+      {'!{tooltip[anchor text](helpful description)}'}
+    </EuiCodeBlock>
+  ),
+};

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 (
+    <span>
+      <EuiToolTip content={content}>
+        <span>
+          <strong>{children}</strong>
+          <EuiIcon
+            type="questionInCircle"
+            className="euiMarkdownTooltip__icon"
+          />
+        </span>
+      </EuiToolTip>
+    </span>
+  );
+};

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;
+}