@ember-eui/core 5.15.1 → 5.16.1

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

@@ -6,6 +6,7 @@
   @size={{@textSize}}
   @textAlign={{@textAlign}}
   {{did-insert this.setRootNode}}
+  {{did-update this.update @value}}
   ...attributes
 >
   {{#each this.result.components as |CompNode|}}

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

@@ -5,7 +5,7 @@ import {
 } from '../../utils/markdown/plugins/markdown-default-plugins';
 import { cached, tracked } from '@glimmer/tracking';
 import unified, { Processor } from 'unified';
-import { toDOM } from '../../utils/markdown/plugins/to-dom';
+import { DynamicComponent, toDOM } from '../../utils/markdown/plugins/to-dom';
 import type { RehypeNode } from '../../utils/markdown/markdown-types';
 import type EuiMarkdownEditorComponent from '../eui-markdown-editor';
 
@@ -18,6 +18,14 @@ 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;
@@ -29,6 +37,7 @@ export default class EuiMarkdownEditorToolbarComponent extends Component<EuiMark
 
   setRootNode = (node: HTMLDivElement) => {
     this.rootNode = node;
+    this.update();
   };
 
   @cached
@@ -47,17 +56,19 @@ export default class EuiMarkdownEditorToolbarComponent extends Component<EuiMark
       .use(identityCompiler);
   }
 
-  @cached
-  get result() {
+  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);
-        return toDOM(processed.result as RehypeNode, this.rootNode);
+        this.result = toDOM(processed.result as RehypeNode, this.rootNode);
         //eslint-disable-next-line
       } catch (e) {
-        return this.args.value;
+        this.result = this.args.value;
       }
     }
-    return this.args.value;
-  }
+    this.result = 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/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.1",
+  "version": "5.16.1",
   "description": "Ember Components for Elastic UI",
   "keywords": [
     "ember-addon",
@@ -186,5 +186,5 @@
   "volta": {
     "extends": "../../package.json"
   },
-  "gitHead": "557764dea53e6451c9b229f0dca78ada9c76507c"
+  "gitHead": "f415ac77a1e3db648b96f9c4f077230c97b84673"
 }