chore: Playwright update (#355)

* Updated playwright version

* Fixed indent line not showing

* Minor updates to tests & screenshots

Author: matthewlipski

package-lock.json

@@ -6,8 +6,8 @@
     "examples/*"
   ],
   "devDependencies": {
-    "@playwright/experimental-ct-react": "^1.33.0",
-    "@playwright/test": "^1.33.0",
+    "@playwright/experimental-ct-react": "^1.38.1",
+    "@playwright/test": "^1.38.1",
     "eslint": "^8.22.0",
     "eslint-plugin-import": "^2.28.0",
     "eslint-config-react-app": "^7.0.0",
@@ -20,7 +20,7 @@
   "scripts": {
     "start": "lerna run --stream --scope @blocknote/example-editor dev",
     "start:built": "npx serve examples/editor/dist",
-    "test:updateSnaps": "docker run --rm  -e RUN_IN_DOCKER=true --network host -v $(pwd):/work/ -w /work/ -it mcr.microsoft.com/playwright:v1.35.1-focal npx playwright test -u",
+    "test:updateSnaps": "docker run --rm  -e RUN_IN_DOCKER=true --network host -v $(pwd):/work/ -w /work/ -it mcr.microsoft.com/playwright:v1.38.1-focal npx playwright test -u",
     "build": "lerna run --stream build --concurrency 1",
     "build:site": "lerna run --stream docs:build --concurrency 1",
     "lint": "lerna run --stream lint",

package.json

@@ -56,20 +56,6 @@ NESTED BLOCKS
   transition: all 0.2s 0.1s;
 }
 
-[data-theme="light"]
-  .blockGroup
-  .blockGroup
-  > .blockOuter:not([data-prev-depth-changed])::before {
-  border-left: 1px solid #AFAFAF;
-}
-
-[data-theme="dark"]
-  .blockGroup
-  .blockGroup
-  > .blockOuter:not([data-prev-depth-changed])::before {
-  border-left: 1px solid #7F7F7F;
-}
-
 .blockGroup .blockGroup > .blockOuter[data-prev-depth-change="-2"]::before {
   height: 0;
 }
@@ -248,16 +234,6 @@ NESTED BLOCKS
   font-style: italic;
 }
 
