feature: v0.10: tables, custom inline content, custom styles, better copy / paste handling

.eslintrc.js

@@ -1,3 +1,7 @@
+const typeScriptExtensions = [".ts", ".cts", ".mts", ".tsx"];
+
+const allExtensions = [...typeScriptExtensions, ".js", ".jsx"];
+
 module.exports = {
   root: true,
   extends: [
@@ -8,6 +12,18 @@ module.exports = {
   ],
   parser: "@typescript-eslint/parser",
   plugins: ["import", "@typescript-eslint"],
+  settings: {
+    "import/extensions": allExtensions,
+    "import/external-module-folders": ["node_modules", "node_modules/@types"],
+    "import/parsers": {
+      "@typescript-eslint/parser": typeScriptExtensions,
+    },
+    "import/resolver": {
+      node: {
+        extensions: allExtensions,
+      },
+    },
+  },
   rules: {
     curly: 1,
     "import/no-extraneous-dependencies": [
@@ -22,5 +38,20 @@ module.exports = {
     // would be nice to enable these rules later, but they are too noisy right now
     "@typescript-eslint/no-non-null-assertion": "off",
     "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/ban-ts-comment": "off",
+    "import/no-cycle": "error",
+    // doesn't work:
+    // "import/no-restricted-paths": [
+    //   "error",
+    //   {
+    //     zones: [
+    //       {
+    //         target: "./src/**/*",
+    //         from: "./types/**/*",
+    //         message: "Import from this module to types is not allowed.",
+    //       },
+    //     ],
+    //   },
+    // ],
   },
 };

.github/workflows/build.yml

@@ -5,9 +5,6 @@ on:
       - main
   pull_request:
     types: [opened, synchronize, reopened, edited]
-    branches:
-      - main
-      - "project/**"
 
 jobs:
   build:
@@ -70,13 +67,14 @@ 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
 
       - name: Upload webpack stats artifact (editor)

examples/editor/src/App.tsx → examples/editor/examples/basic/App.tsx

@@ -1,19 +1,14 @@
-// import logo from './logo.svg'
+import { uploadToTmpFilesDotOrg_DEV_ONLY } from "@blocknote/core";
 import "@blocknote/core/style.css";
 import { BlockNoteView, useBlockNote } from "@blocknote/react";
-import styles from "./App.module.css";
-import { uploadToTmpFilesDotOrg_DEV_ONLY } from "@blocknote/core";
 
 type WindowWithProseMirror = Window & typeof globalThis & { ProseMirror: any };
 
-function App() {
+export function App() {
   const editor = useBlockNote({
-    onEditorContentChange: (editor) => {
-      console.log(editor.topLevelBlocks);
-    },
     domAttributes: {
       editor: {
-        class: styles.editor,
+        class: "editor",
         "data-test": "editor",
       },
     },
@@ -23,7 +18,7 @@ function App() {
   // Give tests a way to get prosemirror instance
   (window as WindowWithProseMirror).ProseMirror = editor?._tiptapEditor;
 
-  return <BlockNoteView editor={editor} />;
+  return <BlockNoteView className="root" editor={editor} />;
 }
 
 export default App;

examples/editor/examples/collaboration/App.tsx

@@ -0,0 +1,47 @@
+import { uploadToTmpFilesDotOrg_DEV_ONLY } from "@blocknote/core";
+import "@blocknote/core/style.css";
+import { BlockNoteView, useBlockNote } from "@blocknote/react";
+
+import YPartyKitProvider from "y-partykit/provider";
+import * as Y from "yjs";
+
+const doc = new Y.Doc();
+
+const provider = new YPartyKitProvider(
+  "blocknote-dev.yousefed.partykit.dev",
+  // use a unique name as a "room" for your application:
+  "your-project-name",
+  doc
+);
+
+type WindowWithProseMirror = Window & typeof globalThis & { ProseMirror: any };
+
+export function App() {
+  const editor = useBlockNote({
+    domAttributes: {
+      editor: {
+        class: "editor",
+        "data-test": "editor",
+      },
+    },
+    collaboration: {
+      // The Yjs Provider responsible for transporting updates:
+      provider,
+      // Where to store BlockNote data in the Y.Doc:
+      fragment: doc.getXmlFragment("document-storesss"),
+      // Information (name and color) for this user:
+      user: {
+        name: "My Username",
+        color: "#ff0000",
+      },
+    },
+    uploadFile: uploadToTmpFilesDotOrg_DEV_ONLY,
+  });
+
+  // Give tests a way to get prosemirror instance
+  (window as WindowWithProseMirror).ProseMirror = editor?._tiptapEditor;
+
+  return <BlockNoteView className="root" editor={editor} />;
+}
+
+export default App;

examples/editor/examples/react-custom-blocks/App.tsx

@@ -0,0 +1,158 @@
+import { defaultBlockSpecs, defaultProps } from "@blocknote/core";
+import "@blocknote/core/style.css";
+import {
+  BlockNoteView,
+  createReactBlockSpec,
+  useBlockNote,
+} from "@blocknote/react";
+import "../vanilla-custom-blocks/style.css";
+
+type WindowWithProseMirror = Window & typeof globalThis & { ProseMirror: any };
+
+// The types of alerts that users can choose from
+const alertTypes = {
+  warning: {
+    icon: "⚠️",
+    color: "#e69819",
+    backgroundColor: "#fff6e6",
+  },
+  error: {
+    icon: "⛔",
+    color: "#d80d0d",
+    backgroundColor: "#ffe6e6",
+  },
+  info: {
+    icon: "ℹ️",
+    color: "#507aff",
+    backgroundColor: "#e6ebff",
+  },
+  success: {
+    icon: "✅",
+    color: "#0bc10b",
+    backgroundColor: "#e6ffe6",
+  },
+};
+
+export const alertBlock = createReactBlockSpec(
+  {
+    type: "alert",
+    propSchema: {
+      textAlignment: defaultProps.textAlignment,
+      textColor: defaultProps.textColor,
+      type: {
+        default: "warning" as const,
+        values: ["warning", "error", "info", "success"] as const,
+      },
+    },
+    content: "inline",
+  },
+  {
+    render: (props) => (
+      <div
+        className={"alert"}
+        style={{
+          backgroundColor: alertTypes[props.block.props.type].backgroundColor,
+        }}>
+        <select
+          contentEditable={false}
+          value={props.block.props.type}
+          onChange={(event) => {
+            props.editor.updateBlock(props.block, {
+              type: "alert",
+              props: { type: event.target.value as keyof typeof alertTypes },
+            });
+          }}>
+          <option value="warning">{alertTypes["warning"].icon}</option>
+          <option value="error">{alertTypes["error"].icon}</option>
+          <option value="info">{alertTypes["info"].icon}</option>
+          <option value="success">{alertTypes["success"].icon}</option>
+        </select>
+        <div className={"inline-content"} ref={props.contentRef} />
+      </div>
+    ),
+  }
+);
+
+const simpleImageBlock = createReactBlockSpec(
+  {
+    type: "simpleImage",
+    propSchema: {
+      src: {
+        default:
+          "https://www.pulsecarshalton.co.uk/wp-content/uploads/2016/08/jk-placeholder-image.jpg",
+      },
+    },
+    content: "none",
+  },
+  {
+    render: (props) => (
+      <img
+        className={"simple-image"}
+        src={props.block.props.src}
+        alt="placeholder"
+      />
+    ),
+  }
+);
+
+export const bracketsParagraphBlock = createReactBlockSpec(
+  {
+    type: "bracketsParagraph",
+    content: "inline",
+    propSchema: {
+      ...defaultProps,
+    },
+  },
+  {
+    render: (props) => (
+      <div className={"brackets-paragraph"}>
+        <div contentEditable={"false"}>{"["}</div>
+        <span contentEditable={"false"}>{"{"}</span>
+        <div className={"inline-content"} ref={props.contentRef} />
+        <span contentEditable={"false"}>{"}"}</span>
+        <div contentEditable={"false"}>{"]"}</div>
+      </div>
+    ),
+  }
+);
+
+export function ReactCustomBlocks() {
+  const editor = useBlockNote({
+    domAttributes: {
+      editor: {
+        class: "editor",
+        "data-test": "editor",
+      },
+    },
+    blockSpecs: {
+      ...defaultBlockSpecs,
+      alert: alertBlock,
+      simpleImage: simpleImageBlock,
+      bracketsParagraph: bracketsParagraphBlock,
+    },
+    initialContent: [
+      {
+        type: "alert",
+        props: {
+          type: "success",
+        },
+        content: "Alert",
+      },
+      {
+        type: "simpleImage",
+        props: {
+          src: "https://t3.ftcdn.net/jpg/02/48/42/64/360_F_248426448_NVKLywWqArG2ADUxDq6QprtIzsF82dMF.jpg",
+        },
+      },
+      {
+        type: "bracketsParagraph",
+        content: "Brackets Paragraph",
+      },
+    ],
+  });
+
+  // Give tests a way to get prosemirror instance
+  (window as WindowWithProseMirror).ProseMirror = editor?._tiptapEditor;
+
+  return <BlockNoteView className="root" editor={editor} />;
+}