@ember-eui/core 7.0.3 → 7.0.6

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

@@ -1,14 +1,6 @@
 {{! This hbs was inspired by https://github.com/ampatspell/ember-cli-remark-static/blob/v3.0.5/addon/components/remark.hbs }}
-<EuiText
-  class="euiMarkdownFormat"
-  @color={{@color}}
-  @grow={{@grow}}
-  @size={{@textSize}}
-  @textAlign={{@textAlign}}
-  {{did-insert this.setRootNode}}
-  {{did-update this.update @value}}
-  ...attributes
->
+{{#if this.result}}
+  {{this.result.element}}
   {{#each this.result.components as |CompNode|}}
     {{#in-element CompNode.element}}
       {{#let
@@ -22,4 +14,4 @@
       {{/let}}
     {{/in-element}}
   {{/each}}
-</EuiText>
+{{/if}}

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

@@ -3,12 +3,11 @@ import {
   defaultParsingPlugins,
   defaultProcessingPlugins
 } from '../../utils/markdown/plugins/markdown-default-plugins';
-import { cached, tracked } from '@glimmer/tracking';
+import { cached } from '@glimmer/tracking';
 import unified, { Processor } from 'unified';
-import { DynamicComponent, toDOM } from '../../utils/markdown/plugins/to-dom';
+import { toDOM } from '../../utils/markdown/plugins/to-dom';
 import type { RehypeNode } from '../../utils/markdown/markdown-types';
 import type EuiMarkdownEditorComponent from '../eui-markdown-editor';
-
 export interface EuiMarkdownEditorToolbarArgs {
   parsingPluginList?: typeof defaultParsingPlugins;
   processingPluginList?: typeof defaultProcessingPlugins;
@@ -17,16 +16,6 @@ export interface EuiMarkdownEditorToolbarArgs {
 }
 
 export default class EuiMarkdownEditorToolbarComponent extends Component<EuiMarkdownEditorToolbarArgs> {
-  @tracked rootNode?: HTMLDivElement;
-  @tracked result?:
-    | {
-        element: Node | undefined;
-        components: DynamicComponent[];
-      }
-    | string;
-
-  _lastValue?: string;
-
   get parsingPluginList() {
     return this.args.parsingPluginList || defaultParsingPlugins;
   }
@@ -35,11 +24,6 @@ export default class EuiMarkdownEditorToolbarComponent extends Component<EuiMark
     return this.args.processingPluginList || defaultProcessingPlugins;
   }
 
-  setRootNode = (node: HTMLDivElement) => {
-    this.rootNode = node;
-    this.update();
-  };
-
   @cached
   get processor() {
     const Compiler = (tree: any) => {
@@ -56,19 +40,16 @@ export default class EuiMarkdownEditorToolbarComponent extends Component<EuiMark
       .use(identityCompiler);
   }
 
-  update = () => {
-    if (this.rootNode) {
-      if (this.args.value === this._lastValue) return;
-      this._lastValue = this.args.value;
-      this.rootNode.innerHTML = '';
-      try {
-        const processed = this.processor.processSync(this.args.value);
-        this.result = toDOM(processed.result as RehypeNode, this.rootNode);
-        //eslint-disable-next-line
-      } catch (e) {
-        this.result = this.args.value;
-      }
+  @cached
+  get result() {
+    try {
+      const processed = this.processor.processSync(this.args.value);
+      return toDOM(processed.result as RehypeNode, {
+        rootClasses: ['euiMarkdownFormat', 'euiText', 'euiText--medium']
+      });
+      //eslint-disable-next-line
+    } catch (e) {
+      return this.args.value;
     }
-    this.result = this.args.value;
-  };
+  }
 }

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

@@ -13,7 +13,12 @@ const createDocument = () => {
 
 export interface DynamicComponent {}
 
-export const toDOM = (tree: RehypeNode, rootNode?: HTMLDivElement) => {
+export const toDOM = (
+  tree: RehypeNode,
+  options?: {
+    rootClasses?: string[];
+  }
+) => {
   let document = createDocument();
   let components: DynamicComponent[] = [];
 
@@ -30,14 +35,14 @@ export const toDOM = (tree: RehypeNode, rootNode?: HTMLDivElement) => {
   const createElement = (
     name: string,
     node: RehypeNode,
-    className?: string
+    classesToAdd?: string[] | string
   ) => {
     let element = document.createElement(name);
     let properties = node.properties;
-    let classNames = [];
+    let finalClassNames = [];
     if (properties) {
       if (properties.className) {
-        classNames.push(...(properties.className as string[]));
+        finalClassNames.push(...(properties.className as string[]));
       }
       for (let key in properties) {
         if (attributes.includes(key)) {
@@ -51,12 +56,15 @@ export const toDOM = (tree: RehypeNode, rootNode?: HTMLDivElement) => {
         }
       }
     }
-    if (className) {
-      classNames.push(className);
-    }
-    if (classNames.length) {
-      element.setAttribute('class', classNames.join(' '));
+    if (classesToAdd) {
+      if (Array.isArray(classesToAdd)) {
+        finalClassNames.push(...classesToAdd);
+      } else {
+        finalClassNames.push(classesToAdd);
+      }
     }
+
+    element.classList.add(...finalClassNames);
     return element;
   };
 
@@ -64,10 +72,11 @@ export const toDOM = (tree: RehypeNode, rootNode?: HTMLDivElement) => {
     if (node) {
       let { type } = node;
       if (type === 'root') {
-        if (rootNode) {
-          return toElements(rootNode, node.children);
-        }
-        let element = createElement('div', node, 'root');
+        let element = createElement(
+          'div',
+          node,
+          options?.rootClasses || ['root']
+        );
         return toElements(element, node.children);
       } else if (type === 'element') {
         let element = createElement(node.tagName, node);
@@ -76,7 +85,9 @@ export const toDOM = (tree: RehypeNode, rootNode?: HTMLDivElement) => {
         return document.createTextNode(node.value);
       } else if (type === 'component') {
         let { inline } = node.properties;
-        let element = createElement(inline ? 'span' : 'div', node, 'component');
+        let element = createElement(inline ? 'span' : 'div', node, [
+          'component'
+        ]);
         let { _children, ...properties } = node.properties;
         let content = toElements(document.createElement('span'), node.children);
         components.push({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ember-eui/core",
-  "version": "7.0.3",
+  "version": "7.0.6",
   "description": "Ember Components for Elastic UI",
   "keywords": [
     "ember-addon",
@@ -186,5 +186,5 @@
   "volta": {
     "extends": "../../package.json"
   },
-  "gitHead": "b30c8188c6be32570cef048294aade71c39bf96e"
+  "gitHead": "dd0f213c42296e63e079c7e13331bf1005dd3566"
 }