EuiCode, EuiCodeBlock, EuiMarkdownEditor, EuiMarkdownFormat

package.json

@@ -13,7 +13,8 @@
   "resolutions": {
     "@embroider/macros": "^1.5.0",
     "@embroider/shared-internals": "^1.5.0",
-    "@embroider/util": "^1.5.0"
+    "@embroider/util": "^1.5.0",
+    "**/prismjs": "1.27.0"
   },
   "volta": {
     "node": "16.14.0",

packages/core/addon/components/eui-auto-sizer/index.hbs

@@ -0,0 +1,3 @@
+<div {{did-insert this.setRef}} {{style this.style.outerStyle}} ...attributes>
+  {{yield this.style.childStyle}}
+</div>

packages/core/addon/components/eui-auto-sizer/index.ts

@@ -0,0 +1,173 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import createDetectElementResize from '../../utils/detect-element-resize';
+
+type Size = {
+  height: number;
+  width: number;
+};
+
+interface EuiAutoSizerComponentArgs {
+  /** Function responsible for rendering children.*/
+
+  /** Optional custom CSS class name to attach to root AutoSizer element.  */
+  className?: string;
+
+  /** Default height to use for initial render; useful for SSR */
+  defaultHeight?: number;
+
+  /** Default width to use for initial render; useful for SSR */
+  defaultWidth?: number;
+
+  /** Disable dynamic :height property */
+  disableHeight: boolean;
+
+  /** Disable dynamic :width property */
+  disableWidth: boolean;
+
+  /** Nonce of the inlined stylesheet for Content Security Policy */
+  nonce?: string;
+
+  /** Callback to be invoked on-resize */
+  onResize: (size: Size) => void;
+
+  /** Optional inline style */
+  style?: Record<string, string>;
+}
+
+type ResizeHandler = (element: HTMLElement, onResize: () => void) => void;
+
+type DetectElementResize = {
+  addResizeListener: ResizeHandler;
+  removeResizeListener: ResizeHandler;
+};
+
+type DynamicStyle = {
+  outerStyle: {
+    height?: number | string;
+    width?: number | string;
+    overflow?: string;
+  };
+  childStyle?: {
+    height?: number | string;
+    width?: number | string;
+  };
+};
+export default class EuiAutoSizerComponent extends Component<EuiAutoSizerComponentArgs> {
+  _autoSizer?: HTMLElement;
+  _parentNode?: HTMLElement;
+  _window?: any; // uses any instead of Window because Flow doesn't have window type
+  _detectElementResize?: DetectElementResize;
+
+  @tracked height: number | undefined;
+  @tracked width: number | undefined;
+
+  get disableHeight() {
+    return this.args.disableHeight ?? false;
+  }
+
+  get disableWidth() {
+    return this.args.disableWidth ?? false;
+  }
+
+  get style() {
+    let style: DynamicStyle = {
+      outerStyle: { overflow: 'visible' },
+      childStyle: {}
+    };
+    if (!this.disableHeight) {
+      style.outerStyle.height = `0px`;
+      if (style.childStyle) {
+        style.childStyle.height = `${this.height}px`;
+      }
+    }
+
+    if (!this.disableWidth) {
+      style.outerStyle.width = `0px`;
+      if (style.childStyle) {
+        style.childStyle.width = `${this.width}px`;
+      }
+    }
+
+    return style;
+  }
+
+  setup() {
+    const { nonce } = this.args;
+    if (
+      this._autoSizer &&
+      this._autoSizer.parentNode &&
+      this._autoSizer.parentNode.ownerDocument &&
+      this._autoSizer.parentNode.ownerDocument.defaultView &&
+      this._autoSizer.parentNode instanceof
+        this._autoSizer.parentNode.ownerDocument.defaultView.HTMLElement
+    ) {
+      // Delay access of parentNode until mount.
+      // This handles edge-cases where the component has already been unmounted before its ref has been set,
+      // As well as libraries like react-lite which have a slightly different lifecycle.
+      this._parentNode = this._autoSizer.parentNode;
+      this._window = this._autoSizer.parentNode.ownerDocument.defaultView;
+
+      // Defer requiring resize handler in order to support server-side rendering.
+      // See issue #41
+      this._detectElementResize = createDetectElementResize(
+        nonce,
+        this._window
+      );
+      this._detectElementResize.addResizeListener(
+        this._parentNode,
+        this._onResize
+      );
+
+      this._onResize();
+    }
+  }
+
+  _onResize = () => {
+    const { disableHeight, disableWidth } = this;
+
+    if (this._parentNode) {
+      // Guard against AutoSizer component being removed from the DOM immediately after being added.
+      // This can result in invalid style values which can result in NaN values if we don't handle them.
+      // See issue #150 for more context.
+
+      const height = this._parentNode.offsetHeight || 0;
+      const width = this._parentNode.offsetWidth || 0;
+
+      const win = this._window || window;
+      const style = win.getComputedStyle(this._parentNode) || {};
+      const paddingLeft = parseInt(style.paddingLeft, 10) || 0;
+      const paddingRight = parseInt(style.paddingRight, 10) || 0;
+      const paddingTop = parseInt(style.paddingTop, 10) || 0;
+      const paddingBottom = parseInt(style.paddingBottom, 10) || 0;
+
+      const newHeight = height - paddingTop - paddingBottom;
+      const newWidth = width - paddingLeft - paddingRight;
+
+      if (
+        (!disableHeight && this.height !== newHeight) ||
+        (!disableWidth && this.width !== newWidth)
+      ) {
+        this.height = height - paddingTop - paddingBottom;
+        this.width = width - paddingLeft - paddingRight;
+
+        this.args.onResize?.({ height, width });
+      }
+    }
+  };
+
+  setRef = (ele: HTMLElement) => {
+    this._autoSizer = ele;
+    this.setup();
+  };
+
+  willDestroy(): void {
+    super.willDestroy();
+    if (this._detectElementResize && this._parentNode) {
+      this._detectElementResize.removeResizeListener(
+        this._parentNode,
+        this._onResize
+      );
+    }
+  }
+}

packages/core/addon/components/eui-code-block-impl/index.ts

@@ -4,7 +4,7 @@ import { tracked } from '@glimmer/tracking';
 import { argOrDefaultDecorator as argOrDefault } from '../../helpers/arg-or-default';
 import { PaddingSize, FontSize } from '../eui-code-block';
 //@ts-ignore
-import hljs from 'highlight.js';
+// import hljs from 'highlight.js';
 import { keys } from '../../utils/keys';
 import { scheduleOnce } from '@ember/runloop';
 
@@ -75,6 +75,7 @@ export default class EuiAccordionAccordionComponent extends Component<EuiCodeImp
   }
 
   willDestroy(): void {
+    super.willDestroy();
     this.observer?.disconnect();
   }
 
