Fix: Line numbers and highlighting rendering

Author: dchyun

packages/components/src/components/hds/code-block/index.hbs

@@ -3,7 +3,7 @@
   SPDX-License-Identifier: MPL-2.0
 }}
 
-<div class={{this.classNames}} ...attributes>
+<div class={{this.classNames}} ...attributes {{this._setUpObserver}}>
   <div class="hds-code-block__header">
     {{~yield (hash Title=(component "hds/code-block/title"))~}}
     {{~yield (hash Description=(component "hds/code-block/description"))~}}
@@ -17,7 +17,7 @@
       data-start={{@lineNumberStart}}
       id={{this._preCodeId}}
       tabindex="0"
-    ><code {{did-insert this.setPrismCode}} {{did-update this.setPrismCode this.code @language}}>
+    ><code {{this._setUpCodeBlockCode}}>
         {{~this._prismCode~}}
       </code></pre>
 

packages/components/src/components/hds/code-block/index.ts

@@ -10,6 +10,7 @@ import { assert } from '@ember/debug';
 import { next, schedule } from '@ember/runloop';
 import { htmlSafe } from '@ember/template';
 import { guidFor } from '@ember/object/internals';
+import { modifier } from 'ember-modifier';
 
 import Prism from 'prismjs';
 
@@ -75,6 +76,31 @@ export default class HdsCodeBlock extends Component<HdsCodeBlockSignature> {
 
   // Generates a unique ID for the code content
   private _preCodeId = 'pre-code-' + guidFor(this);
+  private _preCodeElement!: HTMLPreElement;
+  private _observer!: IntersectionObserver;
+
+  // If a code block is hidden from view, and made visible after load, the Prism code needs to be re-run
+  private _setUpObserver = modifier((element: HTMLElement) => {
+    const codeBlock = element.querySelector('code') as HTMLElement;
+    this._observer = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          this.setPrismCode(codeBlock);
+        }
+      });
+    });
+    this._observer.observe(element);
+
+    return () => {
+      this._observer.disconnect();
+    };
+  });
+
+  private _setUpCodeBlockCode = modifier((element: HTMLElement) => {
+    this._preCodeElement = element.querySelector('pre') as HTMLPreElement;
+    this.setPrismCode(element);
+    return () => {};
+  });
 
   // code text content for the CodeBlock
   get code(): string {
@@ -152,24 +178,26 @@ export default class HdsCodeBlock extends Component<HdsCodeBlockSignature> {
           element,
         });
 
-        // Get the actual height & the content height of the preCodeElement
         // eslint-disable-next-line ember/no-runloop
         schedule('afterRender', (): void => {
-          const preCodeElement = document.getElementById(this._preCodeId);
-          this._codeContentHeight = preCodeElement?.scrollHeight ?? 0;
-          this._codeContainerHeight = preCodeElement?.clientHeight ?? 0;
-        });
-
-        // Force prism-line-highlight plugin initialization
-        // Context: https://github.com/hashicorp/design-system/pull/1749#discussion_r1374288785
-        if (this.args.highlightLines) {
-          // we need to delay re-evaluating the context for prism-line-highlight for as much as possible, and `afterRender` is the 'latest' we can use in the component lifecycle
-          // eslint-disable-next-line ember/no-runloop
-          schedule('afterRender', (): void => {
+          // Get the actual height & the content height of the preCodeElement
+          this._codeContentHeight = this._preCodeElement?.scrollHeight ?? 0;
+          this._codeContainerHeight = this._preCodeElement?.clientHeight ?? 0;
+
+          // we need to re-trigger the line numbers generation as late as possible to account for any line wrapping styles that are applied
+          if (this.args.hasLineWrapping && Prism?.plugins?.['lineNumbers']) {
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
+            Prism.plugins['lineNumbers'].highlight(this._preCodeElement);
+          }
+
+          // Force prism-line-highlight plugin initialization
+          // Context: https://github.com/hashicorp/design-system/pull/1749#discussion_r1374288785
+          if (this.args.highlightLines) {
+            // we need to delay re-evaluating the context for prism-line-highlight for as much as possible, and `afterRender` is the 'latest' we can use in the component lifecycle
             // we piggy-back on the plugin's `resize` event listener to trigger a new call of the `highlightLines` function: https://github.com/PrismJS/prism/blob/master/plugins/line-highlight/prism-line-highlight.js#L337
             if (window) window.dispatchEvent(new Event('resize'));
-          });
-        }
+          }
+        });
       });
     }
   }