@blocknote/core 0.4.6-alpha.1 → 0.4.6-alpha.4

package/README.md

@@ -1,10 +1,27 @@
-# BlockNote
-
+<p align="center">
+  <a href="https://www.blocknotejs.org">
+    <img alt="TypeCell" src="https://github.com/TypeCellOS/BlockNote/raw/main/packages/website/docs/public/img/logos/banner.svg?raw=true" width="300" />
+  </a>
+</p>
+
+<p align="center">
+Welcome to BlockNote! The open source Block-Based
+rich text editor. Easily add a modern text editing experience to your app.
+</p>
+
+<p align="center">
 <a href="https://discord.gg/Qc2QTTH5dF"><img alt="Discord" src="https://img.shields.io/badge/Chat on discord%20-%237289DA.svg?&style=for-the-badge&logo=discord&logoColor=white"/></a> <a href="https://matrix.to/#/#typecell-space:matrix.org"><img alt="Matrix" src="https://img.shields.io/badge/Chat on matrix%20-%23000.svg?&style=for-the-badge&logo=matrix&logoColor=white"/></a>
-
-[![npm version](https://badge.fury.io/js/%40blocknote%2Freact.svg)](https://badge.fury.io/js/%40blocknote%2Freact)
-
-**Welcome to BlockNote editor: a "Notion-style" block-based extensible text editor built on top of [Prosemirror](https://prosemirror.net/) and [Tiptap](https://tiptap.dev/).**
+</p>
+
+<p align="center">
+  <a href="https://www.blocknotejs.org">
+    Homepage
+  </a> - <a href="https://www.blocknotejs.org/docs/introduction">
+    Introduction
+  </a> - <a href="https://www.blocknotejs.org/docs/quickstart">
+    Documentation
+  </a>
+</p>
 
 # Live demo
 
@@ -14,13 +31,15 @@ Play with the editor @ [https://blocknote-main.vercel.app/](https://blocknote-ma
 
 # Example code (React)
 
+[![npm version](https://badge.fury.io/js/%40blocknote%2Freact.svg)](https://badge.fury.io/js/%40blocknote%2Freact)
+
 ```typescript
 import { BlockNoteView, useBlockNote } from "@blocknote/react";
 import "@blocknote/core/style.css";
 
 function App() {
   const editor = useBlockNote({
-    onUpdate: ({ editor }) => {
+    onEditorContentChange: (editor) => {
       // Log the document to console on every update
       console.log(editor.getJSON());
     },
@@ -32,7 +51,7 @@ function App() {
 
 `@blocknote/react` comes with a fully styled UI that makes it an instant, polished editor ready to use in your app.
 
-If you prefer to create your own UI components (menus), or don't want to use React, you can use `@blocknote/core` (_advanced_, see `examples/vanilla` for a demo).
+If you prefer to create your own UI components (menus), or don't want to use React, you can use `@blocknote/core` (_advanced_, [see docs](https://www.blocknotejs.org/docs/vanilla-js)).
 
 # Features
 
@@ -40,33 +59,39 @@ BlockNote comes with a number of features and components to make it easy to embe
 
 ### Animations:
 
-<img src="https://github.com/YousefED/BlockNote/blob/readme/.resources/animations.gif?raw=true" width="400" />
+<img src="https://github.com/TypeCellOS/BlockNote/blob/readme/.resources/animations.gif?raw=true" width="400" />
 
 ### Helpful placeholders:
 
-<img src="https://github.com/YousefED/BlockNote/blob/readme/.resources/placeholders.gif?raw=true" width="400" />
+<img src="https://github.com/TypeCellOS/BlockNote/blob/readme/.resources/placeholders.gif?raw=true" width="400" />
 
 ### Drag and drop blocks:
 
-<img src="https://github.com/YousefED/BlockNote/blob/readme/.resources/dragdrop.gif?raw=true" width="400" />
+<img src="https://github.com/TypeCellOS/BlockNote/blob/readme/.resources/dragdrop.gif?raw=true" width="400" />
 
 ### Nesting / indentation with tab and shift+tab:
 
-<img src="https://github.com/YousefED/BlockNote/blob/readme/.resources/nesting.gif?raw=true" width="400" />
+<img src="https://github.com/TypeCellOS/BlockNote/blob/readme/.resources/nesting.gif?raw=true" width="400" />
 
 ### Slash (/) menu:
 
-<img src="https://github.com/YousefED/BlockNote/blob/readme/.resources/slashmenu.gif?raw=true" width="400" />
+<img src="https://github.com/TypeCellOS/BlockNote/blob/readme/.resources/slashmenu.gif?raw=true" width="400" />
 
 ### Format menu:
 
-<img src="https://github.com/YousefED/BlockNote/blob/readme/.resources/selectmenu.gif?raw=true" width="400" />
+<img src="https://github.com/TypeCellOS/BlockNote/blob/readme/.resources/selectmenu.gif?raw=true" width="400" />
 
 ### Real-time collaboration:
 
-<img src="https://github.com/YousefED/BlockNote/blob/readme/.resources/collaboration.gif?raw=true" width="400" />
+<img src="https://github.com/TypeCellOS/BlockNote/blob/readme/.resources/collaboration.gif?raw=true" width="400" />
+
+# Feedback 🙋‍♂️🙋‍♀️
+
+We'd love to hear your thoughts and see your experiments, so [come and say hi on Discord](https://discord.gg/Qc2QTTH5dF) or [Matrix](https://matrix.to/#/#typecell-space:matrix.org).
+
+# Contributing 🙌
 
-# Contributing
+See [CONTRIBUTING.md](CONTRIBUTING.md) for more info and guidance on how to run the project (TLDR: just use `npm start`).
 
 Directory structure:
 
@@ -79,24 +104,7 @@ blocknote
 └── tests               - Playwright end to end tests
 ```
 
-An introduction into the BlockNote Prosemirror schema can be found in [packages/core/ARCHITECTURE.md](https://github.com/YousefED/BlockNote/blob/main/packages/core/ARCHITECTURE.md).
-
-## Running
-
-To run the project, open the command line in the project's root directory and enter the following commands:
-
-    # Install all required npm modules for lerna, and bootstrap lerna packages
-    npm install
-    npm run bootstrap
-
-    # Start the example project
-    npm start
-
-## Adding packages
-
-- Add the dependency to the relevant `package.json` file (packages/xxx/package.json)
-- run `npm run install-new-packages`
-- Double check `package-lock.json` to make sure only the relevant packages have been affected
+The codebase is automatically tested using Vitest and Playwright.
 
 # Credits ❤️
 
@@ -105,3 +113,7 @@ BlockNote builds directly on two awesome projects; [Prosemirror](https://prosemi
 BlockNote is built as part of [TypeCell](https://www.typecell.org). TypeCell is proudly sponsored by the renowned [NLNet foundation](https://nlnet.nl/foundation/) who are on a mission to support an open internet, and protect the privacy and security of internet users. Check them out!
 
 <a href="https://nlnet.nl"><img src="https://nlnet.nl/image/logos/NGIAssure_tag.svg" alt="NLNet" width="100"></a>
+
+Hosting and deployments powered by Vercel:
+
+<a href="https://vercel.com/?utm_source=TypeCell&utm_campaign=oss"><img src="https://images.ctfassets.net/e5382hct74si/78Olo8EZRdUlcDUFQvnzG7/fa4cdb6dc04c40fceac194134788a0e2/1618983297-powered-by-vercel.svg" alt="NLNet" width="150"></a>

package/dist/blocknote.js

@@ -4,9 +4,9 @@ var h = (o, e, t) => (Be(o, typeof e != "symbol" ? e + "" : e, t), t);
 import { Extension as C, findChildren as q, combineTransactionSteps as Te, getChangedRanges as we, findChildrenInRange as Me, Mark as ne, Node as E, mergeAttributes as x, InputRule as j, findParentNode as xe, isTextSelection as Ee, isNodeSelection as Ie, posToDOMRect as re, getMarkRange as X, extensions as N, Editor as Se } from "@tiptap/core";
 import { Slice as A, Fragment as P, DOMSerializer as Ae, DOMParser as Pe } from "prosemirror-model";
 import { Plugin as B, PluginKey as v, TextSelection as Q, Selection as U, NodeSelection as Ne } from "prosemirror-state";
-import { v4 as He } from "uuid";
+import { v4 as Le } from "uuid";
 import ie from "rehype-parse";
-import Le from "rehype-remark";
+import He from "rehype-remark";
 import se from "rehype-stringify";
 import ae from "remark-gfm";
 import Oe from "remark-parse";
@@ -88,7 +88,7 @@ const W = C.create({
     return {
       attributeName: "id",
       types: [],
-      generateID: () => window.__TEST_OPTIONS ? (window.__TEST_OPTIONS.mockID === void 0 ? window.__TEST_OPTIONS.mockID = 0 : window.__TEST_OPTIONS.mockID++, parseInt(window.__TEST_OPTIONS.mockID)) : He(),
+      generateID: () => window.__TEST_OPTIONS ? (window.__TEST_OPTIONS.mockID === void 0 ? window.__TEST_OPTIONS.mockID = 0 : window.__TEST_OPTIONS.mockID++, parseInt(window.__TEST_OPTIONS.mockID)) : Le(),
       filterTransaction: null
     };
   },
@@ -144,18 +144,18 @@ const W = C.create({
               m,
               (T) => a.includes(T.type.name)
             ), g = y.map(({ node: T }) => T.attrs[l]).filter((T) => T !== null), R = Je(g);
-            y.forEach(({ node: T, pos: L }) => {
+            y.forEach(({ node: T, pos: H }) => {
               var z;
-              const J = (z = s.doc.nodeAt(L)) === null || z === void 0 ? void 0 : z.attrs[l];
+              const J = (z = s.doc.nodeAt(H)) === null || z === void 0 ? void 0 : z.attrs[l];
               if (J === null) {
-                s.setNodeMarkup(L, void 0, {
+                s.setNodeMarkup(H, void 0, {
                   ...T.attrs,
                   [l]: c()
                 });
                 return;
               }
-              const { deleted: ve } = f.invert().mapResult(L);
-              ve && R.includes(J) && s.setNodeMarkup(L, void 0, {
+              const { deleted: ve } = f.invert().mapResult(H);
+              ve && R.includes(J) && s.setNodeMarkup(H, void 0, {
                 ...T.attrs,
                 [l]: c()
               });
@@ -511,7 +511,7 @@ async function ke(o, e) {
   return i;
 }
 async function it(o, e) {
-  return (await Y().use(ie, { fragment: !0 }).use(nt).use(Le).use(ae).use(De).process(await me(o, e))).value;
+  return (await Y().use(ie, { fragment: !0 }).use(nt).use(He).use(ae).use(De).process(await me(o, e))).value;
 }
 async function st(o, e) {
   const t = await Y().use(Oe).use(ae).use(_e).use(se).process(o);
@@ -989,7 +989,7 @@ const at = C.create({
       {
         tag: "p",
         priority: 200,
-        node: "blockContainer"
+        node: "paragraph"
       }
     ];
   },
@@ -1039,17 +1039,17 @@ const at = C.create({
       {
         tag: "h1",
         attrs: { level: "1" },
-        node: "blockContainer"
+        node: "heading"
       },
       {
         tag: "h2",
         attrs: { level: "2" },
-        node: "blockContainer"
+        node: "heading"
       },
       {
         tag: "h3",
         attrs: { level: "3" },
-        node: "blockContainer"
+        node: "heading"
       }
     ];
   },
@@ -1116,7 +1116,7 @@ const at = C.create({
           const e = o.parentElement;
           return e === null ? !1 : e.tagName === "UL" ? {} : !1;
         },
-        node: "blockContainer"
+        node: "bulletListItem"
       },
       // Case for BlockNote list structure.
       {
@@ -1128,7 +1128,7 @@ const at = C.create({
           return e === null ? !1 : e.getAttribute("data-content-type") === "bulletListItem" ? {} : !1;
         },
         priority: 300,
-        node: "blockContainer"
+        node: "bulletListItem"
       }
     ];
   },
@@ -1221,7 +1221,7 @@ const at = C.create({
           const e = o.parentElement;
           return e === null ? !1 : e.tagName === "OL" ? {} : !1;
         },
-        node: "blockContainer"
+        node: "numberedListItem"
       },
       // Case for BlockNote list structure.
       // (e.g.: when pasting from blocknote)
@@ -1234,7 +1234,7 @@ const at = C.create({
           return e === null ? !1 : e.getAttribute("data-content-type") === "numberedListItem" ? {} : !1;
         },
         priority: 300,
-        node: "blockContainer"
+        node: "numberedListItem"
       }
     ];
   },
@@ -1329,7 +1329,7 @@ class Nt {
     };
   }
 }
-function Ht({
+function Lt({
   pluginKey: o,
   editor: e,
   defaultTriggerCharacter: t,
@@ -1472,7 +1472,7 @@ function Ht({
     }
   });
 }
-const K = new v("suggestions-slash-commands"), Lt = C.create({
+const K = new v("suggestions-slash-commands"), Ht = C.create({
   name: "slash-command",
   addOptions() {
     return {
@@ -1486,7 +1486,7 @@ const K = new v("suggestions-slash-commands"), Lt = C.create({
       throw new Error("required args not defined for SlashMenuExtension");
     const o = this.options.commands;
     return [
-      Ht({
+      Lt({
         pluginKey: K,
         editor: this.options.editor,
         defaultTriggerCharacter: "/",
@@ -1499,7 +1499,7 @@ const K = new v("suggestions-slash-commands"), Lt = C.create({
     ];
   }
 });
-class H extends U {
+class L extends U {
   constructor(t, n) {
     super(t, n);
     h(this, "nodes");
@@ -1510,13 +1510,13 @@ class H extends U {
     });
   }
   static create(t, n, r = n) {
-    return new H(t.resolve(n), t.resolve(r));
+    return new L(t.resolve(n), t.resolve(r));
   }
   content() {
     return new A(P.from(this.nodes), 0, 0);
   }
   eq(t) {
-    if (!(t instanceof H) || this.nodes.length !== t.nodes.length || this.from !== t.from || this.to !== t.to)
+    if (!(t instanceof L) || this.nodes.length !== t.nodes.length || this.from !== t.from || this.to !== t.to)
       return !1;
     for (let n = 0; n < this.nodes.length; n++)
       if (!this.nodes[n].eq(t.nodes[n]))
@@ -1525,7 +1525,7 @@ class H extends U {
   }
   map(t, n) {
     let r = n.mapResult(this.from), i = n.mapResult(this.to);
-    return i.deleted ? U.near(t.resolve(r.pos)) : r.deleted ? U.near(t.resolve(i.pos)) : new H(
+    return i.deleted ? U.near(t.resolve(r.pos)) : r.deleted ? U.near(t.resolve(i.pos)) : new L(
       t.resolve(r.pos),
       t.resolve(i.pos)
     );
@@ -1538,6 +1538,8 @@ const Ot = Ve.__serializeForClipboard;
 let w;
 function ye(o, e) {
   var r;
+  if (!e.dom.isConnected)
+    return;
   let t = e.posAtCoords(o);
   if (!t)
     return;
@@ -1598,7 +1600,7 @@ function Ft(o, e) {
   if (r != null) {
     const i = e.state.selection, d = e.state.doc, { from: s, to: a } = Dt(i, d), l = s <= r && r < a, c = !i.$anchor.node().eq(i.$head.node());
     l && c ? (e.dispatch(
-      e.state.tr.setSelection(H.create(d, s, a))
+      e.state.tr.setSelection(L.create(d, s, a))
     ), oe(e, s, a)) : (e.dispatch(
       e.state.tr.setSelection(Ne.create(e.state.doc, r))
     ), oe(e, r));
@@ -2495,7 +2497,7 @@ const Qt = [
       hyperlinkToolbarFactory: o.uiFactories.hyperlinkToolbarFactory
     })
   ) : e.push(de), o.uiFactories.slashMenuFactory && e.push(
-    Lt.configure({
+    Ht.configure({
       editor: o.editor,
       commands: o.slashCommands,
       slashMenuFactory: o.uiFactories.slashMenuFactory
@@ -2506,7 +2508,7 @@ const Qt = [
   enablePasteRules: !0,
   enableCoreExtensions: !1
 };
-class Ho {
+class Lo {
   constructor(e = {}) {
     h(this, "_tiptapEditor");
     h(this, "blockCache", /* @__PURE__ */ new WeakMap());
@@ -2522,7 +2524,7 @@ class Ho {
       ...e._tiptapOptions,
       onCreate: () => {
         var a;
-        (a = e.onEditorCreate) == null || a.call(e, this);
+        (a = e.onEditorReady) == null || a.call(e, this);
       },
       onUpdate: () => {
         var a;
@@ -2695,7 +2697,7 @@ class Ho {
 }
 export {
   I as BaseSlashMenuItem,
-  Ho as BlockNoteEditor,
+  Lo as BlockNoteEditor,
   ee as blockProps,
   Qt as defaultSlashMenuItems,
   no as getBlockNoteExtensions,