@dxos/react-ui-editor 0.4.7-main.e015b9e → 0.4.7-main.e5c4f14

package/src/hooks/useTextModel.ts

@@ -11,12 +11,13 @@ import { type AutomergeTextCompat, getRawDoc } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
 import { isAutomergeObject, type Space, type TextObject } from '@dxos/react-client/echo';
 import { type Identity } from '@dxos/react-client/halo';
+import { hueTokens } from '@dxos/react-ui-theme';
+import { hexToHue } from '@dxos/util';
 
 import { SpaceAwarenessProvider } from './awareness-provider';
 import { type EditorModel, modelState } from './defs';
 import { automerge, awareness } from '../extensions';
 import { type DocAccessor } from '../extensions/automerge/defs';
-import { cursorColor } from '../styles';
 
 export type useTextExtensionsProps = {
   id: string;
@@ -29,6 +30,9 @@ export type useTextExtensionsProps = {
 export const useTextExtensions = ({ id, text, space, identity }: useTextExtensionsProps): Extension[] => {
   const extensions: Extension[] = [automerge(text)];
 
+  const peerId = identity?.identityKey.toHex();
+  const { cursorLightValue, cursorDarkValue } = hueTokens[hexToHue(peerId ?? '0')];
+
   if (space && identity) {
     const awarenessProvider = new SpaceAwarenessProvider({
       space,
@@ -36,8 +40,8 @@ export const useTextExtensions = ({ id, text, space, identity }: useTextExtensio
       peerId: identity.identityKey.toHex(),
       info: {
         displayName: identity.profile?.displayName ?? generateName(identity.identityKey.toHex()),
-        color: cursorColor.color,
-        lightColor: cursorColor.light,
+        color: cursorDarkValue,
+        lightColor: cursorLightValue,
       },
     });
 
@@ -84,6 +88,9 @@ const createModel = ({ space, identity, text }: UseTextModelProps) => {
   const obj = text as any as AutomergeTextCompat;
   const doc = getRawDoc(obj, [obj.field]);
 
+  const peerId = identity?.identityKey.toHex();
+  const { cursorLightValue, cursorDarkValue } = hueTokens[hexToHue(peerId ?? '0')];
+
   const awarenessProvider =
     space &&
     new SpaceAwarenessProvider({
@@ -91,8 +98,8 @@ const createModel = ({ space, identity, text }: UseTextModelProps) => {
       channel: `automerge.awareness.${obj.id}`,
       info: {
         displayName: identity ? identity.profile?.displayName ?? generateName(identity.identityKey.toHex()) : undefined,
-        color: cursorColor.color,
-        lightColor: cursorColor.light,
+        color: cursorLightValue,
+        lightColor: cursorDarkValue,
       },
       peerId: identity?.identityKey.toHex() ?? 'Anonymous',
     });

package/src/styles/index.ts

@@ -2,7 +2,6 @@
 // Copyright 2023 DXOS.org
 //
 
-export * from './cursors';
 export * from './markdown';
 export * from './tokens';
 export * from './layout';

package/dist/types/src/styles/cursors.d.ts

@@ -1,5 +0,0 @@
-export declare const cursorColor: {
-    color: string;
-    light: string;
-};
-//# sourceMappingURL=cursors.d.ts.map

package/dist/types/src/styles/cursors.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"cursors.d.ts","sourceRoot":"","sources":["../../../../src/styles/cursors.ts"],"names":[],"mappings":"AAoBA,eAAO,MAAM,WAAW;;;CAAsD,CAAC"}

package/src/styles/cursors.ts

@@ -1,21 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-// Copied from https://github.com/yjs/y-codemirror.next#example.
-
-import * as random from 'lib0/random';
-
-const cursorColors = [
-  { color: '#30bced', light: '#30bced33' },
-  { color: '#6eeb83', light: '#6eeb8333' },
-  { color: '#ffbc42', light: '#ffbc4233' },
-  { color: '#ecd444', light: '#ecd44433' },
-  { color: '#ee6352', light: '#ee635233' },
-  { color: '#9ac2c9', light: '#9ac2c933' },
-  { color: '#8acb88', light: '#8acb8833' },
-  { color: '#1be7ff', light: '#1be7ff33' },
-];
-
-// Select a random color for this user.
-export const cursorColor = cursorColors[random.uint32() % cursorColors.length];