move and update playwright tests

.github/workflows/build.yml

@@ -67,11 +67,12 @@ jobs:
         run: npx playwright install --with-deps
 
       - name: Run Playwright tests
+        working-directory: ./tests
         run: npx playwright test
 
       - uses: actions/upload-artifact@v3
         if: always()
         with:
           name: playwright-report
-          path: playwright-report/
+          path: tests/playwright-report/
           retention-days: 30

examples/editor/serve.json

@@ -0,0 +1,3 @@
+{
+  "rewrites": [{ "source": "/*", "destination": "/index.html" }]
+}

examples/editor/src/main.tsx

@@ -69,15 +69,19 @@ function Root() {
     <AppShell
       padding={0}
       navbar={
-        <Navbar width={{ base: 300 }} style={{ background: "#f7f7f5" }} p="xs">
-          <Navbar.Section grow component={ScrollArea} mx="-xs" px="xs">
-            {editors.map((editor, i) => (
-              <div key={i}>
-                <Link to={editor.path}>{editor.title}</Link>
-              </div>
-            ))}
+        window.location.search.includes("hideMenu") ? undefined : (
+          <Navbar
+            width={{ base: 300 }}
+            style={{ background: "#f7f7f5" }}
+            p="xs">
+            <Navbar.Section grow component={ScrollArea} mx="-xs" px="xs">
+              {editors.map((editor, i) => (
+                <div key={i}>
+                  <Link to={editor.path}>{editor.title}</Link>
+                </div>
+              ))}
 
-            {/* manitne <NavLink
+              {/* manitne <NavLink
               styles={linkStyles}
               label="Simple"
 
@@ -91,8 +95,9 @@ function Root() {
               // icon={<IconGauge size={16} stroke={1.5} />}
               // rightSection={<IconChevronRight size={12} stroke={1.5} />}
             /> */}
-          </Navbar.Section>
-        </Navbar>
+            </Navbar.Section>
+          </Navbar>
+        )
       }
       header={<></>}
       //   header={<Header height={60} p="xs">

examples/editor/src/style.css

@@ -1,13 +1,14 @@
 .editor {
   margin: 0 calc((100% - 731px) / 2);
-  height: 100%;
+  margin-top: 8px;
+  /* height: 100%; */
 }
 
 body {
   margin: 0;
 }
 
-.root {
+/* .root {
   height: 100%;
   width: 100%;
-}
+} */

package.json

@@ -3,11 +3,10 @@
   "private": true,
   "workspaces": [
     "packages/*",
-    "examples/*"
+    "examples/*",
+    "tests"
   ],
   "devDependencies": {
-    "@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",
@@ -19,21 +18,17 @@
   },
   "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.38.1-focal npx playwright test -u",
+    "start:built": "npx serve examples/editor/dist -c ../serve.json",
     "build": "lerna run --stream build --concurrency 1",
     "build:site": "lerna run --stream docs:build --concurrency 1",
     "lint": "lerna run --stream lint",
     "bootstrap": "lerna bootstrap --ci -- --force && patch-package",
     "install-new-packages": "lerna bootstrap -- --force && patch-package",
-    "playwright": "npx playwright test",
     "test": "lerna run --stream test",
     "install-playwright": "npx playwright install --with-deps",
     "deploy": "lerna publish -- --access public",
     "prepublishOnly": "npm run build && cp README.md packages/core/README.md && cp README.md packages/react/README.md",
-    "postpublish": "rm -rf packages/core/README.md && rm -rf packages/react/README.md",
-    "test-ct": "playwright test -c playwright-ct.config.ts --headed",
-    "test-ct: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 npm install && playwright test -c playwright-ct.config.ts -u"
+    "postpublish": "rm -rf packages/core/README.md && rm -rf packages/react/README.md"
   },
   "overrides": {
     "react": "18.2.0",

packages/core/src/api/exporters/markdown/markdownExporter.test.ts

@@ -1,6 +1,7 @@
+import fs from "node:fs";
+import path from "node:path";
 import { afterEach, beforeEach, describe, expect, it } from "vitest";
 import { BlockNoteEditor } from "../../../BlockNoteEditor";
-
 import {
   BlockSchema,
   PartialBlock,
@@ -34,6 +35,16 @@ async function convertToMarkdownAndCompareSnapshots<
     "/" +
     snapshotName +
     "/markdown.md";
+
+  // vitest empty snapshots are broken on CI. might be fixed on next vitest, use workaround for now
+  if (!md.length && process.env.CI) {
+    if (
+      fs.readFileSync(path.join(__dirname, snapshotPath), "utf8").length === 0
+    ) {
+      // both are empty, so it's fine
+      return;
+    }
+  }
   expect(md).toMatchFileSnapshot(snapshotPath);
 }
 

packages/core/src/extensions/FormattingToolbar/FormattingToolbarPlugin.ts

@@ -1,4 +1,4 @@
-import { isNodeSelection, isTextSelection, posToDOMRect } from "@tiptap/core";
+import { isNodeSelection, posToDOMRect } from "@tiptap/core";
 import { EditorState, Plugin, PluginKey } from "prosemirror-state";
 import { EditorView } from "prosemirror-view";
 
@@ -29,15 +29,7 @@ export class FormattingToolbarView {
     state: EditorState;
     from: number;
     to: number;
-  }) => boolean = ({ state }) => {
-    const { selection } = state;
-    const { empty } = selection;
-
-    if (!isTextSelection(selection)) {
-      return false;
-    }
-    return !empty;
-  };
+  }) => boolean = ({ state }) => !state.selection.empty;
 
   constructor(
     private readonly editor: BlockNoteEditor<

packages/core/src/extensions/SlashMenu/defaultSlashMenuItems.ts

@@ -19,18 +19,15 @@ function setSelectionToNextContentEditableBlock<
   S extends StyleSchema
 >(editor: BlockNoteEditor<BSchema, I, S>) {
   let block = editor.getTextCursorPosition().block;
-  let contentType = editor.blockSchema[block.type].content as
-    | "inline"
-    | "table"
-    | "none";
+  let contentType = editor.blockSchema[block.type].content;
 
   while (contentType === "none") {
-    editor.setTextCursorPosition(block, "end");
     block = editor.getTextCursorPosition().nextBlock!;
     contentType = editor.blockSchema[block.type].content as
       | "inline"
       | "table"
       | "none";
+    editor.setTextCursorPosition(block, "end");
   }
 }
 

packages/website/docs/docs/block-types.md

@@ -109,10 +109,10 @@ type ImageBlock = {
   id: string;
   type: "image";
   props: {
-    url: string = "",
-    caption: string = "",
+    url: string = "";
+    caption: string = "";
     width: number = 512;
-  } & Omit<DefaultProps, "textAlignment">
+  } & Omit<DefaultProps, "textAlignment">;
   content: InlineContent[];
   children: Block[];
 };
