diff --git a/package-lock.json b/package-lock.json index fe7ee194f7..62da16be6b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,8 +10,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", "@typescript-eslint/eslint-plugin": "^5.5.0", "@typescript-eslint/parser": "^5.5.0", "eslint": "^8.22.0", @@ -5950,51 +5950,51 @@ } }, "node_modules/@playwright/experimental-ct-core": { - "version": "1.34.3", + "version": "1.38.1", + "resolved": "https://registry.npmjs.org/@playwright/experimental-ct-core/-/experimental-ct-core-1.38.1.tgz", + "integrity": "sha512-2EzqzwBJty08elQonIXrQxUd8HKL7dHLJ2T/dJTmgVFwGsnJYsnU03EUlKlatUfajMYVC7xGT+Bqhur2hJPC3A==", "dev": true, - "license": "Apache-2.0", "dependencies": { - "@playwright/test": "1.34.3", - "vite": "^4.3.3" + "playwright": "1.38.1", + "playwright-core": "1.38.1", + "vite": "^4.3.9" }, "bin": { "playwright": "cli.js" }, "engines": { - "node": ">=14" + "node": ">=16" } }, "node_modules/@playwright/experimental-ct-react": { - "version": "1.34.3", + "version": "1.38.1", + "resolved": "https://registry.npmjs.org/@playwright/experimental-ct-react/-/experimental-ct-react-1.38.1.tgz", + "integrity": "sha512-V5Eu28jrF8Vd3/dvweJaewa49MrnAOQdR3U24j3gu8oj7SNS6lWv09pioZVTI8cBj3yKCSX1Bcq8Vd2bSGYtOg==", "dev": true, - "license": "Apache-2.0", "dependencies": { - "@playwright/experimental-ct-core": "1.34.3", + "@playwright/experimental-ct-core": "1.38.1", "@vitejs/plugin-react": "^4.0.0" }, "bin": { "playwright": "cli.js" }, "engines": { - "node": ">=14" + "node": ">=16" } }, "node_modules/@playwright/test": { - "version": "1.34.3", + "version": "1.38.1", + "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.38.1.tgz", + "integrity": "sha512-NqRp8XMwj3AK+zKLbZShl0r/9wKgzqI/527bkptKXomtuo+dOjU9NdMASQ8DNC9z9zLOMbG53T4eihYr3XR+BQ==", "dev": true, - "license": "Apache-2.0", "dependencies": { - "@types/node": "*", - "playwright-core": "1.34.3" + "playwright": "1.38.1" }, "bin": { "playwright": "cli.js" }, "engines": { - "node": ">=14" - }, - "optionalDependencies": { - "fsevents": "2.3.2" + "node": ">=16" } }, "node_modules/@popperjs/core": { @@ -16340,15 +16340,34 @@ "pathe": "^1.1.0" } }, + "node_modules/playwright": { + "version": "1.38.1", + "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.38.1.tgz", + "integrity": "sha512-oRMSJmZrOu1FP5iu3UrCx8JEFRIMxLDM0c/3o4bpzU5Tz97BypefWf7TuTNPWeCe279TPal5RtPPZ+9lW/Qkow==", + "dev": true, + "dependencies": { + "playwright-core": "1.38.1" + }, + "bin": { + "playwright": "cli.js" + }, + "engines": { + "node": ">=16" + }, + "optionalDependencies": { + "fsevents": "2.3.2" + } + }, "node_modules/playwright-core": { - "version": "1.34.3", + "version": "1.38.1", + "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.38.1.tgz", + "integrity": "sha512-tQqNFUKa3OfMf4b2jQ7aGLB8o9bS3bOY0yMEtldtC2+spf8QXG9zvXLTXUeRsoNuxEYMgLYR+NXfAa1rjKRcrg==", "dev": true, - "license": "Apache-2.0", "bin": { "playwright-core": "cli.js" }, "engines": { - "node": ">=14" + "node": ">=16" } }, "node_modules/postcss": { diff --git a/package.json b/package.json index 1e20954880..74b0a5febe 100644 --- a/package.json +++ b/package.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", diff --git a/packages/core/src/extensions/Blocks/nodes/Block.module.css b/packages/core/src/extensions/Blocks/nodes/Block.module.css index 2326e580a6..9f47512b68 100644 --- a/packages/core/src/extensions/Blocks/nodes/Block.module.css +++ b/packages/core/src/extensions/Blocks/nodes/Block.module.css @@ -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 { diff --git a/packages/react/src/BlockNoteTheme.ts b/packages/react/src/BlockNoteTheme.ts index 4ff342bc87..f85b3d3e85 100644 --- a/packages/react/src/BlockNoteTheme.ts +++ b/packages/react/src/BlockNoteTheme.ts @@ -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]) => [ diff --git a/tests/end-to-end/colors/colors.test.ts b/tests/end-to-end/colors/colors.test.ts index 58d712ad5c..101beb79b6 100644 --- a/tests/end-to-end/colors/colors.test.ts +++ b/tests/end-to-end/colors/colors.test.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); diff --git a/tests/end-to-end/colors/colors.test.ts-snapshots/backgroundColorMark-webkit-linux.png b/tests/end-to-end/colors/colors.test.ts-snapshots/backgroundColorMark-webkit-linux.png index 7c8b690bd5..94e97d9877 100644 Binary files a/tests/end-to-end/colors/colors.test.ts-snapshots/backgroundColorMark-webkit-linux.png and b/tests/end-to-end/colors/colors.test.ts-snapshots/backgroundColorMark-webkit-linux.png differ diff --git a/tests/end-to-end/colors/colors.test.ts-snapshots/blockBackgroundColor-webkit-linux.png b/tests/end-to-end/colors/colors.test.ts-snapshots/blockBackgroundColor-webkit-linux.png index 2075411780..b08b53fac5 100644 Binary files a/tests/end-to-end/colors/colors.test.ts-snapshots/blockBackgroundColor-webkit-linux.png and b/tests/end-to-end/colors/colors.test.ts-snapshots/blockBackgroundColor-webkit-linux.png differ diff --git a/tests/end-to-end/colors/colors.test.ts-snapshots/blockTextColor-webkit-linux.png b/tests/end-to-end/colors/colors.test.ts-snapshots/blockTextColor-webkit-linux.png index 10654f321f..cd5e00e347 100644 Binary files a/tests/end-to-end/colors/colors.test.ts-snapshots/blockTextColor-webkit-linux.png and b/tests/end-to-end/colors/colors.test.ts-snapshots/blockTextColor-webkit-linux.png differ diff --git a/tests/end-to-end/colors/colors.test.ts-snapshots/textColorMark-webkit-linux.png b/tests/end-to-end/colors/colors.test.ts-snapshots/textColorMark-webkit-linux.png index c902be6e40..b1425d48c1 100644 Binary files a/tests/end-to-end/colors/colors.test.ts-snapshots/textColorMark-webkit-linux.png and b/tests/end-to-end/colors/colors.test.ts-snapshots/textColorMark-webkit-linux.png differ diff --git a/tests/end-to-end/textalignment/textAlignment.test.ts b/tests/end-to-end/textalignment/textAlignment.test.ts index 45528650b4..700721b1c4 100644 --- a/tests/end-to-end/textalignment/textAlignment.test.ts +++ b/tests/end-to-end/textalignment/textAlignment.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); diff --git a/tests/end-to-end/textalignment/textAlignment.test.ts-snapshots/alignTextMultipleBlocks-webkit-linux.png b/tests/end-to-end/textalignment/textAlignment.test.ts-snapshots/alignTextMultipleBlocks-webkit-linux.png index 6f15600835..36068352a0 100644 Binary files a/tests/end-to-end/textalignment/textAlignment.test.ts-snapshots/alignTextMultipleBlocks-webkit-linux.png and b/tests/end-to-end/textalignment/textAlignment.test.ts-snapshots/alignTextMultipleBlocks-webkit-linux.png differ diff --git a/tests/end-to-end/textalignment/textAlignment.test.ts-snapshots/alignTextSingleBlock-webkit-linux.png b/tests/end-to-end/textalignment/textAlignment.test.ts-snapshots/alignTextSingleBlock-webkit-linux.png index 24c76f97ff..00ed242589 100644 Binary files a/tests/end-to-end/textalignment/textAlignment.test.ts-snapshots/alignTextSingleBlock-webkit-linux.png and b/tests/end-to-end/textalignment/textAlignment.test.ts-snapshots/alignTextSingleBlock-webkit-linux.png differ