@salesforcedevs/dx-components 1.18.6 → 1.18.8-layoutfix-alpha

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.18.6",
+    "version": "1.18.8-layoutfix-alpha",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -13,7 +13,7 @@
         "@coveo/headless": "3.22.2",
         "@floating-ui/dom": "1.5.1",
         "@optimizely/optimizely-sdk": "5.3.0",
-        "@salesforcedevs/sfdocs-wires": "0.6.98",
+        "@shikijs/colorized-brackets": "^3.12.2",
         "@types/throttle-debounce": "5.0.2",
         "@vimeo/player": "2.22.0",
         "classnames": "2.5.1",
@@ -26,6 +26,7 @@
         "lodash.kebabcase": "4.1.1",
         "memoize-one": "6.0.0",
         "microtip": "0.2.2",
+        "shiki": "^3.12.2",
         "throttle-debounce": "5.0.0",
         "uuid": "9.0.1"
     },
@@ -44,6 +45,5 @@
     },
     "volta": {
         "node": "20.19.0"
-    },
-    "gitHead": "a96577b729c567b862754304eee2b3ad489b3765"
+    }
 }

package/src/modules/dx/codeBlock/codeBlock.css

@@ -1,6 +1,5 @@
 @import "dxHelpers/code";
 @import "dxHelpers/text";
