Rich text editor | Fix nested list highlighting

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

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "updates the list button to be higlighted only on last node type",
+  "packageName": "@ni/nimble-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

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

@@ -1,7 +1,7 @@
 import { observable } from '@microsoft/fast-element';
 import { DesignSystem, FoundationElement } from '@microsoft/fast-foundation';
 import { keyEnter, keySpace } from '@microsoft/fast-web-utilities';
-import { Editor } from '@tiptap/core';
+import { Editor, findParentNode, isList } from '@tiptap/core';
 import {
     schema,
     defaultMarkdownParser,
@@ -23,6 +23,7 @@ import Text from '@tiptap/extension-text';
 import { template } from './template';
 import { styles } from './styles';
 import type { ToggleButton } from '../toggle-button';
+import { TipTapNodeNames } from './types';
 
 declare global {
     interface HTMLElementTagNameMap {
@@ -332,10 +333,17 @@ export class RichTextEditor extends FoundationElement {
     }
 
     private updateEditorButtonsState(): void {
+        const { extensionManager, state } = this.tiptapEditor;
+        const { extensions } = extensionManager;
+        const { selection } = state;
+        const parentList = findParentNode(node => 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 !== undefined
+            && parentList.node.type.name === TipTapNodeNames.bulletList;
+        this.numberedListButton.checked = parentList !== undefined
+            && parentList.node.type.name === TipTapNodeNames.numberedList;
     }
 
     private keyActivatesButton(event: KeyboardEvent): boolean {

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

@@ -422,7 +422,7 @@ describe('RichTextEditor', () => {
             ]);
             expect(
                 pageObject.getButtonCheckedState(ToolbarButton.numberedList)
-            ).toBeTrue();
+            ).toBeFalse();
             expect(
                 pageObject.getButtonCheckedState(ToolbarButton.bulletList)
             ).toBeTrue();
@@ -504,7 +504,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 () => {
@@ -541,6 +541,24 @@ describe('RichTextEditor', () => {
             ).toBeTrue();
         });
 
+        it('should have only inner most nested list type button active', async () => {
+            await pageObject.setEditorTextContent('List');
+            await pageObject.clickFooterButton(ToolbarButton.bulletList);
+            expect(
+                pageObject.getButtonCheckedState(ToolbarButton.bulletList)
+            ).toBeTrue();
+            await pageObject.pressEnterKeyInEditor();
+            await pageObject.pressTabKeyInEditor();
+            await pageObject.setEditorTextContent('Nested List');
+            await pageObject.clickFooterButton(ToolbarButton.numberedList);
+            expect(
+                pageObject.getButtonCheckedState(ToolbarButton.bulletList)
+            ).toBeFalse();
+            expect(
+                pageObject.getButtonCheckedState(ToolbarButton.numberedList)
+            ).toBeTrue();
+        });
+
         it('should have "strong" and "em" tag name for both bold and italics button clicks', async () => {
             await pageObject.clickFooterButton(ToolbarButton.bold);
             await pageObject.clickFooterButton(ToolbarButton.italics);

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

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