@ember-eui/core 1.2.6 → 1.3.3

package/addon/utils/markdown/markdown-types.ts

@@ -0,0 +1,140 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { ComponentType, ReactNode } from 'react';
+import { VFile } from 'vfile';
+import { Node as UnistNode, Position as UnistPosition } from 'unist';
+import { Parser } from 'remark-parse';
+import { VFileMessage } from 'vfile-message';
+import { IconType } from '../../components/eui-icon';
+
+export interface RemarkParser {
+  Parser: typeof Parser;
+  //eslint-disable-next-line
+  tokenizeInline: Function;
+  file: VFile;
+}
+export interface RemarkTokenizer {
+  (
+    this: RemarkParser,
+    //eslint-disable-next-line
+    eat: Function & { now: Function },
+    value: string,
+    silent: boolean
+  ): boolean | void;
+
+  locator?: (value: string, fromIndex: number) => number;
+
+  notInLink?: boolean;
+}
+export interface RehypeNode extends EuiMarkdownAstNode {
+  [index: string]: unknown;
+  tagName: string;
+  children?: RehypeNode[];
+  value: string;
+  type: string;
+}
+interface RemarkRehypeHandlerCallback {
+  (
+    node: UnistPosition,
+    tagName: string,
+    props: Record<string, unknown>,
+    children: RehypeNode[]
+  ): RehypeNode;
+}
+export interface RemarkRehypeHandler {
+  (h: RemarkRehypeHandlerCallback, node: UnistNode): RehypeNode;
+}
+
+export interface EuiMarkdownEditorUiPluginEditorProps<NodeShape> {
+  node: NodeShape | null;
+  onCancel: () => void;
+  onSave: (markdown: string, config: EuiMarkdownStringTagConfig) => void;
+}
+
+export const isPluginWithImmediateFormatting = (
+  x: PluginWithImmediateFormatting | PluginWithDelayedFormatting<any>
+): x is PluginWithImmediateFormatting => {
+  return x.hasOwnProperty('formatting');
+};
+
+export interface PluginWithImmediateFormatting {
+  formatting: EuiMarkdownFormatting;
+  editor?: never;
+}
+
+export interface PluginWithDelayedFormatting<NodeShape> {
+  formatting?: never;
+  editor: ComponentType<EuiMarkdownEditorUiPluginEditorProps<NodeShape>>;
+}
+
+export type EuiMarkdownEditorUiPlugin<NodeShape = any> = {
+  name: string;
+  button: {
+    label: string;
+    iconType: IconType;
+  };
+  helpText?: ReactNode;
+} & (PluginWithImmediateFormatting | PluginWithDelayedFormatting<NodeShape>);
+
+export interface EuiMarkdownFormatting {
+  prefix?: string;
+  suffix?: string;
+  blockPrefix?: string;
+  blockSuffix?: string;
+  multiline?: boolean;
+  replaceNext?: string;
+  prefixSpace?: boolean;
+  scanFor?: string;
+  surroundWithNewlines?: boolean;
+  orderedList?: boolean;
+  trimFirst?: boolean;
+}
+
+export interface EuiMarkdownAstNode {
+  type: string;
+  children?: EuiMarkdownAstNode[];
+  position: EuiMarkdownAstNodePosition;
+  properties: {
+    [index: string]: unknown;
+  };
+}
+export interface EuiMarkdownAstNodePosition {
+  start: { line: number; column: number; offset: number };
+  end: { line: number; column: number; offset: number };
+}
+
+export type EuiMarkdownParseError = string | VFileMessage | Error;
+
+export interface EuiMarkdownDropHandler {
+  supportedFiles: string[];
+  accepts: (itemType: string) => boolean;
+  getFormattingForItem: (
+    file: File
+  ) => EuiMarkdownDragAndDropResult | Promise<EuiMarkdownDragAndDropResult>;
+}
+
+export interface EuiMarkdownStringTagConfig {
+  block: boolean;
+}
+
+export interface EuiMarkdownDragAndDropResult {
+  text: string;
+  config: EuiMarkdownStringTagConfig;
+}

