@salesforcedevs/docs-components 0.54.0 → 0.54.1-a01

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

@@ -0,0 +1,651 @@
+import { api, track } from "lwc";
+import { normalizeBoolean } from "dxUtils/normalizers";
+import { FetchContent } from "./utils";
+import {
+    CoveoAdvancedQueryXMLConfig,
+    DocLanguage,
+    DocVersion,
+    TreeNode,
+    Header,
+    HistoryState,
+    PageReference,
+    TocMap
+} from "./types";
+import { SearchSyncer } from "docUtils/SearchSyncer";
+import { LightningElementWithState } from "docBaseElements/lightningElementWithState";
+import { Breadcrumb, Language } from "typings/custom";
+
+// TODO: Imitating from actual implementation as doc-content use it like this. We should refactor it later.
+const handleContentError = (error): void => console.log(error);
+
+const FIRST_CRUMB = {
+    href: "/docs",
+    label: "Documentation"
+};
+
+const PIXEL_PER_CHARACTER_MAP: { [key: string]: number } = {
+    default: 7.7,
+    "ja-jp": 12.5
+};
+
+export default class DocXmlContent extends LightningElementWithState<{
+    isFetchingDocument: boolean;
+    isFetchingContent: boolean;
+    lastHighlightedSearch: string;
+}> {
+    @api apiDomain = "https://developer.salesforce.com";
+    @api coveoOrganizationId!: string;
+    @api coveoPublicAccessToken!: string;
+
+    @api
+    get allLanguages(): Array<Language> {
+        return this._allLanguages;
+    }
+
+    set allLanguages(value: string) {
+        if (value) {
+            this._allLanguages = JSON.parse(value);
+        }
+    }
+
+    @api
+    get enableCoveo() {
+        return this._enableCoveo;
+    }
+
+    set enableCoveo(value) {
+        this._enableCoveo = normalizeBoolean(value);
+    }
+
+    private availableLanguages: Array<DocLanguage> = [];
+    private availableVersions: Array<DocVersion> = [];
+    private contentProvider: FetchContent;
+    private docContent = "";
+    private language: DocLanguage = null;
+    private loaded = false;
+    private pdfUrl = "";
+    private tocMap: TocMap = {};
+    private sidebarContent: Array<TreeNode> = null;
+    private version: DocVersion = null;
+    private docTitle = "";
+    private analyticsEvent = "custEv_ctaLinkClick";
+    private _pathName = "";
+    private _pageHeader?: Header;
+    private listenerAttached = false;
+    private _enableCoveo?: boolean = false;
+
+    private searchSyncer = new SearchSyncer({
+        callbacks: {
+            onSearchChange: (nextSearchString: string): void => {
+                if (nextSearchString !== this.pageReference.search) {
+                    this.updatePageReference({
+                        ...this.pageReference,
+                        search: nextSearchString
+                    });
+                }
+                if (nextSearchString !== this.state.lastHighlightedSearch) {
+                    this.updateHighlighting(
+                        new URLSearchParams(nextSearchString).get("q") || ""
+                    );
+                }
+            },
+            onUrlChange: (nextSearchString: string): void => {
+                if (nextSearchString !== this.pageReference.search) {
+                    this.updatePageReference({
+                        ...this.pageReference,
+                        search: nextSearchString
+                    });
+                }
+                const nextSearchParam =
+                    new URLSearchParams(nextSearchString).get("q") || "";
+                this.updateSearchInput(nextSearchParam);
+                if (nextSearchString !== this.state.lastHighlightedSearch) {
+                    this.updateHighlighting(nextSearchParam);
+                }
+            }
+        },
+        eventName: "sidebarsearchchange",
+        historyMethod: window.history.pushState,
+        searchParam: "q",
+        shouldStopPropagation: true,
+        target: window
+    });
+    private _allLanguages: Array<Language> = [];
+
+    @track private pageReference: PageReference = {};
+    @track breadcrumbs: Array<Breadcrumb> = [];
+
+    constructor() {
+        super();
+        this.pageReference = this.getReferenceFromUrl();
+        // In order to prevent dispatching unnecessary highlight changes, we
+        // track these items and use their previous values for comparisons in
+        // `renderedCallback`:
+        this.state = {
+            isFetchingContent: false,
+            isFetchingDocument: false,
+            lastHighlightedSearch: "",
+            internalLinkClicked: false
+        };
+    }
+
+    connectedCallback(): void {
+        if (!this.pageReference?.deliverable) {
+            window.location.href = "/docs";
+            return;
+        }
+        this.contentProvider = new FetchContent(
+            this.apiDomain,
+            this.allLanguages
+        );
+        this.fetchDocument().then(() => (this.loaded = true));
+        window.addEventListener("popstate", this.handlePopState);
+
+        this.searchSyncer.init();
+    }
+
+    renderedCallback(): void {
+        this.setState({ internalLinkClicked: true });
+        const urlSectionLink =
+            this.pageReference?.hash?.split("#").length > 1
+                ? this.pageReference.hash.split("#")[1]
+                : this.pageReference?.hash;
+
+        const contentEl = this.template.querySelector("doc-content");
+        const anchorEl =
+            urlSectionLink &&
+            (contentEl?.shadowRoot?.querySelector(`[id='${urlSectionLink}']`) ||
+                contentEl?.shadowRoot?.querySelector(
+                    `[name='${urlSectionLink}']`
+                ));
+
+        if (anchorEl) {
+            anchorEl.scrollIntoView();
+            this.setState({ internalLinkClicked: false });
+        }
+
+        if (
+            (this.prevState.isFetchingContent &&
+                !this.state.isFetchingContent) ||
+            (this.prevState.isFetchingDocument &&
+                !this.state.isFetchingDocument)
+        ) {
+            const prevSearchParam =
+                new URLSearchParams(this.state.lastHighlightedSearch).get(
+                    "q"
+                ) || "";
+            const nextSearchParam =
+                new URLSearchParams(this.pageReference.search).get("q") || "";
+            this.updateHighlighting(nextSearchParam);
+            if (prevSearchParam !== nextSearchParam) {
+                this.updateSearchInput(nextSearchParam);
+            }
+        }
+    }
+
+    disconnectedCallback(): void {
+        window.removeEventListener("popstate", this.handlePopState);
+        this.searchSyncer.dispose();
+        if (this.listenerAttached) {
+            this.pageHeader.removeEventListener(
+                "langchange",
+                this.handleLanguageChange
+            );
+            this.listenerAttached = false;
+        }
+    }
+
+    private get languageId(): string {
+        return this.language.id.replace("-", "_");
+    }
+
+    private get releaseVersionId(): string {
+        return this.version.id;
+    }
+
+    private get deliverable(): string {
+        return this.pageReference.deliverable;
+    }
+
+    private get useOldSidebar(): boolean {
+        // Coveo is enabled and the version is greater than  51 (within the latest 3 versions)
+        // TODO: we need a better fix for version number check
+        return !(
+            this.enableCoveo &&
+            this.coveoOrganizationId &&
+            this.coveoPublicAccessToken &&
+            (!this.version?.releaseVersion ||
+                (this.version?.releaseVersion &&
+                    parseInt(
+                        this.version.releaseVersion.replace("v", ""),
+                        10
+                    ) >= 53))
+        );
+    }
+
+    private get coveoAdvancedQueryConfig(): CoveoAdvancedQueryXMLConfig {
+        const config: { locale: string; topicid: string; version?: string } = {
+            locale: this.languageId,
+            topicid: this.deliverable
+        };
+
+        if (this.releaseVersionId && this.releaseVersionId !== "noversion") {
+            config.version = this.releaseVersionId;
+        }
+
+        return config;
+    }
+
+    private get pageHeader(): Header {
+        if (!this._pageHeader) {
+            this._pageHeader = document.querySelector("doc-header");
+        }
+
+        return this._pageHeader;
+    }
+
+    private get sidebarValue(): string {
+        if (this.pageReference?.contentDocumentId) {
+            const hashedUri = `${
+                this.pageReference.contentDocumentId
+            }${this.normalizeHash(this.pageReference.hash)}`;
+            if (hashedUri in this.tocMap) {
+                return hashedUri;
+            }
+
+            if (this.pageReference.contentDocumentId in this.tocMap) {
+                return this.pageReference.contentDocumentId;
+            }
+        }
+
+        return "";
+    }
+
+    private get disableVersion(): boolean {
+        return !this.availableVersions || this.availableVersions.length <= 1;
+    }
+
+    private get versionOptions(): Array<DocVersion> {
+        return this.disableVersion
+            ? this.availableVersions
+            : this.availableVersions.map((version) => ({
+                  ...version,
+                  link: {
+                      href: this.pageReferenceToString({
+                          ...this.pageReference,
+                          docId: version.url
+                      })
+                  }
+              }));
+    }
+
+    private get breadcrumbPixelPerCharacter() {
+        return (
+            PIXEL_PER_CHARACTER_MAP[this.language.id] ||
+            PIXEL_PER_CHARACTER_MAP.default
+        );
+    }
+
+    private handlePopState = (): void =>
+        this.updatePageReference(this.getReferenceFromUrl());
+
+    handleSelect(event: CustomEvent<{ name: string }>): void {
+        event.stopPropagation();
+        const { name } = event.detail;
+
+        if (this.sidebarValue === name) {
+            return;
+        }
+
+        if (name) {
+            const hashIndex = name.indexOf("#");
+            const hash = hashIndex > -1 ? name.slice(hashIndex) : "";
+
+            const contentDocumentId =
+                hashIndex > -1 ? name.slice(0, hashIndex) : name;
+            this.updatePageReference({
+                ...this.pageReference,
+                contentDocumentId,
+                hash
+            });
+            this.updateUrl();
+        }
+    }
+
+    handleNavClick(event: CustomEvent<{ pageReference: PageReference }>): void {
+        event.stopPropagation();
+        const { pageReference } = event.detail;
+        this.updatePageReference(pageReference);
+        this.updateUrl();
+    }
+
+    handleLanguageChange = (event: CustomEvent<string>): Promise<void> => {
+        if (this.language && this.language.id === event.detail) {
+            return;
+        }
+
+        this.language = this.availableLanguages.find(
+            ({ id }) => id === event.detail
+        );
+        this.pageReference.docId = this.language.url;
+        this.updateUrl();
+        this.fetchDocument();
+    };
+
+    updatePageReference(newPageReference: PageReference): void {
+        this.pageReference.hash = newPageReference.hash;
+        this.pageReference.search = newPageReference.search;
+
+        if (this.isSamePage(newPageReference)) {
+            return;
+        }
+
+        const isSameDocId = this.pageReference.docId === newPageReference.docId;
+        this.pageReference = newPageReference;
+
+        if (!isSameDocId) {
+            this.fetchDocument();
+            return;
+        }
+
+        this.fetchContent()
+            .then(() => this.buildBreadcrumbs())
+            .catch(handleContentError);
+    }
+
+    getReferenceFromUrl(): PageReference {
+        const [page, docId, deliverable, contentDocumentId] =
+            window.location.pathname.substr(1).split("/");
+
+        const { origin: domain, hash, search } = window.location;
+
+        return {
+            contentDocumentId,
+            deliverable,
+            docId,
+            domain,
+            hash,
+            page,
+            search
+        };
+    }
+
+    isSamePage(reference: PageReference): boolean {
+        return (
+            this.pageReference.contentDocumentId ===
+                reference.contentDocumentId &&
+            this.pageReference.docId === reference.docId &&
+            this.pageReference.page === reference.page &&
+            this.pageReference.deliverable === reference.deliverable
+        );
+    }
+
+    async fetchDocument(): Promise<void> {
+        this.setState({
+            isFetchingDocument: true
+        });
+        const data = await this.contentProvider.fetchDocumentData(
+            this.pageReference.docId
+        );
+
+        // This could be a 404 scenario.
+        if (!data) {
+            this.setState({
+                isFetchingDocument: false
+            });
+            return;
+        }
+
+        this.docTitle = data.docTitle;
+        this.tocMap = data.tocMap;
+        this.sidebarContent = data.toc;
+        this.version = data.version;
+        this.language = data.language;
+        this.availableLanguages = data.availableLanguages;
+        this.availableVersions = data.availableVersions;
+        this.pdfUrl = data.pdfUrl;
+
+        this.updateHeader();
+
+        this.buildBreadcrumbs();
+
+        if (this.pageReference.deliverable !== data.deliverable) {
+            this.pageReference.deliverable = data.deliverable;
+            this.updateUrl(HistoryState.REPLACE_STATE);
+        }
+
+        if (
+            this.pageReference?.contentDocumentId?.replace(/\.htm$/, "") !==
+            data.id
+        ) {
+            try {
+                await this.fetchContent();
+                this.setState({
+                    isFetchingDocument: false
+                });
+                return;
+            } catch (error) {
+                this.pageReference.contentDocumentId = `${data.id}.htm`;
+                this.pageReference.hash = "";
+                this.pageReference.search = "";
+                this.updateUrl(HistoryState.REPLACE_STATE);
+            }
+        }
+
+        this.docContent = data.content;
+        this.addMetatags();
+        this.setState({
+            isFetchingDocument: false
+        });
+    }
+
+    async fetchContent(): Promise<void> {
+        this.setState({
+            isFetchingContent: true
+        });
+        const data = await this.contentProvider.fetchContent(
+            this.pageReference.deliverable,
+            this.pageReference.contentDocumentId,
+            {
+                language: this.language.id,
+                version: this.version.id
+            }
+        );
+
+        if (data) {
+            this.docContent = data.content;
+            this.addMetatags();
+
+            if (!this.pageReference.hash) {
+                document.querySelector("main")?.scrollIntoView({
+                    behavior: "smooth",
+                    block: "start",
+                    inline: "nearest"
+                });
+            }
+        }
+        this.setState({
+            isFetchingContent: false
+        });
+    }
+
+    updateHeader(): void {
+        if (!this.pageHeader) {
+            return;
+        }
+
+        if (this.docTitle) {
+            this.pageHeader.subtitle = this.docTitle;
+        }
+
+        if (this.pdfUrl) {
+            this.pageHeader.bailHref = this.pdfUrl;
+            this.pageHeader.bailLabel = "PDF";
+        }
+
+        if (!this.listenerAttached) {
+            this.pageHeader.addEventListener(
+                "langchange",
+                this.handleLanguageChange
+            );
+            this.listenerAttached = true;
+        }
+
+        this.pageHeader.languages = this.availableLanguages;
+        this.pageHeader.language = this.language?.id;
+
+        if (this.pageReference) {
+            const { docId, deliverable, page } = this.pageReference;
+            this.pageHeader.headerHref = `/${page}/${docId}/${deliverable}/`;
+        }
+    }
+
+    updateUrl(method = HistoryState.PUSH_STATE): void {
+        window.history[method](
+            {},
+            "docs",
+            this.pageReferenceToString(this.pageReference)
+        );
+    }
+
+    private updateHighlighting(searchParam: string): void {
+        this.dispatchHighlightChange(searchParam);
+        this.setState({
+            lastHighlightedSearch: this.pageReference.search
+        });
+    }
+
+    private updateSearchInput(searchParam: string): void {
+        this.template
+            .querySelector("doc-content-layout")
+            ?.setSidebarInputValue(searchParam);
+    }
+
+    private pageReferenceToString(reference: PageReference): string {
+        const { page, docId, deliverable, contentDocumentId, hash, search } =
+            reference;
+        return `/${page}/${docId}/${deliverable}/${contentDocumentId}${this.normalizeSearch(
+            search
+        )}${this.normalizeHash(hash)}`;
+    }
+
+    private normalizeUrlPart(part: string, sentinel: string): string {
+        return (
+            (part &&
+                (part.startsWith(sentinel) ? part : `${sentinel}${part}`)) ||
+            ""
+        );
+    }
+
+    private normalizeSearch(search: string): string {
+        return this.normalizeUrlPart(search, "?");
+    }
+
+    private normalizeHash(hash: string): string {
+        return this.normalizeUrlPart(hash, "#");
+    }
+
+    private getComposedTitle(
+        topicTitle: string | undefined,
+        docTitle: string | undefined
+    ): string {
+        // map to avoid duplicates
+        const titleMap = {};
+        if (topicTitle) {
+            // sometimes the h1 tag text (which is docSubTitle) contains text with new line character. For e.g, "Bulk API 2.0 Older\n  Documentation",
+            // here it contains \n in the text context which needs to be removed
+            // also, there are multiple spaces in between the text, which needs to be replaced with a single space
+            const docTopicTitle = topicTitle
+                .replace(/[\t\r\n]/g, " ")
+                .replace(/ +/g, " ")
+                .trim();
+            titleMap[docTopicTitle] = true;
+        }
+
+        if (docTitle) {
+            titleMap[docTitle] = true;
+        }
+
+        titleMap["Salesforce Developers"] = true;
+
+        return Object.keys(titleMap).join(" | ");
+    }
+
+    private dispatchHighlightChange(term: string): void {
+        this.dispatchEvent(
+            new CustomEvent("highlightedtermchange", {
+                detail: term,
+                bubbles: true,
+                composed: true
+            })
+        );
+    }
+
+    private buildBreadcrumbs(): void {
+        const { contentDocumentId } = this.pageReference;
+        if (!contentDocumentId) {
+            return;
+        }
+
+        const currentNode = this.tocMap[contentDocumentId];
+        this.breadcrumbs = this.nodeToBreadcrumb(currentNode);
+    }
+
+    private nodeToBreadcrumb(node?: TreeNode): Breadcrumb[] {
+        if (!node) {
+            return [FIRST_CRUMB];
+        }
+        return [
+            ...this.nodeToBreadcrumb(node.parent),
+            {
+                href: this.pageReferenceToString({
+                    ...this.pageReference,
+                    contentDocumentId: node.name
+                }),
+                label: node.label
+            }
+        ];
+    }
+
+    addMetatags(): void {
+        const div = document.createElement("div");
+        div.innerHTML = this.docContent;
+        const docDescription = div.querySelector(".shortdesc")?.textContent;
+        const topicTitle = div.querySelector("h1")?.textContent;
+
+        const title = document.querySelector("title");
+        const composedTitle = this.getComposedTitle(topicTitle, this.docTitle);
+
+        if (title) {
+            title.textContent = composedTitle;
+        }
+        const metatitle = document.querySelector('meta[name="title"]');
+        if (metatitle) {
+            metatitle.setAttribute("content", composedTitle);
+        }
+
+        if (docDescription) {
+            const metadescription = document.querySelector(
+                'meta[name="description"]'
+            );
+            if (metadescription) {
+                metadescription.setAttribute("content", docDescription);
+            }
+        }
+
+        if (this.pageReference) {
+            const metadescription = document.querySelector(
+                'link[rel="canonical"]'
+            );
+            if (metadescription) {
+                metadescription.setAttribute(
+                    "href",
+                    window.location.protocol +
+                        "//" +
+                        window.location.host +
+                        this.pageReferenceToString(this.pageReference)
+                );
+            }
+        }
+    }
+}