fix(text-editor): fixes the formatting buttons when clicked to toggle without text selections

Author: damienrobson-sage

src/components/text-editor/__internal__/plugins/ContentEditor/content-editor.component.tsx

@@ -47,7 +47,19 @@ const ContentEditor = ({
         aria-labelledby={`${namespace}-label`}
         className={`${namespace}-editable`}
         data-role={`${namespace}-editable`}
-        onFocus={focusAtEnd}
+        onFocus={(event: React.FocusEvent<HTMLDivElement> | undefined) => {
+          /* istanbul ignore if */
+          if (!event) return;
+
+          // If the related target is not a toolbar button, focus at the end of the editor
+          /* istanbul ignore next */
+          if (
+            !event.relatedTarget ||
+            !event.relatedTarget.classList.contains("toolbar-button")
+          ) {
+            focusAtEnd(event);
+          }
+        }}
         /** The following are automatically added by Lexical but violate WCAG 4.1.2 Name, Role, Value and so have been overriden */
         aria-autocomplete={undefined}
         aria-readonly={undefined}

src/components/text-editor/__internal__/plugins/Toolbar/buttons/bold.component.tsx

@@ -40,6 +40,7 @@ const BoldButton = ({ isActive, namespace }: FormattingButtonProps) => {
       aria-pressed={isActive}
       data-role={`${namespace}-bold-button`}
       tabIndex={0}
+      className="toolbar-button"
     />
   );
 };

src/components/text-editor/__internal__/plugins/Toolbar/buttons/italic.component.tsx

@@ -37,6 +37,7 @@ const ItalicButton = ({ isActive, namespace }: FormattingButtonProps) => {
       aria-pressed={isActive}
       data-role={`${namespace}-italic-button`}
       tabIndex={-1}
+      className="toolbar-button"
     />
   );
 };

src/components/text-editor/__internal__/plugins/Toolbar/buttons/list.component.tsx