-[data-theme="light"] .isEmpty .inlineContent:before,
-.isFilter .inlineContent:before {
-  color: #CFCFCF;
-}
-
-[data-theme="dark"] .isEmpty .inlineContent:before,
-.isFilter .inlineContent:before {
-  color: #7F7F7F;
-}
-
 /* TODO: would be nicer if defined from code */
 
 .blockContent.isEmpty.hasAnchor .inlineContent:before {

packages/core/src/extensions/Blocks/nodes/Block.module.css

@@ -209,6 +209,15 @@ export const blockNoteToMantineTheme = (theme: Theme): MantineThemeOverride => {
                 {
                   color: theme.colors.sideMenu,
                 },
+              // Indent lines
+              [`.${blockStyles.blockGroup}`]: {
+                [`.${blockStyles.blockGroup}`]: {
+                  [`.${blockStyles.blockOuter}:not([data-prev-depth-changed])::before`]:
+                    {
+                      borderLeft: `1px solid ${theme.colors.sideMenu}`,
+                    },
+                },
+              },
               // Highlight text colors
               ...(Object.fromEntries(
                 Object.entries(textColors).map(([key, value]) => [

packages/react/src/BlockNoteTheme.ts

@@ -24,18 +24,15 @@ test.describe("Check Background & Text Color Functionality", () => {
     await insertHeading(page, 2);
     await insertHeading(page, 3);
 
-    const element = await page.locator(H_TWO_BLOCK_SELECTOR);
-    const boundingBox = await element.boundingBox();
-    const { x, y, height } = boundingBox;
-
-    await page.mouse.click(x + 1, y + height / 2, { clickCount: 2 });
+    await page.keyboard.press("ArrowUp");
+    await page.keyboard.press("ArrowUp");
+    await page.keyboard.press("Control+ArrowLeft");
+    await page.keyboard.press("Control+Shift+ArrowRight");
 
     await page.locator(COLORS_BUTTON_SELECTOR).click();
     await page.locator(TEXT_COLOR_SELECTOR("red")).click();
 
-    await page.mouse.move(x + 1, y + height / 2, { steps: 5 });
-    await page.waitForTimeout(350);
-    await page.mouse.click(x + 1, y + height / 2);
+    await page.keyboard.press("ArrowLeft");
 
     // Waits for formatting toolbar animation to finish.
     await page.waitForTimeout(500);
@@ -49,18 +46,15 @@ test.describe("Check Background & Text Color Functionality", () => {
     await insertHeading(page, 2);
     await insertHeading(page, 3);
 
-    const element = await page.locator(H_TWO_BLOCK_SELECTOR);
-    const boundingBox = await element.boundingBox();
-    const { x, y, height } = boundingBox;
-
-    await page.mouse.click(x + 1, y + height / 2, { clickCount: 2 });
+    await page.keyboard.press("ArrowUp");
+    await page.keyboard.press("ArrowUp");
+    await page.keyboard.press("Control+ArrowLeft");
+    await page.keyboard.press("Control+Shift+ArrowRight");
 
     await page.locator(COLORS_BUTTON_SELECTOR).click();
     await page.locator(BACKGROUND_COLOR_SELECTOR("red")).click();
 
-    await page.mouse.move(x + 1, y + height / 2, { steps: 5 });
-    await page.waitForTimeout(350);
-    await page.mouse.click(x + 1, y + height / 2);
+    await page.keyboard.press("ArrowLeft");
 
     // Waits for formatting toolbar animation to finish.
     await page.waitForTimeout(500);

tests/end-to-end/colors/colors.test.ts

@@ -23,15 +23,15 @@ test.describe("Check Text Alignment Functionality", () => {
     await insertHeading(page, 2);
     await insertHeading(page, 3);
 
-    const element = await page.locator(H_TWO_BLOCK_SELECTOR);
-    const boundingBox = await element.boundingBox();
-    const { x, y, width, height } = boundingBox;
-
-    await page.mouse.click(x + 20, y + height / 2, { clickCount: 2 });
+    await page.keyboard.press("ArrowUp");
+    await page.keyboard.press("ArrowUp");
+    await page.keyboard.press("Control+ArrowLeft");
+    await page.keyboard.press("Control+Shift+ArrowRight");
 
     await page.locator(ALIGN_TEXT_RIGHT_BUTTON_SELECTOR).click();
     await page.waitForTimeout(350);
-    await page.mouse.click(x + width - 20, y + height / 2);
+
+    await page.keyboard.press("ArrowLeft");
 
     // Waits for formatting toolbar animation to finish.
     await page.waitForTimeout(500);
@@ -47,28 +47,15 @@ test.describe("Check Text Alignment Functionality", () => {
     await insertHeading(page, 2);
     await insertHeading(page, 3);
 
-    const firstElement = await page.locator(H_TWO_BLOCK_SELECTOR);
-    const firstElementBoundingBox = await firstElement.boundingBox();
-    await page.mouse.click(
-      firstElementBoundingBox.x + 20,
-      firstElementBoundingBox.y + firstElementBoundingBox.height / 2
-    );
-
-    const secondElement = await page.locator(H_ONE_BLOCK_SELECTOR);
-    const secondElementBoundingBox = await secondElement.boundingBox();
-    await page.keyboard.down("Shift");
-    await page.mouse.click(
-      secondElementBoundingBox.x + 20,
-      secondElementBoundingBox.y + secondElementBoundingBox.height / 2
-    );
-    await page.keyboard.up("Shift");
+    await page.keyboard.press("ArrowUp");
+    await page.keyboard.press("ArrowUp");
+    await page.keyboard.press("Control+ArrowLeft");
+    await page.keyboard.press("Control+Shift+ArrowUp");
 
     await page.locator(ALIGN_TEXT_RIGHT_BUTTON_SELECTOR).click();
     await page.waitForTimeout(350);
-    await page.mouse.click(
-      secondElementBoundingBox.x + secondElementBoundingBox.width - 20,
-      secondElementBoundingBox.y + secondElementBoundingBox.height / 2
-    );
+
+    await page.keyboard.press("ArrowLeft");
 
     // Waits for formatting toolbar animation to finish.
     await page.waitForTimeout(500);