@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", "doc/contentCallout", "doc/codeBlock"] | ||
"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.7", | ||
"version": "0.0.11-chat", | ||
"description": "Docs Lightning web components for DSC", | ||
@@ -8,12 +8,23 @@ "license": "MIT", | ||
"engines": { | ||
"node": ">= 12.x" | ||
"node": "20.x" | ||
}, | ||
"files": [ | ||
"src/modules", | ||
"lwc.config.json" | ||
], | ||
"publishConfig": { | ||
"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"; | ||
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 { | ||
@@ -9,175 +34,243 @@ @api isStorybook: boolean = false; | ||
@api codeBlockType: string = "card"; | ||
@api showPaginationButtons: boolean = false; | ||
@api | ||
set docsData(value) { | ||
this._docRendered = false; | ||
this.docContent = value; | ||
this.docContent = (value && value.trim()) || ""; | ||
} | ||
get docsData() { | ||
return this.docContent; | ||
} | ||
_codeBlockTheme: string = "dark"; | ||
@api | ||
set codeBlockTheme(value) { | ||
this._codeBlockTheme = value; | ||
} | ||
get codeBlockTheme() { | ||
return this._codeBlockTheme; | ||
} | ||
@track docContent: DocContent = ""; | ||
_docRendered: boolean = false; | ||
originalCodeBlockThemeValue: String = ""; | ||
connectedCallback() { | ||
this.template.addEventListener( | ||
"themechange", | ||
this.updateTheme.bind(this) // eslint-disableline no-use-before-define | ||
window.addEventListener( | ||
"highlightedtermchange", | ||
this.updateHighlighted | ||
); | ||
} | ||
updateTheme() { | ||
this._codeBlockTheme = | ||
this._codeBlockTheme === "dark" ? "light" : "dark"; | ||
const codeBlockEls = this.template.querySelectorAll("dx-code-block"); | ||
codeBlockEls.forEach((codeBlockEl) => { | ||
codeBlockEl.setAttribute("theme", this._codeBlockTheme); | ||
}); | ||
disconnectedCallback(): void { | ||
window.removeEventListener( | ||
"highlightedtermchange", | ||
this.updateHighlighted | ||
); | ||
} | ||
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); | ||
} | ||
// 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() { | ||
const divEl = this.template.querySelector("div"); | ||
insertDocHtml(docContent?: string) { | ||
const divEl = this.getCleanContainer(); | ||
// 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(); | ||
// eslint-disable-next-line no-use-before-define | ||
templateEl.innerHTML = this.docContent; | ||
if (divEl) { | ||
divEl.innerHTML = docContent || this.docContent; | ||
// Query the code blocks and create a dx-code-block component that contains the code | ||
const codeBlockEls = templateEl.content.querySelectorAll( | ||
".codeSection" | ||
); | ||
codeBlockEls.forEach((codeBlockEl) => { | ||
const blockEl = document.createElement("dx-code-block"); | ||
const classList = codeBlockEl.firstChild.classList; | ||
let language = ""; | ||
for (const key in classList) { | ||
if (typeof classList[key] === "string") { | ||
const className = classList[key]; | ||
if (className.startsWith("brush:")) { | ||
language = className.split(":")[1]; | ||
// 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]; | ||
} | ||
} | ||
} | ||
} | ||
blockEl.setAttribute("title", "Code Block Title"); | ||
blockEl.setAttribute("theme", this.codeBlockTheme); | ||
blockEl.setAttribute("variant", this.codeBlockType); | ||
blockEl.setAttribute("language", language); | ||
// eslint-disable-next-line no-use-before-define | ||
blockEl.setAttribute("code-block", codeBlockEl.innerHTML); | ||
// eslint-disable-next-line no-use-before-define | ||
codeBlockEl.innerHTML = ""; | ||
codeBlockEl.appendChild(blockEl); | ||
}); | ||
// Query the callouts and create a doc-content-callout component that contains the code | ||
const calloutEls = templateEl.content.querySelectorAll(".message"); | ||
calloutEls.forEach((calloutEl) => { | ||
const calloutCompEl = document.createElement("doc-content-callout"); | ||
const detailEls = calloutEl.querySelectorAll("p"); | ||
detailEls.forEach((detailEl) => { | ||
calloutCompEl.appendChild(detailEl); | ||
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); | ||
}); | ||
const type = calloutEl.querySelector("h4").textContent; | ||
const typeLower = type.toLowerCase(); | ||
calloutCompEl.setAttribute("title", type); | ||
calloutCompEl.setAttribute("variant", typeLower); | ||
calloutEl.innerHTML = ""; | ||
calloutEl.appendChild(calloutCompEl); | ||
}); | ||
// Modify links to work with any domain | ||
const anchorEls = templateEl.content.querySelectorAll("a"); | ||
anchorEls.forEach((anchorEl) => { | ||
if (anchorEl.textContent.includes("Next →")) { | ||
anchorEl.textContent = ""; | ||
const buttonEl = document.createElement("dx-button"); | ||
buttonEl.setAttribute("icon-symbol", "chevronright"); | ||
buttonEl.textContent = "Next"; | ||
anchorEl.appendChild(buttonEl); | ||
} | ||
if (anchorEl.textContent.includes("← Previous")) { | ||
anchorEl.textContent = ""; | ||
const buttonEl = document.createElement("dx-button"); | ||
buttonEl.setAttribute("icon-symbol", "chevronleft"); | ||
buttonEl.setAttribute("icon-position", "left"); | ||
buttonEl.setAttribute("variant", "secondary"); | ||
buttonEl.textContent = "Previous"; | ||
anchorEl.appendChild(buttonEl); | ||
} | ||
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) | ||
// 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 | ||
} | ||
if (href[4]) { | ||
updatedURL = updatedURL + `/${href[4]}`; | ||
if (flag) { | ||
const codeEls = calloutEl.querySelectorAll(".codeSection"); | ||
codeEls.forEach((codeEl) => { | ||
calloutCompEl.appendChild(codeEl); | ||
}); | ||
} | ||
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(); | ||
} | ||
} | ||
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; | ||
} | ||
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) => { | ||
const src = imgEl.src; | ||
const origin = window.location.origin; | ||
const updatedURL = src.replace( | ||
origin, | ||
"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; | ||
} | ||
if (divEl) { | ||
// eslint-disable-next-line no-use-before-define | ||
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(); | ||
}); | ||
} | ||
@@ -191,9 +284,26 @@ | ||
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 | ||
const target = event.currentTarget.dataset.id; | ||
const [page, docId, deliverable, tempContentDocumentId] = target.split( | ||
"/" | ||
); | ||
const target = (event.currentTarget! as any).dataset.id; | ||
const [page, docId, deliverable, tempContentDocumentId] = | ||
target.split("/"); | ||
const [contentDocumentId, hash] = tempContentDocumentId.split("#"); | ||
@@ -216,6 +326,16 @@ const newPageReference = { | ||
); | ||
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) { | ||
public navigateToHash = (hash: String) => { | ||
const splitHash = hash.split("#"); | ||
@@ -231,3 +351,3 @@ if (splitHash.length === 2) { | ||
} | ||
} | ||
}; | ||
@@ -234,0 +354,0 @@ renderedCallback() { |
@@ -6,4 +6,3 @@ import { LightningElement, api } from "lwc"; | ||
export default class ContentCallout extends LightningElement { | ||
@api overrideWidth?: boolean = false; | ||
@api title!: string; | ||
@api header!: string; | ||
@api variant!: CalloutVariant; | ||
@@ -16,2 +15,5 @@ cardVariant?: string; | ||
switch (this.variant) { | ||
case "plain": | ||
this.cardVariant = "dx-callout-plain"; | ||
break; | ||
case "tip": | ||
@@ -23,4 +25,4 @@ this.cardVariant = "dx-callout-tip"; | ||
case "warning": | ||
this.cardVariant = "dx-callout-warning"; | ||
this.iconColor = "yellow-vibrant-80"; | ||
this.cardVariant = "doc-status-container dx-callout-warning"; | ||
this.iconColor = "red-vibrant-50"; | ||
this.iconName = "warning"; | ||
@@ -33,6 +35,11 @@ break; | ||
break; | ||
case "important": | ||
this.cardVariant = "doc-status-container dx-callout-important"; | ||
this.iconColor = "gray-10"; | ||
this.iconName = "announcement"; | ||
break; | ||
case "note": | ||
default: | ||
this.cardVariant = "dx-callout-base"; | ||
this.iconColor = "gray-50"; | ||
this.cardVariant = "dx-callout-note"; | ||
this.iconColor = "blue-vibrant-50"; | ||
this.iconName = "info"; | ||
@@ -45,9 +52,13 @@ } | ||
"dx-callout", | ||
"dx-callout-base__section", | ||
"dx-callout-base__column", | ||
this.cardVariant, | ||
this.overrideWidth && "dx-callout-base--override-width" | ||
"doc-status-base", | ||
"dx-callout-base_section", | ||
"dx-callout-base_column", | ||
this.cardVariant | ||
); | ||
} | ||
get hideIcon() { | ||
return this.variant === "plain"; | ||
} | ||
private isSlotEmpty: boolean = true; | ||
@@ -54,0 +65,0 @@ private onSlotChange(e: LightningSlotElement) { |
@@ -11,3 +11,3 @@ import { LightningElement, api } from "lwc"; | ||
SelectedVersion | ||
} from "../../../../../../../typings/custom"; | ||
} from "typings/custom"; | ||
@@ -14,0 +14,0 @@ export default class Nav extends LightningElement { |
@@ -14,3 +14,3 @@ import { LightningElement, api } from "lwc"; | ||
//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"; | ||
@@ -17,0 +17,0 @@ newPageReference.hash = target[1]; |
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
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
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
93
43.08%7322
1.95%0
-100%42
Infinity%1
-50%292821
-22.77%8
Infinity%3
Infinity%1
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