test(yjs): Spike

.env.example

@@ -6,4 +6,13 @@ POSTGRES_USER=
 POSTGRES_DB=etherpad-next
 
 # In case you don't use docker compose
-# DATABASE_URL=postgresql://postgres-user:postgres-password@postgres:5432/etherpad-next
+# DATABASE_URL=postgresql://postgres-user:postgres-password@postgres:5432/etherpad-next
+
+# taken from https://github.com/JannikStreek/y-redis/blob/master/.env.template
+### Auth signature
+## The auth server authenticates web clients using json-web-tokens (jwt). 
+## They are generated and validated using the following json-web-keys (jwk).
+## Generate your own keys by calling: `npx 0ecdsa-generate-keypair --name auth`
+## These keys should be kept secret!
+AUTH_PUBLIC_KEY=
+AUTH_PRIVATE_KEY=

components/NoteBook/Editor/index.stories.tsx

@@ -0,0 +1,12 @@
+import Editor from '.';
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
+type Story = StoryObj<typeof Editor>;
+type Meta = MetaObj<typeof Editor>;
+
+export const Default: Story = {
+  render: () => <Editor />
+
+};
+
+export default { component: Editor } as Meta;

components/NoteBook/Editor/index.tsx

@@ -0,0 +1,40 @@
+'use client'
+
+import * as Y from 'yjs'
+import { QuillBinding } from 'y-quill'
+import { WebsocketProvider } from 'y-websocket'
+import { FC } from 'react'
+import React, { useState, useRef, useEffect } from 'react';
+import ReactQuill from 'react-quill';
+import 'react-quill/dist/quill.snow.css';
+
+const Editor: FC = () => {
+  const editorRef = useRef<ReactQuill>(null);
+
+  // A Yjs document holds the shared data
+  const ydoc = new Y.Doc()
+  // Define a shared text type on the document
+  const ytext = ydoc.getText('quill')
+
+
+  useEffect(() => {
+    if(editorRef.current) {
+      const provider = new WebsocketProvider(
+        'ws://localhost:3002', 'quill-demo-room2', ydoc
+      )
+      provider.on('status', event => {
+        console.log(event.status) // logs "connected" or "disconnected"
+      })
+      const binding = new QuillBinding(ytext, editorRef.current.getEditor(), provider.awareness)
+
+      return () => {
+        binding?.destroy?.();
+      };
+    }
+  }, [ytext])
+
+  return <ReactQuill theme="snow" ref={editorRef}/>;
+
+}
+
+export default Editor;

components/Sections/Landing/index.tsx

@@ -3,6 +3,7 @@ import BluredBackground from '@/components/Common/Background';
 import Input from '@/components/Common/Input';
 import style from './index.module.css';
 import type { FC } from 'react';
+import Editor from '@/components/NoteBook/Editor';
 
 const Landing: FC = () => (
   <>
@@ -16,6 +17,7 @@ const Landing: FC = () => (
       <form>
         <Input name="note-book-name" placeholder="Note Book Name" type="text" />
         <Button type="submit">Create New Note Book</Button>
+        <Editor ></Editor>
       </form>
     </main>
   </>

docker-compose.yml

@@ -25,6 +25,28 @@ services:
     restart: always
     ports:
       - 3000:3000
+      # for storybooks
+      - 6006:6006 
+
+  y-redis:
+    build: https://github.com:JannikStreek/y-redis#test-spike
+    tty: true
+    stdin_open: true
+    depends_on:
+      - postgres
+      - redis
+    ports:
+      - "3002:3002"
+      # auth server
+      - "5173:5173"
+    environment:
+      POSTGRES: postgres://${POSTGRES_USER:?}:${POSTGRES_PASSWORD:?}@postgres:5432/${POSTGRES_DB:?}
+      REDIS: redis://redis:6379
+      PORT: 3002
+      AUTH_PUBLIC_KEY: ${AUTH_PUBLIC_KEY:?}
+      AUTH_PRIVATE_KEY: ${AUTH_PRIVATE_KEY:?}
+      AUTH_PERM_CALLBACK: http://y-redis:5173/auth/perm
+      # YDOC_UPDATE_CALLBACK: http://y-redis:5173/ydoc
 
   postgres:
     image: postgres:15-alpine
@@ -39,11 +61,20 @@ services:
     restart: always
     # Exposing the port is not needed unless you want to access this database instance from the host.
     # Be careful when other postgres docker container are running on the same port
-    # ports:
-    #   - "5432:5432"
+    ports:
+      - "5432:5432"
     volumes:
       - postgres_data:/var/lib/postgresql/data/pgdata
 
+  redis:
+    image: redis:7.2.4-alpine
+    restart: always
+    ports:
+      - '6379:6379'
+    volumes: 
+      - redis:/data
+
 volumes:
   postgres_data:
   node_modules:
+  redis: