@ni/nimble-components 20.1.18 → 20.1.20

package/dist/esm/rich-text-editor/styles.js

@@ -1,8 +1,10 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
-import { bodyFont, bodyFontColor, borderHoverColor, borderRgbPartialColor, borderWidth, smallDelay, standardPadding } from '../theme-provider/design-tokens';
+import { bodyDisabledFontColor, bodyFont, bodyFontColor, borderHoverColor, borderRgbPartialColor, borderWidth, controlLabelFontColor, controlLabelDisabledFontColor, failColor, iconSize, smallDelay, standardPadding } from '../theme-provider/design-tokens';
+import { styles as errorStyles } from '../patterns/error/styles';
 export const styles = css `
     ${display('inline-flex')}
+    ${errorStyles}
 
     :host {
         font: ${bodyFont};
@@ -12,6 +14,9 @@ export const styles = css `
         --ni-private-rich-text-editor-hover-indicator-width: calc(
             ${borderWidth} + 1px
         );
+        ${
+/** Initial height of rich text editor with one line space when the footer is visible. */ ''}
+        height: 82px;
         --ni-private-rich-text-editor-footer-section-height: 40px;
         ${
 /** Minimum width is added to accommodate all the possible buttons in the toolbar and to support the mobile width. */ ''}
@@ -19,6 +24,7 @@ export const styles = css `
     }
 
     .container {
+        box-sizing: border-box;
         display: flex;
         flex-direction: column;
         position: relative;
@@ -50,37 +56,55 @@ export const styles = css `
         }
     }
 
+    :host([disabled]) .container {
+        color: ${bodyDisabledFontColor};
+        border: ${borderWidth} solid rgba(${borderRgbPartialColor}, 0.1);
+    }
+
+    :host([error-visible]) .container {
+        border-bottom-color: ${failColor};
+    }
+
     :host(:hover) .container::after {
-        width: 100%;
+        width: calc(100% + 2 * ${borderWidth});
+    }
+
+    :host([disabled]:hover) .container::after {
+        width: 0px;
+    }
+
+    :host([error-visible]) .container::after {
+        border-bottom-color: ${failColor};
+    }
+
+    .editor-container {
+        display: contents;
     }
 
     .editor {
+        display: flex;
+        flex-direction: column;
         border: ${borderWidth} solid transparent;
         border-radius: 0px;
-        height: calc(
-            100% - var(--ni-private-rich-text-editor-footer-section-height)
-        );
-        overflow: auto;
+        flex: 1;
+        overflow: hidden;
     }
 
