@salesforcedevs/docs-components 1.17.6-hover-edit → 1.17.6-redoc2

package/src/modules/doc/flexReference/types.ts

@@ -0,0 +1,80 @@
+import { DocPhaseInfo } from "typings/custom";
+
+// Redoc type declarations for window object
+export interface RedocNavigationItem {
+    label: string;
+    name: string; // Hash-based URL (#section-id)
+    id: string;   // Section ID for scroll targeting
+    children?: RedocNavigationItem[];
+}
+
+export interface RedocSidebarData {
+    spec: {
+        title: string;
+        version: string;
+    };
+    items: RedocNavigationItem[];
+}
+
+// Core types needed for reference handling
+export type ReferenceType = "markdown" | "rest-raml" | "rest-oa2" | "rest-oa3";
+
+/**
+ * Represents parsed topic for the sidebar.
+ */
+export interface ParsedMarkdownTopic {
+    label: string;
+    name: string;
+    children: ParsedMarkdownTopic[];
+    link?: {
+        href: string;
+        target?: string;
+    };
+    isExpanded?: boolean;
+}
+
+export interface AmfConfig {
+    id: string;
+    version?: string;
+    docPhase?: DocPhaseInfo;
+    title: string;
+    href: string;
+    referenceType: ReferenceType;
+
+    // determines if a reference config is the current active and selected one.
+    isSelected: boolean;
+
+    // required for spec based references
+    amf?: string;
+
+    // required for markdown based references
+    topic?: ParsedMarkdownTopic;
+}
+
+export interface ReferenceVersion {
+    id: string;
+    label: string;
+    deprecated?: boolean;
+    selected?: boolean;
+    link: {
+        href: string;
+    };
+}
+
+export interface ReferenceSetConfig {
+    refId?: string;
+    versionToRefMap?: Map<string, Array<AmfConfig>>;
+    refList: Array<AmfConfig>;
+    versions: Array<ReferenceVersion>;
+}
+
+declare global {
+    interface Window {
+        Redoc?: {
+            init: (specUrl: string, options: any, container: Element) => Promise<void>;
+            getSpecStructure?: (specUrl: string) => Promise<RedocSidebarData>;
+        };
+    }
+}
+
+export {};

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>

package/src/modules/doc/markdownEditor/markdownEditor.ts

@@ -1,148 +0,0 @@
-import { LightningElement, api, track } from "lwc";
-
-export default class MarkdownEditor extends LightningElement {
-    @api fetchUrl: string = "";
-    @api saveUrl: string = "";
-    @api filePath: string = "";
-    @api htmlContent: string = "";
-
-    @track isEditing: boolean = false;
-    @track editorContent: string = "";
-    @track isLoading: boolean = false;
-    @track saveStatus: "idle" | "saving" | "success" | "error" = "idle";
-
-    // Event Handlers
-    async handleEdit() {
-        if (!this.fetchUrl) {
-            console.error("Fetch URL not configured");
-            return;
-        }
-
-        this.isLoading = true;
-        this.saveStatus = "idle";
-
-        try {
-            const response = await fetch(this.fetchUrl, {
-                method: "GET",
-                headers: {
-                    "Content-Type": "application/json"
-                }
-            });
-
-            if (response.ok) {
-                const data = await response.json();
-                this.editorContent = data.content || data.text || data.body || "";
-                this.isEditing = true;
-            } else {
-                throw new Error(`Failed to fetch content: ${response.status}`);
-            }
-        } catch (error) {
-            console.error("Failed to fetch content:", error);
-            this.saveStatus = "error";
-        } finally {
-            this.isLoading = false;
-        }
-    }
-
-    handleCancel() {
-        this.isEditing = false;
-        this.saveStatus = "idle";
-        this.editorContent = "";
-    }
-
-    handleContentChange(event: Event) {
-        const target = event.target as HTMLTextAreaElement;
-        this.editorContent = target.value;
-    }
-
-    async handleSave() {
-        if (!this.saveUrl) {
-            console.error("Save URL not configured");
-            this.saveStatus = "error";
-            return;
-        }
-
-        this.saveStatus = "saving";
-        this.isLoading = true;
-
-        try {
-            const response = await fetch(this.saveUrl, {
-                method: "POST",
-                headers: {
-                    "Content-Type": "application/json"
-                },
-                body: JSON.stringify({
-                    content: this.editorContent,
-                    filePath: this.filePath
-                })
-            });
-
-            if (response.ok) {
-                this.saveStatus = "success";
-                this.isEditing = false;
-                this.editorContent = "";
-
-                // Dispatch save success event
-                this.dispatchEvent(
-                    new CustomEvent("saved", {
-                        detail: {
-                            success: true,
-                            content: this.editorContent,
-                            filePath: this.filePath
-                        }
-                    })
-                );
-            } else {
-                throw new Error(`Save failed: ${response.status}`);
-            }
-        } catch (error) {
-            console.error("Save failed:", error);
-            this.saveStatus = "error";
-        } finally {
-            this.isLoading = false;
-        }
-    }
-
-    // Getters for UI state
-    get showEditor() {
-        return this.isEditing;
-    }
-
-    get showViewer() {
-        return !this.isEditing;
-    }
-
-    get saveButtonDisabled() {
-        return this.saveStatus === "saving" || this.isLoading || !this.editorContent.trim();
-    }
-
-    get statusMessage() {
-        switch (this.saveStatus) {
-            case "saving":
-                return "Saving...";
-            case "success":
-                return "Saved successfully!";
-            case "error":
-                return "Save failed. Please try again.";
-            default:
-                return "";
-        }
-    }
-
-    get statusClass() {
-        switch (this.saveStatus) {
-            case "saving":
-                return "status-saving";
-            case "success":
-                return "status-success";
-            case "error":
-                return "status-error";
-            default:
-                return "";
-        }
-    }
-
-    get hasHtmlContent() {
-        return this.htmlContent && this.htmlContent.trim().length > 0;
-    }
-}