@ember-eui/core 7.1.4 → 8.0.0-beta.0

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

@@ -1,289 +0,0 @@
-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 { guidFor } from '@ember/object/internals';
-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';
-import { scheduleOnce } from '@ember/runloop';
-import { modifier } from 'ember-modifier';
-
-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 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 const getCursorNodeModifier = 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);
-  };
-});
-
-export default class EuiMarkdownEditorComponent extends Component<EuiMarkdownEditorArgs> {
-  getCursorNodeModifier = getCursorNodeModifier;
-  // 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 ?? guidFor({});
-  @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,
-      // @ts-expect-error
-      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;
-
-      const update = () => {
-        this.currentHeight = resizedTextareaHeight;
-      };
-
-      scheduleOnce('afterRender', this, update);
-    }
-  }
-
-  @action
-  updateCurrentHeight() {
-    let { isPreviewing, autoExpandPreview, height, previewRef, currentHeight } =
-      this;
-    if (isPreviewing && autoExpandPreview && height !== 'full' && previewRef) {
-      //@ts-ignore
-      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;
-
-        const update = () => {
-          if (previewRef) {
-            this.currentHeight = previewRef.scrollHeight + extraHeight;
-          }
-        };
-
-        scheduleOnce('afterRender', this, update);
-      }
-    }
-  }
-
-  @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) {
-      //eslint-disable-next-line
-      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

@@ -1,21 +0,0 @@
-<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

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

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

@@ -1,4 +0,0 @@
-import templateOnlyComponent from '@ember/component/template-only';
-
-export type EuiMarkdownEditorToolbarIconsMarkdownLogo =
-  typeof templateOnlyComponent;

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

@@ -1,16 +0,0 @@
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  width="26"
-  height="16"
-  fill="none"
-  viewBox="0 0 26 16"
-  aria-labelledby={{@titleId}}
-  ...attributes
->
-  {{#if @title}}
-    <title id={{@titleId}}>{{@title}}</title>
-  {{/if}}
-  <path
-    d="M1.25 1.875c0-.345.28-.625.625-.625h22.25c.345 0 .625.28.625.625v12.25c0 .345-.28.625-.625.625H1.875a.625.625 0 01-.625-.625V1.875zM1.875 0C.839 0 0 .84 0 1.875v12.25C0 15.161.84 16 1.875 16h22.25C25.16 16 26 15.16 26 14.125V1.875C26 .839 25.16 0 24.125 0H1.875zM3.75 3.75v8.5h2.5V7.375l2.5 3.125 2.5-3.125v4.875h2.5v-8.5h-2.5l-2.5 3.125-2.5-3.125h-2.5zm11.875 4.375l3.75 4.125 3.75-4.125h-2.5V3.75h-2.5v4.375h-2.5z"
-  ></path>
-</svg>

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

@@ -1,87 +0,0 @@
-<div class="euiMarkdownEditorFooter">
-  <div class="euiMarkdownEditorFooter__actions">
-
-    {{#if @isUploadingFiles}}
-      {{! pending implementation}}
-      <EuiButtonIcon
-        @iconType={{component "eui-loading-spinner"}}
-        @useComponent={{true}}
-        {{! aria-label={ariaLabels.uploadingFiles} }}
-      />
-    {{/if}}
-    {{#if (and @errors @errors.length)}}
-      <EuiPopover
-        @isOpen={{this.isPopoverOpen}}
-        @closePopover={{set this "isPopoverOpen" false}}
-      >
-        <:button>
-          <EuiButtonEmpty
-            @iconType="error"
-            @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={{component "eui-markdown-editor-footer/icons/markdown-logo"}}
-    @useComponent={{true}}
-    @color="text"
-    @useSvg={{true}}
-    {{! aria-label={ariaLabels.showMarkdownHelp} }}
-    {{on "click" (set this "isShowingHelp" (not this.isShowingHelp))}}
-  />
-
-  {{#if this.isShowingHelp}}
-
-    <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>
-        </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>
-
-  {{/if}}
-</div>

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

@@ -1,9 +0,0 @@
-import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
-
-export interface EuiMarkdownEditorFooterArgs {}
-
-export default class EuiMarkdownEditorFooterComponent extends Component<EuiMarkdownEditorFooterArgs> {
-  @tracked isPopoverOpen = false;
-  @tracked isShowingHelp = false;
-}

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

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

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

@@ -1,16 +0,0 @@
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  width="16"
-  height="16"
-  fill="none"
-  viewBox="0 0 16 16"
-  aria-labelledby={{@titleId}}
-  ...attributes
->
-  {{#if @title}}
-    <title id={{@titleId}}>{{@title}}</title>
-  {{/if}}
-  <path
-    d="M11.828 13H4.172A1.173 1.173 0 013 11.828V4.172C3 3.526 3.526 3 4.172 3h7.656C12.474 3 13 3.526 13 4.172v7.656c0 .646-.526 1.172-1.172 1.172zM4.172 3.781a.391.391 0 00-.39.39v7.657c0 .216.175.39.39.39h7.656a.39.39 0 00.39-.39V4.172a.391.391 0 00-.39-.39H4.172zm7.244 2.175l-.582-.521L7.22 9.469 5.125 7.476l-.539.566 2.68 2.548 4.15-4.634z"
-  ></path>
-</svg>

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

@@ -1,3 +0,0 @@
-import Component from '@glimmer/component';
-
-export default class EuiMarkdownEditorToolbarComponent extends Component {}

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

@@ -1,87 +0,0 @@
-<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 class="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={{or item.iconType.component item.iconType}}
-          @useComponent={{item.iconType.component}}
-          aria-label={{item.label}}
-          @useSvg={{item.useSvg}}
-          @isDisabled={{this.isPreviewing}}
-        />
-      </EuiToolTip>
-
-    {{/each}}
-    <span class="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 class="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

@@ -1,93 +0,0 @@
-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 MarkdownCheckmark from './icons/markdown-checkmark';
-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> {
-  boldItalicsButtons = [
-    {
-      id: 'mdBold',
-      label: 'Bold',
-      name: 'bold',
-      iconType: 'editorBold'
-    },
-    {
-      id: 'mdItalic',
-      label: 'Italic',
-      name: 'italic',
-      iconType: 'editorItalic'
-    }
-  ];
-
-  @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: {
-          component: MarkdownCheckmark
-        }
-      }
-    ];
-  }
-
-  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

@@ -1,17 +0,0 @@
-{{! This hbs was inspired by https://github.com/ampatspell/ember-cli-remark-static/blob/v3.0.5/addon/components/remark.hbs }}
-{{#if this.result}}
-  {{this.result.element}}
-  {{#each this.result.components as |CompNode|}}
-    {{#in-element CompNode.element}}
-      {{#let
-        (component (ensure-safe-component CompNode.componentName))
-        as |DynamicComponent|
-      }}
-        <DynamicComponent
-          @replaceNode={{optional @replaceNode}}
-          @node={{CompNode}}
-        />
-      {{/let}}
-    {{/in-element}}
-  {{/each}}
-{{/if}}