From 96f7e2a2ac2324e5fc24f8a41e51c9470bdfe2b9 Mon Sep 17 00:00:00 2001 From: Vipin Chaudhary Date: Wed, 1 Oct 2025 18:53:43 +0530 Subject: [PATCH] [WIKI-703] fix: draw.io awareness sync (#4350) * fix : awarness api * refactor: update collaboration-cursor to collaboration-caret --- apps/dev-wiki/ce/hooks/use-editor-flagging.ts | 6 +++--- apps/dev-wiki/ee/hooks/use-editor-flagging.ts | 2 +- apps/live/src/controllers/index.ts | 3 +++ apps/web/ce/hooks/use-editor-flagging.ts | 6 +++--- apps/web/ee/hooks/use-editor-flagging.ts | 2 +- packages/editor/src/core/types/extensions.ts | 2 +- .../editor/src/ee/extensions/collaboration-caret.ts | 2 +- .../editor/src/ee/extensions/document-extensions.tsx | 2 +- .../src/ee/extensions/drawio/hooks/use-awareness.ts | 10 ++++++---- .../mobile-editor/src/hooks/use-editor-flagging.ts | 2 +- 10 files changed, 21 insertions(+), 16 deletions(-) diff --git a/apps/dev-wiki/ce/hooks/use-editor-flagging.ts b/apps/dev-wiki/ce/hooks/use-editor-flagging.ts index 0fc8a6eb4c..63b9620ad3 100644 --- a/apps/dev-wiki/ce/hooks/use-editor-flagging.ts +++ b/apps/dev-wiki/ce/hooks/use-editor-flagging.ts @@ -27,15 +27,15 @@ export type TEditorFlaggingHookProps = { */ export const useEditorFlagging = (props: TEditorFlaggingHookProps): TEditorFlaggingHookReturnType => ({ document: { - disabled: ["ai", "collaboration-cursor"], + disabled: ["ai", "collaboration-caret"], flagged: [], }, liteText: { - disabled: ["ai", "collaboration-cursor"], + disabled: ["ai", "collaboration-caret"], flagged: [], }, richText: { - disabled: ["ai", "collaboration-cursor"], + disabled: ["ai", "collaboration-caret"], flagged: [], }, }); diff --git a/apps/dev-wiki/ee/hooks/use-editor-flagging.ts b/apps/dev-wiki/ee/hooks/use-editor-flagging.ts index 8401123626..ed6b9acf8b 100644 --- a/apps/dev-wiki/ee/hooks/use-editor-flagging.ts +++ b/apps/dev-wiki/ee/hooks/use-editor-flagging.ts @@ -41,7 +41,7 @@ export const useEditorFlagging = (props: TEditorFlaggingHookProps): TEditorFlagg documentDisabled.push("ai"); } if (!isCollaborationCursorEnabled) { - // documentDisabled.push("collaboration-cursor"); + // documentDisabled.push("collaboration-caret"); } if (storeType && !isNestedPagesEnabled(workspaceSlug)) { documentFlagged.push("nested-pages"); diff --git a/apps/live/src/controllers/index.ts b/apps/live/src/controllers/index.ts index d36e5fb067..be5e4d09b5 100644 --- a/apps/live/src/controllers/index.ts +++ b/apps/live/src/controllers/index.ts @@ -1,5 +1,6 @@ import { BroadcastController } from "./broadcast.controller"; import { CollaborationController } from "./collaboration.controller"; +import { ContentController } from "./content.controller"; import { ConvertDocumentController } from "./convert-document.controller"; import { DocumentController } from "./document.controller"; import { HealthController } from "./health.controller"; @@ -12,6 +13,8 @@ export const CONTROLLERS = [ DocumentController, LiveDocumentController, ConvertDocumentController, + // Content service + ContentController, // websocket CollaborationController, BroadcastController, diff --git a/apps/web/ce/hooks/use-editor-flagging.ts b/apps/web/ce/hooks/use-editor-flagging.ts index 2309eea653..634509c3ac 100644 --- a/apps/web/ce/hooks/use-editor-flagging.ts +++ b/apps/web/ce/hooks/use-editor-flagging.ts @@ -28,15 +28,15 @@ export type TEditorFlaggingHookProps = { */ export const useEditorFlagging = (_props: TEditorFlaggingHookProps): TEditorFlaggingHookReturnType => ({ document: { - disabled: ["ai", "collaboration-cursor"], + disabled: ["ai", "collaboration-caret"], flagged: [], }, liteText: { - disabled: ["ai", "collaboration-cursor"], + disabled: ["ai", "collaboration-caret"], flagged: [], }, richText: { - disabled: ["ai", "collaboration-cursor"], + disabled: ["ai", "collaboration-caret"], flagged: [], }, isLoadingIntegrations: false, diff --git a/apps/web/ee/hooks/use-editor-flagging.ts b/apps/web/ee/hooks/use-editor-flagging.ts index 42b72b17b5..b1d58aa571 100644 --- a/apps/web/ee/hooks/use-editor-flagging.ts +++ b/apps/web/ee/hooks/use-editor-flagging.ts @@ -66,7 +66,7 @@ export const useEditorFlagging = (props: TEditorFlaggingHookProps): TEditorFlagg document.disabled.add("ai"); } if (!isCollaborationCursorEnabled) { - document.disabled.add("collaboration-cursor"); + document.disabled.add("collaboration-caret"); } if (storeType && !isNestedPagesEnabled(workspaceSlug)) { document.flagged.add("nested-pages"); diff --git a/packages/editor/src/core/types/extensions.ts b/packages/editor/src/core/types/extensions.ts index 84a707cc87..669199aa55 100644 --- a/packages/editor/src/core/types/extensions.ts +++ b/packages/editor/src/core/types/extensions.ts @@ -1,6 +1,6 @@ export type TExtensions = | "ai" - | "collaboration-cursor" + | "collaboration-caret" | "issue-embed" | "page-embed" | "slash-commands" diff --git a/packages/editor/src/ee/extensions/collaboration-caret.ts b/packages/editor/src/ee/extensions/collaboration-caret.ts index 8452917c34..66954f1210 100644 --- a/packages/editor/src/ee/extensions/collaboration-caret.ts +++ b/packages/editor/src/ee/extensions/collaboration-caret.ts @@ -18,7 +18,7 @@ const renderUserCursor = (user: TUserDetails): HTMLSpanElement => { label.dataset.collaboratorId = user?.id; label.classList.value = - "custom-collaboration-cursor absolute rounded-[3px_3px_3px_0] text-[#0d0d0d] text-xs font-semibold leading-normal -top-[1.3rem] -left-[1px] py-0.5 px-1.5 select-none whitespace-nowrap"; + "custom-collaboration-caret absolute rounded-[3px_3px_3px_0] text-[#0d0d0d] text-xs font-semibold leading-normal -top-[1.3rem] -left-[1px] py-0.5 px-1.5 select-none whitespace-nowrap"; label.setAttribute("style", `background-color: ${user.color}`); label.insertBefore(document.createTextNode(user.name), null); diff --git a/packages/editor/src/ee/extensions/document-extensions.tsx b/packages/editor/src/ee/extensions/document-extensions.tsx index d32df2c6a9..62339cbffc 100644 --- a/packages/editor/src/ee/extensions/document-extensions.tsx +++ b/packages/editor/src/ee/extensions/document-extensions.tsx @@ -195,7 +195,7 @@ const extensionRegistry: TDocumentEditorAdditionalExtensionsRegistry[] = [ }, { // Collaboration cursor extension - isEnabled: (disabledExtensions) => !disabledExtensions.includes("collaboration-cursor"), + isEnabled: (disabledExtensions) => !disabledExtensions.includes("collaboration-caret"), getExtension: ({ provider, userDetails }) => provider && CustomCollaborationCaret({ diff --git a/packages/editor/src/ee/extensions/drawio/hooks/use-awareness.ts b/packages/editor/src/ee/extensions/drawio/hooks/use-awareness.ts index be0b4b4d2f..69c5bd50d4 100644 --- a/packages/editor/src/ee/extensions/drawio/hooks/use-awareness.ts +++ b/packages/editor/src/ee/extensions/drawio/hooks/use-awareness.ts @@ -80,12 +80,14 @@ export const useDrawioAwareness = (editor: Editor, diagramId: string | null) => useEffect(() => { if (!awarenessProvider) return; - const awarenessStates = Array.from(awarenessProvider.states?.entries?.() ?? []) as [ - number, - Record, - ][]; const updateAwarenessUsers = () => { + // Capture fresh awareness states on each update + const awarenessStates = Array.from(awarenessProvider.states?.entries?.() ?? []) as [ + number, + Record, + ][]; + const states = awarenessStates.map(([clientId, state]) => ({ clientId, user: (state.user as TUserDetails) || { color: "", id: "", name: "" }, diff --git a/packages/mobile-editor/src/hooks/use-editor-flagging.ts b/packages/mobile-editor/src/hooks/use-editor-flagging.ts index 9bb7dc61c8..cae813e072 100644 --- a/packages/mobile-editor/src/hooks/use-editor-flagging.ts +++ b/packages/mobile-editor/src/hooks/use-editor-flagging.ts @@ -28,7 +28,7 @@ export const useEditorFlagging = (): { // extensions disabled in the document editor if (!isIssueEmbedEnabled) disabledExtensions?.push("issue-embed"); - if (!isCollaborationCursorEnabled) disabledExtensions?.push("collaboration-cursor"); + if (!isCollaborationCursorEnabled) disabledExtensions?.push("collaboration-caret"); return { disabledExtensions, isIssueEmbedEnabled,