package/addon/utils/markdown/markdown-unified-plugins.d.ts

@@ -0,0 +1,27 @@
+/*
+ * 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.
+ */
+
+declare module 'remark-emoji' {
+  import { Plugin } from 'unified';
+  const RemarkEmoji: Plugin;
+  export = RemarkEmoji;
+}
+
+declare module 'remark-highlight.js' {
+  import { Plugin } from 'unified';
+  const RemarkHighlight: Plugin;
+  export = RemarkHighlight;
+}
+
+declare module 'mdast-util-to-hast/lib/all' {
+  import { Node } from 'unist';
+  import { H } from 'mdast-util-to-hast';
+
+  const all: (h: H, node: Node) => Node[];
+  export = all;
+}

package/addon/utils/markdown/plugins/markdown-add-components.ts

@@ -0,0 +1,63 @@
+import { RehypeNode } from '../markdown-types';
+
+type Visitor = (node: RehypeNode) => RehypeNode;
+
+export const visit = (node: RehypeNode, visitor: Visitor) => {
+  node = visitor(node);
+  if (node) {
+    let children: RehypeNode[] = [];
+    if (node.children) {
+      node.children.forEach((child) => {
+        child = visit(child, visitor);
+        if (child) {
+          children.push(child);
+        }
+      });
+      node.children = children;
+    }
+  }
+  return node;
+};
+
+export default function MarkdownAddComponents(): (tree: RehypeNode) => void {
+  return (tree) => {
+    visit(tree, (node: RehypeNode) => {
+      if (node.tagName === 'component') {
+        node.type = 'component';
+      }
+      if (node.type === 'element' && node.tagName === 'a') {
+        node.properties.className = ['euiLink', 'euiLink--primary'];
+      }
+      if (node.type === 'element' && node.tagName === 'pre') {
+        node.tagName = 'div';
+        node.properties.className = ['euiMarkdownFormat__codeblockWrapper'];
+      }
+      if (node.type === 'element' && node.tagName === 'blockquote') {
+        node.properties.className = ['euiMarkdownFormat__blockquote'];
+      }
+      if (node.type === 'element' && node.tagName === 'table') {
+        node.properties.className = ['euiMarkdownFormat__table'];
+      }
+      if (node.type === 'element' && node.tagName === 'hr') {
+        node.type = 'component';
+        node.properties.componentName = 'eui-horizontal-rule';
+      }
+      if (node.type === 'element' && node.tagName === 'code') {
+        node.type = 'component';
+        const hasBreaks = node.children?.find((child: RehypeNode) =>
+          /\r|\n/.exec(child.value)
+        );
+        if (hasBreaks) {
+          node.properties.componentName =
+            'eui-markdown-format/markdown-code-block';
+          node.properties.fontSize = 'm';
+          node.properties.paddingSize = 's';
+        } else {
+          node.properties.componentName = 'eui-markdown-format/markdown-code';
+          node.properties.inline = true;
+        }
+      }
+      return node;
+    });
+  };
+}

package/addon/utils/markdown/plugins/markdown-checkbox.ts

