lightning-base-components 1.22.3-alpha → 1.26.2-rc.0-alpha

package/src/lightning/formattedRichText/formattedRichText.js

@@ -1,164 +1,60 @@
-import { api } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
-import sanitizeHTML from 'lightning/purifyLib';
-import { richTextConfig } from './richTextConfig';
-import { updateRawLinkInfo } from 'lightning/routingService';
-import {
-    normalizeBoolean,
-    hasOnlyAllowedVideoIframes,
-} from 'lightning/utilsPrivate';
-import { linkTextNodes } from './linkTextNodes';
-
-/**
- * Displays rich text that's formatted with allowed tags and attributes.
- * Other tags and attributes are removed and only their text content is displayed.
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
  */
-export default class LightningFormattedRichText extends LightningShadowBaseClass {
-    static validationOptOut = ['class'];
-    /**
-     * If present, the component does not create links in the rich text.
-     * @type {boolean}
-     * @default false
-     */
-    @api
-    get disableLinkify() {
-        return this._disableLinkify;
-    }
-
-    set disableLinkify(val) {
-        this._disableLinkify = normalizeBoolean(val);
-        this.renderRichText();
-    }
+import LightningFormattedRichTextRenderer from 'lightning/formattedRichTextRenderer';
+import { isCSR } from 'lightning/utilsPrivate';
 
-    /**
-     * Sets the rich text to display.
-     * @type {string}
-     *
-     */
-    @api
-    get value() {
-        return this._value;
-    }
-
-    set value(val) {
-        this._value = val === undefined || val === null ? '' : String(val);
-        this.renderRichText();
-    }
-
-    initialRender = true;
-    _value = '';
-    _disableLinkify = false;
-    connected = false;
-    clean = false;
-
-    renderedCallback() {
-        if (this.initialRender) {
-            this.renderRichText();
-            this.initialRender = false;
-        }
-    }
+export default class LightningFormattedRichText extends LightningFormattedRichTextRenderer {
+    csrOnly = false;
 
     connectedCallback() {
         super.connectedCallback();
-        this.classList.add('slds-rich-text-editor__output');
-        this.connected = true;
-    }
-
-    disconnectedCallback() {
-        this.removeLinkClickListeners();
-        this.connected = false;
-    }
-
-    handleClick(event) {
-        const anchor = event.currentTarget;
-        if (anchor == null) {
-            return;
-        }
-        const target = anchor.target;
-        const url = anchor.href;
-        // Grab the link info onclick and dispatch
-        updateRawLinkInfo(this, { url, target }).then((linkInfo) => {
-            anchor.href = linkInfo.url;
-            linkInfo.dispatcher(event);
-        });
+        this.csrOnly =
+            isCSR &&
+            !this.template.querySelector(
+                'lightning-formatted-rich-text-renderer'
+            );
     }
 
-    sanitize(value) {
-        if (!value) {
-            this.clean = true;
-            return value;
-        }
-        this.clean = false;
-        let displayValue;
-        let computedRichTextConfig = richTextConfig;
-
-        if (hasOnlyAllowedVideoIframes(value)) {
-            // richTextConfig is shared across all formatted-rich-text components;
-            // so create and modify copy of richTextConfig to allow iframes for each component
-            computedRichTextConfig = {
-                ...richTextConfig,
-                ALLOWED_TAGS: richTextConfig.ALLOWED_TAGS.concat(['iframe']),
-                ALLOWED_ATTR: richTextConfig.ALLOWED_ATTR.concat([
-                    'allowfullscreen',
-                ]),
-            };
-        }
-
-        try {
-            displayValue = sanitizeHTML(value, computedRichTextConfig);
-            this.clean = true;
-        } catch (e) {
-            // eslint-disable-next-line no-console
-            console.warn(
-                `<lightning-formatted-rich-text> Exception caught when attempting to sanitize: `,
-                e
-            );
-            displayValue = value;
-            this.clean = false;
+    renderedCallback() {
+        if (this.csrOnly) {
+            super.renderedCallback();
         }
-
-        return displayValue;
     }
 
     renderRichText() {
-        if (this.connected) {
-            const richText = this.sanitize(this.value);
+        // If not server rendered, render here
+        if (this.csrOnly) {
+            super.renderRichText();
             const container = this.container;
 
-            if (this.clean) {
-                // eslint-disable-next-line @lwc/lwc/no-inner-html
-                container.innerHTML = richText;
-            } else {
-                const textNode = document.createTextNode(richText);
+            // If sanitizer didn't work, we just append the error to the DOM as text
+            if (this.rawTextIfSanitizerThrewError) {
+                const textNode = document.createTextNode(
+                    this.rawTextIfSanitizerThrewError
+                );
                 while (container.hasChildNodes()) {
                     container.removeChild(container.lastChild);
                 }
                 container.appendChild(textNode);
+
+                // If we were able to sanitize, then we need to update the rich text value no matter what (empty string, non-empty string, null, undefined)
+            } else {
+                // eslint-disable-next-line @lwc/lwc/no-inner-html
+                container.innerHTML = this.richText;
+                // We only need to link the rich text if it was an actual value (no point linking an empty string, null or undefined)
+                if (this.linkingRequired) {
+                    this.linkRichText();
+                }
             }
-            if (!this.disableLinkify) {
-                linkTextNodes(container);
-            }
-            this.addLinkClickListeners();
         }
     }
 
-    addLinkClickListeners() {
-        this.links.forEach((link) => {
-            link.addEventListener('click', this.handleClick.bind(this));
-        });
-    }
-
-    removeLinkClickListeners() {
-        this.links.forEach((link) => {
-            link.removeEventListener('click', this.handleClick.bind(this));
-        });
-    }
-
-    get links() {
-        return this.container ? [...this.container.querySelectorAll('a')] : [];
-    }
-
-    get container() {
-        return this.template.querySelector('span');
+    disconnectedCallback() {
+        if (this.csrOnly) {
+            super.disconnectedCallback();
+        }
     }
 }

package/src/lightning/formattedRichText/formattedRichText.lbc.native.css

@@ -1,3 +1,3 @@
 @import 'lightning/sldsCommon';
-@import './formatted-rich-text.slds.css';
 @import 'lightning/sldsUtilsThemes';
+@import './formatted-rich-text.slds.css';

package/src/lightning/formattedRichTextRenderer/formatted-rich-text.slds.css

@@ -0,0 +1,228 @@
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) {
+  line-height: var(--slds-g-font-lineheight);
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  hyphens: manual;
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) h1 {
+  font-size: var(--slds-g-font-scale-5);
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) h2 {
+  font-size: var(--slds-g-font-scale-3);
+  font-weight: var(--slds-g-font-weight-7);
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) h3 {
+  font-size: var(--slds-g-font-scale-3);
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) h4 {
+  font-size: var(--slds-g-font-scale-1);
+  font-weight: var(--slds-g-font-weight-7);
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) h5 {
+  font-size: var(--slds-g-font-scale-1);
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) h6 {
+  font-size: var(--slds-g-font-scale-neg-1);
+  font-weight: var(--slds-g-font-weight-7);
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) h1,:host([data-render-mode="shadow"].slds-rich-text-editor__output) h2,:host([data-render-mode="shadow"].slds-rich-text-editor__output) h3,:host([data-render-mode="shadow"].slds-rich-text-editor__output) h4,:host([data-render-mode="shadow"].slds-rich-text-editor__output) h5,:host([data-render-mode="shadow"].slds-rich-text-editor__output) h6,:host([data-render-mode="shadow"].slds-rich-text-editor__output) ul,:host([data-render-mode="shadow"].slds-rich-text-editor__output) ol,:host([data-render-mode="shadow"].slds-rich-text-editor__output) dl,:host([data-render-mode="shadow"].slds-rich-text-editor__output) img {
+  margin-block-end: var(--slds-g-spacing-3);
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) blockquote {
+  margin: var(--slds-g-spacing-6) var(--slds-g-spacing-5);
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) ins {
+  color: var(--slds-g-color-success-base-50, var(--slds-g-color-success-base-50));
+  text-decoration: underline;
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) del {
+  color: var(--slds-g-color-error-base-30, var(--slds-g-color-error-base-50));
+  text-decoration: line-through;
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) ul {
+  margin-inline-start: var(--slds-g-spacing-5);
+  list-style: disc;
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) ul ul {
+  list-style: circle;
+  margin-block-end: 0;
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) ul ul ul {
+  list-style: square;
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) ul ul ul ul {
+  list-style: disc;
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) ul ul ul ul ul {
+  list-style: circle;
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) ul ol {
+  margin-inline-start: var(--slds-g-spacing-5);
+  list-style: decimal;
+  margin-block-end: 0;
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) ol {
+  margin-inline-start: var(--slds-g-spacing-5);
+  list-style: decimal;
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) ol ol {
+  list-style: lower-alpha;
+  margin-block-end: 0;
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) ol ol ol {
+  list-style: lower-roman;
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) ol ol ol ol {
+  list-style: decimal;
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) ol ol ol ol ol {
+  list-style: lower-alpha;
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) ol ul {
+  margin-inline-start: var(--slds-g-spacing-5);
+  list-style: disc;
+  margin-block-end: 0;
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) dd {
+  margin-inline-start: var(--slds-g-spacing-7);
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) abbr[title],:host([data-render-mode="shadow"].slds-rich-text-editor__output) acronym[title] {
+  border-bottom: var(--slds-g-sizing-border-1) dotted;
+  cursor: help;
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) table {
+  overflow-wrap: normal;
+  word-wrap: normal;
+  word-break: normal;
+  width: auto;
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) table caption {
+  text-align: center;
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) th,:host([data-render-mode="shadow"].slds-rich-text-editor__output) td {
+  padding: var(--slds-g-spacing-2);
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) .sans-serif {
+  font-family: sans-serif;
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) .courier {
+  font-family: courier;
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) .verdana {
+  font-family: verdana;
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) .tahoma {
+  font-family: tahoma;
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) .garamond {
+  font-family: garamond;
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) .serif {
+  font-family: serif;
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) .ql-indent-1:not(.ql-direction-rtl) {
+  padding-inline-start: var(--slds-g-spacing-8);
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) .ql-indent-1.ql-direction-rtl.ql-align-right {
+  padding-inline-end: var(--slds-g-spacing-8);
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) .ql-indent-2:not(.ql-direction-rtl) {
+  padding-inline-start: calc(var(--slds-g-spacing-8) * 2);
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) .ql-indent-2.ql-direction-rtl.ql-align-right {
+  padding-inline-end: calc(var(--slds-g-spacing-8) * 2);
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) .ql-indent-3:not(.ql-direction-rtl) {
+  padding-inline-start: calc(var(--slds-g-spacing-8) * 3);
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) .ql-indent-3.ql-direction-rtl.ql-align-right {
+  padding-inline-end: calc(var(--slds-g-spacing-8) * 3);
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) .ql-indent-4:not(.ql-direction-rtl) {
+  padding-inline-start: calc(var(--slds-g-spacing-8) * 4);
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) .ql-indent-4.ql-direction-rtl.ql-align-right {
+  padding-inline-end: calc(var(--slds-g-spacing-8) * 4);
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) .ql-indent-5:not(.ql-direction-rtl) {
+  padding-inline-start: calc(var(--slds-g-spacing-8) * 5);
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) .ql-indent-5.ql-direction-rtl.ql-align-right {
+  padding-inline-end: calc(var(--slds-g-spacing-8) * 5);
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) .ql-indent-6:not(.ql-direction-rtl) {
+  padding-inline-start: calc(var(--slds-g-spacing-8) * 6);
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) .ql-indent-6.ql-direction-rtl.ql-align-right {
+  padding-inline-end: calc(var(--slds-g-spacing-8) * 6);
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) .ql-indent-7:not(.ql-direction-rtl) {
+  padding-inline-start: calc(var(--slds-g-spacing-8) * 7);
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) .ql-indent-7.ql-direction-rtl.ql-align-right {
+  padding-inline-end: calc(var(--slds-g-spacing-8) * 7);
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) .ql-indent-8:not(.ql-direction-rtl) {
+  padding-inline-start: calc(var(--slds-g-spacing-8) * 8);
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) .ql-indent-8.ql-direction-rtl.ql-align-right {
+  padding-inline-end: calc(var(--slds-g-spacing-8) * 8);
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) .ql-indent-9:not(.ql-direction-rtl) {
+  padding-inline-start: calc(var(--slds-g-spacing-8) * 9);
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) .ql-indent-9.ql-direction-rtl.ql-align-right {
+  padding-inline-end: calc(var(--slds-g-spacing-8) * 9);
+}

package/src/lightning/formattedRichTextRenderer/formattedRichTextRenderer.css

@@ -0,0 +1 @@
+@import './formattedRichTextRenderer.lbc.native.css';

package/src/lightning/formattedRichTextRenderer/formattedRichTextRenderer.html

@@ -0,0 +1,8 @@
+<template>
+    <template lwc:if={rawTextIfSanitizerThrewError}>
+        <span part="formatted-rich-text">{rawTextIfSanitizerThrewError}</span>
+    </template>
+     <template lwc:else>
+        <span lwc:inner-html={richText} part="formatted-rich-text"></span>
+     </template>
+</template>

package/src/lightning/formattedRichTextRenderer/formattedRichTextRenderer.js

@@ -0,0 +1,212 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { api } from 'lwc';
+import { setHooks } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import sanitizeHTML from 'lightning/purifyLib';
+import { richTextConfig } from './richTextConfig';
+import { updateRawLinkInfo } from 'lightning/routingService';
+import {
+    normalizeBoolean,
+    isCSR,
+    hasOnlyAllowedVideoIframes,
+} from 'lightning/utilsPrivate';
+import { linkTextNodes } from './linkTextNodes';
+import { linkTextNodesSSR } from './linkTextNodesSSR';
+
+// Overriding default sanitization hook to disable it.
+// Content is conditionally sanitized within the component
+// https://lwc.dev/guide/html_templates#override-the-sanitizehtmlcontent(content)-method
+// W-16437378 - Remove this section once setHooks has been removed globally
+try {
+    setHooks({
+        sanitizeHtmlContent(rawHTMLString) {
+            return rawHTMLString;
+        },
+    });
+} catch (e) {
+    // Do nothing because setHooks is getting
+    // called at the app/framework level.
+}
+
+/**
+ * Displays rich text that's formatted with allowed tags and attributes.
+ * Other tags and attributes are removed and only their text content is displayed.
+ */
+
+/**
+ * W-15751242 resulted in major updates to formatted-rich-text depending on render mode.
+ * If loaded in CSR, content gets sanitized. This is rendered as text.
+ * If loaded in SSR, content does not get sanitized until it reaches the client.
+ */
+export default class LightningFormattedRichTextRenderer extends LightningShadowBaseClass {
+    static validationOptOut = ['class'];
+
+    rendered = false;
+    _value = '';
+    _disableLinkify = false;
+    connected = false;
+    richText = null;
+    rawTextIfSanitizerThrewError = null;
+    serverRenderedContent = null;
+    linkingRequired = false;
+
+    /**
+     * If present, the component does not create links in the rich text.
+     * @type {boolean}
+     * @default false
+     */
+    @api
+    get disableLinkify() {
+        return this._disableLinkify;
+    }
+
+    set disableLinkify(val) {
+        this._disableLinkify = normalizeBoolean(val);
+        this.renderRichText();
+    }
+
+    /**
+     * Sets the rich text to display.
+     * @type {string}
+     *
+     */
+    @api
+    get value() {
+        return this._value;
+    }
+
+    set value(val) {
+        this._value = val === undefined || val === null ? '' : String(val);
+        this.renderRichText();
+    }
+
+    renderedCallback() {
+        if (this.linkingRequired) {
+            this.linkRichText();
+        }
+        if (!this.rendered) {
+            this.rendered = true;
+            this.renderRichText();
+        }
+    }
+
+    connectedCallback() {
+        super.connectedCallback();
+        this.classList.add('slds-rich-text-editor__output');
+        this.connected = true;
+
+        // Checks if CSR currently & previously rendered in SSR.
+        // This checks if markup already exists in the DOM.
+        if (isCSR) {
+            // eslint-disable-next-line @lwc/lwc/no-inner-html
+            this.serverRenderedContent = this.container?.innerHTML;
+
+            if (this.serverRenderedContent) {
+                // Syncing server rendered DOM and client component state
+                // ensures we render server side non-sanitized content, instead
+                // of client side sanitized content, on first paint.
+                this.richText = this.serverRenderedContent;
+            }
+        }
+    }
+
+    disconnectedCallback() {
+        this.removeLinkClickListeners();
+        this.connected = false;
+    }
+
+    handleClick(event) {
+        const anchor = event.currentTarget;
+        if (anchor === null) {
+            return;
+        }
+        const target = anchor.target;
+        const url = anchor.href;
+        // Grab the link info onclick and dispatch
+        updateRawLinkInfo(this, { url, target }).then((linkInfo) => {
+            anchor.href = linkInfo.url;
+            linkInfo.dispatcher(event);
+        });
+    }
+
+    renderRichText() {
+        if (!isCSR) {
+            // If SSR, do not sanitize the value on server, just link if required.
+            this.richText = this.disableLinkify
+                ? this.value
+                : linkTextNodesSSR(this.value);
+        }
+
+        if (this.rendered) {
+            try {
+                // Sanitizer did not throw an error, so this value is cleared
+                this.rawTextIfSanitizerThrewError = null;
+
+                // Render richText if the value changes or if previously set in SSR
+                if (this.value) {
+                    let computedRichTextConfig = richTextConfig;
+
+                    if (hasOnlyAllowedVideoIframes(this.value)) {
+                        // richTextConfig is shared across all formatted-rich-text components;
+                        // so create and modify copy of richTextConfig to allow iframes for each component
+                        computedRichTextConfig = {
+                            ...richTextConfig,
+                            ALLOWED_TAGS: richTextConfig.ALLOWED_TAGS.concat([
+                                'iframe',
+                            ]),
+                            ALLOWED_ATTR: richTextConfig.ALLOWED_ATTR.concat([
+                                'allowfullscreen',
+                            ]),
+                        };
+                    }
+                    this.richText = sanitizeHTML(
+                        this.value,
+                        computedRichTextConfig
+                    );
+
+                    // Linking needs to be added in a second tick as the DOM has not been updated yet
+                    this.linkingRequired = true;
+                } else {
+                    this.richText = this.value;
+                }
+            } catch (e) {
+                // eslint-disable-next-line no-console
+                console.warn(e.message);
+
+                this.richText = null;
+
+                // If sanitizer throws an error & the value was not sanitized,
+                // render it as an unsanitized text value
+                this.rawTextIfSanitizerThrewError = this.value;
+            }
+        }
+    }
+
+    linkRichText() {
+        if (!this.disableLinkify) {
+            linkTextNodes(this.container);
+        }
+        this.links.forEach((link) => {
+            link.addEventListener('click', this.handleClick.bind(this));
+        });
+        this.linkingRequired = false;
+    }
+
+    removeLinkClickListeners() {
+        this.links.forEach((link) => {
+            link.removeEventListener('click', this.handleClick.bind(this));
+        });
+    }
+
+    get links() {
+        return this.container ? [...this.container.querySelectorAll('a')] : [];
+    }
+
+    get container() {
+        return this.template.querySelector('span');
+    }
+}

package/src/lightning/formattedRichTextRenderer/formattedRichTextRenderer.js-meta.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<LightningComponentBundle xmlns="xmlns=http://soap.sforce.com/2006/04/metadata">
+    <capabilities>
+        <capability>lightning__ServerRenderableWithHydration</capability>
+    </capabilities>
+</LightningComponentBundle>

package/src/lightning/formattedRichTextRenderer/formattedRichTextRenderer.lbc.native.css

@@ -0,0 +1,3 @@
+@import 'lightning/sldsCommon';
+@import 'lightning/sldsUtilsThemes';
+@import './formatted-rich-text.slds.css';