@ember-eui/core 1.2.3 → 1.3.3

package/addon/components/eui-markdown-editor-toolbar/index.hbs

@@ -0,0 +1,86 @@
+<div class="euiMarkdownEditorToolbar">
+  <div class="euiMarkdownEditorToolbar__buttons">
+    {{#each this.boldItalicsButtons as |item|}}
+      <EuiToolTip @content={{item.label}} @delay="long">
+        <EuiButtonIcon
+          @color="text"
+          {{on "click" (fn this.handleMdButtonClick item.id)}}
+          @iconType={{item.iconType}}
+          aria-label={{item.label}}
+          @isDisabled={{this.isPreviewing}}
+        />
+      </EuiToolTip>
+
+    {{/each}}
+    <span className="euiMarkdownEditorToolbar__divider"></span>
+    {{#each this.listButtons as |item|}}
+      <EuiToolTip @content={{item.label}} @delay="long">
+        <EuiButtonIcon
+          @color="text"
+          {{on "click" (fn this.handleMdButtonClick item.id)}}
+          @iconType={{item.iconType}}
+          aria-label={{item.label}}
+          @useSvg={{item.useSvg}}
+          @isDisabled={{this.isPreviewing}}
+        />
+      </EuiToolTip>
+
+    {{/each}}
+    <span className="euiMarkdownEditorToolbar__divider"></span>
+    {{#each this.quoteCodeLinkButtons as |item|}}
+      <EuiToolTip @content={{item.label}} @delay="long">
+        <EuiButtonIcon
+          @color="text"
+          {{on "click" (fn this.handleMdButtonClick item.id)}}
+          @iconType={{item.iconType}}
+          aria-label={{item.label}}
+          @isDisabled={{this.isPreviewing}}
+        />
+      </EuiToolTip>
+
+    {{/each}}
+    {{#if (gte this.uiPlugins.length 0)}}
+      <span className="euiMarkdownEditorToolbar__divider"></span>
+      {{#each this.uiPlugins as |plugin|}}
+        {{#let
+          (and @selectedNode (eq @selectedNode.type plugin.name))
+          as |isSelectedNodeType|
+        }}
+          <EuiToolTip @content={{plugin.button.label}} @delay="long">
+            <EuiButtonIcon
+              @color="text"
+              {{style
+                (if isSelectedNodeType (hash background="rgba(0, 0, 0, 0.15)"))
+              }}
+              {{on "click" (fn this.handleMdButtonClick plugin.name)}}
+              @iconType={{plugin.button.iconType}}
+              aria-label={{plugin.button.label}}
+              @isDisabled={{this.isPreviewing}}
+            />
+          </EuiToolTip>
+        {{/let}}
+      {{/each}}
+    {{/if}}
+  </div>
+
+  {{#if this.isPreviewing}}
+    <EuiButtonEmpty
+      @iconType="editorCodeBlock"
+      @color="text"
+      @size="s"
+      {{on "click" @onClickPreview}}
+    >
+      Editor
+    </EuiButtonEmpty>
+
+  {{else}}
+    <EuiButtonEmpty
+      @iconType="eye"
+      @color="text"
+      @size="s"
+      {{on "click" @onClickPreview}}
+    >
+      Preview
+    </EuiButtonEmpty>
+  {{/if}}
+</div>

package/addon/components/eui-markdown-editor-toolbar/index.ts

@@ -0,0 +1,97 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import type MarkdownActions from '../../utils/markdown/markdown-actions';
+import { MODE_VIEWING } from '../../utils/markdown/markdown-modes';
+import { cached } from '@glimmer/tracking';
+import { getOwner } from '@ember/application';
+import { Plugin } from 'unified';
+
+export interface EuiMarkdownEditorToolbarArgs {
+  viewMode?: string;
+  markdownActions: MarkdownActions;
+  uiPlugins: Plugin[];
+  openPluginEditor?: (actionResult: ReturnType<MarkdownActions['do']>) => void;
+}
+
+export default class EuiMarkdownEditorToolbarComponent extends Component<EuiMarkdownEditorToolbarArgs> {
+  boldItalicButtons = [
+    {
+      id: 'mdBold',
+      label: 'Bold',
+      name: 'bold',
+      iconType: 'editorBold'
+    },
+    {
+      id: 'mdItalic',
+      label: 'Italic',
+      name: 'italic',
+      iconType: 'editorItalic'
+    }
+  ];
+
+  get svgPath() {
+    const config = getOwner(this).resolveRegistration('config:environment');
+    const svgPath = config?.['@ember-eui/core']?.svgPath || 'svg';
+    return svgPath;
+  }
+
+  @cached
+  get listButtons() {
+    return [
+      {
+        id: 'mdUl',
+        label: 'Unordered list',
+        name: 'ul',
+        iconType: 'editorUnorderedList'
+      },
+      {
+        id: 'mdOl',
+        label: 'Ordered list',
+        name: 'ol',
+        iconType: 'editorOrderedList'
+      },
+      {
+        id: 'mdTl',
+        label: 'Task list',
+        name: 'tl',
+        useSvg: true,
+        iconType: `${this.svgPath}/markdown-checkmark`
+      }
+    ];
+  }
+
+  quoteCodeLinkButtons = [
+    {
+      id: 'mdQuote',
+      label: 'Quote',
+      name: 'quote',
+      iconType: 'quote'
+    },
+    {
+      id: 'mdCode',
+      label: 'Code',
+      name: 'code',
+      iconType: 'editorCodeBlock'
+    },
+    {
+      id: 'mdLink',
+      label: 'Link',
+      name: 'link',
+      iconType: 'editorLink'
+    }
+  ];
+
+  get uiPlugins() {
+    return this.args.uiPlugins || [];
+  }
+
+  get isPreviewing() {
+    return this.args.viewMode === MODE_VIEWING;
+  }
+
+  @action
+  handleMdButtonClick(mdButtonId: string) {
+    const actionResult = this.args.markdownActions.do(mdButtonId);
+    if (actionResult !== true) this.args.openPluginEditor?.(actionResult);
+  }
+}

package/addon/components/eui-markdown-format/index.hbs

@@ -0,0 +1,13 @@
+<div class="euiMarkdownFormat">
+  {{this.result.element}}
+  {{#each this.result.components as |CompNode|}}
+    {{#in-element CompNode.element}}
+      {{#let (component CompNode.componentName) as |DynamicComponent|}}
+        <DynamicComponent
+          @replaceNode={{optional @replaceNode}}
+          @node={{CompNode}}
+        />
+      {{/let}}
+    {{/in-element}}
+  {{/each}}
+</div>

package/addon/components/eui-markdown-format/index.ts

@@ -0,0 +1,45 @@
+import Component from '@glimmer/component';
+import type MarkdownActions from '../../utils/markdown/markdown-actions';
+import {
+  defaultParsingPlugins,
+  defaultProcessingPlugins
+} from '../../utils/markdown/plugins/markdown-default-plugins';
+import { cached } from '@glimmer/tracking';
+import unified from 'unified';
+import { toDOM } from '../../utils/markdown/plugins/to-dom';
+import type { RehypeNode } from '../../utils/markdown/markdown-types';
+
+export interface EuiMarkdownEditorToolbarArgs {
+  parsingPluginList?: typeof defaultParsingPlugins;
+  processingPluginList?: typeof defaultProcessingPlugins;
+  viewMode?: string;
+  markdownActions: MarkdownActions;
+  value: string;
+}
+
+export default class EuiMarkdownEditorToolbarComponent extends Component<EuiMarkdownEditorToolbarArgs> {
+  get parsingPluginList() {
+    return this.args.parsingPluginList || defaultParsingPlugins;
+  }
+
+  get processingPluginList() {
+    return this.args.processingPluginList || defaultProcessingPlugins;
+  }
+
+  @cached
+  get processor() {
+    return unified().use(this.parsingPluginList).use(this.processingPluginList);
+  }
+
+  @cached
+  //@ts-ignore
+  get result() {
+    try {
+      const processed = this.processor.processSync(this.args.value);
+      return toDOM(processed.result as RehypeNode);
+      //eslint-disable-next-line
+    } catch (e) {
+      return this.args.value;
+    }
+  }
+}

package/addon/components/eui-markdown-format/markdown-checkbox/index.hbs

@@ -0,0 +1,8 @@
+<EuiCheckbox
+  @checked={{@node.isChecked}}
+  {{on "change" this.handleChange}}
+>
+  <:label>
+    {{@node.content}}
+  </:label>
+</EuiCheckbox>

package/addon/components/eui-markdown-format/markdown-checkbox/index.ts

@@ -0,0 +1,28 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+
+interface Position {
+  start: Record<string, unknown>;
+  end: Record<string, unknown>;
+}
+export interface EuiMarkdownFormatMarkdownCheckboxArgs {
+  replaceNode(position: Position, str: string): void;
+  node: {
+    position: Position;
+    lead: string;
+    isChecked: boolean;
+    label: string;
+  };
+}
+
+export default class EuiMarkdownFormatMarkdownCheckboxComponent extends Component<EuiMarkdownFormatMarkdownCheckboxArgs> {
+  @action
+  handleChange() {
+    const { position, lead, isChecked, label } = this.args.node;
+
+    this.args.replaceNode(
+      position,
+      `${lead}[${isChecked ? ' ' : 'x'}]${label}`
+    );
+  }
+}

package/addon/components/eui-markdown-format/markdown-code/index.hbs

@@ -0,0 +1,3 @@
+<EuiCode>
+	{{@node.content}}
+</EuiCode>

package/addon/components/eui-markdown-format/markdown-code-block/index.hbs

@@ -0,0 +1,7 @@
+<EuiCodeBlock
+  @paddingSize={{@node.paddingSize}}
+  @fontSize={{@node.fontSize}}
+  @isCopyable={{true}}
+>
+  {{@node.content}}
+</EuiCodeBlock>

package/addon/components/eui-markdown-format/markdown-tooltip/index.hbs

@@ -0,0 +1,8 @@
+<span>
+  <EuiToolTip @content={{@node.tooltipText}}>
+    <span>
+      <strong>{{@node.content}}</strong>
+      <EuiIcon @type="questionInCircle" class="euiMarkdownTooltip__icon" />
+    </span>
+  </EuiToolTip>
+</span>

package/addon/modifiers/get-cursor-node.ts

@@ -0,0 +1,54 @@
+import { modifier } from 'ember-modifier';
+import { EuiMarkdownAstNode } from '../utils/markdown/markdown-types';
+
+export const getCursorNode = (
+  textareaRef: HTMLInputElement,
+  parsed: any
+): EuiMarkdownAstNode => {
+  const { selectionStart } = textareaRef;
+
+  let node: EuiMarkdownAstNode = parsed.result ?? parsed.contents;
+
+  //eslint-disable-next-line
+  outer: while (true) {
+    if (node.children) {
+      for (let i = 0; i < node.children.length; i++) {
+        const child = node.children[i];
+        if (
+          child.position.start.offset < (selectionStart as number) &&
+          (selectionStart as number) < child.position.end.offset
+        ) {
+          if (child.type === 'text') break outer; // don't dive into `text` nodes
+          node = child;
+          continue outer;
+        }
+      }
+    }
+    break;
+  }
+
+  return node;
+};
+
+function wrapper(
+  textarea: HTMLInputElement,
+  parsed: any,
+  callback: (node: EuiMarkdownAstNode) => void
+) {
+  const node = getCursorNode(textarea, parsed);
+  callback(node);
+}
+
+export default modifier(function getCursorNodeModifier(
+  textarea: HTMLInputElement,
+  [parsed, onSelectedNode]: [boolean, () => void]
+) {
+  const fn = wrapper.bind(null, textarea, parsed, onSelectedNode);
+  textarea.addEventListener('keyup', fn);
+  textarea.addEventListener('mouseup', fn);
+
+  return () => {
+    textarea.removeEventListener('keyup', fn);
+    textarea.removeEventListener('mouseup', fn);
+  };
+});

package/addon/modifiers/resize-observer.ts

@@ -3,7 +3,8 @@ import { action } from '@ember/object';
 
 // IE11 and Safari don't support the `ResizeObserver` API at the time of writing
 const hasResizeObserver =
-  typeof window !== 'undefined' && typeof (window as any).ResizeObserver !== 'undefined';
+  typeof window !== 'undefined' &&
+  typeof (window as any).ResizeObserver !== 'undefined';
 
 export interface Observer {
   disconnect: () => void;
@@ -64,7 +65,10 @@ export default class ResizeObserver extends Modifier<ResizeObserverArgs> {
     let [dimension] = this.args.positional;
     const doesWidthMatter = dimension !== 'height';
     const doesHeightMatter = dimension !== 'width';
-    if ((doesWidthMatter && width !== this.width) || (doesHeightMatter && height !== this.height)) {
+    if (
+      (doesWidthMatter && width !== this.width) ||
+      (doesHeightMatter && height !== this.height)
+    ) {
       this.width = width;
       this.height = height;
       this.args.named?.onResize({ width, height });

package/addon/utils/copy-to-clipboard.ts

@@ -0,0 +1,70 @@
+/*
+ * 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.
+ */
+
+function createHiddenTextElement(text: string): HTMLSpanElement {
+  const textElement = document.createElement('span');
+  textElement.textContent = text;
+  // @ts-ignore .all is a real property - https://drafts.csswg.org/css-cascade/#all-shorthand
+  textElement.style.all = 'unset';
+  // prevents scrolling to the end of the page
+  textElement.style.position = 'fixed';
+  textElement.style.top = '0';
+  textElement.style.clip = 'rect(0, 0, 0, 0)';
+  // used to preserve spaces and line breaks
+  textElement.style.whiteSpace = 'pre';
+  // do not inherit user-select (it may be `none`)
+  textElement.style.webkitUserSelect = 'text';
+  // @ts-ignore this one doesn't appear in the TS definitions for some reason
+  textElement.style.MozUserSelect = 'text';
+  // @ts-ignore this one doesn't appear in the TS definitions for some reason
+  textElement.style.msUserSelect = 'text';
+  textElement.style.userSelect = 'text';
+  return textElement;
+}
+
+export function copyToClipboard(text: string): boolean {
+  let isCopied = true;
+  const range = document.createRange();
+  const selection = window.getSelection();
+  const elementToBeCopied = createHiddenTextElement(text);
+
+  document.body.appendChild(elementToBeCopied);
+  range.selectNode(elementToBeCopied);
+  if (selection) {
+    selection.removeAllRanges();
+    selection.addRange(range);
+  }
+
+  if (!document.execCommand('copy')) {
+    isCopied = false;
+    console.warn('Unable to copy to clipboard.');
+  }
+
+  if (selection) {
+    if (typeof selection.removeRange === 'function') {
+      selection.removeRange(range);
+    } else {
+      selection.removeAllRanges();
+    }
+  }
+
+  document.body.removeChild(elementToBeCopied);
+
+  return isCopied;
+}

package/addon/utils/css-mappings/eui-code-block-impl.ts

@@ -0,0 +1,24 @@
+export const baseClass = 'euiCodeBlock';
+
+export const fontSizeMapping = {
+  s: `${baseClass}--fontSmall`,
+  m: `${baseClass}--fontMedium`,
+  l: `${baseClass}--fontLarge`
+};
+
+export const paddingSizeMapping = {
+  none: '',
+  s: `${baseClass}--paddingSmall`,
+  m: `${baseClass}--paddingMedium`,
+  l: `${baseClass}--paddingLarge`
+};
+
+const mapping: ComponentMapping = {
+  base: baseClass,
+  properties: {
+    fontSize: fontSizeMapping,
+    paddingSize: paddingSizeMapping
+  }
+};
+
+export default mapping;

package/addon/utils/css-mappings/index.ts

@@ -52,8 +52,10 @@ import EuiRangeLevels from './eui-range-levels';
 import EuiToolTip from './eui-tool-tip';
 import EuiToast from './eui-toast';
 import EuiGlobalToastList from './eui-global-toast-list';
+import EuiCodeBlockImpl from './eui-code-block-impl';
 
 const mapping: Mapping = {
+  EuiCodeBlockImpl,
   EuiAccordion,
   EuiIcon,
   EuiModal,