@salesforcedevs/dx-components 1.3.66 → 1.3.70

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.3.66",
+    "version": "1.3.70",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -40,5 +40,5 @@
         "eventsourcemock": "^2.0.0",
         "luxon": "^3.1.0"
     },
-    "gitHead": "f20982f83f9a0eeaf9b4dcbcd48396af8c341736"
+    "gitHead": "2a96eac5a76bea4ca124d6a3b0119e8312365f60"
 }

package/src/modules/dx/codeBlock/codeBlock.ts

@@ -108,23 +108,35 @@ export default class CodeBlock extends LightningElement {
     formatCodeBlock() {
         const divEl = this.template.querySelector("div.code-block-content");
         const templateEl = document.createElement("template");
+
+        // Replace any <var> markup with a temporary nonsense sentinel (but one that is very
+        // unlikely to affect Prism's tokenization) so that Prism will not strip them but does
+        // still tokenize correctly. We want to italicize the "variables" ourselves after Prism
+        // does its own thing (W-11975205).
+        let cleanCodeBlock = this.codeBlock.replace(
+            /<var.*?>(.+?)<\/var>/g,
+            "vvvvv$1vvvvv"
+        );
+
         if (
             !this.isEncoded &&
             this.markupLangs.includes(this.selectedLanguage.id || "")
         ) {
-            // eslint-disable-next-line
-            templateEl.innerHTML = `<pre class='codeblock'><!--${this.codeBlock.replace(
+            // Temporarily replace HTML comment characters, which Prism would also strip
+            cleanCodeBlock = `<!--${cleanCodeBlock.replace(
                 /<!--(.*?)-->/gs,
                 "@@$1##"
-            )}--></pre>`;
+            )}-->`;
         } else {
-            // eslint-disable-next-line
-            const innerHtml = this.isEncoded
-                ? this.codeBlock
-                : this.codeBlock.replace(/</g, "&lt").replace(/>/g, "&gt");
-
-            templateEl.innerHTML = `<pre class='codeblock'>${innerHtml}</pre>`;
+            // If this is a non-encoded markup language, encode angle brackets that Prism would strip
+            cleanCodeBlock = this.isEncoded
+                ? cleanCodeBlock
+                : cleanCodeBlock.replace(/</g, "&lt").replace(/>/g, "&gt");
         }
+
+        // eslint-disable-next-line
+        templateEl.innerHTML = `<pre class='codeblock'>${cleanCodeBlock}</pre>`;
+
         const codeBlockEls = templateEl.content.querySelectorAll("pre");
         codeBlockEls.forEach((codeBlockEl) => {
             // eslint-disable-next-line
@@ -141,12 +153,19 @@ export default class CodeBlock extends LightningElement {
             // for custom markup content, it is a workaround to be refactored later.
             // eslint-disable-next-line
             this.language !== "text"
-                ? (codeEl.innerHTML = codeHTML)
+                ? // eslint-disable-next-line
+                  (codeEl.innerHTML = codeHTML)
                 : (codeEl.textContent = this._codeBlock.trim());
             // eslint-disable-next-line
             codeBlockEl.innerHTML = "";
             codeBlockEl.appendChild(codeEl);
             Prism.highlightAllUnder(codeBlockEl);
+            // Italicize anything marked as a "variable" by the docs team
+            // eslint-disable-next-line
+            codeBlockEl.innerHTML = codeBlockEl.innerHTML.replace(
+                /vvvvv(.+?)vvvvv/g,
+                "<span class='token italic'>$1</span>"
+            );
         });
 
         if (divEl) {
@@ -156,6 +175,7 @@ export default class CodeBlock extends LightningElement {
             if (this.markupLangs.includes(this.selectedLanguage.id || "")) {
                 const res = this.template.querySelector(`code.language-markup`);
                 if (res) {
+                    // Restore any temporarily replaced HTML comment characters
                     // eslint-disable-next-line
                     res.innerHTML = res.innerHTML.replace(
                         /@@(.*?)##/gs,