@salesforcedevs/docs-components 1.29.0-toolbar-alpha2 → 1.29.0-toolbar-alpha3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforcedevs/docs-components",
-  "version": "1.29.0-toolbar-alpha2",
+  "version": "1.29.0-toolbar-alpha3",
   "description": "Docs Lightning web components for DSC",
   "license": "MIT",
   "main": "index.js",

package/src/modules/doc/contentActionToolbar/contentActionToolbar.ts

@@ -1,4 +1,4 @@
-import { LightningElement } from "lwc";
+import { LightningElement, api } from "lwc";
 import { track } from "dxUtils/analytics";
 
 const DEFAULT_COPY_TOOLTIP_LABEL = "Click to copy";
@@ -11,11 +11,26 @@ const VIEW_MARKDOWN_LABEL = "View as Markdown";
 const COPY_URL_LABEL = "Copy URL to Markdown";
 
 export default class ContentActionToolbar extends LightningElement {
+    @api
+    get pageUrl(): string | undefined {
+        return this._pageUrl;
+    }
+    set pageUrl(value: string | undefined) {
+        if (this._pageUrl === value) {
+            return;
+        }
+        this._pageUrl = value;
+        this.markdownUrl = this.deriveMarkdownUrl();
+    }
+    private _pageUrl?: string;
+
     copyMarkdownLabel: string = DEFAULT_COPY_TOOLTIP_LABEL;
     copyUrlLabel: string = DEFAULT_COPY_TOOLTIP_LABEL;
 
     private copyTooltipResetTimeout: number | null = null;
 
+    private markdownUrl: string | null = this.deriveMarkdownUrl();
+
     get copyMarkdownButtonText(): string {
         return COPY_MARKDOWN_LABEL;
     }
@@ -29,8 +44,7 @@ export default class ContentActionToolbar extends LightningElement {
     }
 
     async handleCopyMarkdown(event: Event) {
-        const markdownUrl = this.getMarkdownUrl();
-        if (!markdownUrl) {
+        if (!this.markdownUrl) {
             return;
         }
 
@@ -38,11 +52,11 @@ export default class ContentActionToolbar extends LightningElement {
             event,
             "custEv_linkClick",
             COPY_MARKDOWN_LABEL,
-            markdownUrl
+            this.markdownUrl
         );
 
         try {
-            const response = await fetch(markdownUrl);
+            const response = await fetch(this.markdownUrl);
             if (!response.ok) {
                 return;
             }
@@ -55,8 +69,7 @@ export default class ContentActionToolbar extends LightningElement {
     }
 
     handleViewMarkdown(event: Event) {
-        const markdownUrl = this.getMarkdownUrl();
-        if (!markdownUrl) {
+        if (!this.markdownUrl) {
             return;
         }
 
@@ -64,15 +77,14 @@ export default class ContentActionToolbar extends LightningElement {
             event,
             "custEv_linkClick",
             VIEW_MARKDOWN_LABEL,
-            markdownUrl
+            this.markdownUrl
         );
 
-        window.open(markdownUrl, "_blank", "noopener,noreferrer");
+        window.open(this.markdownUrl, "_blank", "noopener,noreferrer");
     }
 
     async handleCopyUrl(event: Event) {
-        const markdownUrl = this.getMarkdownUrl();
-        if (!markdownUrl) {
+        if (!this.markdownUrl) {
             return;
         }
 
@@ -80,11 +92,11 @@ export default class ContentActionToolbar extends LightningElement {
             event,
             "custEv_linkClick",
             COPY_URL_LABEL,
-            markdownUrl
+            this.markdownUrl
         );
 
         try {
-            await navigator.clipboard.writeText(markdownUrl);
+            await navigator.clipboard.writeText(this.markdownUrl);
             this.flashCopied("copyUrlLabel");
         } catch (error) {
             console.error(error);
@@ -111,8 +123,9 @@ export default class ContentActionToolbar extends LightningElement {
      * query string stripped, or `null` when the current page does not end
      * with `.html`.
      */
-    private getMarkdownUrl(): string | null {
-        const url = new URL(window.location.href);
+    private deriveMarkdownUrl(): string | null {
+        const sourceHref = this._pageUrl || window.location.href;
+        const url = new URL(sourceHref, window.location.href);
         url.hash = "";
         url.search = "";
 

package/src/modules/doc/contentLayout/contentLayout.ts

@@ -303,26 +303,22 @@ export default class ContentLayout extends LightningElement {
             return;
         }
 
-        if (
-            this.contentActionToolbarElement?.previousElementSibling === heading
-        ) {
-            return;
-        }
+        const toolbar = (this.contentActionToolbarElement ??
+            createElement(CONTENT_ACTION_TOOLBAR_TAG, {
+                is: ContentActionToolbar
+            })) as HTMLElement & { pageUrl?: string };
 
-        this.removeContentActionToolbar();
+        toolbar.pageUrl = this.sidebarValue;
+
+        if (toolbar.previousElementSibling !== heading) {
+            heading.parentNode?.insertBefore(toolbar, heading.nextSibling);
+        }
 
-        const toolbar = createElement(CONTENT_ACTION_TOOLBAR_TAG, {
-            is: ContentActionToolbar
-        }) as unknown as HTMLElement;
-        heading.parentNode?.insertBefore(toolbar, heading.nextSibling);
         this.contentActionToolbarElement = toolbar;
     }
 
     protected removeContentActionToolbar(): void {
-        if (this.contentActionToolbarElement) {
-            this.contentActionToolbarElement.remove();
-            this.contentActionToolbarElement = null;
-        }
+        this.contentActionToolbarElement?.remove();
     }
 
     disconnectedCallback(): void {
@@ -342,6 +338,7 @@ export default class ContentLayout extends LightningElement {
         this.template.removeEventListener("click", this.handleLinkClick);
 
         this.removeContentActionToolbar();
+        this.contentActionToolbarElement = null;
     }
 
     restoreScroll() {