diff --git a/.github/workflows/cla.yml.disabled b/.github/workflows/cla.yml.disabled index af04428eb7..2703c012b6 100644 --- a/.github/workflows/cla.yml.disabled +++ b/.github/workflows/cla.yml.disabled @@ -19,7 +19,7 @@ jobs: PERSONAL_ACCESS_TOKEN: ${{ secrets.PERSONAL_ACCESS_TOKEN }} with: path-to-signatures: ".signatures/v1/cla.json" - path-to-document: "https://github.com/YousefED/blocknote/blob/main/CLA.md" # e.g. a CLA or a DCO document + path-to-document: "https://github.com/TypeCellOS/BlockNote/blob/main/CLA.md" # e.g. a CLA or a DCO document # branch should not be protected branch: "main" # allowlist: user1,bot* diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 100644 index 0000000000..ac57b6f132 --- /dev/null +++ b/CONTRIBUTING.md @@ -0,0 +1,31 @@ +# Contributing + +Directory structure: + +``` +blocknote +├── packages/core - The core of the editor +├── packages/react - The main library for use in React apps +├── examples/editor - Example React app that embeds the editor +├── examples/vanilla - An advanced example if you don't want to use React or want to build your own UI components +└── tests - Playwright end to end tests +``` + +An introduction into the BlockNote Prosemirror schema can be found in [packages/core/ARCHITECTURE.md](https://github.com/TypeCellOS/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 diff --git a/README.md b/README.md index 42bc15f5b4..bafa3ae422 100644 --- a/README.md +++ b/README.md @@ -1,10 +1,27 @@ -# BlockNote - +

+ + TypeCell + +

+ +

+Welcome to BlockNote! The open source Block-Based +rich text editor. Easily add a modern text editing experience to your app. +

+ +

Discord Matrix - -[![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/).** +

+ +

+ + Homepage + - + Introduction + - + Documentation + +

# 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: - + ### Helpful placeholders: - + ### Drag and drop blocks: - + ### Nesting / indentation with tab and shift+tab: - + ### Slash (/) menu: - + ### Format menu: - + ### Real-time collaboration: - + + +# 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 ❤️ diff --git a/packages/core/package.json b/packages/core/package.json index bf4778e7e6..fe19b4c834 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@blocknote/core", - "homepage": "https://github.com/yousefed/blocknote", + "homepage": "https://github.com/TypeCellOS/BlockNote", "private": false, "license": "MPL-2.0", "version": "0.4.6-alpha.3", diff --git a/packages/react/package.json b/packages/react/package.json index b5b29cc021..cc5598ef19 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,6 +1,6 @@ { "name": "@blocknote/react", - "homepage": "https://github.com/yousefed/blocknote", + "homepage": "https://github.com/TypeCellOS/BlockNote", "private": false, "license": "MPL-2.0", "version": "0.4.6-alpha.3", diff --git a/packages/website/docs/.vitepress/config.ts b/packages/website/docs/.vitepress/config.ts index 838e8d236a..4be5fe92b7 100644 --- a/packages/website/docs/.vitepress/config.ts +++ b/packages/website/docs/.vitepress/config.ts @@ -150,7 +150,7 @@ export default defineConfig({ // }, algolia: getAlgoliaConfig(process.env), socialLinks: [ - { icon: "github", link: "https://github.com/yousefed/blocknote" }, + { icon: "github", link: "https://github.com/TypeCellOS/BlockNote" }, // { icon: "twitter", link: "https://twitter.com/TypeCellOS" }, { icon: "discord", diff --git a/packages/website/docs/.vitepress/theme/components/Home.vue b/packages/website/docs/.vitepress/theme/components/Home.vue index a4c95f3f50..e2ca8a1a89 100644 --- a/packages/website/docs/.vitepress/theme/components/Home.vue +++ b/packages/website/docs/.vitepress/theme/components/Home.vue @@ -49,10 +49,10 @@ defineProps<{

Star
diff --git a/packages/website/docs/docs/introduction.md b/packages/website/docs/docs/introduction.md index 6963d1cecb..9bd3012858 100644 --- a/packages/website/docs/docs/introduction.md +++ b/packages/website/docs/docs/introduction.md @@ -1,6 +1,6 @@ # Introduction to BlockNote -
NPM GitHub Repo stars
+
NPM GitHub Repo stars
BlockNote is a block-based rich-text editor for [React](https://reactjs.org/), focused on providing a great out-of-the-box experience with minimal setup. @@ -24,7 +24,7 @@ On top of that, it comes with a modern block-based design. This gives documents ## Community -BlockNote is currently in early beta. We'd love your feedback! If you have questions, need help, or want to contribute reach out to the community on [Discord](https://discord.gg/Qc2QTTH5dF) and [GitHub](https://github.com/yousefed/blocknote). +BlockNote is currently in early beta. We'd love your feedback! If you have questions, need help, or want to contribute reach out to the community on [Discord](https://discord.gg/Qc2QTTH5dF) and [GitHub](https://github.com/TypeCellOS/BlockNote). ## Next: Set up BlockNote diff --git a/packages/website/docs/docs/quickstart.md b/packages/website/docs/docs/quickstart.md index b05203aeb6..ebac56d331 100644 --- a/packages/website/docs/docs/quickstart.md +++ b/packages/website/docs/docs/quickstart.md @@ -1,6 +1,6 @@ # Quickstart -
NPM GitHub Repo stars
+
NPM GitHub Repo stars
Getting started with BlockNote is quick and easy. All you need to do is install the package and add the React component to your app! diff --git a/packages/website/docs/docs/vanilla-js.md b/packages/website/docs/docs/vanilla-js.md index 66f9c55fdc..6bc3abdad3 100644 --- a/packages/website/docs/docs/vanilla-js.md +++ b/packages/website/docs/docs/vanilla-js.md @@ -53,4 +53,4 @@ const editor = new BlockNoteEditor({ ## Example -For an example of a how to set up your custom UI factories, see the [Vanilla JS example](https://github.com/YousefED/BlockNote/blob/main/examples/vanilla/) in the repository. +For an example of a how to set up your custom UI factories, see the [Vanilla JS example](https://github.com/TypeCellOS/BlockNote/blob/main/examples/vanilla/) in the repository. diff --git a/packages/website/docs/index.md b/packages/website/docs/index.md index e7537efdc9..08251bba41 100644 --- a/packages/website/docs/index.md +++ b/packages/website/docs/index.md @@ -24,7 +24,7 @@ hero: # link: /docs # - theme: alt # text: View on GitHub - # link: https://github.com/yousefed/blocknote + # link: https://github.com/TypeCellOS/BlockNote ---