@salesforcedevs/docs-components
Advanced tools
Comparing version
{ | ||
"modules": [ | ||
{ "dir": "src/modules" }, | ||
{ "npm": "@salesforcedevs/dx-components" } | ||
{ "npm": "@salesforcedevs/dx-components" }, | ||
{ "npm": "@salesforcedevs/dw-components" } | ||
], | ||
"expose": ["doc/container"] | ||
"expose": [ | ||
"doc/amfReference", | ||
"doc/breadcrumbs", | ||
"doc/componentPlayground", | ||
"doc/content", | ||
"doc/contentCallout", | ||
"doc/chat", | ||
"doc/doDont", | ||
"doc/contentLayout", | ||
"doc/contentMedia", | ||
"doc/docXmlContent", | ||
"doc/lwcContentLayout", | ||
"doc/header", | ||
"doc/heading", | ||
"doc/headingAnchor", | ||
"doc/overview", | ||
"doc/phase", | ||
"doc/specificationContent", | ||
"doc/versionPicker", | ||
"doc/xmlContent", | ||
"docUtils/utils" | ||
] | ||
} |
{ | ||
"name": "@salesforcedevs/docs-components", | ||
"version": "0.0.4-beta.0", | ||
"version": "0.0.4-edit", | ||
"description": "Docs Lightning web components for DSC", | ||
"license": "UNLICENSED", | ||
"license": "MIT", | ||
"main": "index.js", | ||
"engines": { | ||
"node": ">= 12.x" | ||
"node": "20.x" | ||
}, | ||
"files": [ | ||
"src/modules", | ||
"lwc.config.json" | ||
], | ||
"publishConfig": { | ||
"access": "restricted" | ||
"access": "public" | ||
}, | ||
"dependencies": { | ||
"@api-components/amf-helper-mixin": "4.5.29", | ||
"classnames": "2.5.1", | ||
"dompurify": "3.2.4", | ||
"kagekiri": "1.4.2", | ||
"lodash.orderby": "4.6.0", | ||
"lodash.uniqby": "4.7.0", | ||
"query-string": "7.1.3", | ||
"sentence-case": "3.0.4" | ||
}, | ||
"devDependencies": { | ||
"@types/classnames": "2.3.1", | ||
"@types/lodash.orderby": "4.6.9", | ||
"@types/lodash.uniqby": "4.7.9" | ||
}, | ||
"gitHead": "4629fdd9ca18a13480044ad43515b91945d16aad" | ||
} |
/* eslint-disable @lwc/lwc/no-inner-html */ | ||
import { LightningElement, api, track } from "lwc"; | ||
import { | ||
DocContent, | ||
PageReference | ||
} from "../../../../../../../typings/custom-new"; | ||
import Prism from "doc/prismjs"; | ||
import { createElement, LightningElement, api, track } from "lwc"; | ||
import { DocContent, PageReference } from "typings/custom"; | ||
import CodeBlock from "dx/codeBlock"; | ||
import Button from "dx/button"; | ||
import { highlightTerms } from "dxUtils/highlight"; | ||
import ContentCallout from "doc/contentCallout"; | ||
import ContentMedia from "doc/contentMedia"; | ||
const HIGHLIGHTABLE_SELECTOR = [ | ||
"p", | ||
".p", | ||
".shortdesc", | ||
"h1", | ||
"h2", | ||
"h3", | ||
"h4", | ||
"h5", | ||
"h6", | ||
"li", | ||
"dl", | ||
"th", | ||
"td" | ||
].join(","); | ||
const LANGUAGE_MAP: { [key: string]: string } = { | ||
js: "javascript" | ||
}; | ||
export default class Content extends LightningElement { | ||
@api isStorybook: boolean = false; | ||
@api pageReference!: PageReference; | ||
@api codeBlockType: string = "card"; | ||
@api showPaginationButtons: boolean = false; | ||
@@ -16,4 +39,5 @@ @api | ||
this._docRendered = false; | ||
this.docContent = value; | ||
this.docContent = (value && value.trim()) || ""; | ||
} | ||
get docsData() { | ||
@@ -26,100 +50,231 @@ return this.docContent; | ||
//TODO: cleanup html manipulation | ||
insertDocHtml() { | ||
const divEl = this.template.querySelector("div"); | ||
connectedCallback() { | ||
window.addEventListener( | ||
"highlightedtermchange", | ||
this.updateHighlighted | ||
); | ||
} | ||
// Some simple data mutation to make Prism work on-the-fly with the existing datasource | ||
const templateEl = document.createElement("template"); | ||
this.docContent = this.docContent.trim(); | ||
templateEl.innerHTML = this.docContent; | ||
disconnectedCallback(): void { | ||
window.removeEventListener( | ||
"highlightedtermchange", | ||
this.updateHighlighted | ||
); | ||
} | ||
const preEls = templateEl.content.querySelectorAll("pre"); | ||
renderPaginationButton(anchorEl: HTMLElement) { | ||
const isNext = anchorEl.textContent!.includes("Next →"); | ||
anchorEl.innerHTML = ""; | ||
const buttonEl = createElement("dx-button", { is: Button }); | ||
const params = isNext | ||
? { iconSymbol: "chevronright" } | ||
: { | ||
iconPosition: "left", | ||
iconSymbol: "chevronleft", | ||
variant: "secondary" | ||
}; | ||
Object.assign(buttonEl, params); | ||
const textEl = document.createDocumentFragment(); | ||
textEl.textContent = isNext ? "Next" : "Previous"; | ||
buttonEl.appendChild(textEl); | ||
anchorEl.appendChild(buttonEl); | ||
} | ||
preEls.forEach((preEl) => { | ||
let codeHTML = preEl.innerHTML; | ||
let codeEl = document.createElement("code"); | ||
codeEl.classList.add("language-js"); | ||
codeEl.innerHTML = codeHTML; | ||
preEl.innerHTML = ""; | ||
// preEl.classList.add("line-numbers"); // TODO: Re-add once we have line-numbers plugin added | ||
preEl.appendChild(codeEl); | ||
}); | ||
// We don't use any tracked field here. The challenge is that | ||
// for security reasons you can't pass pure HTML via a class | ||
// field to the template. Hence we manipulate the DOM manually. | ||
insertDocHtml(docContent?: string) { | ||
const divEl = this.getCleanContainer(); | ||
// Modify anchors to work with any domain | ||
const anchorEls = templateEl.content.querySelectorAll("a"); | ||
anchorEls.forEach((anchorEl) => { | ||
let href = anchorEl.href.split("/"); | ||
if ( | ||
(href[3] === this.pageReference.docId && this.isStorybook) || | ||
href[4] === this.pageReference.docId || | ||
href[6] === this.pageReference.docId | ||
) { | ||
let updatedURL; | ||
switch (href.length) { | ||
case 8: | ||
updatedURL = href.splice(5).join("/"); | ||
break; | ||
case 7: | ||
updatedURL = href.splice(4).join("/"); | ||
break; | ||
case 6: | ||
updatedURL = href.splice(3).join("/"); | ||
break; | ||
default: | ||
updatedURL = href.splice(6).join("/"); | ||
break; | ||
if (divEl) { | ||
divEl.innerHTML = docContent || this.docContent; | ||
// Query the code blocks and create a dx-code-block component that contains the code | ||
const codeBlockEls = divEl.querySelectorAll(".codeSection"); | ||
codeBlockEls.forEach((codeBlockEl) => { | ||
codeBlockEl.setAttribute("lwc:dom", "manual"); | ||
const classList = codeBlockEl.firstElementChild?.classList; | ||
let language = ""; | ||
if (classList) { | ||
for (let i = 0; i < classList.length; i++) { | ||
const className = classList[i]; | ||
if (className.startsWith("brush:")) { | ||
language = className.split(":")[1]; | ||
} | ||
} | ||
} | ||
const blockCmp = createElement("dx-code-block", { | ||
is: CodeBlock | ||
}); | ||
Object.assign(blockCmp, { | ||
codeBlock: codeBlockEl.innerHTML, | ||
// ! Hot fix for incoming html tags from couchdb for xml blocks, fix me soon please | ||
language: LANGUAGE_MAP[language] || language, | ||
header: "", // Default no title. | ||
variant: this.codeBlockType, | ||
isEncoded: true | ||
}); | ||
// eslint-disable-next-line no-use-before-define | ||
codeBlockEl.innerHTML = ""; | ||
codeBlockEl.appendChild(blockCmp); | ||
}); | ||
anchorEl.addEventListener( | ||
"click", | ||
// eslint-disable-next-line no-use-before-define | ||
this.handleNavClick.bind(this) | ||
// Query the callouts and create a doc-content-callout component that contains the code | ||
const calloutEls = divEl.querySelectorAll(".message"); | ||
calloutEls.forEach((calloutEl) => { | ||
const calloutCompEl = createElement("doc-content-callout", { | ||
is: ContentCallout | ||
}); | ||
const detailEls = calloutEl.querySelectorAll( | ||
"p, .p, div.data, ol, ul, p+.codeSection, p~.codeSection, div >.codeSection, .mediaBd > span.ph" | ||
); | ||
anchorEl.setAttribute("href", "docs/" + updatedURL); | ||
anchorEl.setAttribute("data-id", "docs/" + updatedURL); | ||
} else if (href[2] === "developer.salesforce.com") { | ||
let updatedURL = this.pageReference.domain; | ||
if (href[3]) { | ||
updatedURL = updatedURL + `/${href[3]}`; | ||
detailEls.forEach((detailEl) => { | ||
if (detailEl.innerHTML.trim() !== "") { | ||
calloutCompEl.appendChild(detailEl); | ||
} | ||
}); | ||
// Set a flag to 1 (true) if and only if all detailEls have no content. | ||
let flag = 1; | ||
for (let i: number = 0; i < detailEls.length; i++) { | ||
flag &= (detailEls[i].innerHTML.trim() === "") as any; // Dark Magic TM | ||
} | ||
console.log(updatedURL); | ||
if (href[4]) { | ||
updatedURL = updatedURL + `/${href[4]}`; | ||
if (flag) { | ||
const codeEls = calloutEl.querySelectorAll(".codeSection"); | ||
codeEls.forEach((codeEl) => { | ||
calloutCompEl.appendChild(codeEl); | ||
}); | ||
} | ||
console.log(updatedURL); | ||
if (href[5]) { | ||
updatedURL = updatedURL + `/${href[5]}`; | ||
const type = calloutEl.querySelector("h4")!.textContent!; | ||
const typeLower = type.toLowerCase(); | ||
Object.assign(calloutCompEl, { | ||
header: type, | ||
variant: typeLower | ||
}); | ||
// eslint-disable-next-line no-use-before-define | ||
calloutEl.innerHTML = ""; | ||
calloutEl.appendChild(calloutCompEl); | ||
}); | ||
// Modify links to work with any domain, links that start with "#" are excluded | ||
const anchorEls = divEl.querySelectorAll("a:not([href^='#'])"); | ||
anchorEls.forEach((anchorEl: any) => { | ||
if ( | ||
anchorEl.textContent!.includes("Next →") || | ||
anchorEl.textContent!.includes("← Previous") | ||
) { | ||
if (this.showPaginationButtons) { | ||
this.renderPaginationButton(anchorEl); | ||
} else { | ||
anchorEl.remove(); | ||
} | ||
} | ||
console.log(updatedURL); | ||
if (href[6]) { | ||
updatedURL = updatedURL + `/${href[6]}`; | ||
// ! This is a hack | ||
// Normalize urls in case it doesn't come complete. | ||
if (anchorEl.href.startsWith("atlas.")) { | ||
anchorEl.href = "/docs/" + anchorEl.href; | ||
} | ||
console.log(updatedURL); | ||
anchorEl.setAttribute("href", updatedURL); | ||
anchorEl.setAttribute("data-id", updatedURL); | ||
} | ||
}); | ||
// Modify image src to work with any domain | ||
const imgEls = templateEl.content.querySelectorAll("img"); | ||
imgEls.forEach((imgEl) => { | ||
let src = imgEl.src; | ||
let updatedURL = src.replace( | ||
this.pageReference.domain, | ||
"https://developer.salesforce.com" | ||
); | ||
imgEl.setAttribute("src", updatedURL); | ||
}); | ||
const href = anchorEl.href.split("/"); | ||
if ( | ||
(href[3] === this.pageReference.docId && | ||
this.isStorybook) || | ||
href[4] === this.pageReference.docId || | ||
href[6] === this.pageReference.docId | ||
) { | ||
let updatedURL; | ||
switch (href.length) { | ||
case 8: | ||
updatedURL = href.splice(5).join("/"); | ||
break; | ||
case 7: | ||
updatedURL = href.splice(4).join("/"); | ||
break; | ||
case 6: | ||
updatedURL = href.splice(3).join("/"); | ||
break; | ||
default: | ||
updatedURL = href.splice(6).join("/"); | ||
break; | ||
} | ||
anchorEl.addEventListener( | ||
"click", | ||
// eslint-disable-next-line no-use-before-define | ||
this.handleNavClick.bind(this) | ||
); | ||
// anchor href event is not propagated here as we want SPA nature. | ||
// But in prerender.io - as javascript is not executed, we want the anchor links are proper (absolute urls). | ||
anchorEl.setAttribute("href", "/docs/" + updatedURL); | ||
anchorEl.setAttribute("data-id", "docs/" + updatedURL); | ||
return; | ||
} | ||
// We don't use any tracked field here. The challenge is that | ||
// for security reasons you can't pass pure HTML via a class | ||
// field to the template. Hence we manipulate the DOM manually. | ||
if (divEl) { | ||
divEl.innerHTML = ""; | ||
divEl.append(templateEl.content); | ||
anchorEl.setAttribute("data-id", anchorEl.href); | ||
}); | ||
// Modify image src to work with any domain and replace images/iframes with doc-content-media | ||
const imgEls = divEl.querySelectorAll("img, iframe"); | ||
imgEls.forEach((mediaEl) => { | ||
const isImage = mediaEl.nodeName === "IMG"; | ||
let src = mediaEl.getAttribute("src"); | ||
if (!src) { | ||
return; | ||
} | ||
const alt = mediaEl.getAttribute("alt"); | ||
const title = mediaEl.getAttribute("title"); | ||
const label = mediaEl.getAttribute("label"); | ||
const width = mediaEl.getAttribute("width"); | ||
const height = mediaEl.getAttribute("height"); | ||
const className = mediaEl.getAttribute("class"); | ||
if (isImage) { | ||
src = src.startsWith("/") | ||
? `https://developer.salesforce.com${src}` | ||
: src.replace( | ||
window.location.origin, | ||
"https://developer.salesforce.com" | ||
); | ||
const img: HTMLImageElement = document.createElement("img"); | ||
img.src = src; | ||
img.alt = ""; | ||
if (alt) { | ||
img.alt = alt; | ||
} | ||
if (title) { | ||
img.title = title; | ||
} | ||
if (height) { | ||
img.height = parseFloat(height); | ||
} | ||
if (width) { | ||
img.width = parseFloat(width); | ||
} | ||
if (className) { | ||
img.className = className; | ||
} | ||
img.className = `content-image ${img.className}`; | ||
mediaEl.parentNode!.insertBefore(img, mediaEl); | ||
} else { | ||
const contentMediaEl = createElement("doc-content-media", { | ||
is: ContentMedia | ||
}); | ||
Object.assign(contentMediaEl, { | ||
contentType: "iframe", | ||
contentSrc: src, | ||
mediaTitle: alt || title || label | ||
}); | ||
mediaEl.parentNode!.insertBefore(contentMediaEl, mediaEl); | ||
} | ||
mediaEl.remove(); | ||
}); | ||
} | ||
// eslint-disable-next-line no-use-before-define | ||
Prism.highlightAllUnder(divEl); | ||
// Once the html has been corectly modified, naviage to the page reference on the page | ||
if (this.pageReference.hash) { | ||
@@ -130,15 +285,28 @@ this.navigateToHash(this.pageReference.hash); | ||
private getCleanContainer(): HTMLElement | null { | ||
const divEl = this.template.querySelector("div"); | ||
if (divEl?.hasChildNodes()) { | ||
divEl.removeChild(divEl.firstChild!); | ||
} | ||
return divEl; | ||
} | ||
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 | ||
); | ||
} | ||
handleNavClick(event: InputEvent) { | ||
event.preventDefault(); | ||
// eslint-disable-next-line no-use-before-define | ||
let target = event.currentTarget.dataset.id; | ||
let page, | ||
docId, | ||
deliverable, | ||
tempContentDocumentId, | ||
contentDocumentId, | ||
hash; | ||
[page, docId, deliverable, tempContentDocumentId] = target.split("/"); | ||
[contentDocumentId, hash] = tempContentDocumentId.split("#"); | ||
let newPageReference = { | ||
const target = (event.currentTarget! as any).dataset.id; | ||
const [page, docId, deliverable, tempContentDocumentId] = | ||
target.split("/"); | ||
const [contentDocumentId, hash] = tempContentDocumentId.split("#"); | ||
const newPageReference = { | ||
page: page, | ||
@@ -159,7 +327,17 @@ docId: docId, | ||
); | ||
if (this.isSamePage({ ...newPageReference, domain: "" })) { | ||
this.navigateToHash(window.location.hash); | ||
} | ||
} | ||
updateHighlighted = (event: any) => | ||
highlightTerms( | ||
this.template.querySelectorAll(HIGHLIGHTABLE_SELECTOR), | ||
event.detail | ||
); | ||
@api | ||
public navigateToHash(hash: String) { | ||
let splitHash = hash.split("#"); | ||
public navigateToHash = (hash: String) => { | ||
const splitHash = hash.split("#"); | ||
if (splitHash.length === 2) { | ||
@@ -174,3 +352,3 @@ hash = splitHash[1]; | ||
} | ||
} | ||
}; | ||
@@ -181,3 +359,2 @@ renderedCallback() { | ||
} | ||
this.insertDocHtml(); | ||
@@ -184,0 +361,0 @@ this._docRendered = true; |
@@ -11,3 +11,3 @@ import { LightningElement, api } from "lwc"; | ||
SelectedVersion | ||
} from "../../../../../../../typings/custom-new"; | ||
} from "typings/custom"; | ||
@@ -14,0 +14,0 @@ export default class Nav extends LightningElement { |
import { LightningElement, api } from "lwc"; | ||
import { | ||
PageReference, | ||
SelectedNavigationItem, | ||
DocToc | ||
} from "../../../../../../../typings/custom-new"; | ||
import { PageReference, SelectedNavigationItem, DocToc } from "typings/custom"; | ||
@@ -18,3 +14,3 @@ export default class Toc extends LightningElement { | ||
//const target = event.detail.name.split('-') | ||
const target = event.currentTarget.dataset.id.split("-"); | ||
const target = (event.currentTarget as any).dataset.id.split("-"); | ||
newPageReference.contentDocumentId = target[0] + ".htm"; | ||
@@ -21,0 +17,0 @@ newPageReference.hash = target[1]; |
@@ -8,3 +8,3 @@ import { LightningElement, api } from "lwc"; | ||
SelectedVersion | ||
} from "../../../../../../../typings/custom-new"; | ||
} from "typings/custom"; | ||
@@ -11,0 +11,0 @@ export default class Toolbar extends LightningElement { |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Explicitly Unlicensed Item
License(Experimental) Something was found which is explicitly marked as unlicensed.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Misc. License Issues
License(Experimental) A package's licensing information has fine-grained problems.
Found 1 instance in 1 package
No README
QualityPackage does not have a README. This may indicate a failed publish or a low quality package.
Found 1 instance in 1 package
URL strings
Supply chain riskPackage contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.
Found 1 instance in 1 package
97
73.21%0
-100%0
-100%100
Infinity%8804
11.43%0
-100%42
Infinity%1
-50%354332
-13.91%8
Infinity%3
Infinity%+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added