Readme (#37)

* exclude history, make blockgroup lowercase

* update readme

* update title

* update commands / readme

* add badges

* add collab gif

* update snaps

* update comment

Author: YousefED

.github/workflows/build.yml

@@ -43,8 +43,8 @@ jobs:
       - name: Install Dependencies
         run: npm install
 
-      - name: Bootstrap packages
-        run: npm run bootstrap
+      # - name: Bootstrap packages
+      # run: npm run bootstrap
 
       - name: Lint packages
         run: npm run lint

.resources/animations.gif

@@ -1,6 +1,72 @@
 # BlockNote
 
-Welcome to the BlockNote editor. Let's build a block based WYSIWYG editor with killer UX!
+<a href="https://discord.gg/aDQxXezfNj"><img alt="Discord" src="https://img.shields.io/badge/Chat on discord%20-%237289DA.svg?&style=for-the-badge&logo=discord&logoColor=white"/></a>
+
+[![npm version](https://badge.fury.io/js/%blocknote%2Fcore.svg)](https://badge.fury.io/js/%blocknote%2Fcore)
+
+**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/).**
+
+# Live demo
+
+Play with the editor @ [https://blocknote-main.vercel.app/](https://blocknote-main.vercel.app/).
+
+(Source in [examples/editor](/examples/editor))
+
+# Example code (React)
+
+```typescript
+import { EditorContent, useEditor } from "@blocknote/core";
+import "@blocknote/core/style.css";
+
+function App() {
+  const editor = useEditor({
+    onUpdate: ({ editor }) => {
+      // Log the document to console on every update
+      console.log(editor.getJSON());
+    },
+  });
+
+  return <EditorContent editor={editor} />;
+}
+```
+
+# Features
+
+BlockNote comes with a number of features and components to make it easy to embed a high-quality block-based editor in your app:
+
+### Animations:
+
+<img src="https://github.com/YousefED/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" />
+![placeholders](.resources/placeholders.gif)
+
+### Drag and drop blocks:
+
+<img src="https://github.com/YousefED/BlockNote/blob/readme/.resources/dragdrop.gif?raw=true" width="400" />
+![dragdrop](.resources/dragdrop.gif)
+
+### Nesting / indentation with tab and shift+tab:
+
+<img src="https://github.com/YousefED/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" />
+
+### Format menu:
+
+<img src="https://github.com/YousefED/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" />
+
+# Contributing
+
+Directory structure:
 
 ```
 blocknote
@@ -9,27 +75,26 @@ blocknote
 └── tests               - Playwright end to end tests
 ```
 
-# Development
-
-We use [Lerna](https://lerna.js.org/) to manage the monorepo with separate packages.
-
 ## 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 editor project
+    # Start the example project
     npm start
 
-## Updating packages
-
-If you've pulled changes from git that add new or update existing dependencies, use `npm run bootstrap` instead of `npm install` to install updated dependencies!
-
 ## 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
+
+# Credits ❤️
+
+BlockNote builds directly on two awesome projects; [Prosemirror](https://prosemirror.net/) by Marijn Haverbeke and [Tiptap](https://tiptap.dev/). Consider sponsoring those libraries when using BlockNote: [Prosemirror](https://marijnhaverbeke.nl/fund/), [Tiptap](https://github.com/sponsors/ueberdosis).
+
+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>

.resources/collaboration.gif

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <!-- <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" /> -->
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite App</title>
+    <title>BlockNote demo</title>
   </head>
   <body>
     <div id="root"></div>

.resources/dragdrop.gif

@@ -20,7 +20,11 @@
     "bootstrap": "lerna bootstrap --ci -- --force && patch-package",
     "install-new-packages": "lerna bootstrap -- --force && patch-package",
     "playwright": "npx playwright test",
-    "install-playwright": "npx playwright install --with-deps"
+    "install-playwright": "npx playwright install --with-deps",
+    "postinstall": "npm run bootstrap",
+    "deploy": "lerna publish",
+    "prepublishOnly": "npm run build && cp README.md packages/core/README.md",
+    "postpublish": "rm -rf packages/core/README.md"
   },
   "overrides": {
     "react": "^17.0.2",

.resources/nesting.gif

@@ -1,10 +1,27 @@
 {
   "name": "@blocknote/core",
-  "private": true,
-  "version": "0.0.0",
+  "private": false,
+  "license": "MIT",
+  "version": "0.0.1",
   "files": [
-    "dist"
+    "dist",
+    "types",
+    "src"
   ],
+  "keywords": [
+    "react",
+    "javascript",
+    "editor",
+    "typescript",
+    "prosemirror",
+    "wysiwyg",
+    "rich-text-editor",
+    "notion",
+    "yjs",
+    "block-based",
+    "tiptap"
+  ],
+  "description": "A \"Notion-style\" block-based extensible text editor built on top of Prosemirror and Tiptap.",
   "type": "module",
   "source": "src/index.ts",
   "types": "./types/src/index.d.ts",

.resources/placeholders.gif

@@ -10,6 +10,6 @@ export const blocks: any[] = [
   Node.create({
     name: "doc",
     topNode: true,
-    content: "blockGroup",
+    content: "blockgroup",
   }),
 ];

.resources/selectmenu.gif

@@ -52,7 +52,7 @@ export const Block = Node.create<IBlock>({
   },
 
   // A block always contains content, and optionally a blockGroup which contains nested blocks
-  content: "tccontent blockGroup?",
+  content: "tccontent blockgroup?",
 
   defining: true,
 

.resources/slashmenu.gif

@@ -2,7 +2,7 @@ import { mergeAttributes, Node } from "@tiptap/core";
 import styles from "./Block.module.css";
 
 export const BlockGroup = Node.create({
-  name: "blockGroup",
+  name: "blockgroup",
 
   addOptions() {
     return {

README.md

@@ -1,5 +1,5 @@
 import { Extension } from "@tiptap/core";
-import { PluginKey, Plugin } from "prosemirror-state";
+import { Plugin, PluginKey } from "prosemirror-state";
 
 // based on https://github.com/ueberdosis/tiptap/blob/40a9404c94c7fef7900610c195536384781ae101/demos/src/Experiments/TrailingNode/Vue/trailing-node.ts
 
@@ -52,8 +52,8 @@ export const TrailingNode = Extension.create<TrailingNodeOptions>({
 
             let lastNode = tr.doc.lastChild;
 
-            if (!lastNode || lastNode.type.name !== "blockGroup") {
-              throw new Error("Expected blockGroup");
+            if (!lastNode || lastNode.type.name !== "blockgroup") {
+              throw new Error("Expected blockgroup");
             }
 
             lastNode = lastNode.lastChild;

examples/editor/index.html

@@ -10,8 +10,11 @@ import { Plugin, PluginKey } from "prosemirror-state";
 import { v4 } from "uuid";
 
 /**
- * Code from tiptap UniqueID extension
- * TODO: this is a pro extension, but with MIT license, discuss with TipTap
+ * Code from Tiptap UniqueID extension (https://tiptap.dev/api/extensions/unique-id)
+ * This extension is licensed under MIT (even though it's part of Tiptap pro).
+ *
+ * If you're a user of BlockNote, we still recommend to support their awesome work and become a sponsor!
+ * https://tiptap.dev/pro
  */
 
 /**

package.json

@@ -1,4 +1,4 @@
-import { useEditor as useEditorTiptap, EditorOptions } from "@tiptap/react";
+import { EditorOptions, useEditor as useEditorTiptap } from "@tiptap/react";
 
 import { DependencyList } from "react";
 import { getBlockNoteExtensions } from "./BlockNoteExtensions";
@@ -7,6 +7,7 @@ import rootStyles from "./root.module.css";
 
 type BlockNoteEditorOptions = EditorOptions & {
   enableBlockNoteExtensions: boolean;
+  disableHistoryExtension: boolean;
 };
 
 const blockNoteExtensions = getBlockNoteExtensions();
@@ -20,13 +21,17 @@ export const useEditor = (
   options: Partial<BlockNoteEditorOptions> = {},
   deps: DependencyList = []
 ) => {
+  const extensions = options.disableHistoryExtension
+    ? blockNoteExtensions.filter((e) => e.name !== "history")
+    : blockNoteExtensions;
+
   const tiptapOptions = {
     ...blockNoteOptions,
     ...options,
     extensions:
       options.enableBlockNoteExtensions === false
         ? options.extensions
-        : [...(options.extensions || []), ...blockNoteExtensions],
+        : [...(options.extensions || []), ...extensions],
     editorProps: {
       attributes: {
         ...(options.editorProps?.attributes || {}),

packages/core/README.md

@@ -2,7 +2,7 @@
   "type": "doc",
   "content": [
     {
-      "type": "blockGroup",
+      "type": "blockgroup",
       "content": [
         {
           "type": "tcblock",
@@ -53,4 +53,4 @@
       ]
     }
   ]
-}
+}

packages/core/package.json

@@ -2,7 +2,7 @@
   "type": "doc",
   "content": [
     {
-      "type": "blockGroup",
+      "type": "blockgroup",
       "content": [
         {
           "type": "tcblock",

packages/core/src/extensions/Blocks/index.ts

@@ -2,7 +2,7 @@
   "type": "doc",
   "content": [
     {
-      "type": "blockGroup",
+      "type": "blockgroup",
       "content": [
         {
           "type": "tcblock",
@@ -53,4 +53,4 @@
       ]
     }
   ]
-}
+}

packages/core/src/extensions/Blocks/nodes/Block.ts

@@ -2,7 +2,7 @@
   "type": "doc",
   "content": [
     {
-      "type": "blockGroup",
+      "type": "blockgroup",
       "content": [
         {
           "type": "tcblock",

packages/core/src/extensions/Blocks/nodes/BlockGroup.ts

@@ -2,7 +2,7 @@
   "type": "doc",
   "content": [
     {
-      "type": "blockGroup",
+      "type": "blockgroup",
       "content": [
         {
           "type": "tcblock",
@@ -53,4 +53,4 @@
       ]
     }
   ]
-}
+}

packages/core/src/extensions/TrailingNode/TrailingNodeExtension.ts

@@ -2,7 +2,7 @@
   "type": "doc",
   "content": [
     {
-      "type": "blockGroup",
+      "type": "blockgroup",
       "content": [
         {
           "type": "tcblock",

packages/core/src/extensions/UniqueID/UniqueID.ts

@@ -2,7 +2,7 @@
   "type": "doc",
   "content": [
     {
-      "type": "blockGroup",
+      "type": "blockgroup",
       "content": [
         {
           "type": "tcblock",
@@ -53,4 +53,4 @@
       ]
     }
   ]
-}
+}

packages/core/src/useEditor.ts

@@ -2,7 +2,7 @@
   "type": "doc",
   "content": [
     {
-      "type": "blockGroup",
+      "type": "blockgroup",
       "content": [
         {
           "type": "tcblock",

tests/end-to-end/draghandle/draghandle.test.ts-snapshots/dragHandleDocStructure-chromium-darwin.json

@@ -2,7 +2,7 @@
   "type": "doc",
   "content": [
     {
-      "type": "blockGroup",
+      "type": "blockgroup",
       "content": [
         {
           "type": "tcblock",
@@ -39,7 +39,7 @@
               ]
             },
             {
-              "type": "blockGroup",
+              "type": "blockgroup",
               "content": [
                 {
                   "type": "tcblock",
@@ -68,4 +68,4 @@
       ]
     }
   ]
-}
+}