diff --git a/docs/package.json b/docs/package.json index 0d2d376cd4..6104272225 100644 --- a/docs/package.json +++ b/docs/package.json @@ -140,4 +140,4 @@ "y-partykit": "^0.0.33", "yjs": "^13.6.27" } -} +} \ No newline at end of file diff --git a/examples/07-collaboration/04-electric-sql/.bnexample.json b/examples/07-collaboration/04-electric-sql/.bnexample.json new file mode 100644 index 0000000000..29a56bc991 --- /dev/null +++ b/examples/07-collaboration/04-electric-sql/.bnexample.json @@ -0,0 +1,6 @@ +{ + "playground": true, + "docs": true, + "author": "matthewlipski", + "tags": ["Advanced", "Saving/Loading", "Collaboration"] +} diff --git a/examples/07-collaboration/04-electric-sql/README.md b/examples/07-collaboration/04-electric-sql/README.md new file mode 100644 index 0000000000..58296a8e95 --- /dev/null +++ b/examples/07-collaboration/04-electric-sql/README.md @@ -0,0 +1,11 @@ +# Collaborative Editing with ElectricSQL + +In this example, we use ElectricSQL to let multiple users collaborate on a single BlockNote document in real-time. The setup for this demo is more involved than the other collaboration examples, as it requires a running server and has a more fully-fledged UI. Therefore, the demo just uses an iframe element to show a hosted instance of the full ElectricSQL + BlockNote setup, which you can find the code for [here](https://github.com/TypeCellOS/blocknote-electric-example). + +**Try it out:** Open this page (or the [iframe url](https://blocknote-electric-example.vercel.app/)) in a new browser tab or window to see it in action! + +**Relevant Docs:** + +- [Editor Setup](/docs/getting-started/editor-setup) +- [Real-time collaboration](/docs/features/collaboration) +- [ElectricSQL](https://electric-sql.com/) diff --git a/examples/07-collaboration/04-electric-sql/index.html b/examples/07-collaboration/04-electric-sql/index.html new file mode 100644 index 0000000000..a7a5977cc1 --- /dev/null +++ b/examples/07-collaboration/04-electric-sql/index.html @@ -0,0 +1,14 @@ + + + + + Collaborative Editing with ElectricSQL + + + +
+ + + diff --git a/examples/07-collaboration/04-comments/main.tsx b/examples/07-collaboration/04-electric-sql/main.tsx similarity index 100% rename from examples/07-collaboration/04-comments/main.tsx rename to examples/07-collaboration/04-electric-sql/main.tsx diff --git a/examples/07-collaboration/04-electric-sql/package.json b/examples/07-collaboration/04-electric-sql/package.json new file mode 100644 index 0000000000..cbd8e42e4b --- /dev/null +++ b/examples/07-collaboration/04-electric-sql/package.json @@ -0,0 +1,27 @@ +{ + "name": "@blocknote/example-collaboration-electric-sql", + "description": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY", + "private": true, + "version": "0.12.4", + "scripts": { + "start": "vite", + "dev": "vite", + "build:prod": "tsc && vite build", + "preview": "vite preview" + }, + "dependencies": { + "@blocknote/core": "latest", + "@blocknote/react": "latest", + "@blocknote/ariakit": "latest", + "@blocknote/mantine": "latest", + "@blocknote/shadcn": "latest", + "react": "^19.1.0", + "react-dom": "^19.1.0" + }, + "devDependencies": { + "@types/react": "^19.1.0", + "@types/react-dom": "^19.1.0", + "@vitejs/plugin-react": "^4.3.1", + "vite": "^5.3.4" + } +} \ No newline at end of file diff --git a/examples/07-collaboration/04-electric-sql/src/App.tsx b/examples/07-collaboration/04-electric-sql/src/App.tsx new file mode 100644 index 0000000000..10e68bfd35 --- /dev/null +++ b/examples/07-collaboration/04-electric-sql/src/App.tsx @@ -0,0 +1,11 @@ +import "./style.css"; + +export default function App() { + return ( +