diff --git a/frontend/src/components/smart-editor/tabbed-editors/cursors/cursors.tsx b/frontend/src/components/smart-editor/tabbed-editors/cursors/cursors.tsx index 3022f2186..1a30dac0d 100644 --- a/frontend/src/components/smart-editor/tabbed-editors/cursors/cursors.tsx +++ b/frontend/src/components/smart-editor/tabbed-editors/cursors/cursors.tsx @@ -1,14 +1,15 @@ import { RelativeRange } from '@slate-yjs/core'; import { UnknownObject, createZustandStore } from '@udecode/plate-common'; import { CursorData, CursorProps, CursorState, useCursorOverlayPositions } from '@udecode/plate-cursor'; -import { useContext, useRef } from 'react'; +import { useRef } from 'react'; import { styled } from 'styled-components'; -import { StaticDataContext } from '@app/components/app/static-data-context'; import { getColor } from '@app/components/smart-editor/tabbed-editors/cursors/cursor-colors'; +import { TAB_UUID } from '@app/headers'; -interface UserCursor extends CursorData, UnknownObject { +export interface UserCursor extends CursorData, UnknownObject { navn: string; navIdent: string; + tabId: string; } interface YjsCursor { @@ -20,12 +21,12 @@ export const isYjsCursor = (value: unknown): value is YjsCursor => typeof value === 'object' && value !== null && 'selection' in value && 'data' in value; const Cursor = ({ caretPosition, data, disableCaret, disableSelection, selectionRects }: CursorProps) => { - const { style, selectionStyle = style, navIdent, navn } = data ?? {}; + const { style, selectionStyle = style, navIdent, navn, tabId } = data ?? {}; const labelRef = useRef(null); - const caretColor = getColor(navIdent ?? '', 1); - const selectionColor = getColor(navIdent ?? '', 0.2); + const caretColor = getColor(tabId ?? '', 1); + const selectionColor = getColor(tabId ?? '', 0.2); return ( <> @@ -82,7 +83,6 @@ interface CursorOverlayProps { } export const CursorOverlay = ({ containerElement }: CursorOverlayProps) => { - const { user } = useContext(StaticDataContext); const { useStore } = cursorStore; const yjsCursors = useStore(); const { cursors } = useCursorOverlayPositions({ @@ -93,9 +93,9 @@ export const CursorOverlay = ({ containerElement }: CursorOverlayProps) => { return ( <> {cursors - .filter(({ data }) => data?.navIdent !== user.navIdent) + .filter(({ data }) => data?.tabId !== TAB_UUID) .map((cursor) => ( - + ))} ); diff --git a/frontend/src/headers.ts b/frontend/src/headers.ts index 80ae91ec3..7a0118312 100644 --- a/frontend/src/headers.ts +++ b/frontend/src/headers.ts @@ -1,7 +1,7 @@ import { ENVIRONMENT } from '@app/environment'; import { generateTraceParent } from '@app/functions/generate-request-id'; -const tabId = crypto.randomUUID(); +export const TAB_UUID = crypto.randomUUID(); enum HeaderKeys { TRACEPARENT = 'traceparent', @@ -18,13 +18,13 @@ enum QueryKeys { export const getHeaders = () => ({ [HeaderKeys.TRACEPARENT]: generateTraceParent(), [HeaderKeys.VERSION]: ENVIRONMENT.version, - [HeaderKeys.TAB_ID]: tabId, + [HeaderKeys.TAB_ID]: TAB_UUID, }); export const setHeaders = (headers: Headers): Headers => { headers.set(HeaderKeys.TRACEPARENT, generateTraceParent()); headers.set(HeaderKeys.VERSION, ENVIRONMENT.version); - headers.set(HeaderKeys.TAB_ID, tabId); + headers.set(HeaderKeys.TAB_ID, TAB_UUID); return headers; }; @@ -33,5 +33,5 @@ export const getQueryParams = () => { const { version } = ENVIRONMENT; const traceParent = generateTraceParent(); - return `${QueryKeys.VERSION}=${version}&${QueryKeys.TAB_ID}=${tabId}&${QueryKeys.TRACEPARENT}=${traceParent}`; + return `${QueryKeys.VERSION}=${version}&${QueryKeys.TAB_ID}=${TAB_UUID}&${QueryKeys.TRACEPARENT}=${traceParent}`; }; diff --git a/frontend/src/plate/plugins/plugin-sets/saksbehandler.ts b/frontend/src/plate/plugins/plugin-sets/saksbehandler.ts index 3018cc3d2..39db6af3d 100644 --- a/frontend/src/plate/plugins/plugin-sets/saksbehandler.ts +++ b/frontend/src/plate/plugins/plugin-sets/saksbehandler.ts @@ -6,6 +6,8 @@ import { ELEMENT_PARAGRAPH } from '@udecode/plate-paragraph'; import { ELEMENT_TABLE, ELEMENT_TD, ELEMENT_TR } from '@udecode/plate-table'; import { createYjsPlugin } from '@udecode/plate-yjs'; import * as Y from 'yjs'; +import { UserCursor } from '@app/components/smart-editor/tabbed-editors/cursors/cursors'; +import { TAB_UUID } from '@app/headers'; import { CurrentDate } from '@app/plate/components/current-date'; import { EmptyVoid } from '@app/plate/components/empty-void'; import { HeaderFooter } from '@app/plate/components/header-footer'; @@ -124,7 +126,7 @@ export const collaborationSaksbehandlerPlugins = ( createYjsPlugin({ options: { cursorOptions: { - data: { navIdent, navn }, + data: { navIdent, navn, tabId: TAB_UUID } satisfies UserCursor, }, hocuspocusProviderOptions: { url: `/collaboration/behandlinger/${behandlingId}/dokumenter/${dokumentId}`,