@salesforcedevs/docs-components 1.17.11-hover-edit → 1.17.11-lwc-fix-alpha1

package/lwc.config.json

@@ -18,8 +18,6 @@
         "doc/header",
         "doc/heading",
         "doc/headingAnchor",
-        "doc/markdownEditor",
-        "doc/textSelectionSearch",
         "doc/overview",
         "doc/phase",
         "doc/specificationContent",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.17.11-hover-edit",
+    "version": "1.17.11-lwc-fix-alpha1",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",

package/src/modules/doc/componentPlayground/componentPlayground.css

@@ -17,6 +17,6 @@ iframe {
     border: 1px solid var(--dx-g-gray-90);
 }
 
-.container {
+.playground-container {
     position: relative;
 }

package/src/modules/doc/componentPlayground/componentPlayground.html

@@ -1,5 +1,5 @@
 <template>
-    <div class="container" lwc:if={playgroundAvailable}>
+    <div class="playground-container" lwc:if={playgroundAvailable}>
         <dx-spinner
             size="large"
             variant="brand"
@@ -8,13 +8,13 @@
         <iframe
             src={playgroundSrc}
             onload={handleIframeLoad}
-            title="Component Playground"
+            title={playgroundTitle}
             allow="clipboard-write"
         ></iframe>
     </div>
     <dx-error-fallback
         lwc:else
-        title="Playground Unavailable"
-        description="This component's playground is currently unavailable. Please check again later."
+        title="Code Examples Unavailable"
+        description="This component's code examples are currently unavailable. Please check again later."
     ></dx-error-fallback>
 </template>

package/src/modules/doc/componentPlayground/componentPlayground.ts

@@ -8,6 +8,19 @@ export default class ComponentPlayground extends LightningElement {
 
     isLoading = true;
 
+    /**
+     * Returns a formatted title for the component playground
+     * Maps 'aura' model to 'Aura' and 'lwc' model to 'Lightning'
+     * Capitalizes the first letter of the component name
+     * @returns {string} Formatted playground title
+     */
+    get playgroundTitle() {
+        const modelName = this.model === "aura" ? "Aura" : "Lightning";
+        const componentName =
+            this.component.charAt(0).toUpperCase() + this.component.slice(1);
+        return `Example previews and code for ${modelName} ${componentName} component`;
+    }
+
     get playgroundAvailable() {
         return (
             this.playgroundAppUrl &&

package/src/modules/doc/lwcContentLayout/lwcContentLayout.ts

@@ -2,44 +2,111 @@ import ContentLayout from "doc/contentLayout";
 
 const TOC_HEADER_TAG = "doc-heading";
 const RNB_BY_TAB = "docs-tab";
-const SPECIFICATION_TAB_TITLE = "Specification";
+const SPECIFICATION_TAG = "doc-specification-content";
 export const OBSERVER_ATTACH_WAIT_TIME = 500;
 
 export default class LwcContentLayout extends ContentLayout {
     private rnbByTab: boolean = false;
 
+    // DOM element caches to avoid repeated queries
+    private tabPanelListCache: any = null;
+    private hasSpecContentCache: boolean | null = null;
+    private allTabsCache: any[] | null = null;
+    private mainSlotCache: any = null;
+
     private setRNBByTab() {
-        const tabPanelListItem: any = this.getTabPanelList();
-        this.rnbByTab = tabPanelListItem?.id === RNB_BY_TAB ? true : false;
+        const tabPanelListItem = this.getTabPanelList();
+        this.rnbByTab = tabPanelListItem?.id === RNB_BY_TAB;
     }
 
     get showTabBasedRNB() {
         return this.rnbByTab;
     }
 
+    /**
+     * Check if the main slot contains doc-specification-content
+     * Uses caching to avoid repeated DOM queries
+     */
+    private hasSpecificationContent(): boolean {
+        if (this.hasSpecContentCache !== null) {
+            return this.hasSpecContentCache;
+        }
+
+        const mainSlot = this.getMainSlot();
+        if (mainSlot) {
+            const assignedElements = (mainSlot as any).assignedElements();
+
+            for (const element of assignedElements) {
+                if (
+                    element.tagName === SPECIFICATION_TAG ||
+                    element.querySelector(SPECIFICATION_TAG) ||
+                    element.shadowRoot?.querySelector(SPECIFICATION_TAG)
+                ) {
+                    return (this.hasSpecContentCache = true);
+                }
+            }
+        }
+        return (this.hasSpecContentCache = false);
+    }
+
+    /**
+     * Clear all caches when content changes
+     */
+    private clearAllCaches(): void {
+        this.hasSpecContentCache = null;
+        this.tabPanelListCache = null;
+        this.allTabsCache = null;
+        this.mainSlotCache = null;
+    }
+
+    /**
+     * Get the main slot element with caching
+     */
+    private getMainSlot(): any {
+        if (!this.mainSlotCache) {
+            this.mainSlotCache =
+                this.template.querySelector("slot:not([name])");
+        }
+        return this.mainSlotCache;
+    }
+
+    /**
+     * Get tab panel list with caching
+     */
+    private getTabPanelList(): any {
+        if (!this.tabPanelListCache) {
+            // eslint-disable-next-line @lwc/lwc/no-document-query
+            this.tabPanelListCache =
+                document.querySelector("dx-tab-panel-list");
+        }
+        return this.tabPanelListCache;
+    }
+
     onRNBClick = (event: CustomEvent) => {
         event.stopPropagation();
-        const currentTab = this.getSelectedTabId();
-        if (currentTab === SPECIFICATION_TAB_TITLE) {
+        if (this.hasSpecificationContent()) {
             this.didScrollToSelectedHash = false;
         }
     };
 
     onTabChanged = () => {
         this.updateRNB();
-    };
 
-    private getTabPanelList() {
-        // eslint-disable-next-line @lwc/lwc/no-document-query
-        return document.querySelector("dx-tab-panel-list");
-    }
+        const { hash } = window.location;
+        if (this.hasSpecificationContent() && hash) {
+            this.didScrollToSelectedHash = false;
+
+            requestAnimationFrame(() => this.updateHeadingForRNB());
+        }
+    };
 
     protected getHeadingElements() {
         let headingElements = super.getHeadingElements();
         if (this.showTabBasedRNB) {
-            const tabPanelListItem: any = this.getTabPanelList();
+            const tabPanelListItem = this.getTabPanelList();
             const tabPanels =
                 tabPanelListItem?.querySelectorAll("dx-tab-panel");
+
             for (const tabPanelItem of tabPanels) {
                 if (tabPanelItem.active) {
                     // This is needed for Specification tab content
@@ -65,6 +132,7 @@ export default class LwcContentLayout extends ContentLayout {
     private updateURL() {
         const tabs = this.getAllTabs();
         const selectedTabId = this.getSelectedTabId();
+
         tabs.forEach((tab: any) => {
             if (tab.getAttribute("aria-selected") === "true") {
                 const tabID = tab.getAttribute("aria-label");
@@ -101,22 +169,38 @@ export default class LwcContentLayout extends ContentLayout {
             const selectedTabId = this.getSelectedTabId();
             if (selectedTabId) {
                 this.selectTabById(selectedTabId);
+
+                // If there's a hash and we have specification content,
+                // we need to wait for the content to load before scrolling
+                const { hash } = window.location;
+                if (this.hasSpecificationContent() && hash) {
+                    // Reset the scroll flag to allow scrolling once content is loaded
+                    this.didScrollToSelectedHash = false;
+                }
             }
         });
     }
 
     private getAllTabs(): any[] {
-        const tabPanelListItem: any = this.getTabPanelList();
+        // Return cached result if available
+        if (this.allTabsCache) {
+            return this.allTabsCache;
+        }
+
+        const tabPanelListItem = this.getTabPanelList();
         if (tabPanelListItem?.shadowRoot) {
-            return Array.from(
+            this.allTabsCache = Array.from(
                 tabPanelListItem.shadowRoot.querySelectorAll(
                     "dx-tab-panel-item"
                 )
             ).map((tabPanelItem: any) =>
                 tabPanelItem.shadowRoot.querySelector("button")
             );
+        } else {
+            this.allTabsCache = [];
         }
-        return [];
+
+        return this.allTabsCache;
     }
 
     private selectTabById(tabId: string) {
@@ -158,8 +242,12 @@ export default class LwcContentLayout extends ContentLayout {
         }
     }
 
+    onSlotChange(): void {
+        this.clearAllCaches();
+        super.onSlotChange();
+    }
+
     updateHeadingForRNB(): void {
-        // We only need to update URL in case of /docs and ignore if tabs are used anywhere else in DSC
         if (this.showTabBasedRNB) {
             this.updateURL();
         }

package/src/modules/doc/specificationContent/specificationContent.html

@@ -73,9 +73,7 @@
                         <template lwc:if={method.firstArgument}>
                             <tr key={method.name}>
                                 <td rowspan={method.arguments.length}>
-                                    <span class="code">
-                                        {method.nameInKebabCase}
-                                    </span>
+                                    <span class="code">{method.name}</span>
                                 </td>
                                 <td rowspan={method.arguments.length}>
                                     {method.description}
@@ -100,9 +98,7 @@
                         <template lwc:else>
                             <tr key={method.name}>
                                 <td>
-                                    <span class="code">
-                                        {method.nameInKebabCase}
-                                    </span>
+                                    <span class="code">{method.name}</span>
                                 </td>
                                 <td>{method.description}</td>
                                 <td colspan="3"></td>

package/src/modules/doc/xmlContent/xmlContent.html

@@ -1,6 +1,6 @@
 <template>
     <doc-content-layout
-        lwc:if={loaded}
+        lwc:if={displayContent}
         lwc:ref="docContentLayout"
         coveo-organization-id={coveoOrganizationId}
         coveo-public-access-token={coveoPublicAccessToken}
@@ -49,4 +49,12 @@
             onnavclick={handleNavClick}
         ></doc-content>
     </doc-content-layout>
+    <div lwc:if={display404}>
+        <dx-error
+            image="https://a.sfdcstatic.com/developer-website/images/404.svg"
+            code="404"
+            header="Beep boop. That did not compute."
+            subtitle="The document you're looking for doesn't seem to exist."
+        ></dx-error>
+    </div>
 </template>

package/src/modules/doc/xmlContent/xmlContent.ts

@@ -11,7 +11,8 @@ import {
     SiderbarFooter,
     HistoryState,
     PageReference,
-    TocMap
+    TocMap,
+    ContentData
 } from "./types";
 import { SearchSyncer } from "docUtils/searchSyncer";
 import { LightningElementWithState } from "dxBaseElements/lightningElementWithState";
@@ -72,7 +73,8 @@ export default class DocXmlContent extends LightningElementWithState<{
     private contentProvider?: FetchContent;
     private docContent = "";
     private language?: DocLanguage | null = null;
-    private loaded = false;
+    private displayContent = false;
+    private display404 = false;
     private _pageHeader?: Header;
     private pdfUrl = "";
     private tocMap: TocMap = {};
@@ -185,7 +187,13 @@ export default class DocXmlContent extends LightningElementWithState<{
             this.apiDomain,
             this.allLanguages
         );
-        this.fetchDocument().then(() => (this.loaded = true));
+        this.fetchDocument().then((content: any) => {
+            if (content) {
+                this.displayContent = true;
+            } else {
+                this.display404 = true;
+            }
+        });
         window.addEventListener("popstate", this.handlePopState);
 
         this.searchSyncer.init();
@@ -463,7 +471,7 @@ export default class DocXmlContent extends LightningElementWithState<{
         );
     }
 
-    async fetchDocument(): Promise<void> {
+    async fetchDocument(): Promise<string> {
         this.setState({
             isFetchingDocument: true
         });
@@ -477,7 +485,7 @@ export default class DocXmlContent extends LightningElementWithState<{
             this.setState({
                 isFetchingDocument: false
             });
-            return;
+            return "";
         }
 
         this.docTitle = data.docTitle;
@@ -509,11 +517,11 @@ export default class DocXmlContent extends LightningElementWithState<{
             data.id
         ) {
             try {
-                await this.fetchContent();
+                const moreData = await this.fetchContent();
                 this.setState({
                     isFetchingDocument: false
                 });
-                return;
+                return moreData.content;
             } catch (error) {
                 this.pageReference.contentDocumentId = `${data.id}.htm`;
                 this.pageReference.hash = "";
@@ -527,9 +535,10 @@ export default class DocXmlContent extends LightningElementWithState<{
         this.setState({
             isFetchingDocument: false
         });
+        return data.content;
     }
 
-    async fetchContent(): Promise<void> {
+    async fetchContent(): Promise<ContentData> {
         this.setState({
             isFetchingContent: true
         });
@@ -553,6 +562,7 @@ export default class DocXmlContent extends LightningElementWithState<{
         this.setState({
             isFetchingContent: false
         });
+        return data;
     }
 
     updateHeaderAndSidebarFooter(): void {

package/src/modules/doc/markdownEditor/markdownEditor.css

@@ -1,225 +0,0 @@
-.markdown-editor {
-    border: 1px solid #e1e5e9;
-    border-radius: 4px;
-    overflow: hidden;
-    background: #fff;
-}
-
-/* Editor Toolbar */
-.editor-toolbar {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    gap: 0.5rem;
-    padding: 0.75rem 1rem;
-    background: #f8f9fa;
-    border-bottom: 1px solid #e1e5e9;
-    flex-wrap: wrap;
-}
-
-.edit-button,
-.cancel-button,
-.save-button {
-    min-width: 80px;
-}
-
-.status-indicator {
-    margin-left: 0.5rem;
-    font-size: 0.875rem;
-}
-
-.status-saving {
-    color: #0176d3;
-}
-
-.status-success {
-    color: #04844b;
-}
-
-.status-error {
-    color: #ea001e;
-}
-
-/* Content Viewer */
-.content-viewer {
-    padding: 1rem;
-}
-
-.content-display {
-    line-height: 1.6;
-    color: #3e3e3c;
-}
-
-.content-display h1,
-.content-display h2,
-.content-display h3,
-.content-display h4,
-.content-display h5,
-.content-display h6 {
-    margin-top: 1.5rem;
-    margin-bottom: 0.5rem;
-    color: #181818;
-}
-
-.content-display p {
-    margin-bottom: 1rem;
-}
-
-.content-display ul,
-.content-display ol {
-    margin-bottom: 1rem;
-    padding-left: 2rem;
-}
-
-.content-display code {
-    background-color: #f3f2f2;
-    padding: 0.125rem 0.25rem;
-    border-radius: 0.25rem;
-    font-family: Monaco, Menlo, "Ubuntu Mono", monospace;
-    font-size: 0.875rem;
-}
-
-.content-display pre {
-    background-color: #f3f2f2;
-    padding: 1rem;
-    border-radius: 0.25rem;
-    overflow-x: auto;
-    margin-bottom: 1rem;
-}
-
-.content-display pre code {
-    background-color: transparent;
-    padding: 0;
-}
-
-/* HTML Content Styling */
-.html-content {
-    line-height: 1.6;
-    color: #3e3e3c;
-}
-
-.html-content h1,
-.html-content h2,
-.html-content h3,
-.html-content h4,
-.html-content h5,
-.html-content h6 {
-    margin-top: 1.5rem;
-    margin-bottom: 0.5rem;
-    color: #181818;
-}
-
-.html-content p {
-    margin-bottom: 1rem;
-}
-
-.html-content ul,
-.html-content ol {
-    margin-bottom: 1rem;
-    padding-left: 2rem;
-}
-
-.html-content code {
-    background-color: #f3f2f2;
-    padding: 0.125rem 0.25rem;
-    border-radius: 0.25rem;
-    font-family: Monaco, Menlo, "Ubuntu Mono", monospace;
-    font-size: 0.875rem;
-}
-
-.html-content pre {
-    background-color: #f3f2f2;
-    padding: 1rem;
-    border-radius: 0.25rem;
-    overflow-x: auto;
-    margin-bottom: 1rem;
-}
-
-.html-content pre code {
-    background-color: transparent;
-    padding: 0;
-}
-
-/* No Content Message */
-.no-content {
-    color: #706e6b;
-    font-style: italic;
-    text-align: center;
-    padding: 2rem;
-    background-color: #f8f9fa;
-    border: 1px dashed #e1e5e9;
-    border-radius: 4px;
-}
-
-/* Editor Wrapper */
-.editor-wrapper {
-    position: relative;
-    min-height: 300px;
-}
-
-.simple-editor {
-    width: 100%;
-    min-height: 300px;
-    padding: 1rem;
-    border: none;
-    outline: none;
-    font-family: Monaco, Menlo, "Ubuntu Mono", monospace;
-    font-size: 0.875rem;
-    line-height: 1.5;
-    resize: vertical;
-    background: #fff;
-    color: #3e3e3c;
-}
-
-.simple-editor:focus {
-    outline: none;
-}
-
-.simple-editor::placeholder {
-    color: #706e6b;
-}
-
-/* Loading Overlay */
-.loading-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: rgb(255 255 255 / 80%);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 1000;
-}
-
-/* Responsive Design */
-@media (max-width: 768px) {
-    .editor-toolbar {
-        flex-wrap: wrap;
-        gap: 0.25rem;
-        justify-content: flex-end;
-    }
-
-    .status-indicator {
-        margin-left: 0.25rem;
-        width: auto;
-        text-align: right;
-        margin-top: 0;
-    }
-
-    .simple-editor {
-        min-height: 250px;
-    }
-
-    .content-viewer {
-        padding: 0.75rem;
-    }
-}
-
-/* Empty state */
-.content-display:empty::before {
-    content: "No content to display";
-    color: #706e6b;
-    font-style: italic;
-}

package/src/modules/doc/markdownEditor/markdownEditor.html

@@ -1,80 +0,0 @@
-<template>
-    <div class="markdown-editor">
-        <!-- Editor Toolbar -->
-        <div class="editor-toolbar">
-            <template if:true={showViewer}>
-                <dx-button
-                    onclick={handleEdit}
-                    variant="tertiary"
-                    class="edit-button"
-                >
-                    Edit Content
-                </dx-button>
-            </template>
-
-            <template if:true={showEditor}>
-                <dx-button
-                    onclick={handleCancel}
-                    variant="secondary"
-                    class="cancel-button"
-                >
-                    Cancel
-                </dx-button>
-
-                <dx-button
-                    onclick={handleSave}
-                    variant="primary"
-                    disabled={saveButtonDisabled}
-                    class="save-button"
-                >
-                    Save
-                </dx-button>
-
-                <div class="status-indicator">
-                    <span class={statusClass}>{statusMessage}</span>
-                </div>
-            </template>
-        </div>
-
-        <!-- Content Viewer (Read-only) -->
-        <template if:true={showViewer}>
-            <div class="content-viewer">
-                <div class="content-display">
-                    <!-- Show HTML content if provided -->
-                    <template if:true={hasHtmlContent}>
-                        <div class="html-content" innerhtml={htmlContent}></div>
-                    </template>
-                    
-                    <!-- Show message if no HTML content -->
-                    <template if:false={hasHtmlContent}>
-                        <div class="no-content">
-                            No content to display. Click 'Edit Content' to fetch from the backend.
-                        </div>
-                    </template>
-                </div>
-            </div>
-        </template>
-
-        <!-- Simple Editor -->
-        <template if:true={showEditor}>
-            <div class="editor-wrapper">
-                <textarea
-                    class="simple-editor"
-                    value={editorContent}
-                    onchange={handleContentChange}
-                    placeholder="Content will be loaded from the fetch URL..."
-                ></textarea>
-            </div>
-        </template>
-
-        <!-- Loading Overlay -->
-        <template if:true={isLoading}>
-            <div class="loading-overlay">
-                <dx-spinner
-                    size="medium"
-                    alternative-text="Loading"
-                ></dx-spinner>
-            </div>
-        </template>
-    </div>
-</template>