@ember-eui/core 1.2.6 → 1.4.0

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>

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,55 @@
+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, { Processor } 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() {
+    const Compiler = (tree: any) => {
+      return tree;
+    };
+
+    function identityCompiler(this: Processor) {
+      this.Compiler = Compiler;
+    }
+    return unified()
+      .use(this.parsingPluginList)
+      .use(this.processingPluginList)
+      .use(identityCompiler);
+  }
+
+  @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>