@dxos/react-ui-editor 0.8.4-main.3a94e84 → 0.8.4-main.406dc2a

package/src/extensions/automerge/automerge.stories.tsx

@@ -2,20 +2,20 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
 import '@preact/signals-react';
 
 import { Repo } from '@automerge/automerge-repo';
 import { BroadcastChannelNetworkAdapter } from '@automerge/automerge-repo-network-broadcastchannel';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useEffect, useState } from 'react';
 
 import { Obj, Ref, Type } from '@dxos/echo';
-import { DocAccessor, createDocAccessor, useQuery, useSpace, type Space, Query } from '@dxos/react-client/echo';
-import { useIdentity, type Identity } from '@dxos/react-client/halo';
-import { ClientRepeater, type ClientRepeatedComponentProps } from '@dxos/react-client/testing';
+import { DocAccessor, Query, type Space, createDocAccessor, useQuery, useSpace } from '@dxos/react-client/echo';
+import { type Identity, useIdentity } from '@dxos/react-client/halo';
+import { type ClientRepeatedComponentProps, ClientRepeater } from '@dxos/react-client/testing';
 import { useThemeContext } from '@dxos/react-ui';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
+import { withTheme } from '@dxos/react-ui/testing';
+import { render } from '@dxos/storybook-utils';
 
 import { editorSlots } from '../../defaults';
 import { useTextEditor } from '../../hooks';