@@ -96,14 +97,14 @@ export default class EuiAccordionAccordionComponent extends Component<EuiCodeImp
 
       if (language) {
         if (code) {
-          hljs.highlightBlock(code);
+          // hljs.highlightBlock(code);
         }
       }
 
       if (this.codeFullScreen) {
         this.codeFullScreen.innerHTML = html;
         if (language) {
-          hljs.highlightBlock(this.codeFullScreen);
+          // hljs.highlightBlock(this.codeFullScreen);
         }
       }
     };

packages/core/addon/components/eui-code-block/controls/index.hbs

@@ -0,0 +1,26 @@
+{{#if (or @showCopyButton @showFullScreenButton)}}
+  <div class="euiCodeBlock__controls">
+    {{#if @showFullScreenButton}}
+      <EuiButtonIcon
+        class="euiCodeBlock__fullScreenButton"
+        @iconType={{if @isFullScreen "fullScreenExit" "fullScreen"}}
+        @color="text"
+        aria-label={{if @isFullScreen "Collapse" "Expand"}}
+        {{on "click" @toggleFullScreen}}
+      />
+    {{/if}}
+
+    {{#if @showCopyButton}}
+      <div className="euiCodeBlock__copyButton">
+        <EuiCopy @textToCopy={{@textToCopy}} @afterMessage="Copied" as |copy|>
+          <EuiButtonIcon
+            {{on "click" copy}}
+            @iconType="copyClipboard"
+            @color="text"
+            aria-label="Copy"
+          />
+        </EuiCopy>
+      </div>
+    {{/if}}
+  </div>
+{{/if}}

packages/core/addon/components/eui-code-block/full-screen-display/index.hbs

@@ -0,0 +1,12 @@
+<EuiOverlayMask>
+  <div
+    class="euiCodeBlock--fontLarge euiCodeBlock--paddingLarge euiCodeBlock-isFullScreen"
+    {{focus-trap
+      isActive=true
+      focusTrapOptions=(hash clickOutsideDeactivates=true)
+    }}
+    ...attributes
+  >
+    {{yield}}
+  </div>
+</EuiOverlayMask>