Remove capital letter mentions (facebook#4991)

ChronicLynx · Sep 13, 2023 · 10b4e14 · 10b4e14
1 parent 75c9ae5
commit 10b4e14
Show file tree

Hide file tree

Showing 6 changed files with 105 additions and 79 deletions.
diff --git a/packages/lexical-playground/__tests__/e2e/ClearFormatting.spec.mjs b/packages/lexical-playground/__tests__/e2e/ClearFormatting.spec.mjs
@@ -133,7 +133,7 @@ test.describe('Clear All Formatting', () => {
 
     await clearEditor(page);
 
-    await page.keyboard.type('Luke');
+    await page.keyboard.type('@Luke');
 
     await waitForSelector(page, '#typeahead-menu ul li');
     await assertHTML(
@@ -142,7 +142,7 @@ test.describe('Clear All Formatting', () => {
         <p
           class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
           dir="ltr">
-          <span data-lexical-text="true">Luke</span>
+          <span data-lexical-text="true">@Luke</span>
         </p>
       `,
     );

diff --git a/packages/lexical-playground/__tests__/e2e/Composition.spec.mjs b/packages/lexical-playground/__tests__/e2e/Composition.spec.mjs
@@ -437,7 +437,7 @@ test.describe('Composition', () => {
       await focusEditor(page);
       await enableCompositionKeyEvents(page);
 
-      await page.keyboard.type('Luke');
+      await page.keyboard.type('@Luke');
       await waitForSelector(page, '#typeahead-menu ul li');
       await page.keyboard.press('Enter');
 
@@ -491,7 +491,7 @@ test.describe('Composition', () => {
       await focusEditor(page);
       await enableCompositionKeyEvents(page);
 
-      await page.keyboard.type('Luke');
+      await page.keyboard.type('@Luke');
       await waitForSelector(page, '#typeahead-menu ul li');
       await page.keyboard.press('Enter');
 
@@ -558,7 +558,7 @@ test.describe('Composition', () => {
       await focusEditor(page);
       await enableCompositionKeyEvents(page);
 
-      await page.keyboard.type('Luke');
+      await page.keyboard.type('@Luke');
       await waitForSelector(page, '#typeahead-menu ul li');
       await page.keyboard.press('Enter');
 

diff --git a/packages/lexical-playground/__tests__/e2e/Mentions.spec.mjs b/packages/lexical-playground/__tests__/e2e/Mentions.spec.mjs
@@ -27,22 +27,26 @@ test.describe('Mentions', () => {
 
   test(`Can enter the Luke Skywalker mention`, async ({page}) => {
     await focusEditor(page);
-    await page.keyboard.type('Luke');
+    await page.keyboard.type('@Luke');
     await assertSelection(page, {
-      anchorOffset: 4,
+      anchorOffset: 5,
       anchorPath: [0, 0, 0],
-      focusOffset: 4,
+      focusOffset: 5,
       focusPath: [0, 0, 0],
     });
 
-    await waitForSelector(page, '#typeahead-menu ul li');
+    await waitForSelector(
+      page,
+      '#typeahead-menu ul li:has-text("Luke Skywalker")',
+    );
+
     await assertHTML(
       page,
       html`
         <p
           class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
           dir="ltr">
-          <span data-lexical-text="true">Luke</span>
+          <span data-lexical-text="true">@Luke</span>
         </p>
       `,
     );
@@ -99,22 +103,26 @@ test.describe('Mentions', () => {
     page,
   }) => {
     await focusEditor(page);
-    await page.keyboard.type('Luke');
+    await page.keyboard.type('@Luke');
     await assertSelection(page, {
-      anchorOffset: 4,
+      anchorOffset: 5,
       anchorPath: [0, 0, 0],
-      focusOffset: 4,
+      focusOffset: 5,
       focusPath: [0, 0, 0],
     });
 
-    await waitForSelector(page, '#typeahead-menu ul li');
+    await waitForSelector(
+      page,
+      '#typeahead-menu ul li:has-text("Luke Skywalker")',
+    );
+
     await assertHTML(
       page,
       html`
         <p
           class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
           dir="ltr">
-          <span data-lexical-text="true">Luke</span>
+          <span data-lexical-text="true">@Luke</span>
         </p>
       `,
     );
@@ -190,22 +198,26 @@ test.describe('Mentions', () => {
     page,
   }) => {
     await focusEditor(page);
-    await page.keyboard.type('Luke');
+    await page.keyboard.type('@Luke');
     await assertSelection(page, {
-      anchorOffset: 4,
+      anchorOffset: 5,
       anchorPath: [0, 0, 0],
-      focusOffset: 4,
+      focusOffset: 5,
       focusPath: [0, 0, 0],
     });
 
-    await waitForSelector(page, '#typeahead-menu ul li');
+    await waitForSelector(
+      page,
+      '#typeahead-menu ul li:has-text("Luke Skywalker")',
+    );
+
     await assertHTML(
       page,
       html`
         <p
           class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
           dir="ltr">
-          <span data-lexical-text="true">Luke</span>
+          <span data-lexical-text="true">@Luke</span>
         </p>
       `,
     );
@@ -262,22 +274,26 @@ test.describe('Mentions', () => {
     page,
   }) => {
     await focusEditor(page);
-    await page.keyboard.type('Luke');
+    await page.keyboard.type('@Luke');
     await assertSelection(page, {
-      anchorOffset: 4,
+      anchorOffset: 5,
       anchorPath: [0, 0, 0],
-      focusOffset: 4,
+      focusOffset: 5,
       focusPath: [0, 0, 0],
     });
 
-    await waitForSelector(page, '#typeahead-menu ul li');
+    await waitForSelector(
+      page,
+      '#typeahead-menu ul li:has-text("Luke Skywalker")',
+    );
+
     await assertHTML(
       page,
       html`
         <p
           class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
           dir="ltr">
-          <span data-lexical-text="true">Luke</span>
+          <span data-lexical-text="true">@Luke</span>
         </p>
       `,
     );
@@ -334,22 +350,26 @@ test.describe('Mentions', () => {
     page,
   }) => {
     await focusEditor(page);
-    await page.keyboard.type('Luke');
+    await page.keyboard.type('@Luke');
     await assertSelection(page, {
-      anchorOffset: 4,
+      anchorOffset: 5,
       anchorPath: [0, 0, 0],
-      focusOffset: 4,
+      focusOffset: 5,
       focusPath: [0, 0, 0],
     });
 
-    await waitForSelector(page, '#typeahead-menu ul li');
+    await waitForSelector(
+      page,
+      '#typeahead-menu ul li:has-text("Luke Skywalker")',
+    );
+
     await assertHTML(
       page,
       html`
         <p
           class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
           dir="ltr">
-          <span data-lexical-text="true">Luke</span>
+          <span data-lexical-text="true">@Luke</span>
         </p>
       `,
     );
@@ -435,16 +455,20 @@ test.describe('Mentions', () => {
       focusPath: [0, 0, 0],
     });
 
-    await page.keyboard.type('Luke');
+    await page.keyboard.type('@Luke');
+
+    await waitForSelector(
+      page,
+      '#typeahead-menu ul li:has-text("Luke Skywalker")',
+    );
 
-    await waitForSelector(page, '#typeahead-menu ul li');
     await assertHTML(
       page,
       html`
         <p
           class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
           dir="ltr">
-          <span data-lexical-text="true">abc Luke def</span>
+          <span data-lexical-text="true">abc @Luke def</span>
         </p>
       `,
     );
@@ -505,42 +529,54 @@ test.describe('Mentions', () => {
     browserName,
   }) => {
     await focusEditor(page);
-    await page.keyboard.type('Luke');
+    await page.keyboard.type('@Luke');
     await assertSelection(page, {
-      anchorOffset: 4,
+      anchorOffset: 5,
       anchorPath: [0, 0, 0],
-      focusOffset: 4,
+      focusOffset: 5,
       focusPath: [0, 0, 0],
     });
 
-    await waitForSelector(page, '#typeahead-menu ul li');
+    await waitForSelector(
+      page,
+      '#typeahead-menu ul li:has-text("Luke Skywalker")',
+    );
     await page.keyboard.press('Enter');
 
     await waitForSelector(page, '.mention');
 
     await page.keyboard.type(' ');
 
-    await page.keyboard.type('Luke');
+    await page.keyboard.type('@Luke');
 
-    await waitForSelector(page, '#typeahead-menu ul li');
+    await waitForSelector(
+      page,
+      '#typeahead-menu ul li:has-text("Luke Skywalker")',
+    );
     await page.keyboard.press('Enter');
 
     await waitForSelector(page, '.mention:nth-child(1)');
 
     await page.keyboard.type(' ');
 
-    await page.keyboard.type('Luke');
+    await page.keyboard.type('@Luke');
 
-    await waitForSelector(page, '#typeahead-menu ul li');
+    await waitForSelector(
+      page,
+      '#typeahead-menu ul li:has-text("Luke Skywalker")',
+    );
     await page.keyboard.press('Enter');
 
     await waitForSelector(page, '.mention:nth-child(3)');
 
     await page.keyboard.type(' ');
 
-    await page.keyboard.type('Luke');
+    await page.keyboard.type('@Luke');
 
-    await waitForSelector(page, '#typeahead-menu ul li');
+    await waitForSelector(
+      page,
+      '#typeahead-menu ul li:has-text("Luke Skywalker")',
+    );
     await page.keyboard.press('Enter');
 
     await waitForSelector(page, '.mention:nth-child(5)');
@@ -814,15 +850,18 @@ test.describe('Mentions', () => {
     page,
   }) => {
     await focusEditor(page);
-    await page.keyboard.type('Luke');
+    await page.keyboard.type('@Luke');
     await assertSelection(page, {
-      anchorOffset: 4,
+      anchorOffset: 5,
       anchorPath: [0, 0, 0],
-      focusOffset: 4,
+      focusOffset: 5,
       focusPath: [0, 0, 0],
     });
 
-    await waitForSelector(page, '#typeahead-menu ul li');
+    await waitForSelector(
+      page,
+      '#typeahead-menu ul li:has-text("Luke Skywalker")',
+    );
     await page.keyboard.press('Enter');
 
     await waitForSelector(page, '.mention');

diff --git a/packages/lexical-playground/__tests__/regression/379-backspace-with-mentions.spec.mjs b/packages/lexical-playground/__tests__/regression/379-backspace-with-mentions.spec.mjs
@@ -23,8 +23,11 @@ test.describe('Regression test #379', () => {
     page,
   }) => {
     await focusEditor(page);
-    await page.keyboard.type('Luke');
-    await waitForSelector(page, '#typeahead-menu ul li');
+    await page.keyboard.type('@Luke');
+    await waitForSelector(
+      page,
+      '#typeahead-menu ul li:has-text("Luke Skywalker")',
+    );
     await page.keyboard.press('Enter');
     await assertHTML(
       page,

diff --git a/packages/lexical-playground/src/plugins/CommentPlugin/index.tsx b/packages/lexical-playground/src/plugins/CommentPlugin/index.tsx
@@ -250,7 +250,11 @@ function CommentInputBox({
             correctedLeft = 10;
           }
           boxElem.style.left = `${correctedLeft}px`;
-          boxElem.style.top = `${bottom + 20 + (window.pageYOffset || document.documentElement.scrollTop)}px`;
+          boxElem.style.top = `${
+            bottom +
+            20 +
+            (window.pageYOffset || document.documentElement.scrollTop)
+          }px`;
           const selectionRectsLength = selectionRects.length;
           const {container} = selectionState;
           const elements: Array<HTMLSpanElement> = selectionState.elements;
@@ -265,7 +269,14 @@ function CommentInputBox({
               container.appendChild(elem);
             }
             const color = '255, 212, 0';
-            const style = `position:absolute;top:${selectionRect.top + (window.pageYOffset || document.documentElement.scrollTop)}px;left:${selectionRect.left}px;height:${selectionRect.height}px;width:${selectionRect.width}px;background-color:rgba(${color}, 0.3);pointer-events:none;z-index:5;`;
+            const style = `position:absolute;top:${
+              selectionRect.top +
+              (window.pageYOffset || document.documentElement.scrollTop)
+            }px;left:${selectionRect.left}px;height:${
+              selectionRect.height
+            }px;width:${
+              selectionRect.width
+            }px;background-color:rgba(${color}, 0.3);pointer-events:none;z-index:5;`;
             elem.style.cssText = style;
           }
           for (let i = elementsLength - 1; i >= selectionRectsLength; i--) {