Skip to content

Commit 71792c2

Browse files
jakelazaroffjakelazaroff
authored
docs: Add Y-Sweet (#1297)
* Add Y-Sweet to collaboration sections * Fix typos * Improve docs README * Use link to blocknote tutorial on jamsocket
1 parent a53613a commit 71792c2

File tree

15 files changed

+259
-27
lines changed

15 files changed

+259
-27
lines changed

‎docs/README.md

+10-25
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,21 @@
1-
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
1+
# BlockNote Docs
2+
3+
This is the code for the [BlockNote documentation website](https://www.blocknotejs.org).
4+
5+
If you're looking to work on BlockNote itself, check the [`packages`](/packages/) folder.
26

37
## Getting Started
48

5-
First, run the development server:
9+
First, run `npm run build` in the repository root.
10+
11+
Next, run the development server:
612

713
```bash
814
npm run dev
9-
# or
10-
yarn dev
11-
# or
12-
pnpm dev
13-
# or
14-
bun dev
1515
```
1616

1717
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
1818

19-
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
20-
21-
This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
22-
23-
## Learn More
24-
25-
To learn more about Next.js, take a look at the following resources:
26-
27-
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
28-
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
29-
30-
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
31-
32-
## Deploy on Vercel
33-
34-
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
19+
## Merging
3520

36-
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
21+
Open a pull request to the [BlockNote GitHub repo](https://github.com/TypeCellOS/BlockNote). Pull requests will automatically be deployed to a preview environment.

‎docs/pages/docs/advanced/real-time-collaboration.mdx

+1
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@ When a user edits the document, an incremental change (or "update") is captured
4949

5050
- [Liveblocks](https://liveblocks.io/yjs) A fully hosted WebSocket infrastructure and persisted data store for Yjs documents. Includes webhooks, REST API, and browser DevTools, all for Yjs
5151
- [PartyKit](https://www.partykit.io/) A serverless provider that runs on Cloudflare
52+
- [Y-Sweet](https://jamsocket.com/y-sweet) An open-source provider that runs fully managed on [Jamsocket](https://jamsocket.com) or self-hosted in your own cloud
5253
- [Hocuspocus](https://www.hocuspocus.dev/) open source and extensible Node.js server with pluggable storage (scales with Redis)
5354
- [y-websocket](https://github.com/yjs/y-websocket) provider that you can connect to your own websocket server
5455
- [y-indexeddb](https://github.com/yjs/y-indexeddb) for offline storage

‎examples/07-collaboration/01-partykit/README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
In this example, we use PartyKit to let multiple users collaborate on a single BlockNote document in real-time.
44

5-
**Try it out:** Open this page ion a new browser tab or window to see it in action!
5+
**Try it out:** Open this page in a new browser tab or window to see it in action!
66

77
**Relevant Docs:**
88

‎examples/07-collaboration/02-liveblocks/README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
In this example, we use Liveblocks to let multiple users collaborate on a single BlockNote document in real-time.
44

5-
**Try it out:** Open this page ion a new browser tab or window to see it in action!
5+
**Try it out:** Open this page in a new browser tab or window to see it in action!
66

77
**Relevant Docs:**
88

‎examples/07-collaboration/03-y-sweet/.bnexample.json

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"playground": true,
3+
"docs": true,
4+
"author": "jakelazaroff",
5+
"tags": ["Advanced", "Saving/Loading", "Collaboration"],
6+
"dependencies": {
7+
"@y-sweet/react": "^0.6.3"
8+
}
9+
}

‎examples/07-collaboration/03-y-sweet/App.tsx

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
"use client";
2+
3+
import { useYDoc, useYjsProvider, YDocProvider } from "@y-sweet/react";
4+
import { useCreateBlockNote } from "@blocknote/react";
5+
import { BlockNoteView } from "@blocknote/mantine";
6+
7+
import "@blocknote/mantine/style.css";
8+
9+
export default function App() {
10+
const docId = "my-blocknote-document";
11+
12+
return (
13+
<YDocProvider
14+
docId={docId}
15+
authEndpoint="https://demos.y-sweet.dev/api/auth">
16+
<Document />
17+
</YDocProvider>
18+
);
19+
}
20+
21+
function Document() {
22+
const provider = useYjsProvider();
23+
const doc = useYDoc();
24+
25+
const editor = useCreateBlockNote({
26+
collaboration: {
27+
provider,
28+
fragment: doc.getXmlFragment("blocknote"),
29+
user: { color: "#ff0000", name: "My Username" },
30+
},
31+
});
32+
33+
return <BlockNoteView editor={editor} />;
34+
}

‎examples/07-collaboration/03-y-sweet/README.md

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
# Collaborative Editing with Y-Sweet
2+
3+
In this example, we use Y-Sweet to let multiple users collaborate on a single BlockNote document in real-time.
4+
5+
**Try it out:** Open the [Y-Sweet BlockNote demo](https://demos.y-sweet.dev/blocknote) in multiple browser tabs to see it in action!
6+
7+
**Relevant Docs:**
8+
9+
- [Y-Sweet on Jamsocket](https://docs.jamsocket.com/y-sweet/tutorials/blocknote)
10+
- [Editor Setup](/docs/editor-basics/setup)

‎examples/07-collaboration/03-y-sweet/index.html

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<html lang="en">
2+
<head>
3+
<script>
4+
<!-- AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY -->
5+
</script>
6+
<meta charset="UTF-8" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8+
<title>Collaborative Editing with Y-Sweet</title>
9+
</head>
10+
<body>
11+
<div id="root"></div>
12+
<script type="module" src="./main.tsx"></script>
13+
</body>
14+
</html>

‎examples/07-collaboration/03-y-sweet/main.tsx

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
// AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY
2+
import React from "react";
3+
import { createRoot } from "react-dom/client";
4+
import App from "./App";
5+
6+
const root = createRoot(document.getElementById("root")!);
7+
root.render(
8+
<React.StrictMode>
9+
<App />
10+
</React.StrictMode>
11+
);

‎examples/07-collaboration/03-y-sweet/package.json

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
{
2+
"name": "@blocknote/example-y-sweet",
3+
"description": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
4+
"private": true,
5+
"version": "0.12.4",
6+
"scripts": {
7+
"start": "vite",
8+
"dev": "vite",
9+
"build": "tsc && vite build",
10+
"preview": "vite preview",
11+
"lint": "eslint . --max-warnings 0"
12+
},
13+
"dependencies": {
14+
"@blocknote/core": "latest",
15+
"@blocknote/react": "latest",
16+
"@blocknote/ariakit": "latest",
17+
"@blocknote/mantine": "latest",
18+
"@blocknote/shadcn": "latest",
19+
"react": "^18.3.1",
20+
"react-dom": "^18.3.1",
21+
"@y-sweet/react": "^0.6.3"
22+
},
23+
"devDependencies": {
24+
"@types/react": "^18.0.25",
25+
"@types/react-dom": "^18.0.9",
26+
"@vitejs/plugin-react": "^4.3.1",
27+
"eslint": "^8.10.0",
28+
"vite": "^5.3.4"
29+
},
30+
"eslintConfig": {
31+
"extends": [
32+
"../../../.eslintrc.js"
33+
]
34+
},
35+
"eslintIgnore": [
36+
"dist"
37+
]
38+
}

‎examples/07-collaboration/03-y-sweet/tsconfig.json

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
{
2+
"__comment": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
3+
"compilerOptions": {
4+
"target": "ESNext",
5+
"useDefineForClassFields": true,
6+
"lib": [
7+
"DOM",
8+
"DOM.Iterable",
9+
"ESNext"
10+
],
11+
"allowJs": false,
12+
"skipLibCheck": true,
13+
"esModuleInterop": false,
14+
"allowSyntheticDefaultImports": true,
15+
"strict": true,
16+
"forceConsistentCasingInFileNames": true,
17+
"module": "ESNext",
18+
"moduleResolution": "Node",
19+
"resolveJsonModule": true,
20+
"isolatedModules": true,
21+
"noEmit": true,
22+
"jsx": "react-jsx",
23+
"composite": true
24+
},
25+
"include": [
26+
"."
27+
],
28+
"__ADD_FOR_LOCAL_DEV_references": [
29+
{
30+
"path": "../../../packages/core/"
31+
},
32+
{
33+
"path": "../../../packages/react/"
34+
}
35+
]
36+
}

‎examples/07-collaboration/03-y-sweet/vite.config.ts

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
// AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY
2+
import react from "@vitejs/plugin-react";
3+
import * as fs from "fs";
4+
import * as path from "path";
5+
import { defineConfig } from "vite";
6+
// import eslintPlugin from "vite-plugin-eslint";
7+
// https://vitejs.dev/config/
8+
export default defineConfig((conf) => ({
9+
plugins: [react()],
10+
optimizeDeps: {},
11+
build: {
12+
sourcemap: true,
13+
},
14+
resolve: {
15+
alias:
16+
conf.command === "build" ||
17+
!fs.existsSync(path.resolve(__dirname, "../../packages/core/src"))
18+
? {}
19+
: ({
20+
// Comment out the lines below to load a built version of blocknote
21+
// or, keep as is to load live from sources with live reload working
22+
"@blocknote/core": path.resolve(
23+
__dirname,
24+
"../../packages/core/src/"
25+
),
26+
"@blocknote/react": path.resolve(
27+
__dirname,
28+
"../../packages/react/src/"
29+
),
30+
} as any),
31+
},
32+
}));

‎package-lock.json

+38
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎playground/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@
3737
"@uppy/status-bar": "^3.1.1",
3838
"@uppy/webcam": "^3.4.2",
3939
"@uppy/xhr-upload": "^3.4.0",
40+
"@y-sweet/react": "^0.6.3",
4041
"docx": "^9.0.2",
4142
"react": "^18.3.1",
4243
"react-dom": "^18.3.1",

‎playground/src/examples.gen.tsx

+23
Original file line numberDiff line numberDiff line change
@@ -1078,6 +1078,29 @@
10781078
"pathFromRoot": "examples/07-collaboration",
10791079
"slug": "collaboration"
10801080
}
1081+
},
1082+
{
1083+
"projectSlug": "y-sweet",
1084+
"fullSlug": "collaboration/y-sweet",
1085+
"pathFromRoot": "examples/07-collaboration/03-y-sweet",
1086+
"config": {
1087+
"playground": true,
1088+
"docs": true,
1089+
"author": "jakelazaroff",
1090+
"tags": [
1091+
"Advanced",
1092+
"Saving/Loading",
1093+
"Collaboration"
1094+
],
1095+
"dependencies": {
1096+
"@y-sweet/react": "^0.6.3"
1097+
} as any
1098+
},
1099+
"title": "Collaborative Editing with Y-Sweet",
1100+
"group": {
1101+
"pathFromRoot": "examples/07-collaboration",
1102+
"slug": "collaboration"
1103+
}
10811104
}
10821105
]
10831106
},

0 commit comments

Comments
 (0)