fix failing tests and add title attribute to floating toolbar buttons

facebook · Dec 13, 2024 · ac60ad9 · ac60ad9
1 parent 41dd59a
commit ac60ad9
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 27 deletions.
diff --git a/packages/lexical-playground/__tests__/e2e/TextFormatting.spec.mjs b/packages/lexical-playground/__tests__/e2e/TextFormatting.spec.mjs
@@ -509,7 +509,9 @@ test.describe.parallel('TextFormatting', () => {
           class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
           dir="ltr">
           <span class="$formatClassName" data-lexical-text="true">Hello</span>
-          <span data-lexical-text="true"></span>
+          <span
+            class="PlaygroundEditorTheme__tabNode"
+            data-lexical-text="true"></span>
           <span data-lexical-text="true">world!</span>
         </p>
       `,

diff --git a/packages/lexical-playground/src/plugins/FloatingTextFormatToolbarPlugin/index.tsx b/packages/lexical-playground/src/plugins/FloatingTextFormatToolbarPlugin/index.tsx
@@ -199,6 +199,7 @@ function TextFormatFloatingToolbar({
               editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'bold');
             }}
             className={'popup-item spaced ' + (isBold ? 'active' : '')}
+            title="Bold"
             aria-label="Format text as bold">
             <i className="format bold" />
           </button>
@@ -208,6 +209,7 @@ function TextFormatFloatingToolbar({
               editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'italic');
             }}
             className={'popup-item spaced ' + (isItalic ? 'active' : '')}
+            title="Italic"
             aria-label="Format text as italics">
             <i className="format italic" />
           </button>
@@ -217,78 +219,85 @@ function TextFormatFloatingToolbar({
               editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'underline');
             }}
             className={'popup-item spaced ' + (isUnderline ? 'active' : '')}
+            title="Underline"
             aria-label="Format text to underlined">
             <i className="format underline" />
           </button>
           <button
             type="button"
             onClick={() => {
-              editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'uppercase');
+              editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'strikethrough');
             }}
-            className={'popup-item spaced ' + (isUppercase ? 'active' : '')}
-            aria-label="Format text to uppercase">
-            <i className="format uppercase" />
+            className={'popup-item spaced ' + (isStrikethrough ? 'active' : '')}
+            title="Strikethrough"
+            aria-label="Format text with a strikethrough">
+            <i className="format strikethrough" />
           </button>
           <button
             type="button"
             onClick={() => {
-              editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'lowercase');
+              editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'subscript');
             }}
-            className={'popup-item spaced ' + (isLowercase ? 'active' : '')}
-            aria-label="Format text to lowercase">
-            <i className="format lowercase" />
+            className={'popup-item spaced ' + (isSubscript ? 'active' : '')}
+            title="Subscript"
+            aria-label="Format Subscript">
+            <i className="format subscript" />
           </button>
           <button
             type="button"
             onClick={() => {
-              editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'capitalize');
+              editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'superscript');
             }}
-            className={'popup-item spaced ' + (isCapitalize ? 'active' : '')}
-            aria-label="Format text to capitalize">
-            <i className="format capitalize" />
+            className={'popup-item spaced ' + (isSuperscript ? 'active' : '')}
+            title="Superscript"
+            aria-label="Format Superscript">
+            <i className="format superscript" />
           </button>
           <button
             type="button"
             onClick={() => {
-              editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'strikethrough');
+              editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'uppercase');
             }}
-            className={'popup-item spaced ' + (isStrikethrough ? 'active' : '')}
-            aria-label="Format text with a strikethrough">
-            <i className="format strikethrough" />
+            className={'popup-item spaced ' + (isUppercase ? 'active' : '')}
+            title="Uppercase"
+            aria-label="Format text to uppercase">
+            <i className="format uppercase" />
           </button>
           <button
             type="button"
             onClick={() => {
-              editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'subscript');
+              editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'lowercase');
             }}
-            className={'popup-item spaced ' + (isSubscript ? 'active' : '')}
-            title="Subscript"
-            aria-label="Format Subscript">
-            <i className="format subscript" />
+            className={'popup-item spaced ' + (isLowercase ? 'active' : '')}
+            title="Lowercase"
+            aria-label="Format text to lowercase">
+            <i className="format lowercase" />
           </button>
           <button
             type="button"
             onClick={() => {
-              editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'superscript');
+              editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'capitalize');
             }}
-            className={'popup-item spaced ' + (isSuperscript ? 'active' : '')}
-            title="Superscript"
-            aria-label="Format Superscript">
-            <i className="format superscript" />
+            className={'popup-item spaced ' + (isCapitalize ? 'active' : '')}
+            title="Capitalize"
+            aria-label="Format text to capitalize">
+            <i className="format capitalize" />
           </button>
           <button
             type="button"
             onClick={() => {
               editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'code');
             }}
             className={'popup-item spaced ' + (isCode ? 'active' : '')}
+            title="Insert code block"
             aria-label="Insert code block">
             <i className="format code" />
           </button>
           <button
             type="button"
             onClick={insertLink}
             className={'popup-item spaced ' + (isLink ? 'active' : '')}
+            title="Insert link"
             aria-label="Insert link">
             <i className="format link" />
           </button>
@@ -298,6 +307,7 @@ function TextFormatFloatingToolbar({
         type="button"
         onClick={insertComment}
         className={'popup-item spaced insert-comment'}
+        title="Insert comment"
         aria-label="Insert comment">
         <i className="format add-comment" />
       </button>

diff --git a/packages/lexical-rich-text/src/index.ts b/packages/lexical-rich-text/src/index.ts
@@ -551,6 +551,11 @@ function $isSelectionAtEndOfRoot(selection: RangeSelection) {
   return focus.key === 'root' && focus.offset === $getRoot().getChildrenSize();
 }
 
+/**
+ * Resets the capitalization of the selection to default.
+ * Called when the user presses space, tab, or enter key.
+ * @param selection The selection to reset the capitalization of.
+ */
 function $resetCapitalization(selection: RangeSelection): void {
   for (const format of ['lowercase', 'uppercase', 'capitalize'] as const) {
     if (selection.hasFormat(format)) {

diff --git a/packages/lexical/src/nodes/__tests__/unit/LexicalTextNode.test.tsx b/packages/lexical/src/nodes/__tests__/unit/LexicalTextNode.test.tsx
@@ -301,6 +301,32 @@ describe('LexicalTextNode tests', () => {
     });
   });
 
+  test('clearing subscript does not set superscript', async () => {
+    await update(() => {
+      const paragraphNode = $createParagraphNode();
+      const textNode = $createTextNode('Hello World');
+      paragraphNode.append(textNode);
+      $getRoot().append(paragraphNode);
+      textNode.toggleFormat('subscript');
+      textNode.toggleFormat('subscript');
+      expect(textNode.hasFormat('subscript')).toBe(false);
+      expect(textNode.hasFormat('superscript')).toBe(false);
+    });
+  });
+
+  test('clearing superscript does not set subscript', async () => {
+    await update(() => {
+      const paragraphNode = $createParagraphNode();
+      const textNode = $createTextNode('Hello World');
+      paragraphNode.append(textNode);
+      $getRoot().append(paragraphNode);
+      textNode.toggleFormat('superscript');
+      textNode.toggleFormat('superscript');
+      expect(textNode.hasFormat('superscript')).toBe(false);
+      expect(textNode.hasFormat('subscript')).toBe(false);
+    });
+  });
+
   test('capitalization formats are mutually exclusive', async () => {
     const capitalizationFormats: TextFormatType[] = [
       'lowercase',
@@ -314,13 +340,16 @@ describe('LexicalTextNode tests', () => {
       paragraphNode.append(textNode);
       $getRoot().append(paragraphNode);
 
+      // Set each format and ensure that the other formats are cleared
       capitalizationFormats.forEach((formatToSet) => {
         textNode.toggleFormat(formatToSet as TextFormatType);
+
         capitalizationFormats
           .filter((format) => format !== formatToSet)
           .forEach((format) =>
             expect(textNode.hasFormat(format as TextFormatType)).toBe(false),
           );
+
         expect(textNode.hasFormat(formatToSet as TextFormatType)).toBe(true);
       });
     });