@ember-eui/core 1.2.3 → 1.3.3

package/addon/components/eui-copy/index.hbs

@@ -0,0 +1,8 @@
+<EuiToolTip @onMouseOut={{this.resetTooltipText}} ...attributes>
+  <:anchor>
+    {{yield this.copy}}
+  </:anchor>
+  <:content>
+    {{this.tooltipText}}
+  </:content>
+</EuiToolTip>

package/addon/components/eui-copy/index.ts

@@ -0,0 +1,37 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+import { copyToClipboard } from '../../utils/copy-to-clipboard';
+
+type EuiCopyArgs = {
+  /**
+   * Text that will be copied to clipboard when copy function is executed.
+   */
+  textToCopy: string;
+  /**
+   * Tooltip message displayed before copy function is called.
+   */
+  beforeMessage?: string;
+  /**
+   * Tooltip message displayed after copy function is called that lets the user know that
+   * 'textToCopy' has been copied to the clipboard.
+   */
+  afterMessage?: string;
+};
+
+export default class EuiCopyComponent extends Component<EuiCopyArgs> {
+  @tracked tooltipText = this.args.beforeMessage;
+
+  @action
+  copy(): void {
+    const isCopied = copyToClipboard(this.args.textToCopy);
+    if (isCopied) {
+      this.tooltipText = this.args.afterMessage;
+    }
+  }
+
+  @action
+  resetTooltipText(): void {
+    this.tooltipText = this.args.beforeMessage;
+  }
+}

package/addon/components/eui-icon/index.hbs

