Fix cursor key and show self from other tabs

navikt · Aug 21, 2024 · 0c2d58b · 0c2d58b
1 parent 8363b47
commit 0c2d58b
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 14 deletions.
diff --git 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<UserCursor>) => {
-  const { style, selectionStyle = style, navIdent, navn } = data ?? {};
+  const { style, selectionStyle = style, navIdent, navn, tabId } = data ?? {};
 
   const labelRef = useRef<HTMLDivElement>(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) => (
-          <Cursor key={cursor.key as string} {...cursor} />
+          <Cursor key={cursor.data?.tabId} {...cursor} />
         ))}
     </>
   );

diff --git 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
@@ -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}`,