Merge branch 'main' into fix-strikethrough-issue

facebook · Nov 27, 2024 · e2fd5ef · e2fd5ef
2 parents 76d6ece + ec66f75
commit e2fd5ef
Show file tree

Hide file tree

Showing 47 changed files with 1,666 additions and 1,066 deletions.
diff --git a/examples/react-table/src/ExampleTheme.ts b/examples/react-table/src/ExampleTheme.ts
@@ -34,13 +34,9 @@ export default {
   tableCellActionButton: 'ExampleEditorTheme__tableCellActionButton',
   tableCellActionButtonContainer:
     'ExampleEditorTheme__tableCellActionButtonContainer',
-  tableCellEditing: 'ExampleEditorTheme__tableCellEditing',
   tableCellHeader: 'ExampleEditorTheme__tableCellHeader',
-  tableCellPrimarySelected: 'ExampleEditorTheme__tableCellPrimarySelected',
   tableCellResizer: 'ExampleEditorTheme__tableCellResizer',
   tableCellSelected: 'ExampleEditorTheme__tableCellSelected',
-  tableCellSortedIndicator: 'ExampleEditorTheme__tableCellSortedIndicator',
-  tableResizeRuler: 'ExampleEditorTheme__tableCellResizeRuler',
   tableSelected: 'ExampleEditorTheme__tableSelected',
   tableSelection: 'ExampleEditorTheme__tableSelection',
   text: {

diff --git a/examples/react-table/src/styles.css b/examples/react-table/src/styles.css
@@ -474,16 +474,6 @@ i.justify-align {
   position: relative;
   outline: none;
 }
-.ExampleEditorTheme__tableCellSortedIndicator {
-  display: block;
-  opacity: 0.5;
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 4px;
-  background-color: #999;
-}
 .ExampleEditorTheme__tableCellResizer {
   position: absolute;
   right: -4px;
@@ -498,21 +488,18 @@ i.justify-align {
   text-align: start;
 }
 .ExampleEditorTheme__tableCellSelected {
-  background-color: #c9dbf0;
+  caret-color: transparent;
 }
-.ExampleEditorTheme__tableCellPrimarySelected {
-  border: 2px solid rgb(60, 132, 244);
-  display: block;
-  height: calc(100% - 2px);
+.ExampleEditorTheme__tableCellSelected::after {
   position: absolute;
-  width: calc(100% - 2px);
-  left: -1px;
-  top: -1px;
-  z-index: 2;
-}
-.ExampleEditorTheme__tableCellEditing {
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
-  border-radius: 3px;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  background-color: rgb(172, 206, 247);
+  opacity: 0.6;
+  content: '';
+  pointer-events: none;
 }
 .ExampleEditorTheme__tableAddColumns {
   position: absolute;

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/lexical-clipboard/src/clipboard.ts b/packages/lexical-clipboard/src/clipboard.ts
@@ -22,19 +22,16 @@ import {
   BaseSelection,
   COMMAND_PRIORITY_CRITICAL,
   COPY_COMMAND,
+  getDOMSelection,
   isSelectionWithinEditor,
   LexicalEditor,
   LexicalNode,
   SELECTION_INSERT_CLIPBOARD_NODES_COMMAND,
   SerializedElementNode,
   SerializedTextNode,
 } from 'lexical';
-import {CAN_USE_DOM} from 'shared/canUseDOM';
 import invariant from 'shared/invariant';
 
-const getDOMSelection = (targetWindow: Window | null): Selection | null =>
-  CAN_USE_DOM ? (targetWindow || window).getSelection() : null;
-
 export interface LexicalClipboardData {
   'text/html'?: string | undefined;
   'application/x-lexical-editor'?: string | undefined;

diff --git a/packages/lexical-playground/__tests__/e2e/Autocomplete.spec.mjs b/packages/lexical-playground/__tests__/e2e/Autocomplete.spec.mjs
@@ -6,6 +6,14 @@
  *
  */
 
+import {
+  decreaseFontSize,
+  increaseFontSize,
+  toggleBold,
+  toggleItalic,
+  toggleStrikethrough,
+  toggleUnderline,
+} from '../keyboardShortcuts/index.mjs';
 import {
   assertHTML,
   focusEditor,
@@ -30,23 +38,20 @@ test.describe('Autocomplete', () => {
           class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
           dir="ltr">
           <span data-lexical-text="true">Sort by alpha</span>
-          <span contenteditable="false" data-lexical-decorator="true">
-            <span
-              class="PlaygroundEditorTheme__autocomplete"
-              spellcheck="false">
-              betical (TAB)
-            </span>
+          <span
+            class="PlaygroundEditorTheme__autocomplete"
+            style="font-size: 15px"
+            data-lexical-text="true">
+            betical (TAB)
           </span>
-          <br />
         </p>
       `,
       html`
         <p
           class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
           dir="ltr">
           <span data-lexical-text="true">Sort by alpha</span>
-          <span contenteditable="false" data-lexical-decorator="true"></span>
-          <br />
+          <span data-lexical-text="true"></span>
         </p>
       `,
     );
@@ -58,7 +63,94 @@ test.describe('Autocomplete', () => {
         <p
           class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
           dir="ltr">
-          <span data-lexical-text="true">Sort by alphabetical order:</span>
+          <span data-lexical-text="true">Sort by alpha</span>
+          <span style="font-size: 15px" data-lexical-text="true">
+            betical order:
+          </span>
+        </p>
+      `,
+    );
+  });
+
+  test('Can autocomplete in the same format as the original text', async ({
+    page,
+    isPlainText,
+  }) => {
+    test.skip(isPlainText);
+    await focusEditor(page);
+    await toggleBold(page);
+    await toggleItalic(page);
+    await toggleUnderline(page);
+    await toggleStrikethrough(page);
+    await increaseFontSize(page);
+
+    await page.keyboard.type('Test');
+    await sleep(500);
+
+    await assertHTML(
+      page,
+      html`
+        <p
+          class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
+          dir="ltr">
+          <strong
+            class="PlaygroundEditorTheme__textUnderlineStrikethrough PlaygroundEditorTheme__textBold PlaygroundEditorTheme__textItalic"
+            style="font-size: 17px;"
+            data-lexical-text="true">
+            Test
+          </strong>
+          <strong
+            class="PlaygroundEditorTheme__textUnderlineStrikethrough PlaygroundEditorTheme__textBold PlaygroundEditorTheme__textItalic PlaygroundEditorTheme__autocomplete"
+            style="font-size: 17px;"
+            data-lexical-text="true">
+            imonials (TAB)
+          </strong>
+        </p>
+      `,
+      html`
+        <p
+          class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
+          dir="ltr">
+          <strong
+            class="PlaygroundEditorTheme__textUnderlineStrikethrough PlaygroundEditorTheme__textBold PlaygroundEditorTheme__textItalic"
+            style="font-size: 17px;"
+            data-lexical-text="true">
+            Test
+          </strong>
+          <span data-lexical-text="true"></span>
+        </p>
+      `,
+    );
+
+    await page.keyboard.press('Tab');
+
+    await toggleBold(page);
+    await toggleItalic(page);
+    await toggleUnderline(page);
+    await toggleStrikethrough(page);
+    await decreaseFontSize(page);
+
+    await page.keyboard.type(' 2024');
+
+    await assertHTML(
+      page,
+      html`
+        <p
+          class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
+          dir="ltr">
+          <strong
+            class="PlaygroundEditorTheme__textUnderlineStrikethrough PlaygroundEditorTheme__textBold PlaygroundEditorTheme__textItalic"
+            style="font-size: 17px;"
+            data-lexical-text="true">
+            Test
+          </strong>
+          <strong
+            class="PlaygroundEditorTheme__textUnderlineStrikethrough PlaygroundEditorTheme__textBold PlaygroundEditorTheme__textItalic"
+            style="font-size: 17px;"
+            data-lexical-text="true">
+            imonials
+          </strong>
+          <span style="font-size: 15px;" data-lexical-text="true">2024</span>
         </p>
       `,
     );