@@ -356,6 +356,7 @@ const ListControls = ({ namespace }: { namespace: string }) => {
         aria-pressed={isULActive}
         data-role={`${namespace}-unordered-list-button`}
         tabIndex={-1}
+        className="toolbar-button"
       />
       <FormattingButton
         size="small"
@@ -369,6 +370,7 @@ const ListControls = ({ namespace }: { namespace: string }) => {
         aria-pressed={isOLActive}
         data-role={`${namespace}-ordered-list-button`}
         tabIndex={-1}
+        className="toolbar-button"
       />
     </>
   );

src/components/text-editor/text-editor.pw.tsx

@@ -453,6 +453,33 @@ test.describe("Functionality tests", () => {
       await boldButton.click();
       expect(await page.locator("strong").count()).toBe(0);
     });
+
+    test("applies and removes bold formatting to the editor directly", async ({
+      mount,
+      page,
+    }) => {
+      await mount(<TextEditorDefaultComponent value={unformattedValue} />);
+      const textbox = await page.locator("div[role='textbox']");
+      expect(await page.locator("strong").count()).toBe(0);
+      expect(await page.locator("span[data-lexical-text='true']").count()).toBe(
+        1,
+      );
+      await textbox.click();
+      const boldButton = await page.locator(
+        "button[data-role='pw-rte-bold-button']",
+      );
+      await boldButton.click();
+      await textbox.click();
+      await textbox.pressSequentially("This is some bold text", { delay: 100 });
+      expect(await page.locator("strong").count()).toBe(1);
+      await boldButton.click();
+      await textbox.click();
+      await textbox.pressSequentially(" and this is not", { delay: 100 });
+
+      expect(await page.locator("span[data-lexical-text='true']").count()).toBe(
+        2,
+      );
+    });
   });
 
   test.describe("Italic", () => {
@@ -473,6 +500,35 @@ test.describe("Functionality tests", () => {
       await italicButton.click();
       expect(await page.locator("em").count()).toBe(0);
     });
+
+    test("applies and removes italic formatting to the editor directly", async ({
+      mount,
+      page,
+    }) => {
+      await mount(<TextEditorDefaultComponent value={unformattedValue} />);
+      const textbox = await page.locator("div[role='textbox']");
+      expect(await page.locator("em").count()).toBe(0);
+      expect(await page.locator("span[data-lexical-text='true']").count()).toBe(
+        1,
+      );
+      await textbox.click();
+      const italicButton = await page.locator(
+        "button[data-role='pw-rte-italic-button']",
+      );
+      await italicButton.click();
+      await textbox.click();
+      await textbox.pressSequentially("This is some italic text", {
+        delay: 100,
+      });
+      expect(await page.locator("em").count()).toBe(1);
+      await italicButton.click();
+      await textbox.click();
+      await textbox.pressSequentially(" and this is not", { delay: 100 });
+
+      expect(await page.locator("span[data-lexical-text='true']").count()).toBe(
+        2,
+      );
+    });
   });
 
   test.describe("Ordered List", () => {

src/components/text-editor/text-editor.test.tsx

@@ -488,3 +488,87 @@ test("should toggle the an indiviual list item's type when a list is active and
   await user.click(ulButton);
   expect(screen.queryAllByRole("list").length).toBe(1);
 });
+
+describe("shortcut keys", () => {
+  it("should toggle bold text when the bold shortcut is pressed", async () => {
+    const user = userEvent.setup();
+    const mockCancel = jest.fn();
+    const mockSave = jest.fn();
+    const value = JSON.stringify(initialValue);
+
+    // render the TextEditor component
+    render(
+      <TextEditor
+        labelText="Example"
+        onCancel={() => mockCancel()}
+        onSave={() => mockSave()}
+        value={value}
+        characterLimit={20}
+      />,
+    );
+
+    // Click the editor space and send a few key presses
+    const editor = screen.getByRole(`textbox`);
+    await user.click(editor);
+    await user.keyboard(" not bold");
+
+    // expect the edited value to be visible
+    expect(screen.getByText("Sample text not bold")).toBeInTheDocument();
+    await user.tripleClick(editor);
+    const commandKey =
+      navigator.userAgent.indexOf("Mac") !== -1 ? "Meta" : "Control";
+    await user.keyboard(`{${commandKey}>}b{/${commandKey}>}`);
+
+    // expect the text to be bold
+    expect(screen.getByText("Sample text not bold")).toHaveStyle(
+      "font-weight: bold",
+    );
+    await user.keyboard(`{${commandKey}>}b{/${commandKey}>}`);
+
+    // expect the text to be normal
+    expect(screen.getByText("Sample text not bold")).not.toHaveStyle(
+      "font-weight: bold",
+    );
+  });
+
+  it("should toggle italic text when the italic shortcut is pressed", async () => {
+    const user = userEvent.setup();
+    const mockCancel = jest.fn();
+    const mockSave = jest.fn();
+    const value = JSON.stringify(initialValue);
+
+    // render the TextEditor component
+    render(
+      <TextEditor
+        labelText="Example"
+        onCancel={() => mockCancel()}
+        onSave={() => mockSave()}
+        value={value}
+        characterLimit={20}
+      />,
+    );
+
+    // Click the editor space and send a few key presses
+    const editor = screen.getByRole(`textbox`);
+    await user.click(editor);
+    await user.keyboard(" not italic");
+
+    // expect the edited value to be visible
+    expect(screen.getByText("Sample text not italic")).toBeInTheDocument();
+    await user.tripleClick(editor);
+    const commandKey =
+      navigator.userAgent.indexOf("Mac") !== -1 ? "Meta" : "Control";
+    await user.keyboard(`{${commandKey}>}i{/${commandKey}>}`);
+
+    // expect the text to be bold
+    expect(screen.getByText("Sample text not italic")).toHaveStyle(
+      "font-style: italic",
+    );
+    await user.keyboard(`{${commandKey}>}i{/${commandKey}>}`);
+
+    // expect the text to be normal
+    expect(screen.getByText("Sample text not italic")).not.toHaveStyle(
+      "font-style: italic",
+    );
+  });
+});