-    .editor-container {
-        display: contents;
+    :host([footer-hidden]) .editor {
+        height: 100%;
     }
 
     .ProseMirror {
-        ${
-/**
- * Min height represents the one line space for the initial view and max height is referred from the visual design.
- * However, max height will be `fit-content` when the `fit-to-content` attribute for the editor component is implemented.
- */ ''}
-        min-height: 32px;
-        max-height: 132px;
+        overflow: auto;
         height: 100%;
-        border: ${borderWidth} solid transparent;
+        border: 0px;
         border-radius: 0px;
         background-color: transparent;
         font: inherit;
         padding: 8px;
+        ${
+/* This padding ensures that showing/hiding the error icon doesn't affect text layout */ ''}
+        padding-right: calc(${iconSize});
         box-sizing: border-box;
         position: relative;
         color: inherit;
@@ -127,15 +151,38 @@ export const styles = css `
         margin-block: 0;
     }
 
+    ${
+/**
+ * Styles provided by Tiptap are necessary to display the placeholder value when the editor is empty.
+ * Tiptap doc reference: https://tiptap.dev/api/extensions/placeholder#additional-setup
+ */ ''}
+    .ProseMirror p.is-editor-empty:first-child::before {
+        color: ${controlLabelFontColor};
+        content: attr(data-placeholder);
+        float: left;
+        height: 0;
+        pointer-events: none;
+        word-break: break-word;
+    }
+
+    :host([disabled]) .ProseMirror p.is-editor-empty:first-child::before {
+        color: ${controlLabelDisabledFontColor};
+    }
+
     .footer-section {
         display: flex;
         justify-content: space-between;
+        flex-shrink: 0;
         border: ${borderWidth} solid transparent;
         border-top-color: rgba(${borderRgbPartialColor}, 0.1);
         height: var(--ni-private-rich-text-editor-footer-section-height);
         overflow: hidden;
     }
 
+    :host([footer-hidden]) .footer-section {
+        display: none;
+    }
+
     nimble-toolbar::part(positioning-region) {
         background: transparent;
         padding-right: 8px;
@@ -152,5 +199,16 @@ export const styles = css `
         gap: ${standardPadding};
         place-items: center;
     }
+
+    :host([error-visible]) .error-icon {
+        display: none;
+    }
+
+    :host([error-visible]) .error-icon.scrollbar-width-calculated {
+        display: inline-flex;
+        position: absolute;
+        top: calc(${standardPadding} / 2);
+        right: var(--ni-private-rich-text-editor-scrollbar-width);
+    }
 `;
 //# sourceMappingURL=styles.js.map

package/dist/esm/rich-text-editor/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/rich-text-editor/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,QAAQ,EACR,aAAa,EACb,gBAAgB,EAChB,qBAAqB,EACrB,WAAW,EACX,UAAU,EACV,eAAe,EAClB,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;gBAGZ,QAAQ;;iBAEP,aAAa;;;cAGhB,WAAW;;;UAGf;AACE,qHAAqH,CAAC,EAC1H;;;;;;;;;kBASU,WAAW,eAAe,qBAAqB;;;;;;;4BAOrC,WAAW;;;;;yBAKd,gBAAgB;;4BAEb,UAAU;;;;+BAIP,gBAAgB;;;;;;;;;;;;;;kBAc7B,WAAW;;;;;;;;;;;;;UAanB;AACE;;;GAGG,CAAC,EACR;;;;kBAIU,WAAW;;;;;;;;;;MAUvB;AACE;;;;;GAKG,CAAC,EACR;;;;;;;;;;;;;;;;;MAiBE,CAAA,+DAAgE,EAAE;;;;;;;;;;;;;;;;;;;;;kBAqBtD,WAAW;iCACI,qBAAqB;;;;;;;;;;;;;;;;;6BAiBzB,eAAe;eAC7B,eAAe;;;CAG7B,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/rich-text-editor/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,qBAAqB,EACrB,QAAQ,EACR,aAAa,EACb,gBAAgB,EAChB,qBAAqB,EACrB,WAAW,EACX,qBAAqB,EACrB,6BAA6B,EAC7B,SAAS,EACT,QAAQ,EACR,UAAU,EACV,eAAe,EAClB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAEjE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;MACtB,WAAW;;;gBAGD,QAAQ;;iBAEP,aAAa;;;cAGhB,WAAW;;UAEf;AACE,yFAAyF,CAAC,EAC9F;;;UAGE;AACE,qHAAqH,CAAC,EAC1H;;;;;;;;;;kBAUU,WAAW,eAAe,qBAAqB;;;;;;;4BAOrC,WAAW;;;;;yBAKd,gBAAgB;;4BAEb,UAAU;;;;+BAIP,gBAAgB;;;;;;;;;;iBAU9B,qBAAqB;kBACpB,WAAW,eAAe,qBAAqB;;;;+BAIlC,SAAS;;;;iCAIP,WAAW;;;;;;;;+BAQb,SAAS;;;;;;;;;;kBAUtB,WAAW;;;;;;;;;;;;;;;;;;UAkBnB;AACE,wFAAwF,CAAC,EAC7F;8BACsB,QAAQ;;;;;;MAMhC;AACE;;;;;GAKG,CAAC,EACR;;;;;;;;;;;;;;;;;MAiBE,CAAA,+DAAgE,EAAE;;;;;;;;;;;;;;;;;;MAkBlE;AACE;;;GAGG,CAAC,EACR;;iBAEa,qBAAqB;;;;;;;;;iBASrB,6BAA6B;;;;;;;kBAO5B,WAAW;iCACI,qBAAqB;;;;;;;;;;;;;;;;;;;;;6BAqBzB,eAAe;eAC7B,eAAe;;;;;;;;;;;oBAWV,eAAe;;;CAGlC,CAAC"}

package/dist/esm/rich-text-editor/template.js

@@ -5,18 +5,26 @@ import { iconBoldBTag } from '../icons/bold-b';
 import { iconItalicITag } from '../icons/italic-i';
 import { iconListTag } from '../icons/list';
 import { iconNumberListTag } from '../icons/number-list';
+import { errorTextTemplate } from '../patterns/error/template';
+import { iconExclamationMarkTag } from '../icons/exclamation-mark';
 // prettier-ignore
 export const template = html `
     <template>
         <div class="container">
             <section ${ref('editorContainer')} class="editor-container">
             </section>
-            <section class="footer-section" part="footer-section">
+            <${iconExclamationMarkTag}
+                severity="error"
+                class="error-icon ${x => (x.scrollbarWidth >= 0 ? 'scrollbar-width-calculated' : '')}"
+                style="--ni-private-rich-text-editor-scrollbar-width: ${x => x.scrollbarWidth}px;"
+            ></${iconExclamationMarkTag}>
+            <section class="footer-section">
                 <${toolbarTag}>
                     <${toggleButtonTag}
                         ${ref('boldButton')}
                         appearance="ghost"
                         content-hidden
+                        ?disabled="${x => x.disabled}"
                         slot="start"
                         title="Bold"
                         @click=${x => x.boldButtonClick()}
@@ -30,6 +38,7 @@ export const template = html `
                         ${ref('italicsButton')}
                         appearance="ghost"
                         content-hidden
+                        ?disabled="${x => x.disabled}"
                         slot="start"
                         title="Italics"
                         @click=${x => x.italicsButtonClick()}
@@ -43,6 +52,7 @@ export const template = html `
                         ${ref('bulletListButton')}
                         appearance="ghost"
                         content-hidden
+                        ?disabled="${x => x.disabled}"
                         slot="start"
                         title="Bullet List"
                         @click=${x => x.bulletListButtonClick()}
@@ -56,6 +66,7 @@ export const template = html `
                         ${ref('numberedListButton')}
                         appearance="ghost"
                         content-hidden
+                        ?disabled="${x => x.disabled}"
                         slot="start"
                         title="Numbered List"
                         @click=${x => x.numberedListButtonClick()}
@@ -70,6 +81,7 @@ export const template = html `
                     <slot name="footer-actions"></slot>
                 </span>
             </section>
+            ${errorTextTemplate}
         </div>
     </template>
 `;

package/dist/esm/rich-text-editor/template.js.map

@@ -1 +1 @@
-{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/rich-text-editor/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAEpD,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAEzD,kBAAkB;AAClB,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAgB;;;uBAGrB,GAAG,CAAC,iBAAiB,CAAC;;;mBAG1B,UAAU;uBACN,eAAe;0BACZ,GAAG,CAAC,YAAY,CAAC;;;;;iCAKV,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE;kCACvB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,KAAK,CAAC;mCACxC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,KAAsB,CAAC;;;2BAG/D,YAAY,mBAAmB,YAAY;wBAC9C,eAAe;uBAChB,eAAe;0BACZ,GAAG,CAAC,eAAe,CAAC;;;;;iCAKb,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,EAAE;kCAC1B,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,KAAK,CAAC;mCACxC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,KAAsB,CAAC;;;2BAGlE,cAAc,mBAAmB,cAAc;wBAClD,eAAe;uBAChB,eAAe;0BACZ,GAAG,CAAC,kBAAkB,CAAC;;;;;iCAKhB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,qBAAqB,EAAE;kCAC7B,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,KAAK,CAAC;mCACxC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,KAAsB,CAAC;;;2BAGrE,WAAW,mBAAmB,WAAW;wBAC5C,eAAe;uBAChB,eAAe;0BACZ,GAAG,CAAC,oBAAoB,CAAC;;;;;iCAKlB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,uBAAuB,EAAE;kCAC/B,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,KAAK,CAAC;mCACxC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,KAAsB,CAAC;;;2BAGvE,iBAAiB,mBAAmB,iBAAiB;wBACxD,eAAe;oBACnB,UAAU;;;;;;;CAO7B,CAAC"}
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/rich-text-editor/template.ts"],"names":[],"mappings":"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"}

package/dist/esm/rich-text-editor/testing/rich-text-editor.pageobject.d.ts

@@ -12,37 +12,25 @@ export declare class RichTextEditorPageObject {
     pressEnterKeyInEditor(): Promise<void>;
     pressTabKeyInEditor(): Promise<void>;
     pressShiftTabKeysInEditor(): Promise<void>;
-    /**
-     * To click a formatting button in the footer section, pass its position value as an index (starting from '0')
-     * @param button can be imported from an enum for each button using the `ButtonIndex`.
-     */
     clickFooterButton(button: ToolbarButton): Promise<void>;
-    /**
-     * To retrieve the checked state of the button, provide its position value as an index (starting from '0')
-     * @param button can be imported from an enum for each button using the `ButtonIndex`.
-     */
     getButtonCheckedState(button: ToolbarButton): boolean;
-    /**
-     * To retrieve the tab index of the button, provide its position value as an index (starting from '0')
-     * @param button can be imported from an enum for each button using the `ButtonIndex`.
-     */
     getButtonTabIndex(button: ToolbarButton): number;
-    /**
-     * To trigger a space key press for the button, provide its position value as an index (starting from '0')
-     * @param button can be imported from an enum for each button using the `ButtonIndex`.
-     */
     spaceKeyActivatesButton(button: ToolbarButton): void;
-    /**
-     * To trigger a enter key press for the button, provide its position value as an index (starting from '0')
-     * @param button can be imported from an enum for each button using the `ButtonIndex`.
-     */
     enterKeyActivatesButton(button: ToolbarButton): void;
     setEditorTextContent(value: string): Promise<void>;
     getEditorFirstChildTagName(): string;
     getEditorFirstChildTextContent(): string;
     getEditorTagNames(): string[];
     getEditorLeafContents(): string[];
+    isRichTextEditorActiveElement(): boolean;
+    getEditorTabIndex(): string;
+    setFooterHidden(footerHidden: boolean): Promise<void>;
+    isFooterHidden(): boolean;
+    setDisabled(disabled: boolean): Promise<void>;
+    isButtonDisabled(button: ToolbarButton): boolean;
+    getPlaceholderValue(): string;
     private getEditorSection;
+    private getFooter;
     private getTiptapEditor;
     private getFormattingButton;
 }

package/dist/esm/rich-text-editor/testing/rich-text-editor.pageobject.js

@@ -58,35 +58,19 @@ export class RichTextEditorPageObject {
         editor.dispatchEvent(shiftTabEvent);
         await waitForUpdatesAsync();
     }
-    /**
-     * To click a formatting button in the footer section, pass its position value as an index (starting from '0')
-     * @param button can be imported from an enum for each button using the `ButtonIndex`.
-     */
     async clickFooterButton(button) {
         const toggleButton = this.getFormattingButton(button);
         toggleButton.click();
         await waitForUpdatesAsync();
     }
-    /**
-     * To retrieve the checked state of the button, provide its position value as an index (starting from '0')
-     * @param button can be imported from an enum for each button using the `ButtonIndex`.
-     */
     getButtonCheckedState(button) {
         const toggleButton = this.getFormattingButton(button);
         return toggleButton.checked;
     }
-    /**
-     * To retrieve the tab index of the button, provide its position value as an index (starting from '0')
-     * @param button can be imported from an enum for each button using the `ButtonIndex`.
-     */
     getButtonTabIndex(button) {
         const toggleButton = this.getFormattingButton(button);
         return toggleButton.tabIndex;
     }
-    /**
-     * To trigger a space key press for the button, provide its position value as an index (starting from '0')
-     * @param button can be imported from an enum for each button using the `ButtonIndex`.
-     */
     spaceKeyActivatesButton(button) {
         const toggleButton = this.getFormattingButton(button);
         const event = new KeyboardEvent('keypress', {
@@ -94,10 +78,6 @@ export class RichTextEditorPageObject {
         });
         toggleButton.control.dispatchEvent(event);
     }
-    /**
-     * To trigger a enter key press for the button, provide its position value as an index (starting from '0')
-     * @param button can be imported from an enum for each button using the `ButtonIndex`.
-     */
     enterKeyActivatesButton(button) {
         const toggleButton = this.getFormattingButton(button);
         const event = new KeyboardEvent('keypress', {
@@ -129,15 +109,56 @@ export class RichTextEditorPageObject {
         })
             .map(el => el.textContent || '');
     }
+    isRichTextEditorActiveElement() {
+        return (document.activeElement === this.richTextEditorElement
+            && document.activeElement?.shadowRoot?.activeElement
+                === this.getTiptapEditor());
+    }
+    getEditorTabIndex() {
+        return this.getTiptapEditor()?.getAttribute('tabindex') ?? '';
+    }
+    async setFooterHidden(footerHidden) {
+        if (footerHidden) {
+            this.richTextEditorElement.setAttribute('footer-hidden', '');
+        }
+        else {
+            this.richTextEditorElement.removeAttribute('footer-hidden');
+        }
+        await waitForUpdatesAsync();
+    }
+    isFooterHidden() {
+        const footerSection = this.getFooter();
+        return window.getComputedStyle(footerSection).display === 'none';
+    }
+    async setDisabled(disabled) {
+        if (disabled) {
+            this.richTextEditorElement.setAttribute('disabled', '');
+        }
+        else {
+            this.richTextEditorElement.removeAttribute('disabled');
+        }
+        await waitForUpdatesAsync();
+    }
+    isButtonDisabled(button) {
+        const toggleButton = this.getFormattingButton(button);
+        return toggleButton.hasAttribute('disabled');
+    }
+    getPlaceholderValue() {
+        const editor = this.getTiptapEditor();
+        return editor.firstElementChild?.getAttribute('data-placeholder') ?? '';
+    }
     getEditorSection() {
         return this.richTextEditorElement.shadowRoot?.querySelector('.editor');
     }
+    getFooter() {
+        return this.richTextEditorElement.shadowRoot.querySelector('.footer-section');
+    }
     getTiptapEditor() {
         return this.richTextEditorElement.shadowRoot?.querySelector('.ProseMirror');
     }
-    getFormattingButton(index) {
+    getFormattingButton(button) {
         const buttons = this.richTextEditorElement.shadowRoot.querySelectorAll('nimble-toggle-button');
-        return buttons[index];
+        return buttons[button];
     }
 }
 //# sourceMappingURL=rich-text-editor.pageobject.js.map

package/dist/esm/rich-text-editor/testing/rich-text-editor.pageobject.js.map

@@ -1 +1 @@
-{"version":3,"file":"rich-text-editor.pageobject.js","sourceRoot":"","sources":["../../../../src/rich-text-editor/testing/rich-text-editor.pageobject.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"rich-text-editor.pageobject.js","sourceRoot":"","sources":["../../../../src/rich-text-editor/testing/rich-text-editor.pageobject.ts"],"names":[],"mappings":"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"}

package/dist/esm/src/rich-text-editor/index.d.ts

@@ -1,5 +1,7 @@
-import { FoundationElement } from '@microsoft/fast-foundation';
+import { ARIAGlobalStatesAndProperties, FoundationElement } from '@microsoft/fast-foundation';
+import { Editor } from '@tiptap/core';
 import type { ToggleButton } from '../toggle-button';
+import type { ErrorPattern } from '../patterns/error/types';
 declare global {
     interface HTMLElementTagNameMap {
         'nimble-rich-text-editor': RichTextEditor;
@@ -8,7 +10,54 @@ declare global {
 /**
  * A nimble styled rich text editor
  */
-export declare class RichTextEditor extends FoundationElement {
+export declare class RichTextEditor extends FoundationElement implements ErrorPattern {
+    /**
+     * @internal
+     */
+    editor: HTMLDivElement;
+    /**
+     * @internal
+     */
+    tiptapEditor: Editor;
+    /**
+     * Whether to disable user from editing and interacting with toolbar buttons
+     *
+     * @public
+     * HTML Attribute: disabled
+     */
+    disabled: boolean;
+    /**
+     * Whether to hide the footer of the rich text editor
+     *
+     * @public
+     * HTML Attribute: footer-hidden
+     */
+    footerHidden: boolean;
+    /**
+     * Whether to display the error state.
+     *
+     * @public
+     * HTML Attribute: error-visible
+     */
+    errorVisible: boolean;
+    /**
+     * A message explaining why the value is invalid.
+     *
+     * @public
+     * HTML Attribute: error-text
+     */
+    errorText?: string;
+    /**
+     * @public
+     * HTML Attribute: placeholder
+     */
+    placeholder?: string;
+    /**
+     * True if the editor is empty or contains only whitespace, false otherwise.
+     *
+     * @public
+     */
+    get empty(): boolean;
     /**
      * @internal
      */
@@ -25,17 +74,21 @@ export declare class RichTextEditor extends FoundationElement {
      * @internal
      */
     numberedListButton: ToggleButton;
+    /**
+     * The width of the vertical scrollbar, if displayed.
+     * @internal
+     */
+    scrollbarWidth: number;
     /**
      * @internal
      */
     editorContainer: HTMLDivElement;
-    private tiptapEditor;
-    private editor;
+    private resizeObserver?;
+    private updateScrollbarWidthQueued;
     private readonly markdownParser;
     private readonly markdownSerializer;
     private readonly domSerializer;
     private readonly xmlSerializer;
-    constructor();
     /**
      * @internal
      */
@@ -44,6 +97,19 @@ export declare class RichTextEditor extends FoundationElement {
      * @internal
      */
     disconnectedCallback(): void;
+    /**
+     * @internal
+     */
+    disabledChanged(): void;
+    /**
+     * Update the placeholder text and view of the editor.
+     * @internal
+     */
+    placeholderChanged(): void;
+    /**
+     * @internal
+     */
+    ariaLabelChanged(): void;
     /**
      * Toggle the bold mark and focus back to the editor
      * @internal
@@ -98,6 +164,8 @@ export declare class RichTextEditor extends FoundationElement {
      * @internal
      */
     stopEventPropagation(event: Event): boolean;
+    private createEditor;
+    private createTiptapEditor;
     /**
      * This function takes the Fragment from parseMarkdownToDOM function and return the serialized string using XMLSerializer
      */
@@ -105,7 +173,6 @@ export declare class RichTextEditor extends FoundationElement {
     private initializeMarkdownParser;
     private initializeMarkdownSerializer;
     private parseMarkdownToDOM;
-    private initializeEditor;
     /**
      * Binding the "transaction" event to the editor allows continuous monitoring the events and updating the button state in response to
      * various actions such as mouse events, keyboard events, changes in the editor content etc,.
@@ -115,5 +182,30 @@ export declare class RichTextEditor extends FoundationElement {
     private unbindEditorTransactionEvent;
     private updateEditorButtonsState;
     private keyActivatesButton;
+    private unbindEditorUpdateEvent;
+    /**
+     * input event is fired when there is a change in the content of the editor.
+     *
+     * https://tiptap.dev/api/events#update
+     */
+    private bindEditorUpdateEvent;
+    /**
+     * Stopping the native input event propagation emitted by the contenteditable element in the Tiptap
+     * since there is an issue (linked below) in ProseMirror where selecting the text and removing it
+     * does not trigger the native HTMLElement input event. So using the "update" event emitted by the
+     * Tiptap to capture it as an "input" customEvent in the rich text editor.
+     *
+     * Prose Mirror issue: https://discuss.prosemirror.net/t/how-to-handle-select-backspace-delete-cut-type-kind-of-events-handletextinput-or-handledomevents-input-doesnt-help/4844
+     */
+    private stopNativeInputEventPropagation;
+    private unbindNativeInputEvent;
+    private queueUpdateScrollbarWidth;
+    private updateScrollbarWidth;
+    private onResize;
+    private getTipTapExtension;
+    private setEditorTabIndex;
+    private forceFocusEditor;
+}
+export interface RichTextEditor extends ARIAGlobalStatesAndProperties {
 }
 export declare const richTextEditorTag: string;

package/dist/esm/src/rich-text-editor/testing/rich-text-editor.pageobject.d.ts

@@ -12,37 +12,25 @@ export declare class RichTextEditorPageObject {
     pressEnterKeyInEditor(): Promise<void>;
     pressTabKeyInEditor(): Promise<void>;
     pressShiftTabKeysInEditor(): Promise<void>;
-    /**
-     * To click a formatting button in the footer section, pass its position value as an index (starting from '0')
-     * @param button can be imported from an enum for each button using the `ButtonIndex`.
-     */
     clickFooterButton(button: ToolbarButton): Promise<void>;
-    /**
-     * To retrieve the checked state of the button, provide its position value as an index (starting from '0')
-     * @param button can be imported from an enum for each button using the `ButtonIndex`.
-     */
     getButtonCheckedState(button: ToolbarButton): boolean;
-    /**
-     * To retrieve the tab index of the button, provide its position value as an index (starting from '0')
-     * @param button can be imported from an enum for each button using the `ButtonIndex`.
-     */
     getButtonTabIndex(button: ToolbarButton): number;
-    /**
-     * To trigger a space key press for the button, provide its position value as an index (starting from '0')
-     * @param button can be imported from an enum for each button using the `ButtonIndex`.
-     */
     spaceKeyActivatesButton(button: ToolbarButton): void;
-    /**
-     * To trigger a enter key press for the button, provide its position value as an index (starting from '0')
-     * @param button can be imported from an enum for each button using the `ButtonIndex`.
-     */
     enterKeyActivatesButton(button: ToolbarButton): void;
     setEditorTextContent(value: string): Promise<void>;
     getEditorFirstChildTagName(): string;
     getEditorFirstChildTextContent(): string;
     getEditorTagNames(): string[];
     getEditorLeafContents(): string[];
+    isRichTextEditorActiveElement(): boolean;
+    getEditorTabIndex(): string;
+    setFooterHidden(footerHidden: boolean): Promise<void>;
+    isFooterHidden(): boolean;
+    setDisabled(disabled: boolean): Promise<void>;
+    isButtonDisabled(button: ToolbarButton): boolean;
+    getPlaceholderValue(): string;
     private getEditorSection;
+    private getFooter;
     private getTiptapEditor;
     private getFormattingButton;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ni/nimble-components",
-  "version": "20.1.18",
+  "version": "20.1.20",
   "description": "Styled web components for the NI Nimble Design System",
   "scripts": {
     "build": "npm run generate-icons && npm run build-components && npm run bundle-components && npm run generate-scss && npm run build-storybook",
@@ -64,16 +64,17 @@
     "@ni/nimble-tokens": "^6.3.0",
     "@tanstack/table-core": "^8.9.3",
     "@tanstack/virtual-core": "^3.0.0-beta.44",
-    "@tiptap/core": "^2.0.4",
-    "@tiptap/extension-bold": "^2.0.4",
-    "@tiptap/extension-bullet-list": "^2.0.4",
-    "@tiptap/extension-document": "^2.0.4",
-    "@tiptap/extension-history": "^2.0.4",
-    "@tiptap/extension-italic": "^2.0.4",
-    "@tiptap/extension-list-item": "^2.0.4",
-    "@tiptap/extension-ordered-list": "^2.0.4",
-    "@tiptap/extension-paragraph": "^2.0.4",
-    "@tiptap/extension-text": "^2.0.4",
+    "@tiptap/core": "^2.1.6",
+    "@tiptap/extension-bold": "^2.1.6",
+    "@tiptap/extension-bullet-list": "^2.1.6",
+    "@tiptap/extension-document": "^2.1.6",
+    "@tiptap/extension-history": "^2.1.6",
+    "@tiptap/extension-italic": "^2.1.6",
+    "@tiptap/extension-list-item": "^2.1.6",
+    "@tiptap/extension-ordered-list": "^2.1.6",
+    "@tiptap/extension-paragraph": "^2.1.6",
+    "@tiptap/extension-placeholder": "^2.1.6",
+    "@tiptap/extension-text": "^2.1.6",
     "@types/d3-array": "^3.0.4",
     "@types/d3-random": "^3.0.1",
     "@types/d3-scale": "^4.0.2",