-@import "./darkAndLightThemes.css";
 
 :host {
     position: relative;
@@ -89,6 +88,7 @@ div.dx-theme-light {
     --dx-c-button-custom-color: #fff;
     --dx-c-button-custom-color-hover: #fff;
     --dx-c-button-custom-background-hover: var(--dx-g-blue-natural-10);
+    --dx-c-button-inline-color: #fff;
 }
 
 .dx-theme-light .btn {
@@ -98,15 +98,15 @@ div.dx-theme-light {
     --dx-c-button-custom-color: var(--dx-g-blue-vibrant-20);
     --dx-c-button-custom-color-hover: var(--dx-g-blue-vibrant-20);
     --dx-c-button-custom-background-hover: var(--dx-g-gray-60);
+    --dx-c-button-inline-color: var(--dx-g-blue-vibrant-20);
 }
 
 div.code-block-content {
     border-radius: 0 0 0.3em 0.3em;
     overflow-y: auto;
-    background: var(--prism-a11y-color-background);
 }
 
-code[class*="language-"] {
+code[class*="shiki"] {
     margin-left: -11px;
 }
 
@@ -114,14 +114,20 @@ code[class*="language-"] {
     margin-right: var(--dx-g-spacing-xs);
 }
 
-pre[class*="language-"] {
+pre[class*="shiki"] {
     border-radius: 0 0 0.3em 0.3em;
-    padding-bottom: var(--dx-g-spacing-smd);
-    padding-top: var(--dx-g-spacing-sm);
-}
-
-pre[class*="language-"].line-numbers {
-    padding-left: 56px;
+    padding: 1em;
+    margin: 0.5em 0;
+    overflow: auto;
+    /* stylelint-disable-next-line */
+    .line {
+        counter-increment: codeblock-line;
+
+        &::before {
+            content: counter(codeblock-line);
+            margin-right: 1.3em;
+        }
+    }
 }
 
 @media screen and (max-width: 640px) {

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

@@ -2,35 +2,17 @@ import { LightningElement, api } from "lwc";
 import { CodeBlockTheme, CodeBlockLanguage } from "typings/custom";
 import cx from "classnames";
 import { track as gtmTrack } from "dxUtils/analytics";
-import prism from "dxUtils/prismjs";
-import { ampscript, sqlDocsTemplate } from "./customLanguages";
+import { highlightCode } from "dxUtils/shiki";
 
 /*
-    Here we create custom syntax highlighting rules for proprietary languages
+    Custom language support is handled by the Shiki wrapper module
+    which maps proprietary languages to supported ones:
+    - AMPScript -> HTML (markup-like syntax)
+    - SSJS -> JavaScript 
+    - GTL -> Handlebars
+    - LWC -> JavaScript/JSX
+    - SQL Documentation -> SQL
 */
-// AMPScript
-prism.languages.ampscript = prism.languages.extend("markup");
-prism.languages.insertBefore("ampscript", "comment", { ampscript });
-
-// SSJS (Server-Side JavaScript)
-prism.languages.ssjs = prism.languages.extend("markup");
-prism.languages.insertBefore("ssjs", "comment", { ampscript });
-
-// GTL (Guide Template Language)
-prism.languages.gtl = prism.languages.extend(
-    "markup",
-    prism.languages.handlebars
-);
-
-// LWC
-prism.languages.lwc = prism.languages.extend("jsx");
-
-/* 
-  Prismjs's SQL native language rules doesn't highlight keyword like "RECURSIVE" and "WINDOW".
-  Instead of modifying the native SQL language rules, we create a new language called "sql_docs_template"
-  that treats all uppercase words as keywords.
-*/
-prism.languages.sql_docs_template = sqlDocsTemplate;
 
 // Used for remove enclosing <pre> tag's (if occurs)
 const preTagRegexp: RegExp = /^<pre.*?>(.*)<\/pre>$/is;
@@ -89,7 +71,8 @@ export default class CodeBlock extends LightningElement {
         { label: "SSJS", id: "ssjs" },
         { label: "GTL", id: "gtl" },
         { label: "LWC", id: "lwc" },
-        { label: "SQL Documentation", id: "sql_docs_template" }
+        { label: "SQL Documentation", id: "sql_docs_template" },
+        { label: "Agentforce Script", id: "afscript" }
     ];
 
     _codeBlock: string = "";
@@ -135,80 +118,100 @@ export default class CodeBlock extends LightningElement {
         this.initializeTheme();
     }
 
-    formatCodeBlock() {
+    async formatCodeBlock() {
         const divEl = this.template.querySelector("div.code-block-content");
         const templateEl = document.createElement("template");
 
+        // Decode HTML entities if the code is already encoded
+        let cleanCodeBlock = this.codeBlock;
+        if (this.isEncoded) {
+            // Create a temporary element to decode HTML entities
+            const tempElement = document.createElement("div");
+            tempElement.innerHTML = cleanCodeBlock;
+            cleanCodeBlock =
+                tempElement.textContent ||
+                tempElement.innerText ||
+                cleanCodeBlock;
+        }
+
         // 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
+        // unlikely to affect Shiki's tokenization) so that Shiki will not strip them but does
+        // still tokenize correctly. We want to italicize the "variables" ourselves after Shiki
         // does its own thing (W-11975205).
-        let cleanCodeBlock = this.codeBlock.replace(
+        cleanCodeBlock = cleanCodeBlock.replace(
             /<var.*?>(.+?)<\/var>/g,
             "vvvvv$1vvvvv"
         );
 
+        // For markup languages, preserve existing HTML comments but don't wrap the whole thing in comments
         if (
             !this.isEncoded &&
             this.markupLangs.includes(this.selectedLanguage.id || "")
         ) {
-            // Temporarily replace HTML comment characters, which Prism would also strip
-            cleanCodeBlock = `<!--${cleanCodeBlock.replace(
+            // Temporarily replace HTML comment characters to preserve them during highlighting
+            cleanCodeBlock = cleanCodeBlock.replace(
                 /<!--(.*?)-->/gs,
-                "@@$1##"
-            )}-->`;
-        } else {
-            // 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");
+                "@@COMMENT_START@@$1@@COMMENT_END@@"
+            );
         }
 
-        // eslint-disable-next-line
-        templateEl.innerHTML = `<pre class='codeblock'>${cleanCodeBlock}</pre>`;
+        // Determine the language to use for highlighting
+        const languageForHighlighting = this.markupLangs.includes(
+            this.selectedLanguage.id || ""
+        )
+            ? "html"
+            : this.selectedLanguage.id || "text";
 
-        const codeBlockEls = templateEl.content.querySelectorAll("pre");
-        codeBlockEls.forEach((codeBlockEl) => {
-            // eslint-disable-next-line
-            const codeHTML = codeBlockEl.innerHTML;
-            codeBlockEl.classList.add("line-numbers");
-            const codeEl = document.createElement("code");
-            codeEl.classList.add(
-                `language-${
-                    this.markupLangs.includes(this.selectedLanguage.id || "")
-                        ? "markup"
-                        : this.selectedLanguage.id
-                }`
+        try {
+            // Use Shiki to highlight the code with current theme
+            const highlightedHtml = await highlightCode(
+                cleanCodeBlock,
+                languageForHighlighting,
+                this.theme as "light" | "dark"
             );
-            // for custom markup content, it is a workaround to be refactored later.
-            // eslint-disable-next-line
-            this.language !== "text"
-                ? // 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
+
+            const tempDiv = document.createElement("div");
             // eslint-disable-next-line
-            codeBlockEl.innerHTML = codeBlockEl.innerHTML.replace(
-                /vvvvv(.+?)vvvvv/g,
-                "<span class='token italic'>$1</span>"
+            tempDiv.innerHTML = highlightedHtml;
+            const preElement = tempDiv.querySelector("pre");
+
+            if (preElement) {
+                preElement.classList.add("codeblock");
+
+                // Italicize anything marked as a "variable" by the docs team
+                // eslint-disable-next-line
+                preElement.innerHTML = preElement.innerHTML.replace(
+                    /vvvvv(.+?)vvvvv/g,
+                    "<span class='token italic'>$1</span>"
+                );
+                // eslint-disable-next-line
+                templateEl.innerHTML = preElement.outerHTML;
+            } else {
+                // Fallback if Shiki fails
+                // eslint-disable-next-line
+                templateEl.innerHTML = `<pre class='codeblock'><code class='shiki'>${cleanCodeBlock}</code></pre>`;
+            }
+        } catch (error) {
+            console.error(
+                "Shiki highlighting failed, falling back to plain text:",
+                error
             );
-        });
+            // Fallback to plain text
+            // eslint-disable-next-line
+            templateEl.innerHTML = `<pre class='codeblock'><code class='shiki'>${cleanCodeBlock}</code></pre>`;
+        }
 
         if (divEl) {
             // eslint-disable-next-line
             divEl.innerHTML = "";
             divEl.append(templateEl.content);
             if (this.markupLangs.includes(this.selectedLanguage.id || "")) {
-                const res = this.template.querySelector(`code.language-markup`);
+                const res = this.template.querySelector(`code`);
                 if (res) {
                     // Restore any temporarily replaced HTML comment characters
                     // eslint-disable-next-line
                     res.innerHTML = res.innerHTML.replace(
-                        /@@(.*?)##/gs,
+                        /@@COMMENT_START@@(.*?)@@COMMENT_END@@/gs,
                         `<span class="token comment">&lt;!--$1--&gt;</span>`
                     );
                 }
@@ -277,6 +280,13 @@ export default class CodeBlock extends LightningElement {
     private toggleTheme = () => {
         this.theme = this.theme === DARK ? LIGHT : DARK;
         this.storeTheme();
+        // Re-render the code block with the new theme
+        this.formatCodeBlock().catch((error) => {
+            console.error(
+                "Failed to re-format code block after theme change:",
+                error
+            );
+        });
     };
 
     private storeTheme = () => {

package/src/modules/dx/toc/toc.css

@@ -3,7 +3,7 @@
 
 .toc {
     display: flex;
-    flex-direction: row-reverse;
+    flex-direction: var(--dx-c-toc-flex-direction, row-reverse);
     max-width: 240px;
     min-width: 80px;
     word-break: break-word;

package/src/modules/dxHelpers/code/code.css

@@ -1,4 +1,3 @@
-/* Custom prism.js stylesheet */
 /* stylelint-disable selector-pseudo-element-no-unknown */
 .dx-variant-block dx-button {
     --dx-c-button-primary-color: var(--dx-g-gray-50);
@@ -21,8 +20,8 @@
     --dx-c-button-inline-color-hover: var(--dx-g-hot-orange-vibrant-95);
 }
 
-pre[class*="language-"],
-code[class*="language-"] {
+pre[class*="shiki"],
+code[class*="shiki"] {
     font-size: 14px;
     text-shadow: none;
     font-family: var(--dx-g-font-mono);
@@ -36,30 +35,30 @@ code[class*="language-"] {
     hyphens: none;
 }
 
-pre[class*="language-"]::selection,
-code[class*="language-"]::selection,
-pre[class*="language-"]::mozselection,
-code[class*="language-"]::mozselection {
+pre[class*="shiki"]::selection,
+code[class*="shiki"]::selection,
+pre[class*="shiki"]::mozselection,
+code[class*="shiki"]::mozselection {
     text-shadow: none;
 }
 
-.dx-theme-dark code[class*="language-"] {
+.dx-theme-dark code[class*="shiki"] {
     color: rgb(255 255 255);
 }
 
-.dx-theme-light code[class*="language-"] {
+.dx-theme-light code[class*="shiki"] {
     color: var(--dx-g-gray-10);
 }
 
-.dx-theme-dark code[class*="language-"]::mozselection {
+.dx-theme-dark code[class*="shiki"]::mozselection {
     background: rgb(255 255 255);
 }
 
-.dx-theme-light code[class*="language-"]::mozselection {
+.dx-theme-light code[class*="shiki"]::mozselection {
     background: var(--dx-g-gray-95);
 }
 
-.dx-variant-card pre[class*="language-"] {
+.dx-variant-card pre[class*="shiki"] {
     padding: 1em;
     border-radius: 0 0 0.3em 0.3em;
     overflow: auto;
@@ -67,12 +66,12 @@ code[class*="language-"]::mozselection {
     white-space: pre;
 }
 
-.dx-variant-card :not(pre) > code[class*="language-"] {
+.dx-variant-card :not(pre) > code[class*="shiki"] {
     padding: 0.1em 0.3em;
     border-radius: 0.3em;
 }
 
-.dx-variant-block pre[class*="language-"] {
+.dx-variant-block pre[class*="shiki"] {
     padding: 1em;
     border-radius: 0.3em;
     overflow: auto;
@@ -81,27 +80,27 @@ code[class*="language-"]::mozselection {
     width: 94%;
 }
 
-.dx-variant-block :not(pre) > code[class*="language-"] {
+.dx-variant-block :not(pre) > code[class*="shiki"] {
     padding: 0.1em 0.3em;
     border-radius: 0.3em;
 }
 
-.dx-theme-dark pre[class*="language-"] {
+.dx-theme-dark pre[class*="shiki"] {
     color: rgb(255 255 255);
     background: var(--dx-g-blue-vibrant-10);
 }
 
-.dx-theme-dark :not(pre) > code[class*="language-"] {
+.dx-theme-dark :not(pre) > code[class*="shiki"] {
     color: rgb(255 255 255);
     background: var(--dx-g-blue-vibrant-10);
 }
 
-.dx-theme-light pre[class*="language-"] {
+.dx-theme-light pre[class*="shiki"] {
     color: var(--dx-g-gray-10);
     background: var(--dx-g-gray-95);
 }
 
-.dx-theme-light :not(pre) > code[class*="language-"] {
+.dx-theme-light :not(pre) > code[class*="shiki"] {
     color: var(--dx-g-gray-10);
     background: var(--dx-g-gray-95);
 }
@@ -133,79 +132,12 @@ pre[data-line] {
     position: relative;
 }
 
-pre[class*="language-"] > code[class*="language-"] {
+pre[class*="shiki"] > code[class*="shiki"] {
     position: relative;
     display: block;
     z-index: 1;
 }
 
-.line-highlight {
-    position: absolute;
-    left: 0;
-    right: 0;
-    padding: inherit 0;
-    margin-top: 1em;
-    background: #1e2d50;
-    box-shadow: inset 5px 0 0 #0176d3;
-    z-index: 0;
-    pointer-events: none;
-    line-height: inherit;
-    white-space: pre;
-}
-
-.line-numbers .line-highlight::before,
-.line-numbers .line-highlight::after {
-    content: none;
-}
-
-.line-numbers-rows > span::before {
-    content: counter(linenumber);
-    color: var(--dx-g-gray-50);
-    display: block;
-    padding-right: 0.4em;
-    text-align: right;
-}
-
-pre[id].linkable-line-numbers span.line-numbers-rows {
-    pointer-events: all;
-}
-
-pre[id].linkable-line-numbers span.line-numbers-rows > span::before {
-    cursor: pointer;
-}
-
-pre[id].linkable-line-numbers span.line-numbers-rows > span:hover::before {
-    background-color: rgb(128 128 128 / 20%);
-}
-
-pre[class*="language-"].line-numbers {
-    position: relative;
-    padding-left: 3.8em;
-    counter-reset: linenumber;
-}
-
-pre[class*="language-"].line-numbers > code {
-    position: relative;
-    white-space: inherit;
-    width: 1px;
-}
-
-.line-numbers .line-numbers-rows {
-    position: absolute;
-    pointer-events: none;
-    top: 0;
-    font-size: 100%;
-    left: -3.8em;
-    width: 3em; /* works for line-numbers below 1000 lines */
-    letter-spacing: -1px;
-    user-select: none;
-}
-
-.line-numbers-rows > span {
-    display: block;
-    counter-increment: linenumber;
-}
-
 .dx-variant-block.code-toolbar {
     display: flex;
 }

package/src/modules/dxUtils/shiki/__mocks__/shiki.ts

@@ -0,0 +1,110 @@
+// Mock for shiki module
+export const createHighlighter = jest.fn().mockImplementation(() => {
+    return Promise.resolve({
+        codeToHtml: jest.fn().mockImplementation((code, options) => {
+            // Preserve the original code content and add variable elements if present
+            let htmlContent = code;
+
+            // Check for <var> elements in the code and preserve them
+            if (code.includes("<var>")) {
+                // Replace <var> elements with tokenized spans
+                htmlContent = code.replace(
+                    /<var>(.*?)<\/var>/g,
+                    (match, content) =>
+                        `<span class="token variable"><var>${content}</var></span>`
+                );
+            }
+
+            // Add test content for specific test cases
+            if (code.includes("Salesforce Functions")) {
+                htmlContent = "Connected to Salesforce Functions";
+            }
+
+            return `<pre class="shiki ${
+                options?.theme || "light"
+            }"><code>${htmlContent}</code></pre>`;
+        }),
+        getLoadedLanguages: jest
+            .fn()
+            .mockReturnValue([
+                "javascript",
+                "typescript",
+                "html",
+                "css",
+                "apex",
+                "text",
+                "handlebars"
+            ])
+    });
+});
+
+export type Highlighter = {
+    codeToHtml: (code: string, options: any) => string;
+    getLoadedLanguages: () => string[];
+};
+
+export type BundledLanguage = string;
+export type BundledTheme = string;
+
+export const codeToHast = jest.fn();
+export const codeToHtml = jest.fn();
+export const codeToTokens = jest.fn();
+export const codeToTokensBase = jest.fn();
+export const codeToTokensWithThemes = jest.fn();
+export const getLastGrammarState = jest.fn();
+export const getSingletonHighlighter = jest.fn();
+
+// Mock for shiki/core exports
+export const createHighlighterCore = jest.fn().mockImplementation(() => {
+    return Promise.resolve({
+        codeToHtml: jest.fn().mockImplementation((code, options) => {
+            // Preserve the original code content and add variable elements if present
+            let htmlContent = code;
+
+            // Check for <var> elements in the code and preserve them
+            if (code.includes("<var>")) {
+                // Replace <var> elements with tokenized spans
+                htmlContent = code.replace(
+                    /<var>(.*?)<\/var>/g,
+                    (match, content) =>
+                        `<span class="token variable"><var>${content}</var></span>`
+                );
+            }
+
+            // Add test content for specific test cases
+            if (code.includes("Salesforce Functions")) {
+                htmlContent = "Connected to Salesforce Functions";
+            }
+
+            return `<pre class="shiki ${
+                options?.theme || "light"
+            }"><code>${htmlContent}</code></pre>`;
+        }),
+        getLoadedLanguages: jest
+            .fn()
+            .mockReturnValue([
+                "javascript",
+                "typescript",
+                "html",
+                "css",
+                "apex",
+                "text",
+                "handlebars"
+            ]),
+        loadLanguage: jest.fn().mockResolvedValue(undefined)
+    });
+});
+
+export type HighlighterCore = {
+    codeToHtml: (code: string, options: any) => string;
+    getLoadedLanguages: () => string[];
+    loadLanguage: (lang: any) => Promise<void>;
+};
+
+// Mock for shiki/engine/oniguruma
+export const createOnigurumaEngine = jest.fn().mockImplementation(() => {
+    return Promise.resolve({});
+});
+
+// Mock for shiki/wasm - just return a promise that resolves to a buffer
+export default Promise.resolve(new ArrayBuffer(0));

package/src/modules/dxUtils/shiki/__mocks__/shikijs.ts

@@ -0,0 +1,23 @@
+// Mock for @shikijs/* packages
+
+// Mock language modules - return a grammar object
+const mockLanguage = {
+    name: "mock-language",
+    scopeName: "source.mock",
+    patterns: []
+};
+
+// Mock theme modules - return a theme object
+const mockTheme = {
+    name: "mock-theme",
+    type: "light",
+    colors: {},
+    tokenColors: []
+};
+
+// Default export for all @shikijs modules
+export default mockLanguage;
+
+// Also export as named export for themes
+export const theme = mockTheme;
+export const lang = mockLanguage;