Use playwright@next (#194)

* Use playwright@next

* Fix bad snapshots

* Fix some bugs

package.json

@@ -64,7 +64,7 @@
     "google-closure-compiler": "^20201006.0.0",
     "jest": "26.6.0",
     "minimist": "^1.2.5",
-    "playwright": "^1.9.2",
+    "playwright": "^1.10.0-1616563674000",
     "prettier": "^2.1.2",
     "react-test-renderer": "^17.0.1",
     "rollup": "^2.33.1",

packages/outline-playground/__tests__/TextEntry-test.js

@@ -94,19 +94,11 @@ describe('TextEntry', () => {
         });
       });
 
-      // Some issues with this test:
-      //
-      // - Doesn't work correctly on Chromium, Shift+Alt+ArrowLeft
+      // Test doesn't work correctly on Chromium, Shift+Alt+ArrowLeft
       // on selects the period the first time, rather than the word
       // "characters". We plan to use Intl.Segmeneter for this anway
       // so this should be fixed.
-      //
-      // - Also seems to fail for Firefox when run on CI. Not sure why,
-      // as it seems to work fine when run locally. I can see from the
-      // screenshot (hint: use e2e.logScreenshot) that the selection
-      // has moved at all. I can use this keyboard shortcut on
-      //
-      e2e.skip(['chromium', 'firefox-ci'], () => {
+      e2e.skip(['chromium'], () => {
         it(`Can select and delete a word`, async () => {
           const {page} = e2e;
 

packages/outline-react/src/OutlineSelectionHelpers.js

@@ -730,15 +730,28 @@ export function deleteForward(selection: Selection): void {
     removeText(selection);
     return;
   }
-  const anchorOffset = selection.anchorOffset;
   const anchorNode = selection.getAnchorNode();
   if (anchorNode === null) {
     return;
   }
   const currentBlock = anchorNode.getParentBlockOrThrow();
   const textContent = anchorNode.getTextContent();
   const textContentLength = textContent.length;
-  const nextSibling = anchorNode.getNextSibling();
+  let nextSibling = anchorNode.getNextSibling();
+  let anchorOffset = selection.anchorOffset;
+
+  // If we're dealing with an anchor that is either segmented or immutable
+  // then we need to ensure that we actually affect the anchor instead. So
+  // we make the next sibling the anchor to emulate this (less code than
+  // forking the logic again).
+  if (
+    isTextNode(nextSibling) &&
+    (anchorNode.isImmutable() || anchorNode.isSegmented())
+  ) {
+    nextSibling.select(0, 0);
+    nextSibling = anchorNode;
+    anchorOffset = textContentLength;
+  }
 
   if (anchorOffset === textContentLength) {
     if (nextSibling === null) {

yarn.lock

@@ -8456,10 +8456,10 @@ pkg-up@3.1.0:
   dependencies:
     find-up "^3.0.0"
 
-playwright@^1.9.2:
-  version "1.9.2"
-  resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.9.2.tgz#294910950b76ec4c3dfed6a1e9d28e9b8560b0f4"
-  integrity sha512-Hsgfk3GZO+hgewRNW9xl9/tHjdZvVwxTseHagbiNpDf90PXICEh8UHXy/2eykeIXrZFMA6W6petEtRWNPi3gfQ==
+playwright@^1.10.0-1616563674000:
+  version "1.10.0-1616563674000"
+  resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.10.0-1616563674000.tgz#d39eb46611e2065acaef9ab549c03ff318bd535f"
+  integrity sha512-gYNW3fZg17+k64pv8I4QzSkwOaf5MqxmXFfSo/vzNty1hFcHs9TuE6yQyRvRBB0I4jza+P7lg/tx1GDApoHGEA==
   dependencies:
     commander "^6.1.0"
     debug "^4.1.1"