add test

packages/lexical-playground/__tests__/e2e/RetainSelection.spec.mjs

@@ -0,0 +1,61 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import {selectAll} from '../keyboardShortcuts/index.mjs';
+import {
+  evaluate,
+  expect,
+  focusEditor,
+  initialize,
+  locate,
+  test,
+} from '../utils/index.mjs';
+
+/* eslint-disable sort-keys-fix/sort-keys-fix */
+test.describe('RetainSelection', () => {
+  test.beforeEach(({isCollab, page}) =>
+    initialize({isCollab, page, retainSelection: true}),
+  );
+  test(`retain selection works`, async ({page, isPlainText, browserName}) => {
+    await focusEditor(page);
+    await page.keyboard.type('Lexical');
+    await selectAll(page);
+    await locate(page, 'body').click();
+    const {distance, widthDifference, heightDifference} = await evaluate(
+      page,
+      () => {
+        function compareNodeAlignment(node1, node2, tolerance = 0) {
+          const rect1 = node1.getBoundingClientRect();
+          const rect2 = node2.getBoundingClientRect();
+          const distance_ = Math.sqrt(
+            Math.pow(rect1.left - rect2.left, 2) +
+              Math.pow(rect1.top - rect2.top, 2),
+          );
+          const widthDifference_ = Math.abs(rect1.width - rect2.width);
+          const heightDifference_ = Math.abs(rect1.height - rect2.height);
+          return {
+            distance: distance_,
+            widthDifference: widthDifference_,
+            heightDifference: heightDifference_,
+          };
+        }
+        const editorSpan = document.querySelector(
+          '[contenteditable="true"] span',
+        );
+        const fakeSelection = document.querySelector(
+          '[style*="background: highlight"]',
+        );
+        return compareNodeAlignment(editorSpan, fakeSelection, 5);
+      },
+    );
+    await expect(distance).toBeLessThanOrEqual(5);
+    await expect(widthDifference).toBeLessThanOrEqual(5);
+    await expect(heightDifference).toBeLessThanOrEqual(5);
+  });
+});
+/* eslint-enable sort-keys-fix/sort-keys-fix */

packages/lexical-playground/__tests__/utils/index.mjs

@@ -82,6 +82,7 @@ export async function initialize({
   tableCellBackgroundColor,
   shouldUseLexicalContextMenu,
   tableHorizontalScroll,
+  retainSelection,
 }) {
   // Tests with legacy events often fail to register keypress, so
   // slowing it down to reduce flakiness
@@ -115,6 +116,7 @@ export async function initialize({
     appSettings.tableCellBackgroundColor = tableCellBackgroundColor;
   }
   appSettings.shouldUseLexicalContextMenu = !!shouldUseLexicalContextMenu;
+  appSettings.retainSelection = !!retainSelection;
 
   const urlParams = appSettingsToURLParams(appSettings);
   const url = `http://localhost:${E2E_PORT}/${
@@ -171,6 +173,7 @@ export const test = base.extend({
   isPlainText: IS_PLAIN_TEXT,
   isRichText: IS_RICH_TEXT,
   legacyEvents: LEGACY_EVENTS,
+  retainSelection: false,
   shouldUseLexicalContextMenu: false,
 });