@ember-eui/core 5.15.0 → 5.16.0

package/addon/components/eui-global-toast-list/index.hbs

@@ -17,6 +17,7 @@
         (if (get this.toastIdToDismissedMap toast.id) "euiGlobalToastListItem-isDismissed")
       }}
       @title={{toast.title}}
+      @useMarkdownFormat={{toast.useMarkdownFormat}}
       @body={{toast.body}}
       @color={{toast.color}}
       @iconType={{toast.iconType}}

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

@@ -5,9 +5,9 @@
   @grow={{@grow}}
   @size={{@textSize}}
   @textAlign={{@textAlign}}
+  {{did-insert this.setRootNode}}
   ...attributes
 >
-  {{this.result.element}}
   {{#each this.result.components as |CompNode|}}
     {{#in-element CompNode.element}}
       {{#let

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

@@ -3,7 +3,7 @@ import {
   defaultParsingPlugins,
   defaultProcessingPlugins
 } from '../../utils/markdown/plugins/markdown-default-plugins';
-import { cached } from '@glimmer/tracking';
+import { cached, tracked } from '@glimmer/tracking';
 import unified, { Processor } from 'unified';
 import { toDOM } from '../../utils/markdown/plugins/to-dom';
 import type { RehypeNode } from '../../utils/markdown/markdown-types';
@@ -17,6 +17,8 @@ export interface EuiMarkdownEditorToolbarArgs {
 }
 
 export default class EuiMarkdownEditorToolbarComponent extends Component<EuiMarkdownEditorToolbarArgs> {
+  @tracked rootNode?: HTMLDivElement;
+
   get parsingPluginList() {
     return this.args.parsingPluginList || defaultParsingPlugins;
   }
@@ -25,6 +27,10 @@ export default class EuiMarkdownEditorToolbarComponent extends Component<EuiMark
     return this.args.processingPluginList || defaultProcessingPlugins;
   }
 
+  setRootNode = (node: HTMLDivElement) => {
+    this.rootNode = node;
+  };
+
   @cached
   get processor() {
     const Compiler = (tree: any) => {
@@ -43,12 +49,15 @@ export default class EuiMarkdownEditorToolbarComponent extends Component<EuiMark
 
   @cached
   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;
+    if (this.rootNode) {
+      try {
+        const processed = this.processor.processSync(this.args.value);
+        return toDOM(processed.result as RehypeNode, this.rootNode);
+        //eslint-disable-next-line
+      } catch (e) {
+        return this.args.value;
+      }
     }
+    return this.args.value;
   }
 }

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

@@ -1,20 +1,17 @@
-<div  
+<div
   class={{class-names
     componentName="EuiToast"
     color=(arg-or-default @color "none")
-  }} 
+  }}
   ...attributes
 >
-  {{!-- TODO: Translate strings when EuiI18n is available --}}
+  {{! TODO: Translate strings when EuiI18n is available }}
   <p {{screen-reader-only}}>
     A new notification appears
   </p>
 
   <div
-    class={{class-names
-      "euiToastHeader"
-      (if @body "euiToastHeader--withBody")
-    }}
+    class={{class-names "euiToastHeader" (if @body "euiToastHeader--withBody")}}
     aria-label="Notification"
     data-test-subj="euiToastHeader"
   >
@@ -45,8 +42,12 @@
   {{/if}}
 
   {{#if @body}}
-    <EuiText @size="s" class="euiToastBody">
-      {{@body}}
-    </EuiText>
+    {{#if @useMarkdownFormat}}
+      <EuiMarkdownFormat @value={{@body}} />
+    {{else}}
+      <EuiText @size="s" class="euiToastBody">
+        {{@body}}
+      </EuiText>
+    {{/if}}
   {{/if}}
 </div>

package/addon/services/eui-toaster.ts

@@ -11,6 +11,7 @@ export interface EuiToastProps {
   color?: ToastColor;
   iconType?: string;
   toastLifeTimeMs?: number;
+  useMarkdownFormat?: boolean;
   onClose?: () => void;
 }
 

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

@@ -13,7 +13,7 @@ const createDocument = () => {
 
 export interface DynamicComponent {}
 
-export const toDOM = (tree: RehypeNode) => {
+export const toDOM = (tree: RehypeNode, rootNode?: HTMLDivElement) => {
   let document = createDocument();
   let components: DynamicComponent[] = [];
 
@@ -64,6 +64,9 @@ export const toDOM = (tree: RehypeNode) => {
     if (node) {
       let { type } = node;
       if (type === 'root') {
+        if (rootNode) {
+          return toElements(rootNode, node.children);
+        }
         let element = createElement('div', node, 'root');
         return toElements(element, node.children);
       } else if (type === 'element') {

package/docs/display/toast/demo/d01-toast.md

@@ -28,6 +28,23 @@ export default class DemoToastListComponent extends Component {
   }
 
   toasts = [
+    {
+      title: 'You can use markdown for body too!',
+      useMarkdownFormat: true,
+      body: `
+  ##### This tooltip is using markdown!
+
+  You can pass \`useMarkdownFormat: true\`
+
+  [click here](https://www.google.com)
+
+  \`\`\`typescript
+    class Hello {
+      @tracked count = 1;
+    }
+  \`\`\`
+      `
+    },
     {
       title: `Long toast`,
       body: 'This toast overrides the default toastLifeTimeMs value and will be around for 15 seconds.',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ember-eui/core",
-  "version": "5.15.0",
+  "version": "5.16.0",
   "description": "Ember Components for Elastic UI",
   "keywords": [
     "ember-addon",
@@ -186,5 +186,5 @@
   "volta": {
     "extends": "../../package.json"
   },
-  "gitHead": "fb7f41ce8b57cee70c1427a9d2f20d1f02d5ebe2"
+  "gitHead": "935bd04cef925daf9e98960727a40e96ea895d3f"
 }