@@ -41,7 +41,7 @@ const Editor = ({ source, autoFocus, space, identity }: EditorProps) => {
     () => ({
       initialValue: DocAccessor.getValue(source),
       extensions: [
-        createBasicExtensions({ placeholder: 'Type here...' }),
+        createBasicExtensions({ placeholder: 'Type here...', search: true }),
         createThemeExtensions({ themeMode, slots: editorSlots }),
         createDataExtensions({ id: 'test', text: source, space, identity }),
       ],
@@ -53,7 +53,7 @@ const Editor = ({ source, autoFocus, space, identity }: EditorProps) => {
   return <div ref={parentRef} className='flex w-full' />;
 };
 
-const Story = () => {
+const DefaultStory = () => {
   const [object1, setObject1] = useState<DocAccessor<TestObject>>();
   const [object2, setObject2] = useState<DocAccessor<TestObject>>();
 
@@ -88,16 +88,6 @@ const Story = () => {
   );
 };
 
-export default {
-  title: 'ui/react-ui-editor/Automerge',
-  component: Editor,
-  decorators: [withTheme, withLayout({ fullscreen: true })],
-  render: () => <Story />,
-  parameters: {
-    translations,
-  },
-};
-
 const EchoStory = ({ spaceKey }: ClientRepeatedComponentProps) => {
   const identity = useIdentity();
   const space = useSpace(spaceKey);
@@ -105,8 +95,9 @@ const EchoStory = ({ spaceKey }: ClientRepeatedComponentProps) => {
   const objects = useQuery(space, Query.type(Type.Expando, { type: 'test' }));
 
   useEffect(() => {
-    if (!source && objects.length) {
-      const source = createDocAccessor(objects[0].content, ['content']);
+    const content = objects[0]?.content.target;
+    if (!source && content) {
+      const source = createDocAccessor(content, ['content']);
       setSource(source);
     }
   }, [objects, source]);
@@ -118,17 +109,33 @@ const EchoStory = ({ spaceKey }: ClientRepeatedComponentProps) => {
   return <Editor source={source} space={space} identity={identity ?? undefined} />;
 };
 
-export const Default = {};
-
-export const WithEcho = {
+const meta = {
+  title: 'ui/react-ui-editor/Automerge',
+  component: Editor as any,
+  render: render(DefaultStory),
   decorators: [withTheme],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const WithEcho: Story = {
   render: () => {
     return (
       <ClientRepeater
         count={2}
         component={EchoStory}
         createSpace
-        onSpaceCreated={async ({ space }) => {
+        onCreateSpace={async ({ space }) => {
           space.db.add(
             Obj.make(Type.Expando, {
               type: 'test',

package/src/extensions/automerge/automerge.ts

@@ -5,23 +5,27 @@
 //
 
 import { next as A } from '@automerge/automerge';
-import { StateField, type Extension } from '@codemirror/state';
+import { type Extension, StateField, Transaction } from '@codemirror/state';
 import { EditorView, ViewPlugin } from '@codemirror/view';
 
-import { type DocAccessor } from '@dxos/react-client/echo';
+import { DocAccessor } from '@dxos/react-client/echo';
+
+import { Cursor } from '../../util';
+import { initialSync } from '../state';
 
 import { cursorConverter } from './cursor';
-import { updateHeadsEffect, isReconcile, type State } from './defs';
+import { type State, isReconcile, updateHeadsEffect } from './defs';
 import { Syncer } from './sync';
-import { Cursor } from '../../util';
 
 export const automerge = (accessor: DocAccessor): Extension => {
   const syncState = StateField.define<State>({
-    create: () => ({
-      path: accessor.path.slice(),
-      lastHeads: A.getHeads(accessor.handle.doc()!),
-      unreconciledTransactions: [],
-    }),
+    create: () => {
+      return {
+        path: accessor.path.slice(),
+        lastHeads: A.getHeads(accessor.handle.doc()!),
+        unreconciledTransactions: [],
+      };
+    },
 
     update: (value, tr) => {
       const result: State = {
@@ -63,6 +67,18 @@ export const automerge = (accessor: DocAccessor): Extension => {
       class {
         constructor(private readonly _view: EditorView) {
           accessor.handle.addListener('change', this._handleChange);
+
+          requestAnimationFrame(() => {
+            const value = DocAccessor.getValue<string>(accessor);
+            const current = this._view.state.doc.toString();
+            if (value !== current) {
+              // TODO(burdon): This attempts to set the initial state, but creates problems.
+              // this._view.dispatch({
+              //   changes: { from: 0, to: this._view.state.doc.length, insert: value },
+              //   annotations: initialSync,
+              // });
+            }
+          });
         }
 
         destroy() {
@@ -76,9 +92,13 @@ export const automerge = (accessor: DocAccessor): Extension => {
     ),
 
     // Reconcile local updates.
-    EditorView.updateListener.of(({ view, changes }) => {
+    EditorView.updateListener.of(({ view, changes, transactions }) => {
       if (!changes.empty) {
-        syncer.reconcile(view, true);
+        // Only reconcile if it's not an initial sync (to avoid loops)
+        const isInitialSync = transactions.some((tr) => tr.annotation(Transaction.userEvent) === initialSync.value);
+        if (!isInitialSync) {
+          syncer.reconcile(view, true);
+        }
       }
     }),
   ];

package/src/extensions/automerge/defs.ts

@@ -5,7 +5,7 @@
 //
 
 import { type Heads, type Prop } from '@automerge/automerge';
-import { Annotation, StateEffect, type StateField, type EditorState, type Transaction } from '@codemirror/state';
+import { Annotation, type EditorState, StateEffect, type StateField, type Transaction } from '@codemirror/state';
 
 export type State = {
   path: Prop[];

package/src/extensions/automerge/sync.ts

@@ -8,9 +8,10 @@ import { next as A } from '@automerge/automerge';
 import { type StateField } from '@codemirror/state';
 import { type EditorView } from '@codemirror/view';
 
+import { log } from '@dxos/log';
 import { type IDocHandle } from '@dxos/react-client/echo';
 
-import { getLastHeads, getPath, isReconcile, reconcileAnnotation, type State, updateHeads } from './defs';
+import { type State, getLastHeads, getPath, isReconcile, reconcileAnnotation, updateHeads } from './defs';
 import { updateAutomerge } from './update-automerge';
 import { updateCodeMirror } from './update-codemirror';
 
@@ -27,7 +28,6 @@ export class Syncer {
   ) {}
 
   reconcile(view: EditorView, editor: boolean): void {
-    // TODO(burdon): Better way to do mutex?
     if (this._pending) {
       return;
     }
@@ -41,7 +41,9 @@ export class Syncer {
     this._pending = false;
   }
 
-  onEditorChange(view: EditorView): void {
+  private onEditorChange(view: EditorView): void {
+    log('onEditorChange');
+
     // Apply the unreconciled transactions to the document.
     const transactions = view.state.field(this._state).unreconciledTransactions.filter((tx) => !isReconcile(tx));
     const newHeads = updateAutomerge(this._state, this._handle, transactions, view.state);
@@ -54,7 +56,9 @@ export class Syncer {
     }
   }
 
-  onAutomergeChange(view: EditorView): void {
+  private onAutomergeChange(view: EditorView): void {
+    log('onAutomergeChange');
+
     // Get the diff between the updated state of the document and the heads and apply that to the codemirror doc.
     const oldHeads = getLastHeads(view.state, this._state);
     const newHeads = A.getHeads(this._handle.doc()!);

package/src/extensions/automerge/update-automerge.ts

@@ -5,7 +5,7 @@
 //
 
 import { next as A, type Heads } from '@automerge/automerge';
-import { type EditorState, type StateField, type Transaction, type Text } from '@codemirror/state';
+import { type EditorState, type StateField, type Text, type Transaction } from '@codemirror/state';
 
 import { type IDocHandle } from '@dxos/react-client/echo';
 

package/src/extensions/autoscroll.ts

@@ -0,0 +1,157 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { StateEffect } from '@codemirror/state';
+import { EditorView, ViewPlugin } from '@codemirror/view';
+
+import { Domino } from '@dxos/react-ui';
+
+const lineHeight = 24;
+
+export const scrollToBottomEffect = StateEffect.define<any>();
+
+export type AutoScrollOptions = {
+  overscroll?: number;
+  throttle?: number;
+};
+
+/**
+ * Extension that supports pinning the scroll position and automatically scrolls to the bottom when content is added.
+ */
+// TODO(burdon): Reconcile with transcript-extension.
+export const autoScroll = ({ overscroll = 4 * lineHeight, throttle = 2_000 }: Partial<AutoScrollOptions> = {}) => {
+  let isThrottled = false;
+  let isPinned = true;
+  let timeout: NodeJS.Timeout | undefined;
+  let buttonContainer: HTMLDivElement | undefined;
+  let lastScrollTop = 0;
+  let scrollCounter = 0;
+
+  const hideScrollbar = (view: EditorView) => {
+    view.scrollDOM.classList.add('cm-hide-scrollbar');
+    clearTimeout(timeout);
+    timeout = setTimeout(() => {
+      view.scrollDOM.classList.remove('cm-hide-scrollbar');
+    }, 1_000);
+  };
+
+  const scrollToBottom = (view: EditorView) => {
+    isPinned = true;
+    scrollCounter = 0;
+    buttonContainer?.classList.add('opacity-0');
+    requestAnimationFrame(() => {
+      hideScrollbar(view);
+      view.scrollDOM.scrollTo({
+        top: view.scrollDOM.scrollHeight,
+        behavior: 'smooth',
+      });
+    });
+  };
+
+  return [
+    // Update listener for logging when scrolling is needed.
+    EditorView.updateListener.of((update) => {
+      // Listen for effects.
+      update.transactions.forEach((transaction) => {
+        for (const effect of transaction.effects) {
+          if (effect.is(scrollToBottomEffect)) {
+            scrollToBottom(update.view);
+          }
+        }
+      });
+
+      // Maybe scroll if doc changed and pinned.
+      if (update.docChanged && isPinned && !isThrottled) {
+        const distanceFromBottom = calcDistance(update.view.scrollDOM);
+        if (distanceFromBottom >= overscroll) {
+          isThrottled = true;
+          requestAnimationFrame(() => {
+            scrollToBottom(update.view);
+          });
+
+          // Reset throttle.
+          setTimeout(() => {
+            isThrottled = false;
+            scrollToBottom(update.view);
+          }, throttle);
+        }
+      }
+    }),
+
+    // Detect user scroll.
+    // NOTE: Multiple scroll events are triggered during programmatic smooth scrolling.
+    EditorView.domEventHandlers({
+      scroll: (event, view) => {
+        const scroller = view.scrollDOM;
+        // Suspect delta goes positive when rendering widgets, so count positive deltas.
+        // TODO(burdon): Detect user scroll directly (wheel, touch, keys, etc.)
+        if (lastScrollTop > scroller.scrollTop) {
+          scrollCounter++;
+        }
+        lastScrollTop = scroller.scrollTop;
+        const distanceFromBottom = calcDistance(scroller);
+        if (distanceFromBottom === 0) {
+          // Pin to bottom.
+          isPinned = true;
+          buttonContainer?.classList.add('opacity-0');
+          scrollCounter = 0;
+        } else if (scrollCounter > 3) {
+          // Break pin if user scrolls up.
+          isPinned = false;
+          buttonContainer?.classList.remove('opacity-0');
+        }
+      },
+    }),
+
+    // Scroll button.
+    ViewPlugin.fromClass(
+      class {
+        constructor(view: EditorView) {
+          const scroller = view.scrollDOM.parentElement;
+          buttonContainer = Domino.of('div')
+            .classNames(true && 'cm-scroll-button transition-opacity duration-300 opacity-0')
+            .children(
+              Domino.of('button')
+                .classNames('dx-button bg-accentSurface')
+                .data('density', 'fine')
+                .children(Domino.of<any>('dx-icon').attributes({ icon: 'ph--arrow-down--regular' }))
+                .on('click', () => {
+                  scrollToBottom(view);
+                }),
+            )
+            .build();
+          scroller?.appendChild(buttonContainer);
+        }
+      },
+    ),
+
+    // Styles.
+    EditorView.theme({
+      '.cm-scroller': {
+        paddingBottom: `${overscroll}px`,
+        scrollbarWidth: 'thin',
+      },
+      '.cm-scroller.cm-hide-scrollbar': {
+        scrollbarWidth: 'none',
+      },
+      '.cm-scroller.cm-hide-scrollbar::-webkit-scrollbar': {
+        display: 'none',
+      },
+
+      '.cm-scroll-button': {
+        position: 'absolute',
+        bottom: '0.5rem',
+        right: '1rem',
+      },
+    }),
+  ];
+};
+
+const calcDistance = (scroller: HTMLElement) => {
+  const scrollTop = scroller.scrollTop;
+  const scrollHeight = scroller.scrollHeight;
+  const clientHeight = scroller.clientHeight;
+  const distanceFromBottom = scrollHeight - (scrollTop + clientHeight);
+  return distanceFromBottom;
+};

package/src/extensions/awareness/awareness.ts

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Annotation, type Extension, RangeSet, type Range } from '@codemirror/state';
+import { Annotation, type Extension, type Range, RangeSet } from '@codemirror/state';
 import {
   Decoration,
   type DecorationSet,
@@ -16,7 +16,7 @@ import {
 import { Event } from '@dxos/async';
 import { Context } from '@dxos/context';
 
-import { singleValueFacet, Cursor, type CursorConverter } from '../../util';
+import { Cursor, type CursorConverter, singleValueFacet } from '../../util';
 
 export interface AwarenessProvider {
   remoteStateChange: Event<void>;

package/src/extensions/comments.ts

@@ -5,25 +5,26 @@
 import { invertedEffects } from '@codemirror/commands';
 import { type ChangeDesc, type Extension, StateEffect, StateField, type Text } from '@codemirror/state';
 import {
-  hoverTooltip,
-  keymap,
   type Command,
   Decoration,
   EditorView,
-  type Rect,
   type PluginValue,
+  type Rect,
   ViewPlugin,
+  hoverTooltip,
+  keymap,
 } from '@codemirror/view';
 import sortBy from 'lodash.sortby';
 import { useEffect } from 'react';
 
-import { debounce, type CleanupFn } from '@dxos/async';
+import { type CleanupFn, debounce } from '@dxos/async';
 import { log } from '@dxos/log';
 import { isNonNullable } from '@dxos/util';
 
+import { type Comment, type Range, type RenderCallback } from '../types';
+import { Cursor, callbackWrapper, singleValueFacet } from '../util';
+
 import { documentId } from './selection';
-import { type RenderCallback, type Comment, type Range } from '../types';
-import { Cursor, singleValueFacet, callbackWrapper } from '../util';
 
 //
 // State management.
@@ -57,7 +58,11 @@ const setCommentState = StateEffect.define<CommentsState>();
  * The ranges are tracked as Automerge cursors from which the absolute indexed ranges can be computed.
  */
 export const commentsState = StateField.define<CommentsState>({
-  create: (state) => ({ id: state.facet(documentId), comments: [], selection: {} }),
+  create: (state) => ({
+    id: state.facet(documentId),
+    comments: [],
+    selection: {},
+  }),
   update: (value, tr) => {
     for (const effect of tr.effects) {
       // Update selection.
@@ -98,16 +103,16 @@ export const commentsState = StateField.define<CommentsState>({
  */
 const styles = EditorView.theme({
   '.cm-comment, .cm-comment-current': {
-    margin: '0 -3px',
-    padding: '3px',
-    borderRadius: '3px',
+    padding: '3px 0',
+    backgroundColor: 'var(--dx-cmCommentSurface)',
+  },
+  '.cm-comment > span, .cm-comment-current > span': {
+    boxDecorationBreak: 'clone',
+    boxShadow: '0 0 1px 3px var(--dx-cmCommentSurface)',
     backgroundColor: 'var(--dx-cmCommentSurface)',
     color: 'var(--dx-cmComment)',
     cursor: 'pointer',
   },
-  '.cm-comment:hover, .cm-comment-current': {
-    textDecoration: 'underline',
-  },
 });
 
 const createCommentMark = (id: string, isCurrent: boolean) =>

package/src/extensions/dnd.ts

@@ -3,7 +3,7 @@
 //
 
 import type { Extension } from '@codemirror/state';
-import { dropCursor, EditorView } from '@codemirror/view';
+import { EditorView, dropCursor } from '@codemirror/view';
 
 export type DNDOptions = { onDrop?: (view: EditorView, event: { files: FileList }) => void };
 

package/src/extensions/factories.ts

@@ -4,10 +4,9 @@
 
 import { closeBrackets, closeBracketsKeymap } from '@codemirror/autocomplete';
 import { defaultKeymap, history, historyKeymap, indentWithTab, standardKeymap } from '@codemirror/commands';
-import { bracketMatching, defaultHighlightStyle, syntaxHighlighting } from '@codemirror/language';
+import { HighlightStyle, bracketMatching, syntaxHighlighting } from '@codemirror/language';
 import { searchKeymap } from '@codemirror/search';
-import { EditorState, type Extension } from '@codemirror/state';
-import { oneDarkHighlightStyle } from '@codemirror/theme-one-dark';
+import { type ChangeSpec, EditorState, type Extension, type TransactionSpec } from '@codemirror/state';
 import {
   EditorView,
   type KeyBinding,
@@ -20,6 +19,7 @@ import {
   placeholder,
   scrollPastEnd,
 } from '@codemirror/view';
+import { vscodeDarkStyle, vscodeLightStyle } from '@uiw/codemirror-theme-vscode';
 import defaultsDeep from 'lodash.defaultsdeep';
 import merge from 'lodash.merge';
 
@@ -29,24 +29,48 @@ import { type DocAccessor, type Space } from '@dxos/react-client/echo';
 import { type Identity } from '@dxos/react-client/halo';
 import { type ThemeMode } from '@dxos/react-ui';
 import { type HuePalette } from '@dxos/react-ui-theme';
-import { hexToHue, isNotFalsy } from '@dxos/util';
+import { hexToHue, isTruthy } from '@dxos/util';
+
+import { editorGutter, editorMonospace } from '../defaults';
+import { type ThemeStyles, defaultTheme } from '../styles';
 
 import { automerge } from './automerge';
 import { SpaceAwarenessProvider, awareness } from './awareness';
 import { focus } from './focus';
-import { editorGutter, editorMonospace } from '../defaults';
-import { type ThemeStyles, defaultTheme } from '../styles';
 
 //
 // Basic
 //
 
-export const preventNewline = EditorState.transactionFilter.of((tr) => (tr.newDoc.lines > 1 ? [] : tr));
+export const filterChars = (chars: RegExp) => {
+  return EditorState.transactionFilter.of((transaction) => {
+    if (!transaction.docChanged) return transaction;
+
+    const changes: ChangeSpec[] = [];
+    transaction.changes.iterChanges((fromA, toA, fromB, toB, text) => {
+      const inserted = text.toString();
+      const filtered = inserted.replace(chars, '');
+      if (inserted !== filtered) {
+        changes.push({
+          from: fromB,
+          to: toB,
+          insert: filtered,
+        });
+      }
+    });
+
+    if (changes.length) {
+      return [transaction, { changes, sequential: true } as TransactionSpec];
+    }
+    return transaction;
+  });
+};
 
 /**
  * https://codemirror.net/docs/extensions
  * https://github.com/codemirror/basic-setup
  * https://github.com/codemirror/basic-setup/blob/main/src/codemirror.ts
+ * https://github.com/codemirror/theme-one-dark
  */
 export type BasicExtensionsOptions = {
   allowMultipleSelections?: boolean;
@@ -68,6 +92,7 @@ export type BasicExtensionsOptions = {
   /** If true user cannot edit the text, but they can still select and copy it. */
   readOnly?: boolean;
   search?: boolean;
+  /** NOTE: Do not use with stack sections. */
   scrollPastEnd?: boolean;
   standardKeymap?: boolean;
   tabSize?: number;
@@ -82,7 +107,7 @@ const defaultBasicOptions: BasicExtensionsOptions = {
   history: true,
   keymap: 'standard',
   lineWrapping: true,
-  search: true,
+  search: false,
 } as const;
 
 const keymaps: { [key: string]: readonly KeyBinding[] } = {
@@ -137,9 +162,9 @@ export const createBasicExtensions = (_props?: BasicExtensionsOptions): Extensio
           preventDefault: true,
           run: () => true,
         },
-      ].filter(isNotFalsy),
+      ].filter(isTruthy),
     ),
-  ].filter(isNotFalsy);
+  ].filter(isTruthy);
 };
 
 //
@@ -157,9 +182,6 @@ export type ThemeExtensionsOptions = {
     scroll?: {
       className?: string;
     };
-    scroller?: {
-      className?: string;
-    };
     content?: {
       className?: string;
     };
@@ -180,41 +202,37 @@ export const fullWidth: ThemeExtensionsOptions['slots'] = {
 
 export const defaultThemeSlots = grow;
 
+export const defaultStyles = {
+  dark: vscodeDarkStyle,
+  light: vscodeLightStyle,
+};
+
 /**
  * https://codemirror.net/examples/styling
  */
 export const createThemeExtensions = ({
   themeMode,
   styles,
-  syntaxHighlighting: _syntaxHighlighting,
-  slots: _slots,
+  syntaxHighlighting: syntaxHighlightingProp,
+  slots: slotsParam,
 }: ThemeExtensionsOptions = {}): Extension => {
-  const slots = defaultsDeep({}, _slots, defaultThemeSlots);
+  const slots = defaultsDeep({}, slotsParam, defaultThemeSlots);
   return [
     EditorView.darkTheme.of(themeMode === 'dark'),
     EditorView.baseTheme(styles ? merge({}, defaultTheme, styles) : defaultTheme),
-    // https://github.com/codemirror/theme-one-dark
-    _syntaxHighlighting &&
-      (themeMode === 'dark' ? syntaxHighlighting(oneDarkHighlightStyle) : syntaxHighlighting(defaultHighlightStyle)),
+    syntaxHighlightingProp &&
+      syntaxHighlighting(HighlightStyle.define(themeMode === 'dark' ? defaultStyles.dark : defaultStyles.light)),
     slots.editor?.className && EditorView.editorAttributes.of({ class: slots.editor.className }),
     slots.content?.className && EditorView.contentAttributes.of({ class: slots.content.className }),
     slots.scroll?.className &&
       ViewPlugin.fromClass(
         class {
           constructor(view: EditorView) {
-            view.scrollDOM.classList.add(slots.scroll.className);
-          }
-        },
-      ),
-    slots.scroller?.className &&
-      ViewPlugin.fromClass(
-        class {
-          constructor(view: EditorView) {
-            view.dom.querySelector('.cm-scroller')?.classList.add(...slots.scroller.className.split(' '));
+            view.scrollDOM.classList.add(...slots.scroll.className.split(/\s+/));
           }
         },
       ),
-  ].filter(isNotFalsy);
+  ].filter(isTruthy);
 };
 
 //
@@ -238,7 +256,6 @@ export const createDataExtensions = <T>({ id, text, space, identity }: DataExten
   if (space && identity) {
     const peerId = identity?.identityKey.toHex();
     const hue = (identity?.profile?.data?.hue as HuePalette | undefined) ?? hexToHue(peerId ?? '0');
-
     extensions.push(
       awareness(
         new SpaceAwarenessProvider({
@@ -246,9 +263,9 @@ export const createDataExtensions = <T>({ id, text, space, identity }: DataExten
           channel: `awareness.${id}`,
           peerId: identity.identityKey.toHex(),
           info: {
-            displayName: identity.profile?.displayName ?? generateName(identity.identityKey.toHex()),
             darkColor: `var(--dx-${hue}Cursor)`,
             lightColor: `var(--dx-${hue}Cursor)`,
+            displayName: identity.profile?.displayName ?? generateName(identity.identityKey.toHex()),
           },
         }),
       ),