Skip to content

Commit 1c0a53c

Browse files
nperez0111nperez0111
committed
docs: update example code
1 parent 57596ce commit 1c0a53c

1 file changed

Lines changed: 52 additions & 49 deletions

File tree

  • examples/09-ai/04-with-collaboration/src

‎examples/09-ai/04-with-collaboration/src/App.tsx‎

Lines changed: 52 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { BlockNoteEditor } from "@blocknote/core";
22
import { filterSuggestionItems } from "@blocknote/core/extensions";
33
import "@blocknote/core/fonts/inter.css";
44
import { en } from "@blocknote/core/locales";
5+
import { withCollaboration } from "@blocknote/core/yjs";
56
import { BlockNoteView } from "@blocknote/mantine";
67
import "@blocknote/mantine/style.css";
78
import {
@@ -77,58 +78,60 @@ const getSlashMenuItemsWithAI = (editor: BlockNoteEditor<any, any, any>) => [
7778
export default function App() {
7879
const [numGhostWriters, setNumGhostWriters] = useState(1);
7980
const [isPaused, setIsPaused] = useState(false);
80-
const editor = useCreateBlockNote({
81-
collaboration: {
82-
// The Yjs Provider responsible for transporting updates:
83-
provider,
84-
// Where to store BlockNote data in the Y.Doc:
85-
fragment: doc.getXmlFragment("document-store"),
86-
// Information (name and color) for this user:
87-
user: {
88-
name: isGhostWriting
89-
? `Ghost Writer #${ghostWriterIndex}`
90-
: "My Username",
91-
color: isGhostWriting ? "#CCCCCC" : "#00ff00",
92-
},
93-
},
94-
dictionary: {
95-
...en,
96-
ai: aiEn, // add default translations for the AI extension
97-
},
98-
// Register the AI extension
99-
extensions: [
100-
AIExtension({
101-
transport: new DefaultChatTransport({
102-
api: `${BASE_URL}/regular/streamText`,
103-
}),
104-
}),
105-
],
106-
// We set some initial content for demo purposes
107-
initialContent: [
108-
{
109-
type: "heading",
110-
props: {
111-
level: 1,
81+
const editor = useCreateBlockNote(
82+
withCollaboration({
83+
collaboration: {
84+
// The Yjs Provider responsible for transporting updates:
85+
provider,
86+
// Where to store BlockNote data in the Y.Doc:
87+
fragment: doc.getXmlFragment("document-store"),
88+
// Information (name and color) for this user:
89+
user: {
90+
name: isGhostWriting
91+
? `Ghost Writer #${ghostWriterIndex}`
92+
: "My Username",
93+
color: isGhostWriting ? "#CCCCCC" : "#00ff00",
11294
},
113-
content: "Open source software",
114-
},
115-
{
116-
type: "paragraph",
117-
content:
118-
"Open source software refers to computer programs whose source code is made available to the public, allowing anyone to view, modify, and distribute the code. This model stands in contrast to proprietary software, where the source code is kept secret and only the original creators have the right to make changes. Open projects are developed collaboratively, often by communities of developers from around the world, and are typically distributed under licenses that promote sharing and openness.",
11995
},
120-
{
121-
type: "paragraph",
122-
content:
123-
"One of the primary benefits of open source is the promotion of digital autonomy. By providing access to the source code, these programs empower users to control their own technology, customize software to fit their needs, and avoid vendor lock-in. This level of transparency also allows for greater security, as anyone can inspect the code for vulnerabilities or malicious elements. As a result, users are not solely dependent on a single company for updates, bug fixes, or continued support.",
96+
dictionary: {
97+
...en,
98+
ai: aiEn, // add default translations for the AI extension
12499
},
125-
{
126-
type: "paragraph",
127-
content:
128-
"Additionally, open development fosters innovation and collaboration. Developers can build upon existing projects, share improvements, and learn from each other, accelerating the pace of technological advancement. The open nature of these projects often leads to higher quality software, as bugs are identified and fixed more quickly by a diverse group of contributors. Furthermore, using open source can reduce costs for individuals, businesses, and governments, as it is often available for free and can be tailored to specific requirements without expensive licensing fees.",
129-
},
130-
],
131-
});
100+
// Register the AI extension
101+
extensions: [
102+
AIExtension({
103+
transport: new DefaultChatTransport({
104+
api: `${BASE_URL}/regular/streamText`,
105+
}),
106+
}),
107+
],
108+
// We set some initial content for demo purposes
109+
initialContent: [
110+
{
111+
type: "heading",
112+
props: {
113+
level: 1,
114+
},
115+
content: "Open source software",
116+
},
117+
{
118+
type: "paragraph",
119+
content:
120+
"Open source software refers to computer programs whose source code is made available to the public, allowing anyone to view, modify, and distribute the code. This model stands in contrast to proprietary software, where the source code is kept secret and only the original creators have the right to make changes. Open projects are developed collaboratively, often by communities of developers from around the world, and are typically distributed under licenses that promote sharing and openness.",
121+
},
122+
{
123+
type: "paragraph",
124+
content:
125+
"One of the primary benefits of open source is the promotion of digital autonomy. By providing access to the source code, these programs empower users to control their own technology, customize software to fit their needs, and avoid vendor lock-in. This level of transparency also allows for greater security, as anyone can inspect the code for vulnerabilities or malicious elements. As a result, users are not solely dependent on a single company for updates, bug fixes, or continued support.",
126+
},
127+
{
128+
type: "paragraph",
129+
content:
130+
"Additionally, open development fosters innovation and collaboration. Developers can build upon existing projects, share improvements, and learn from each other, accelerating the pace of technological advancement. The open nature of these projects often leads to higher quality software, as bugs are identified and fixed more quickly by a diverse group of contributors. Furthermore, using open source can reduce costs for individuals, businesses, and governments, as it is often available for free and can be tailored to specific requirements without expensive licensing fees.",
131+
},
132+
],
133+
}),
134+
);
132135

133136
useEffect(() => {
134137
if (!isGhostWriting || isPaused) {

0 commit comments

Comments
 (0)