Rich text editor | Fix nested list highlighting

change/@ni-nimble-components-184413cc-afcf-4db1-b373-1bdb1a98f015.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Fix bug with rich text editor nested list button state",
+  "packageName": "@ni/nimble-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/nimble-components/src/rich-text-editor/index.ts

@@ -6,7 +6,13 @@ import {
     FoundationElement
 } from '@microsoft/fast-foundation';
 import { keyEnter, keySpace } from '@microsoft/fast-web-utilities';
-import { Editor, AnyExtension, Extension } from '@tiptap/core';
+import {
+    Editor,
+    findParentNode,
+    isList,
+    AnyExtension,
+    Extension
+} from '@tiptap/core';
 import {
     schema,
     defaultMarkdownParser,
@@ -30,6 +36,7 @@ import Text from '@tiptap/extension-text';
 import { template } from './template';
 import { styles } from './styles';
 import type { ToggleButton } from '../toggle-button';
+import { TipTapNodeName } from './types';
 import type { ErrorPattern } from '../patterns/error/types';
 
 declare global {
@@ -466,10 +473,15 @@ export class RichTextEditor extends FoundationElement implements ErrorPattern {
     }
 
     private updateEditorButtonsState(): void {
+        const { extensionManager, state } = this.tiptapEditor;
+        const { extensions } = extensionManager;
+        const { selection } = state;
+        const parentList = findParentNode((node: { type: { name: string } }) => isList(node.type.name, extensions))(selection);
+
         this.boldButton.checked = this.tiptapEditor.isActive('bold');
         this.italicsButton.checked = this.tiptapEditor.isActive('italic');
-        this.bulletListButton.checked = this.tiptapEditor.isActive('bulletList');
-        this.numberedListButton.checked = this.tiptapEditor.isActive('orderedList');
+        this.bulletListButton.checked = parentList?.node.type.name === TipTapNodeName.bulletList;
+        this.numberedListButton.checked = parentList?.node.type.name === TipTapNodeName.numberedList;
     }
 
     private keyActivatesButton(event: KeyboardEvent): boolean {
@@ -541,7 +553,7 @@ export class RichTextEditor extends FoundationElement implements ErrorPattern {
         extensionName: string
     ): AnyExtension | undefined {
         return this.tiptapEditor.extensionManager.extensions.find(
-            extension => extension.name === extensionName
+            (extension: { name: string }) => extension.name === extensionName
         );
     }
 

packages/nimble-components/src/rich-text-editor/tests/rich-text-editor.spec.ts

@@ -452,7 +452,7 @@ describe('RichTextEditor', () => {
             ]);
             expect(
                 pageObject.getButtonCheckedState(ToolbarButton.numberedList)
-            ).toBeTrue();
+            ).toBeFalse();
             expect(
                 pageObject.getButtonCheckedState(ToolbarButton.bulletList)
             ).toBeTrue();
@@ -534,7 +534,7 @@ describe('RichTextEditor', () => {
             ).toBeTrue();
             expect(
                 pageObject.getButtonCheckedState(ToolbarButton.bulletList)
-            ).toBeTrue();
+            ).toBeFalse();
         });
 
         it('should have "ul" tag names for bullet lists when clicking "tab" to make it nested and "shift+Tab" to make it usual list', async () => {

packages/nimble-components/src/rich-text-editor/tests/types.spec.ts

@@ -1,4 +1,5 @@
 import type { ToolbarButton } from '../testing/types';
+import type { TipTapNodeName } from '../types';
 
 describe('Editor Toolbar button page object types', () => {
     it('ToolbarButton fails compile if assigning arbitrary string values', () => {
@@ -8,3 +9,11 @@ describe('Editor Toolbar button page object types', () => {
         expect(value).toEqual('hello');
     });
 });
+
+describe('Tiptap node types', () => {
+    it('TipTapNodeName fails compile if assigning arbitrary string values', () => {
+        // @ts-expect-error This expect will fail if the enum-like type is missing "as const"
+        const value: TipTapNodeName = 'hello';
+        expect(value).toEqual('hello');
+    });
+});

packages/nimble-components/src/rich-text-editor/types.ts

@@ -0,0 +1,11 @@
+/**
+ * TipTap node types.
+ * @public
+ */
+export const TipTapNodeName = {
+    bulletList: 'bulletList',
+    numberedList: 'orderedList'
+} as const;
+
+export type TipTapNodeName =
+    (typeof TipTapNodeName)[keyof typeof TipTapNodeName];