@blocknote/core 0.4.6-alpha.3 → 0.4.6-alpha.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -1,10 +1,27 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
<p align="center">
|
|
2
|
+
<a href="https://www.blocknotejs.org">
|
|
3
|
+
<img alt="TypeCell" src="https://github.com/TypeCellOS/BlockNote/raw/main/packages/website/docs/public/img/logos/banner.svg?raw=true" width="300" />
|
|
4
|
+
</a>
|
|
5
|
+
</p>
|
|
6
|
+
|
|
7
|
+
<p align="center">
|
|
8
|
+
Welcome to BlockNote! The open source Block-Based
|
|
9
|
+
rich text editor. Easily add a modern text editing experience to your app.
|
|
10
|
+
</p>
|
|
11
|
+
|
|
12
|
+
<p align="center">
|
|
3
13
|
<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>
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
14
|
+
</p>
|
|
15
|
+
|
|
16
|
+
<p align="center">
|
|
17
|
+
<a href="https://www.blocknotejs.org">
|
|
18
|
+
Homepage
|
|
19
|
+
</a> - <a href="https://www.blocknotejs.org/docs/introduction">
|
|
20
|
+
Introduction
|
|
21
|
+
</a> - <a href="https://www.blocknotejs.org/docs/quickstart">
|
|
22
|
+
Documentation
|
|
23
|
+
</a>
|
|
24
|
+
</p>
|
|
8
25
|
|
|
9
26
|
# Live demo
|
|
10
27
|
|
|
@@ -14,13 +31,15 @@ Play with the editor @ [https://blocknote-main.vercel.app/](https://blocknote-ma
|
|
|
14
31
|
|
|
15
32
|
# Example code (React)
|
|
16
33
|
|
|
34
|
+
[](https://badge.fury.io/js/%40blocknote%2Freact)
|
|
35
|
+
|
|
17
36
|
```typescript
|
|
18
37
|
import { BlockNoteView, useBlockNote } from "@blocknote/react";
|
|
19
38
|
import "@blocknote/core/style.css";
|
|
20
39
|
|
|
21
40
|
function App() {
|
|
22
41
|
const editor = useBlockNote({
|
|
23
|
-
|
|
42
|
+
onEditorContentChange: (editor) => {
|
|
24
43
|
// Log the document to console on every update
|
|
25
44
|
console.log(editor.getJSON());
|
|
26
45
|
},
|
|
@@ -32,7 +51,7 @@ function App() {
|
|
|
32
51
|
|
|
33
52
|
`@blocknote/react` comes with a fully styled UI that makes it an instant, polished editor ready to use in your app.
|
|
34
53
|
|
|
35
|
-
If you prefer to create your own UI components (menus), or don't want to use React, you can use `@blocknote/core` (_advanced_, see
|
|
54
|
+
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)).
|
|
36
55
|
|
|
37
56
|
# Features
|
|
38
57
|
|
|
@@ -40,33 +59,39 @@ BlockNote comes with a number of features and components to make it easy to embe
|
|
|
40
59
|
|
|
41
60
|
### Animations:
|
|
42
61
|
|
|
43
|
-
<img src="https://github.com/
|
|
62
|
+
<img src="https://github.com/TypeCellOS/BlockNote/blob/readme/.resources/animations.gif?raw=true" width="400" />
|
|
44
63
|
|
|
45
64
|
### Helpful placeholders:
|
|
46
65
|
|
|
47
|
-
<img src="https://github.com/
|
|
66
|
+
<img src="https://github.com/TypeCellOS/BlockNote/blob/readme/.resources/placeholders.gif?raw=true" width="400" />
|
|
48
67
|
|
|
49
68
|
### Drag and drop blocks:
|
|
50
69
|
|
|
51
|
-
<img src="https://github.com/
|
|
70
|
+
<img src="https://github.com/TypeCellOS/BlockNote/blob/readme/.resources/dragdrop.gif?raw=true" width="400" />
|
|
52
71
|
|
|
53
72
|
### Nesting / indentation with tab and shift+tab:
|
|
54
73
|
|
|
55
|
-
<img src="https://github.com/
|
|
74
|
+
<img src="https://github.com/TypeCellOS/BlockNote/blob/readme/.resources/nesting.gif?raw=true" width="400" />
|
|
56
75
|
|
|
57
76
|
### Slash (/) menu:
|
|
58
77
|
|
|
59
|
-
<img src="https://github.com/
|
|
78
|
+
<img src="https://github.com/TypeCellOS/BlockNote/blob/readme/.resources/slashmenu.gif?raw=true" width="400" />
|
|
60
79
|
|
|
61
80
|
### Format menu:
|
|
62
81
|
|
|
63
|
-
<img src="https://github.com/
|
|
82
|
+
<img src="https://github.com/TypeCellOS/BlockNote/blob/readme/.resources/selectmenu.gif?raw=true" width="400" />
|
|
64
83
|
|
|
65
84
|
### Real-time collaboration:
|
|
66
85
|
|
|
67
|
-
<img src="https://github.com/
|
|
86
|
+
<img src="https://github.com/TypeCellOS/BlockNote/blob/readme/.resources/collaboration.gif?raw=true" width="400" />
|
|
87
|
+
|
|
88
|
+
# Feedback 🙋♂️🙋♀️
|
|
89
|
+
|
|
90
|
+
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).
|
|
91
|
+
|
|
92
|
+
# Contributing 🙌
|
|
68
93
|
|
|
69
|
-
|
|
94
|
+
See [CONTRIBUTING.md](CONTRIBUTING.md) for more info and guidance on how to run the project (TLDR: just use `npm start`).
|
|
70
95
|
|
|
71
96
|
Directory structure:
|
|
72
97
|
|
|
@@ -79,24 +104,7 @@ blocknote
|
|
|
79
104
|
└── tests - Playwright end to end tests
|
|
80
105
|
```
|
|
81
106
|
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
## Running
|
|
85
|
-
|
|
86
|
-
To run the project, open the command line in the project's root directory and enter the following commands:
|
|
87
|
-
|
|
88
|
-
# Install all required npm modules for lerna, and bootstrap lerna packages
|
|
89
|
-
npm install
|
|
90
|
-
npm run bootstrap
|
|
91
|
-
|
|
92
|
-
# Start the example project
|
|
93
|
-
npm start
|
|
94
|
-
|
|
95
|
-
## Adding packages
|
|
96
|
-
|
|
97
|
-
- Add the dependency to the relevant `package.json` file (packages/xxx/package.json)
|
|
98
|
-
- run `npm run install-new-packages`
|
|
99
|
-
- Double check `package-lock.json` to make sure only the relevant packages have been affected
|
|
107
|
+
The codebase is automatically tested using Vitest and Playwright.
|
|
100
108
|
|
|
101
109
|
# Credits ❤️
|
|
102
110
|
|
|
@@ -105,3 +113,7 @@ BlockNote builds directly on two awesome projects; [Prosemirror](https://prosemi
|
|
|
105
113
|
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!
|
|
106
114
|
|
|
107
115
|
<a href="https://nlnet.nl"><img src="https://nlnet.nl/image/logos/NGIAssure_tag.svg" alt="NLNet" width="100"></a>
|
|
116
|
+
|
|
117
|
+
Hosting and deployments powered by Vercel:
|
|
118
|
+
|
|
119
|
+
<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>
|