For new CRDT-enabled items, add a crdt=1 marker attribute

raimohanska · Feb 24, 2024 · 6a32ca9 · 6a32ca9
1 parent f412a87
commit 6a32ca9
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 7 deletions.
diff --git a/YJS_CRDT_WIP.md b/YJS_CRDT_WIP.md
@@ -15,8 +15,6 @@ The Y.js based collaborative editing support is under construction.
 - Persistence: consider storing CRDT snapshot
 - Persistence: make sure the compactor works
 - Persistence: storing bundles with zero events (crdt only)
-- Domain: Migrate existing boards to CRDT or only apply CRDTs for new boards?
-- Domain: Consider if CRDT field values should also be included in the JSON presentation, maybe on save
 - Domain: Currently the initial text "Hello" or "Unnamed area" doesn't get synced in a new text/area. Also the JSON data stays in its initial state
 - UI: Show proper username by the cursor when hovering. Now shows some large number
 - UI: Add a toolbar. Needs some styling - if you now enable toolbar in Quill, it looks broken

diff --git a/common/src/domain.ts b/common/src/domain.ts
@@ -128,7 +128,7 @@ export const ITEM_TYPES = {
  CONTAINER: "container",
 } as const
 export type ItemType = typeof ITEM_TYPES[keyof typeof ITEM_TYPES]
-export type TextItemProperties = ItemProperties & { text: string; fontSize?: number; align?: Align }
+export type TextItemProperties = ItemProperties & { text: string; fontSize?: number; align?: Align; crdt?: 1 }
 export type NoteShape = "round" | "square" | "rect" | "diamond"
 export type Note = TextItemProperties & {
  type: typeof ITEM_TYPES.NOTE
@@ -401,7 +401,7 @@ export function newText(
  height: number = 2,
  z: number = 0,
 ): Text {
- return { id: uuid.v4(), type: "text", text, x, y, width, height, z, color: "none", locked: false }
+ return { id: uuid.v4(), type: "text", text, x, y, width, height, z, color: "none", locked: false, crdt: 1 }
 }
 
 export function newContainer(
@@ -422,6 +422,7 @@ export function newContainer(
  z,
  color: "white",
  locked: false,
+ crdt: 1,
  }
 }
 

diff --git a/frontend/src/board/CollaborativeTextView.tsx b/frontend/src/board/CollaborativeTextView.tsx
@@ -94,6 +94,7 @@ export function CollaborativeTextView({
  onKeyDown={(e) => e.stopPropagation()}
  onKeyUp={(e) => e.stopPropagation()}
  onKeyPress={(e) => e.stopPropagation()}
+ onDoubleClick={(e) => e.stopPropagation()}
  >
  <div className="quill-editor" style={{ width: "100%", height: "100%" }} ref={initQuill} />
  </div>

diff --git a/frontend/src/board/ItemView.tsx b/frontend/src/board/ItemView.tsx
@@ -96,6 +96,7 @@ export const ItemView = ({
  : undefined
  }
  const shape = L.view(item, getItemShape)
+ const itemNow = item.get()
 
  return (
  <span
@@ -139,9 +140,7 @@ export const ItemView = ({
  })}
  />
 
- {type === "note" && <TextView item={item as L.Property<TextItem>} />}
-
- {(type === "text" || type === "container") && (
+ {isTextItem(itemNow) && itemNow.crdt ? (
  <CollaborativeTextView
  item={item as L.Property<TextItem>}
  board={board}
@@ -152,6 +151,8 @@ export const ItemView = ({
  itemFocus={itemFocus}
  crdtStore={boardStore.crdtStore}
  />
+ ) : (
+ <TextView item={item as L.Property<TextItem>} />
  )}
 
  {type === "container" && (