@@ -0,0 +1,80 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { RemarkTokenizer } from '../markdown-types';
+import { Plugin } from 'unified';
+
+interface CheckboxNodeDetails {
+  type: 'component';
+  componentName: 'eui-markdown-format/markdown-checkbox';
+  lead: string;
+  label: string;
+  isChecked: boolean;
+}
+
+const CheckboxParser: Plugin = function CheckboxParser() {
+  const Parser = this.Parser;
+  const tokenizers = Parser.prototype.blockTokenizers;
+  const methods = Parser.prototype.blockMethods;
+
+  const tokenizeCheckbox: RemarkTokenizer = function tokenizeCheckbox(
+    eat,
+    value,
+    silent
+  ) {
+    /**
+     * optional leading whitespace & single (dash or asterisk) mix
+     * square brackets, optionally containing whitespace and `x`
+     * optional whitespace
+     * remainder of the line is consumed as the textbox label
+     */
+    const checkboxMatch = value.match(/^(\s*[-*]\s*)?\[([\sx]*)\](.+)/);
+    if (checkboxMatch == null) return false;
+
+    if (silent) {
+      return true;
+    }
+
+    const [match, lead = '', checkboxStatus, text] = checkboxMatch;
+    const isChecked = checkboxStatus.indexOf('x') !== -1;
+
+    const now = eat.now();
+    const offset = match.length - text.length;
+    now.column += offset;
+    now.offset += offset;
+    const children = this.tokenizeInline(text, now);
+
+    const add = eat(match);
+
+    return add({
+      type: 'component',
+      componentName: 'eui-markdown-format/markdown-checkbox',
+      lead,
+      label: text,
+      isChecked,
+      inline: true,
+      children
+    } as CheckboxNodeDetails);
+  };
+
+  tokenizers.checkbox = tokenizeCheckbox;
+  methods.splice(methods.indexOf('list'), 0, 'checkbox'); // Run it just before default `list` plugin to inject our own idea of checkboxes.
+};
+
+export { CheckboxParser as parser };

package/addon/utils/markdown/plugins/markdown-default-plugins.ts

@@ -0,0 +1,100 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+// 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 remark2Rehype from 'remark-rehype';
+import { RehypeNode } from '../markdown-types';
+// import * as MarkdownTooltip from './markdown_tooltip';
+// import * as MarkdownCheckbox from './markdown_checkbox';
+// import { markdownLinkValidator } from './markdown_link_validator';
+// import { EuiLink } from '../../link';
+// import { EuiCodeBlock, EuiCode } from '../../code';
+import markdown from 'remark-parse';
+import emoji from 'remark-emoji';
+import all from 'mdast-util-to-hast/lib/all';
+import { Handler } from 'mdast-util-to-hast';
+import * as MarkdownCheckbox from '../plugins/markdown-checkbox';
+import MarkdownAddComponents from '../plugins/markdown-add-components';
+import breaks from 'remark-breaks';
+import highlight from 'remark-highlight.js';
+import * as MarkdownTooltip from '../plugins/markdown-tooltip';
+
+export type DefaultEuiMarkdownParsingPlugins = PluggableList;
+
+export const getDefaultEuiMarkdownParsingPlugins =
+  (): DefaultEuiMarkdownParsingPlugins => [
+    [markdown, {}],
+    [highlight, {}],
+    [emoji, { emoticon: false }],
+    //@ts-ignore
+    [breaks, {}],
+    [MarkdownTooltip.parser, {}],
+    [MarkdownCheckbox.parser, {}]
+    // [MarkdownCheckbox.parser, {}],
+    // [markdownLinkValidator, {}]
+  ];
+
+const unknownHandler: Handler = (h, node) => {
+  return h(node, node.type, node, all(h, node));
+};
+
+export const defaultParsingPlugins = getDefaultEuiMarkdownParsingPlugins();
+
+class Compiler {
+  tree: RehypeNode | null = null;
+  constructor(tree: RehypeNode) {
+    this.tree = tree;
+  }
+
+  compile() {
+    return this.tree;
+  }
+}
+
+function compiler() {
+  //@ts-expect-error
+  this.Compiler = Compiler;
+}
+
+export const getDefaultEuiMarkdownProcessingPlugins = (): [
+  [typeof remark2Rehype, Record<string, unknown>],
+  ...PluggableList // any additional are generic
+] => [
+  [remark2Rehype, { allowDangerousHtml: true, unknownHandler }],
+  [MarkdownAddComponents, {}],
+  [compiler]
+];
+
+export const defaultProcessingPlugins =
+  getDefaultEuiMarkdownProcessingPlugins();

package/addon/utils/markdown/plugins/markdown-tooltip.ts

