Skip to content

Commit 634f931

Browse files
yoen-veltyoen-velt
committed
v1.5 blocknote next.js issue
1 parent d6a6b23 commit 634f931

File tree

7 files changed

+342
-106
lines changed

7 files changed

+342
-106
lines changed

‎apps/react/text-editors/libraries/blocknote/blocknote-demo/app/document/DocumentContext.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ export function useCurrentDocument(): CurrentDocument {
4040

4141
setDocumentId(docId);
4242
}
43-
43+
4444
isInitialized.current = true;
4545
}, []);
4646

‎apps/react/text-editors/libraries/blocknote/blocknote-demo/app/page.tsx‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,16 @@ import DocumentCanvas from '@/components/document/document-canvas'
77

88
export default function Home() {
99
// [Velt] Auth provider (reads from app/userAuth/useAppUser)
10-
const { authProvider } = useVeltAuthProvider();
10+
const { authProvider, user } = useVeltAuthProvider();
11+
12+
// Wait for user to be initialized before rendering Velt
13+
if (!user || !authProvider) {
14+
return (
15+
<div style={{ padding: '20px', textAlign: 'center' }}>
16+
Initializing...
17+
</div>
18+
);
19+
}
1120

1221
return (
1322
// [Velt] Wrap app with VeltProvider

‎apps/react/text-editors/libraries/blocknote/blocknote-demo/app/userAuth/AppUserContext.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,9 @@ export function AppUserProvider({
4949
);
5050

5151
useEffect(() => {
52-
if (!documentId || documentId === 'loading') return;
52+
if (!documentId || documentId === 'loading') {
53+
return;
54+
}
5355
if (typeof window === 'undefined') return; // Guard against SSR
5456

5557
try {

‎apps/react/text-editors/libraries/blocknote/blocknote-demo/components/document/BlockNote Component/blocknote.tsx‎

Lines changed: 28 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -1,109 +1,36 @@
1-
import React from 'react';
1+
'use client'
2+
import '@blocknote/core/fonts/inter.css';
3+
import { BlockNoteView } from "@blocknote/mantine";
4+
import '@blocknote/mantine/style.css';
5+
import { useCreateBlockNote } from "@blocknote/react";
6+
import { useVeltBlockNoteCrdtExtension } from "@veltdev/blocknote-crdt-react";
7+
import React from "react";
28

3-
// Figma asset URLs from localhost:3845
4-
const imgBeam = "http://localhost:3845/assets/1dca580172205bd6514721da31fa33abb38741b1.svg";
5-
const imgArrow = "http://localhost:3845/assets/b65843a80a0735fc8f68573d0d340945bf14b64d.svg";
6-
const imgTablerIconGripVertical = "http://localhost:3845/assets/4cfc65018e77819bb8313a9007d03e5ebd60e6b6.svg";
7-
const imgTablerIconPlus = "http://localhost:3845/assets/478c0949a8079ae150f15e45e6e7eef855df6a2e.svg";
8-
const imgTablerIconMessagePlus = "http://localhost:3845/assets/4f8d820332863068d590cc942680670c5485bb32.svg";
9+
const BlockNoteCollaborativeEditor: React.FC = () => {
910

10-
type CursorsPointerProps = {
11-
className?: string;
12-
type?: "Arrow" | "Grab" | "Grabbed" | "Help" | "Move" | "Pointer" | "Pointer active" | "Text" | "ZoomIn" | "ZoomOut";
13-
};
11+
const { collaborationConfig, isLoading } = useVeltBlockNoteCrdtExtension({
12+
editorId: 'velt-blocknote-crdt-demo-28-aug-2-default',
13+
initialContent: JSON.stringify([{ type: "paragraph", content: "" }])
14+
});
1415

15-
function CursorsPointer({ className, type = "Arrow" }: CursorsPointerProps) {
16-
if (type === "Text") {
17-
return (
18-
<div className={className} data-name="Type=Text" data-node-id="321:908">
19-
<div className="absolute flex h-[calc(1px*((var(--transform-inner-width)*1)+(var(--transform-inner-height)*0)))] items-center justify-center left-[calc(50%-0.039px)] top-[calc(50%-0.468px)] translate-x-[-50%] translate-y-[-50%] w-[calc(1px*((var(--transform-inner-height)*1)+(var(--transform-inner-width)*0)))]" style={{ "--transform-inner-width": "15.90625", "--transform-inner-height": "7.0625" } as React.CSSProperties}>
20-
<div className="flex-none rotate-[90deg]">
21-
<div className="h-[7.064px] relative w-[15.921px]" data-name="beam" data-node-id="321:909">
22-
<div className="absolute inset-[-15.02%_-6.28%_-15.05%_-6.28%]">
23-
<img alt="" className="block max-w-none size-full" src={imgBeam} />
24-
</div>
25-
</div>
26-
</div>
27-
</div>
28-
</div>
29-
);
30-
}
31-
return (
32-
<div className={className} data-name="Type=Arrow" data-node-id="321:853">
33-
<div className="absolute h-[17.578px] left-[calc(50%+0.707px)] top-[calc(50%-0.211px)] translate-x-[-50%] translate-y-[-50%] w-[11.414px]" data-name="Arrow" data-node-id="321:854">
34-
<div className="absolute inset-[-4.55%_-15.77%_-15.93%_-15.77%]">
35-
<img alt="" className="block max-w-none size-full" src={imgArrow} />
36-
</div>
37-
</div>
38-
</div>
39-
);
40-
}
16+
// Now call the hook at top level with the config
17+
const editor = useCreateBlockNote({
18+
collaboration: collaborationConfig,
19+
// Add any other static options here
20+
}, [collaborationConfig]); // Deps ensure re-init if config changes
4121

42-
export default function BlockNote() {
4322
return (
44-
<div className="bg-black relative size-full" data-name="BlockNote" data-node-id="452:721">
45-
<div className="absolute flex flex-col font-['Geist_Mono',_monospace] font-normal justify-center leading-[2] left-[393px] opacity-80 text-[16px] text-white top-[737px] translate-y-[-50%] w-[558px]" data-node-id="452:722">
46-
<p className="mb-0 whitespace-pre-wrap">
47-
Google Brain avaswani@google.com
48-
<br aria-hidden="true" />
49-
{`&Noam Shazeer1`}
50-
<br aria-hidden="true" />
51-
Google Brain noam@google.com
52-
<br aria-hidden="true" />
53-
{`&Niki Parmar1`}
54-
<br aria-hidden="true" />
55-
Google Research nikip@google.com
56-
<br aria-hidden="true" />
57-
{`&Jakob Uszkoreit1`}
58-
<br aria-hidden="true" />
59-
Google Research usz@google.com
60-
<br aria-hidden="true" />
61-
{`&Llion Jones1`}
62-
<br aria-hidden="true" />
63-
Google Research llion@google.com
64-
<br aria-hidden="true" />
65-
{`&Aidan N. Gomez1 `}
66-
<br aria-hidden="true" />
67-
{`University of Toronto aidan@cs.toronto.edu &Łukasz Kaiser1`}
68-
<br aria-hidden="true" />
69-
Google Brain lukaszkaiser@google.com
70-
<br aria-hidden="true" />
71-
{`&Illia Polosukhin1 `}
72-
<br aria-hidden="true" />
73-
illia.polosukhin@gmail.com
74-
<br aria-hidden="true" />
75-
<br aria-hidden="true" />
76-
</p>
77-
<p>Equal contribution. Listing order is random. Jakob proposed replacing RNNs with self-attention and started the effort to evaluate this idea. Ashish, with Illia, designed and implemented the first Transformer models and has been crucially involved in every aspect of this work. Noam proposed scaled dot-product attention, multi-head attention and the parameter-free position representation and became the other person involved in nearly every detail. Niki designed, implemented, tuned and evaluated countless model variants in our original codebase and tensor2tensor. Llion also experimented with novel model variants, was responsible for our initial codebase, and efficient inference and visualizations. Lukasz and Aidan spent countless long days designing various parts of and implementing tensor2tensor, replacing our earlier codebase, greatly improving results and massively accelerating our research. Work performed while at Google Brain.Work performed while at Google Research.</p>
78-
</div>
79-
<div className="absolute border-[0px_0px_1px] border-[rgba(255,255,255,0.08)] border-solid box-border content-stretch flex items-center justify-between left-[-486px] pl-[16px] pr-[8px] py-[6.5px] top-0 w-[1171px]" data-node-id="452:723">
80-
<div className="grid-cols-[max-content] grid-rows-[max-content] inline-grid leading-[0] place-items-start relative shrink-0" data-node-id="452:724">
81-
<div className="[grid-area:1_/_1] ml-0 mt-0 overflow-clip relative size-[20px]" data-name="tabler-icon-file-description" data-node-id="452:725">
82-
<p className="absolute font-['Urbanist',_sans-serif] font-normal leading-none left-[calc(50%-7px)] text-[15px] text-nowrap text-white top-[calc(50%-7px)] whitespace-pre" data-node-id="452:726">{`🧠 `}</p>
83-
</div>
84-
<p className="[grid-area:1_/_1] font-['Urbanist',_sans-serif] font-normal leading-none ml-[32px] mt-[2.5px] overflow-ellipsis overflow-hidden relative text-[15px] text-nowrap text-white whitespace-pre" data-node-id="452:727">
85-
Attention Is All You Need
86-
</p>
23+
<>
24+
<div className="editor-container">
25+
<div className="editor-content">
26+
<BlockNoteView editor={editor} key={collaborationConfig ? 'collab-on' : 'collab-off'} />
27+
</div>
28+
<div className="status">
29+
{!isLoading ? 'Connected to collaborative session' : 'Connecting to collaborative session...'}
8730
</div>
8831
</div>
89-
<div className="absolute flex flex-col font-['Urbanist',_sans-serif] font-bold justify-center leading-[0] left-[calc(50%-318.111px)] text-[32px] text-nowrap text-white top-[139px] translate-y-[-50%]" data-node-id="452:781">
90-
<p className="leading-[1.5] whitespace-pre">Attention Is All You Need</p>
91-
</div>
92-
<div className="absolute bg-[#d9d9d9] h-[32px] left-[385px] opacity-[0.12] rounded-[6px] top-[179px] w-[575px]" data-node-id="452:782" />
93-
<div className="absolute left-[364.57px] size-[16px] top-[186px]" data-name="tabler-icon-grip-vertical" data-node-id="452:783">
94-
<img alt="" className="block max-w-none size-full" src={imgTablerIconGripVertical} />
95-
</div>
96-
<div className="absolute flex flex-col font-['Geist_Mono',_monospace] font-normal justify-center leading-[0] left-[393px] text-[16px] text-white top-[195px] translate-y-[-50%] w-[558px]" data-node-id="452:785">
97-
<p className="leading-none">Ashish Vaswani</p>
98-
</div>
99-
<div className="absolute left-[344px] size-[16px] top-[186px]" data-name="tabler-icon-plus" data-node-id="452:786">
100-
<img alt="" className="block max-w-none size-full" src={imgTablerIconPlus} />
101-
</div>
102-
<div className="absolute left-[971px] size-[18px] top-[188px]" data-name="tabler-icon-message-plus" data-node-id="452:788">
103-
<img alt="" className="block max-w-none size-full" src={imgTablerIconMessagePlus} />
104-
</div>
105-
<CursorsPointer type="Text" className="absolute left-[905px] size-[24px] top-[196px]" />
106-
<div className="absolute bg-[rgba(255,195,28,0.12)] border-[#ffc31c] border-[0px_0px_1px] border-solid h-[25px] left-[542px] top-[406px] w-[143px]" data-node-id="452:823" />
107-
</div>
32+
</>
10833
);
109-
}
34+
};
35+
36+
export default BlockNoteCollaborativeEditor;

0 commit comments

Comments
 (0)