@@ -1,34 +1,39 @@
-{{#if this.useImage}}
-  <img
-    src={{this.icon}}
-    class={{class-names
-      this.optionalColorClass
-      (if this.isAppIcon "euiIcon--app")
-      componentName="EuiIcon"
-      size=this.size
-    }}
-    alt={{if @title @title}}
-    tabIndex={{@tabIndex}}
-    ...attributes
-  />
+{{#if this.icon.inner}}
+  {{! has the shape of a curried component }}
+  {{component this.icon}}
 {{else}}
-  <Svg
-    @name={{this.icon}}
-    @loadingSvg={{this.emptyIcon}}
-    class={{class-names
-      this.optionalColorClass
-      (if this.isAppIcon "euiIcon--app")
-      componentName="EuiIcon"
-      size=this.size
-    }}
-    style={{this.optionalCustomStyles}}
-    tabIndex={{this.tabIndex}}
-    role="image"
-    aria-hidden={{if this.isAriaHidden true}}
-    aria-label={{if @aria-label @aria-label this.titleId}}
-    aria-labelledby={{if @aria-labelledby @aria-labelledby this.titleId}}
-    @title={{@title}}
-    @onIconLoad={{@onIconLoad}}
-    ...attributes
-  />
+  {{#if this.useImage}}
+    <img
+      src={{this.icon}}
+      class={{class-names
+        this.optionalColorClass
+        (if this.isAppIcon "euiIcon--app")
+        componentName="EuiIcon"
+        size=this.size
+      }}
+      alt={{if @title @title}}
+      tabIndex={{@tabIndex}}
+      ...attributes
+    />
+  {{else}}
+    <Svg
+      @name={{this.icon}}
+      @loadingSvg={{this.emptyIcon}}
+      class={{class-names
+        this.optionalColorClass
+        (if this.isAppIcon "euiIcon--app")
+        componentName="EuiIcon"
+        size=this.size
+      }}
+      style={{this.optionalCustomStyles}}
+      tabIndex={{this.tabIndex}}
+      role="image"
+      aria-hidden={{if this.isAriaHidden true}}
+      aria-label={{if @aria-label @aria-label this.titleId}}
+      aria-labelledby={{if @aria-labelledby @aria-labelledby this.titleId}}
+      @title={{@title}}
+      @onIconLoad={{@onIconLoad}}
+      ...attributes
+    />
+  {{/if}}
 {{/if}}

package/addon/components/eui-inner-text/index.hbs

@@ -0,0 +1 @@
+{{yield this.setRef this.innerText}}

package/addon/components/eui-inner-text/index.ts

@@ -0,0 +1,61 @@
+import GlimmerComponent from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+type InnerTextArgs = {
+  fallback?: string;
+};
+
+export default class EuiImage extends GlimmerComponent<InnerTextArgs> {
+  @tracked ref: HTMLElement | null = null;
+  @tracked innerText = '';
+  observer: MutationObserver | null = null;
+
+  get innerTextFallback() {
+    return this.args.fallback ?? '';
+  }
+
+  setupObserver() {
+    this.observer?.disconnect();
+    this.observer = new MutationObserver((mutationsList) => {
+      if (mutationsList.length) this.updateInnerText(this.ref);
+    });
+    if (this.ref) {
+      this.updateInnerText(this.ref);
+      this.observer.observe(this.ref, {
+        characterData: true,
+        subtree: true,
+        childList: true
+      });
+    }
+  }
+
+  updateInnerText(node: HTMLElement | null) {
+    if (!node) return;
+    this.setInnerText(
+      // Check for `innerText` implementation rather than a simple OR check
+      // because in real cases the result of `innerText` could correctly be `null`
+      // while the result of `textContent` could correctly be non-`null` due to
+      // differing reliance on browser layout calculations.
+      // We prefer the result of `innerText`, if available.
+      'innerText' in node
+        ? node.innerText
+        : (node as HTMLElement).textContent || this.innerTextFallback
+    );
+  }
+
+  setInnerText(text: string) {
+    this.innerText = text;
+  }
+
+  @action
+  setRef(ref: HTMLElement): void {
+    this.ref = ref;
+    this.setupObserver();
+  }
+
+  willDestroy(): void {
+    super.willDestroy();
+    this.observer?.disconnect();
+  }
+}

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

@@ -0,0 +1,63 @@
+<div
+  class={{class-names
+    "euiMarkdownEditor"
+    (if (eq this.height "full") "euiMarkdownEditor--fullHeight")
+    (if this.isPreviewing "euiMarkdownEditor--isPreviewing")
+  }}
+  {{did-update
+    this.updateCurrentHeight
+    this.currentHeight
+    this.isPreviewing
+    this.height
+    this.autoExpandPreview
+  }}
+>
+  <EuiMarkdownEditorToolbar
+    @selectedNode={{this.selectedNode}}
+    @markdownActions={{this.markdownActions}}
+    @onClickPreview={{this.setViewMode}}
+    @viewMode={{this.viewMode}}
+    @uiPlugins={{this.toolbarPlugins}}
+    {{did-insert this.setEditorToolbarRef}}
+  />
+  {{#if this.isPreviewing}}
+    <div
+      class="euiMarkdownEditorPreview"
+      {{did-insert (set this "previewRef")}}
+      {{style (hash height=this.previewHeight)}}
+    >
+      <EuiMarkdownFormat
+        @parsingPluginList={{this.parsingPluginList}}
+        @processingPluginList={{this.processingPluginList}}
+        @value={{@value}}
+        @replaceNode={{this.replaceNode}}
+      />
+    </div>
+  {{/if}}
+
+  <div
+    class="euiMarkdownEditor__toggleContainer"
+    {{style height=this.editorToggleContainerHeight}}
+  >
+    <EuiMarkdownEditorDropZone
+      @uiPlugins={{this.toolbarPlugins}}
+      {{resize-observer onResize=this.onResize}}
+    >
+      <EuiMarkdownEditorTextArea
+        {{get-cursor-node (get this.parsed "0") this.setSelectedNode}}
+        {{did-update this.onParse this.parsed}}
+        {{did-insert this.setTextAreaRef}}
+        disabled={{@disabled}}
+        id={{this.editorId}}
+        @height={{this.textAreaHeight}}
+        @maxHeight={{this.textAreaMaxHeight}}
+        value={{@value}}
+        aria-label={{@ariaLabel}}
+        aria-labelledby={{@ariaLabelledBy}}
+        aria-describedby={{@ariaDescribedBy}}
+        {{on "input" (pick "target.value" @onChange)}}
+        ...attributes
+      />
+    </EuiMarkdownEditorDropZone>
+  </div>
+</div>

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

@@ -0,0 +1,221 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { cached, tracked } from '@glimmer/tracking';
+import { argOrDefaultDecorator as argOrDefault } from '../../helpers/arg-or-default';
+import MarkdownActions from '../../utils/markdown/markdown-actions';
+import {
+  MODE_EDITING,
+  MODE_VIEWING
+} from '../../utils/markdown/markdown-modes';
+import {
+  defaultParsingPlugins,
+  defaultProcessingPlugins
+} from '../../utils/markdown/plugins/markdown-default-plugins';
+import { uniqueId } from '../../helpers/unique-id';
+import unified from 'unified';
+import * as MarkdownTooltipPlugin from '../../utils/markdown/plugins/markdown-tooltip';
+import {
+  EuiMarkdownEditorUiPlugin,
+  EuiMarkdownAstNodePosition,
+  EuiMarkdownAstNode
+} from '../../utils/markdown/markdown-types';
+import { Processor } from 'unified';
+
+export interface EuiMarkdownEditorArgs {
+  initialViewMode?: string;
+  editorId?: string;
+  uiPlugins: EuiMarkdownEditorUiPlugin[];
+  value: string;
+  onChange: (str: string) => void;
+  onParse: (
+    parseError: string | null,
+    parsed: { messages: string[]; ast: EuiMarkdownAstNode }
+  ) => void;
+}
+
+// function isNewLine(char: string | undefined): boolean {
+//   if (char == null) return true;
+//   return !!char.match(/[\r\n]/);
+// }
+// function padWithNewlinesIfNeeded(textarea: HTMLTextAreaElement, text: string) {
+//   const selectionStart = textarea.selectionStart;
+//   const selectionEnd = textarea.selectionEnd;
+
+//   // block parsing requires two leading new lines and none trailing, but we add an extra trailing line for readability
+//   const isPrevNewLine = isNewLine(textarea.value[selectionStart - 1]);
+//   const isPrevPrevNewLine = isNewLine(textarea.value[selectionStart - 2]);
+//   const isNextNewLine = isNewLine(textarea.value[selectionEnd]);
+
+//   // pad text with newlines as needed
+//   text = `${isPrevNewLine ? '' : '\n'}${isPrevPrevNewLine ? '' : '\n'}${text}${
+//     isNextNewLine ? '' : '\n'
+//   }`;
+//   return text;
+// }
+
+export default class EuiMarkdownEditorComponent extends Component<EuiMarkdownEditorArgs> {
+  // Defaults
+  @argOrDefault(defaultParsingPlugins)
+  declare parsingPluginList: typeof defaultParsingPlugins;
+
+  @argOrDefault(250) declare height: number | string;
+  @argOrDefault(500) declare maxHeight: number | string;
+  @argOrDefault(true) declare autoExpandPreview: boolean;
+
+  @argOrDefault(defaultProcessingPlugins)
+  declare processingPluginList: typeof defaultProcessingPlugins;
+
+  @tracked selectedNode: Node | null = null;
+  @tracked editorId = this.args.editorId ?? uniqueId();
+  @tracked viewMode = this.args.initialViewMode || MODE_EDITING;
+  @tracked textareaRef: HTMLTextAreaElement | null = null;
+  @tracked previewRef: HTMLDivElement | null = null;
+  @tracked editorToolbarRef: HTMLDivElement | null = null;
+  @tracked currentHeight: number | string = 250;
+  @tracked editorFooterHeight: number = 0;
+  @tracked editorToolbarHeight: number = 0;
+
+  markdownActions: MarkdownActions | null = null;
+
+  get toolbarPlugins() {
+    return [MarkdownTooltipPlugin.plugin, ...(this.args.uiPlugins || [])];
+  }
+
+  constructor(owner: unknown, args: EuiMarkdownEditorArgs) {
+    super(owner, args);
+    this.markdownActions = new MarkdownActions(
+      this.editorId,
+      this.toolbarPlugins
+    );
+    this.currentHeight = this.height;
+  }
+
+  get previewHeight() {
+    if (this.height === 'full') {
+      return `calc(100% - ${this.editorFooterHeight}px)`;
+    }
+    return `${this.currentHeight}px`;
+  }
+
+  get textAreaHeight() {
+    return this.height === 'full'
+      ? '100%'
+      : `calc(${(this.height as number) - this.editorFooterHeight}px)`;
+  }
+
+  get textAreaMaxHeight() {
+    return this.height !== 'full'
+      ? `${(this.maxHeight as number) - this.editorFooterHeight}px`
+      : '';
+  }
+
+  get editorToggleContainerHeight() {
+    return `calc(100% - ${this.editorToolbarHeight}px)`;
+  }
+
+  @action
+  onResize() {
+    if (this.textareaRef && this.isEditing && this.height !== 'full') {
+      const resizedTextareaHeight =
+        this.textareaRef.offsetHeight + this.editorFooterHeight;
+
+      this.currentHeight = resizedTextareaHeight;
+    }
+  }
+
+  @action
+  updateCurrentHeight() {
+    let { isPreviewing, autoExpandPreview, height, previewRef, currentHeight } =
+      this;
+    if (isPreviewing && autoExpandPreview && height !== 'full' && previewRef) {
+      if (previewRef.scrollHeight > currentHeight) {
+        // scrollHeight does not include the border or margin
+        // so we ask for the computed value for those,
+        // which is always in pixels because getComputedValue
+        // returns the resolved values
+        const elementComputedStyle = window.getComputedStyle(previewRef);
+        const borderWidth =
+          parseFloat(elementComputedStyle.borderTopWidth) +
+          parseFloat(elementComputedStyle.borderBottomWidth);
+        const marginWidth =
+          parseFloat(elementComputedStyle.marginTop) +
+          parseFloat(elementComputedStyle.marginBottom);
+
+        // then add an extra pixel for safety and because the scrollHeight value is rounded
+        const extraHeight = borderWidth + marginWidth + 1;
+
+        this.currentHeight = previewRef.scrollHeight + extraHeight;
+      }
+    }
+  }
+
+  @action
+  setTextAreaRef(ref: HTMLTextAreaElement) {
+    this.textareaRef = ref;
+  }
+
+  @action
+  setEditorToolbarRef(ref: HTMLDivElement) {
+    this.editorToolbarRef = ref;
+    this.editorToolbarHeight = ref.offsetHeight;
+  }
+
+  @action
+  replaceNode(position: EuiMarkdownAstNodePosition, next: string) {
+    let value = this.args.value;
+    const leading = value.substr(0, position.start.offset);
+    const trailing = value.substr(position.end.offset);
+    this.args.onChange?.(`${leading}${next}${trailing}`);
+  }
+
+  get isEditing() {
+    return this.viewMode === MODE_EDITING;
+  }
+
+  get isPreviewing() {
+    return this.viewMode === MODE_VIEWING;
+  }
+
+  @action
+  setViewMode() {
+    this.viewMode = this.isPreviewing ? MODE_EDITING : MODE_VIEWING;
+  }
+
+  @cached
+  get parser() {
+    const Compiler = (tree: any) => {
+      return tree;
+    };
+
+    function identityCompiler(this: Processor) {
+      this.Compiler = Compiler;
+    }
+    return unified().use(this.parsingPluginList).use(identityCompiler);
+  }
+
+  @cached
+  get parsed() {
+    try {
+      const parsed = this.parser.processSync(this.args.value);
+      return [parsed, null];
+    } catch (e) {
+      return [null, e];
+    }
+  }
+
+  @action
+  onParse() {
+    if (this.args.onParse) {
+      const [parsed, parseError] = this.parsed;
+      const onParse = this.args.onParse;
+      const messages = parsed ? parsed.messages : [];
+      const ast = parsed ? parsed.result ?? parsed.contents : null;
+      onParse(parseError, { messages, ast });
+    }
+  }
+
+  @action
+  setSelectedNode(node: Node) {
+    this.selectedNode = node;
+  }
+}

package/addon/components/eui-markdown-editor-drop-zone/index.hbs

@@ -0,0 +1,21 @@
+<div
+  class={{class-names
+    "euiMarkdownEditorDropZone"
+    (if this.isDragging "euiMarkdownEditorDropZone--isDragging")
+    (if @hasUnacceptedItems "euiMarkdownEditorDropZone--hasError")
+    (if this.isDraggingError "euiMarkdownEditorDropZone--isDraggingError")
+  }}
+>
+  {{yield}}
+  <EuiMarkdownEditorFooter
+    @uiPlugins={{@uiPlugins}}
+    {{!-- openFiles={() => {
+          setHasUnacceptedItems(false);
+          open();
+        }} --}}
+    @isUploadingFiles={{this.isUploadingFiles}}
+    @hasUnacceptedItems={{@hasUnacceptedItems}}
+    {{! dropHandlers={dropHandlers} }}
+    @errors={{@errors}}
+  />
+</div>

package/addon/components/eui-markdown-editor-drop-zone/index.ts

@@ -0,0 +1,5 @@
+import Component from '@glimmer/component';
+
+export interface EuiMarkdownEditorDropZoneArgs {}
+
+export default class EuiMarkdownEditorDropZoneComponent extends Component<EuiMarkdownEditorDropZoneArgs> {}

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

@@ -0,0 +1,108 @@
+<div class="euiMarkdownEditorFooter">
+  <div class="euiMarkdownEditorFooter__actions">
+
+    {{#if @isUploadingFiles}}
+      {{! pending implementation}}
+      <EuiButtonIcon
+        @iconType={{component "eui-loading-spinner"}}
+        {{! aria-label={ariaLabels.uploadingFiles} }}
+      />
+    {{/if}}
+    {{#if (and @errors @errors.length)}}
+      <EuiPopover
+        @isOpen={{this.isPopoverOpen}}
+        @closePopover={{set this "isPopoverOpen" false}}
+      >
+        <:button>
+          <EuiButtonEmpty
+            @iconType="crossInACircleFilled"
+            @size="s"
+            @color="danger"
+            {{! aria-label={ariaLabels.showSyntaxErrors} }}
+            {{on "click" (set this "isPopoverOpen" (not this.isPopoverOpen))}}
+          >
+            {{@errors.length}}
+          </EuiButtonEmpty>
+        </:button>
+      </EuiPopover>
+    {{/if}}
+  </div>
+  <EuiButtonIcon
+    class="euiMarkdownEditorFooter__help"
+    @iconType={{this.markdownLogo}}
+    @color="text"
+    @useSvg={{true}}
+    {{! aria-label={ariaLabels.showMarkdownHelp} }}
+    {{on "click" (set this "isShowingHelp" (not this.isShowingHelp))}}
+  />
+
+  {{#if this.isShowingHelp}}
+    <EuiOverlayMask>
+      <EuiModal @onClose={{set this "isShowingHelp" false}}>
+        <EuiModalHeader>
+          <EuiTitle>
+            <h3>
+              Syntax Help
+              {{! <EuiI18n
+                token="euiMarkdownEditorFooter.syntaxTitle"
+                default="Syntax help"
+              /> }}
+            </h3>
+          </EuiTitle>
+        </EuiModalHeader>
+        <EuiModalBody>
+
+          <EuiText>
+            <p>The editor uses</p>
+            <a
+              href="https://github.github.com/gfm/"
+              target="_blank"
+              rel="noreferrer noopener"
+            >
+              Github flavored markdown
+            </a>
+            <p>You can also utilize these additional syntax plugins to add rich
+              content to yoru text.</p>
+
+            {{! <EuiI18n
+                    tokens={[
+                      'euiMarkdownEditorFooter.descriptionPrefix',
+                      'euiMarkdownEditorFooter.descriptionSuffix',
+                    ]}
+                    defaults={[
+                      'This editor uses',
+                      'You can also utilize these additional syntax plugins to add rich content to your text.',
+                    ]}>
+                    {([descriptionPrefix, descriptionSuffix]: ReactChild[]) => (
+                      <p>
+                        {descriptionPrefix}{' '}
+                        <a
+                          href="https://github.github.com/gfm/"
+                          target="_blank">
+                          Github flavored markdown
+                        </a>
+                        . {descriptionSuffix}
+                      </p>
+                    )}
+                  </EuiI18n> }}
+          </EuiText>
+          <EuiHorizontalRule />
+          {{#each @uiPlugins as |uiPlugin|}}
+            {{#if uiPlugin.helpText}}
+              <EuiTitle size="xxs">
+                <p>
+                  <strong>{{uiPlugin.name}}</strong>
+                </p>
+              </EuiTitle>
+              <EuiSpacer size="s" />
+              <EuiMarkdownFormat @value={{uiPlugin.helpText}} />
+              <EuiSpacer size="l" />
+
+            {{/if}}
+          {{/each}}
+        </EuiModalBody>
+      </EuiModal>
+    </EuiOverlayMask>
+
+  {{/if}}
+</div>

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

@@ -0,0 +1,20 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { getOwner } from '@ember/application';
+
+export interface EuiMarkdownEditorFooterArgs {}
+
+export default class EuiMarkdownEditorFooterComponent extends Component<EuiMarkdownEditorFooterArgs> {
+  @tracked isPopoverOpen = false;
+  @tracked isShowingHelp = false;
+
+  get svgPath() {
+    const config = getOwner(this).resolveRegistration('config:environment');
+    const svgPath = config?.['@ember-eui/core']?.svgPath || 'svg';
+    return svgPath;
+  }
+
+  get markdownLogo() {
+    return `${this.svgPath}/markdown-logo`;
+  }
+}

package/addon/components/eui-markdown-editor-text-area/index.hbs

@@ -0,0 +1,8 @@
+<textarea
+  class="euiMarkdownEditorTextArea"
+  rows="6"
+  ...attributes
+  {{style (hash height=@height maxHeight=@maxHeight)}}
+>
+  {{yield}}
+</textarea>