Attach user nicknames to text cursors

frontend/src/store/board-store.ts

@@ -568,6 +568,7 @@ export function BoardStore(
  L.view(state, (s) => s.board?.id),
  L.view(state, (s) => s.status === "online"),
  localBoardItemEvents,
+ sessionInfo,
  getWebSocketRootUrl,
  WebSocketPolyfill,
  )

frontend/src/store/crdt-store.ts

@@ -5,6 +5,7 @@ import * as Y from "yjs"
 import { augmentItemsWithCRDT, getCRDTField, importItemsIntoCRDT } from "../../../common/src/board-crdt-helper"
 import { Id, Item, PersistableBoardItemEvent } from "../../../common/src/domain"
 import { getWebSocketRootUrl } from "./server-connection"
+import { UserSessionState } from "./user-session-store"
 
 type BoardCRDT = ReturnType<typeof BoardCRDT>
 export type WebSocketPolyfill =
@@ -87,15 +88,29 @@ export function CRDTStore(
  currentBoardId: L.Property<Id | undefined>,
  online: L.Property<boolean>,
  localBoardItemEvents: L.EventStream<PersistableBoardItemEvent>,
+ sessionState: L.Property<UserSessionState>,
  getSocketRoot: () => string = getWebSocketRootUrl,
  WebSocketPolyfill: WebSocketPolyfill = WebSocket as any,
 ) {
- let boardCrdt: BoardCRDT | undefined = undefined
+ let boardCrdt = L.atom<BoardCRDT | undefined>(undefined)
 
  currentBoardId.forEach((boardId) => {
- if (boardCrdt && boardCrdt.boardId !== boardId) {
- boardCrdt.disconnect()
- boardCrdt = undefined
+ boardCrdt.modify((prev) => {
+ if (!prev || prev.boardId === boardId) {
+ return prev
+ }
+ prev.disconnect()
+ })
+ })
+
+ const userInfo = L.view(sessionState, (state) => ({
+ name: state.nickname,
+ color: "#35b2dc",
+ }))
+
+ L.view(userInfo, boardCrdt, (u, c) => [u, c] as const).forEach(([u, c]) => {
+ if (c) {
+ c.awareness.setLocalStateField("user", u)
  }
  })
 
@@ -104,17 +119,21 @@ export function CRDTStore(
  throw Error(`Requested CRDT for board ${boardId} but current board is ${currentBoardId.get()}`)
  }
 
- if (!boardCrdt || boardCrdt.boardId !== boardId) {
- boardCrdt = BoardCRDT(boardId, online, localBoardItemEvents, getSocketRoot, WebSocketPolyfill)
- }
- return boardCrdt
+ boardCrdt.modify((prev) => {
+ if (prev) {
+ return prev
+ }
+ return BoardCRDT(boardId, online, localBoardItemEvents, getSocketRoot, WebSocketPolyfill)
+ })
+ return boardCrdt.get()!
  }
 
  function augmentItems(boardId: Id, items: Item[]): Item[] {
- if (!boardCrdt || boardCrdt.boardId !== boardId) {
+ const bc = boardCrdt.get()
+ if (!bc || bc.boardId !== boardId) {
  return items
  }
- return boardCrdt.augmentItems(items)
+ return bc.augmentItems(items)
  }
 
  return {

frontend/src/style/board.scss

@@ -176,13 +176,20 @@
  > .quill-editor {
  width: 100%;
  height: fit-content;
+ overflow: visible;
  > .ql-editor {
  padding: 0.1em;
  ol,
  ul {
  padding: 0;
  }
  }
+ .ql-cursors {
+ .ql-cursor-name {
+ margin: 0.1em 0.4em 0.05em;
+ font-size: min(1rem, 0.7em);
+ }
+ }
  }
  }
 

perf-tester/src/index.ts

@@ -58,6 +58,13 @@ function createTester(nickname: string, boardId: string) {
  L.constant(boardId),
  connection.connected,
  localEvents.pipe(L.filter(isPersistableBoardItemEvent)).applyScope(L.globalScope),
+ L.constant({
+ status: "anonymous",
+ sessionId: null,
+ nickname: nickname,
+ nicknameSetByUser: true,
+ loginSupported: false,
+ }),
  () => WS_ROOT,
  MyWebSocket as any,
  )