@@ -0,0 +1,113 @@
+import { RemarkTokenizer } from '../markdown-types';
+import { Plugin } from 'unified';
+
+interface TooltipNodeDetails {
+  type: 'component';
+  tooltipText: string;
+}
+
+const tooltipPlugin = {
+  name: 'tooltipPlugin',
+  button: {
+    label: 'Tooltip',
+    iconType: 'editorComment'
+  },
+  formatting: {
+    prefix: '!{tooltip[',
+    suffix: ']()}',
+    trimFirst: true
+  },
+  helpText: `
+  \`\`\`md
+  !{tooltip[anchor text](helpful description)}
+  \`\`\`
+  `
+};
+
+const TooltipParser: Plugin = function TooltipParser() {
+  const Parser = this.Parser;
+  const tokenizers = Parser.prototype.inlineTokenizers;
+  const methods = Parser.prototype.inlineMethods;
+
+  const tokenizeTooltip: RemarkTokenizer = function tokenizeTooltip(
+    eat,
+    value,
+    silent
+  ) {
+    if (value.startsWith('!{tooltip') === false) return false;
+
+    const nextChar = value[9];
+
+    if (nextChar !== '[') return false; // this isn't actually a tooltip
+
+    let index = 9;
+    function readArg(open: string, close: string) {
+      if (value[index] !== open) throw 'Expected left bracket';
+      index++;
+
+      let body = '';
+      let openBrackets = 0;
+
+      for (; index < value.length; index++) {
+        const char = value[index];
+
+        if (char === close && openBrackets === 0) {
+          index++;
+          return body;
+        } else if (char === close) {
+          openBrackets--;
+        } else if (char === open) {
+          openBrackets++;
+        }
+
+        body += char;
+      }
+
+      return '';
+    }
+    const tooltipAnchor = readArg('[', ']');
+    const tooltipText = readArg('(', ')');
+
+    const now = eat.now();
+
+    if (!tooltipAnchor) {
+      this.file.info('No tooltip anchor found', {
+        line: now.line,
+        column: now.column + 10
+      });
+    }
+    if (!tooltipText) {
+      this.file.info('No tooltip text found', {
+        line: now.line,
+        column: now.column + 12 + tooltipAnchor.length
+      });
+    }
+
+    if (!tooltipText || !tooltipAnchor) return false;
+
+    if (silent) {
+      return true;
+    }
+
+    now.column += 10;
+    now.offset += 10;
+    const children = this.tokenizeInline(tooltipAnchor, now);
+
+    return eat(`!{tooltip[${tooltipAnchor}](${tooltipText})}`)({
+      type: 'component',
+      componentName: 'eui-markdown-format/markdown-tooltip',
+      tooltipText: tooltipText,
+      children
+    } as TooltipNodeDetails);
+  };
+  tokenizeTooltip.notInLink = true;
+
+  tokenizeTooltip.locator = (value, fromIndex) => {
+    return value.indexOf('!{tooltip', fromIndex);
+  };
+
+  tokenizers.tooltip = tokenizeTooltip;
+  methods.splice(methods.indexOf('text'), 0, 'tooltip');
+};
+
+export { tooltipPlugin as plugin, TooltipParser as parser };

package/addon/utils/markdown/plugins/to-dom.ts

@@ -0,0 +1,93 @@
+import { assert } from '@ember/debug';
+import { RehypeNode } from '../markdown-types';
+
+const attributes = ['src', 'alt', 'href', 'target'];
+
+const createDocument = () => {
+  return document;
+};
+
+export interface DynamicComponent {}
+
+export const toDOM = (tree: RehypeNode) => {
+  let document = createDocument();
+  let components: DynamicComponent[] = [];
+
+  const toElements = (parent: Node, nodes: RehypeNode[] = []) => {
+    nodes?.forEach((node) => {
+      let el = toElement(node);
+      if (el) {
+        parent.appendChild(el);
+      }
+    });
+    return parent;
+  };
+
+  const createElement = (
+    name: string,
+    node: RehypeNode,
+    className?: string
+  ) => {
+    let element = document.createElement(name);
+    let properties = node.properties;
+    let classNames = [];
+    if (properties) {
+      if (properties.className) {
+        classNames.push(...(properties.className as string[]));
+      }
+      for (let key in properties) {
+        if (attributes.includes(key)) {
+          let value = properties[key];
+          element.setAttribute(key, value as string);
+        } else {
+          // temporary
+          if (key !== 'className') {
+            console.warn('Unmapped node property', key);
+          }
+        }
+      }
+    }
+    if (className) {
+      classNames.push(className);
+    }
+    if (classNames.length) {
+      element.setAttribute('class', classNames.join(' '));
+    }
+    return element;
+  };
+
+  const toElement = (node: RehypeNode) => {
+    if (node) {
+      let { type } = node;
+      if (type === 'root') {
+        let element = createElement('div', node, 'root');
+        return toElements(element, node.children);
+      } else if (type === 'element') {
+        let element = createElement(node.tagName, node);
+        return toElements(element, node.children);
+      } else if (type === 'text') {
+        return document.createTextNode(node.value);
+      } else if (type === 'component') {
+        let { inline } = node.properties;
+        let element = createElement(inline ? 'span' : 'div', node, 'component');
+        let { _children, ...properties } = node.properties;
+        let content = toElements(document.createElement('span'), node.children);
+        components.push({
+          element,
+          content,
+          ...properties
+        });
+        return element;
+      }
+      assert(`Unsupported node '${type}'`, false);
+    }
+    return;
+  };
+
+  let element = toElement(tree);
+
+  return {
+    element,
+    components
+  };
+};

package/app/components/eui-code/index.js

@@ -0,0 +1 @@
+export { default } from '@ember-eui/core/components/eui-code';

package/app/components/eui-code-block/index.js

@@ -0,0 +1 @@
+export { default } from '@ember-eui/core/components/eui-code-block';

package/app/components/eui-code-block-impl/code-block-controls/index.js

@@ -0,0 +1 @@
+export { default } from '@ember-eui/core/components/eui-code-block-impl/code-block-controls';

package/app/components/eui-code-block-impl/index.js

@@ -0,0 +1 @@
+export { default } from '@ember-eui/core/components/eui-code-block-impl';

package/app/components/eui-copy/index.js

@@ -0,0 +1 @@
+export { default } from '@ember-eui/core/components/eui-copy';

package/app/components/eui-inner-text/index.js

@@ -0,0 +1 @@
+export { default } from '@ember-eui/core/components/eui-inner-text';

package/app/components/eui-markdown-editor/index.js

@@ -0,0 +1 @@
+export { default } from '@ember-eui/core/components/eui-markdown-editor';

package/app/components/eui-markdown-editor-drop-zone/index.js

@@ -0,0 +1 @@
+export { default } from '@ember-eui/core/components/eui-markdown-editor-drop-zone';

package/app/components/eui-markdown-editor-footer/index.js

@@ -0,0 +1 @@
+export { default } from '@ember-eui/core/components/eui-markdown-editor-footer';

package/app/components/eui-markdown-editor-text-area/index.js

@@ -0,0 +1 @@
+export { default } from '@ember-eui/core/components/eui-markdown-editor-text-area';

package/app/components/eui-markdown-editor-toolbar/index.js

@@ -0,0 +1 @@
+export { default } from '@ember-eui/core/components/eui-markdown-editor-toolbar';

package/app/components/eui-markdown-format/index.js

@@ -0,0 +1 @@
+export { default } from '@ember-eui/core/components/eui-markdown-format';

package/app/components/eui-markdown-format/markdown-checkbox/index.js

@@ -0,0 +1 @@
+export { default } from '@ember-eui/core/components/eui-markdown-format/markdown-checkbox';

package/app/components/eui-markdown-format/markdown-code/index.js

@@ -0,0 +1 @@
+export { default } from '@ember-eui/core/components/eui-markdown-format/markdown-code';

package/app/components/eui-markdown-format/markdown-code-block/index.js

@@ -0,0 +1 @@
+export { default } from '@ember-eui/core/components/eui-markdown-format/markdown-code-block';

package/app/components/eui-markdown-format/markdown-tooltip/index.js

@@ -0,0 +1 @@
+export { default } from '@ember-eui/core/components/eui-markdown-format/markdown-tooltip';

package/app/modifiers/get-cursor-node.js

@@ -0,0 +1 @@
+export { default } from '@ember-eui/core/modifiers/get-cursor-node';