@@ -180,7 +180,7 @@ export default function App() {
         default: "image",
       },
     },
-    containsInlineContent: true,
+    content: "inline",
     render: ({ block }) => (
       <div id="image-wrapper">
         <img
@@ -299,7 +299,7 @@ const ImageBlock = createReactBlockSpec({
       default: "https://via.placeholder.com/1000",
     },
   },
-  containsInlineContent: true,
+  content: "inline",
   render: ({ block }) => (
     <div
       style={{

packages/website/docs/examples/alert-block.md

@@ -159,14 +159,14 @@ export const alertPropSchema = {
 export const Alert = (props: {
   block: SpecificBlock<
     DefaultBlockSchema & {
-    alert: BlockSpec<"alert", typeof alertPropSchema, true>;
-  },
+      alert: BlockSpec<"alert", typeof alertPropSchema, true>;
+    },
     "alert"
   >;
   editor: BlockNoteEditor<
     DefaultBlockSchema & {
-    alert: BlockSpec<"alert", typeof alertPropSchema, true>;
-  }
+      alert: BlockSpec<"alert", typeof alertPropSchema, true>;
+    }
   >;
   theme: "light" | "dark";
 }) => {
@@ -210,7 +210,7 @@ export const Alert = (props: {
           <Menu.Divider />
           {Object.entries(alertTypes).map(([key, value]) => {
             const ItemIcon = value.icon;
-            
+
             return (
               <Menu.Item
                 key={key}
@@ -253,7 +253,7 @@ export const createAlertBlock = (theme: "light" | "dark") =>
         values: ["warning", "error", "info", "success"],
       },
     } as const,
-    containsInlineContent: true,
+    content: "inline",
     render: (props) => <Alert {...props} theme={theme} />,
   });
 
@@ -331,4 +331,4 @@ const inlineContentStyles = {
 {{ getStyles(isDark) }}
 ```
 
-:::
+:::

tests/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@blocknote/tests",
+  "private": true,
+  "version": "0.9.6",
+  "scripts": {
+    "build": "tsc",
+    "lint": "eslint src --max-warnings 0",
+    "playwright": "npx playwright test",
+    "test:updateSnaps": "docker run --rm  -e RUN_IN_DOCKER=true --network host -v $(pwd)/..:/work/ -w /work/tests -it mcr.microsoft.com/playwright:v1.38.1-focal npx playwright test -u",
+    "test-ct": "playwright test -c playwright-ct.config.ts --headed",
+    "test-ct:updateSnaps": "docker run --rm  -e RUN_IN_DOCKER=true --network host -v $(pwd)/..:/work/ -w /work/tests -it mcr.microsoft.com/playwright:v1.35.1-focal npm install && playwright test -c playwright-ct.config.ts -u"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "eslint": "^8.10.0",
+    "@blocknote/core": "^0.9.6",
+    "@blocknote/react": "^0.9.6",
+    "@playwright/experimental-ct-react": "^1.38.1",
+    "@playwright/test": "^1.38.1",
+    "react-icons": "^4.3.1"
+  },
+  "eslintConfig": {
+    "extends": [
+      "../.eslintrc.js"
+    ]
+  }
+}

playwright-ct.config.ts → tests/playwright-ct.config.ts

@@ -4,9 +4,9 @@ import { defineConfig, devices } from "@playwright/experimental-ct-react";
  * See https://playwright.dev/docs/test-configuration.
  */
 export default defineConfig({
-  testDir: "./tests/component/",
+  testDir: "./src/component/",
   /* The base directory, relative to the config file, for snapshot files created with toMatchSnapshot and toHaveScreenshot. */
-  snapshotDir: "./tests/component/snapshots",
+  snapshotDir: "./src/component/snapshots",
   /* Maximum time one test can run for. */
   timeout: 10 * 1000,
   /* Run tests in files in parallel */

playwright.config.ts → tests/playwright.config.ts

@@ -11,7 +11,7 @@ import { devices } from "@playwright/test";
  * See https://playwright.dev/docs/test-configuration.
  */
 const config: PlaywrightTestConfig = {
-  testDir: "./tests/end-to-end",
+  testDir: "./src/end-to-end",
   /* Maximum time one test can run for. */
   timeout: 30 * 1000,
   expect: {

tests/component/copypaste-external.spec.tsx → tests/src/component/copypaste-external.spec.tsx

@@ -1,15 +1,16 @@
 import { expect, test } from "../setup/setupScriptComponent";
-import { focusOnEditor } from "../utils/editor";
-import { executeSlashCommand } from "../utils/slashmenu";
+import EditorWithTextArea from "../utils/components/EditorWithTextArea";
 import {
   copyPasteAllExternal,
   removeClassesFromHTML,
   removeMetaFromHTML,
 } from "../utils/copypaste";
-import EditorWithTextArea from "../utils/components/EditorWithTextArea";
+import { focusOnEditor } from "../utils/editor";
+import { executeSlashCommand } from "../utils/slashmenu";
 
 test.describe.configure({ mode: "serial" });
 
+// eslint-disable-next-line no-empty-pattern
 test.beforeEach(async ({}, testInfo) => {
   testInfo.snapshotSuffix = "";
 });