@dxos/react-ui-editor 0.4.10-main.fa5a270 → 0.4.10-main.fd8ea31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-editor",
-  "version": "0.4.10-main.fa5a270",
+  "version": "0.4.10-main.fd8ea31",
   "description": "Document editing experience within a DXOS shell.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -39,23 +39,23 @@
     "lodash.sortby": "^4.7.0",
     "react-dropzone": "^14.2.3",
     "style-mod": "^4.1.0",
-    "@dxos/automerge": "0.4.10-main.fa5a270",
-    "@dxos/context": "0.4.10-main.fa5a270",
-    "@dxos/async": "0.4.10-main.fa5a270",
-    "@dxos/echo-schema": "0.4.10-main.fa5a270",
-    "@dxos/debug": "0.4.10-main.fa5a270",
-    "@dxos/display-name": "0.4.10-main.fa5a270",
-    "@dxos/invariant": "0.4.10-main.fa5a270",
-    "@dxos/log": "0.4.10-main.fa5a270",
-    "@dxos/react-async": "0.4.10-main.fa5a270",
-    "@dxos/react-ui": "0.4.10-main.fa5a270",
-    "@dxos/react-ui-theme": "0.4.10-main.fa5a270",
-    "@dxos/util": "0.4.10-main.fa5a270",
-    "@dxos/protocols": "0.4.10-main.fa5a270"
+    "@dxos/context": "0.4.10-main.fd8ea31",
+    "@dxos/automerge": "0.4.10-main.fd8ea31",
+    "@dxos/async": "0.4.10-main.fd8ea31",
+    "@dxos/debug": "0.4.10-main.fd8ea31",
+    "@dxos/display-name": "0.4.10-main.fd8ea31",
+    "@dxos/invariant": "0.4.10-main.fd8ea31",
+    "@dxos/echo-schema": "0.4.10-main.fd8ea31",
+    "@dxos/log": "0.4.10-main.fd8ea31",
+    "@dxos/protocols": "0.4.10-main.fd8ea31",
+    "@dxos/react-async": "0.4.10-main.fd8ea31",
+    "@dxos/react-ui-theme": "0.4.10-main.fd8ea31",
+    "@dxos/util": "0.4.10-main.fd8ea31",
+    "@dxos/react-ui": "0.4.10-main.fd8ea31"
   },
   "devDependencies": {
-    "@automerge/automerge-repo-network-broadcastchannel": "^1.1.1",
-    "@phosphor-icons/react": "^2.0.5",
+    "@automerge/automerge-repo-network-broadcastchannel": "^1.1.4",
+    "@phosphor-icons/react": "^2.1.5",
     "@preact/signals-react": "^1.3.8",
     "@testing-library/dom": "^8.17.1",
     "@testing-library/react": "^13.4.0",
@@ -67,31 +67,32 @@
     "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",
     "@types/react-test-renderer": "^17.0.2",
-    "@vitest/browser": "^1.3.1",
-    "@vitest/ui": "^1.3.1",
+    "@vitest/browser": "^1.5.0",
+    "@vitest/ui": "^1.5.0",
     "happy-dom": "^13.3.1",
     "jsdom": "^20.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-test-renderer": "^18.2.0",
-    "vite": "^5.1.5",
+    "vite": "^5.2.9",
     "vite-plugin-top-level-await": "^1.4.1",
     "vite-plugin-wasm": "^3.3.0",
-    "vitest": "^1.3.1",
-    "@dxos/config": "0.4.10-main.fa5a270",
-    "@dxos/keyboard": "0.4.10-main.fa5a270",
-    "@dxos/echo-signals": "0.4.10-main.fa5a270",
-    "@dxos/echo-typegen": "0.4.10-main.fa5a270",
-    "@dxos/random": "0.4.10-main.fa5a270",
-    "@dxos/react-client": "0.4.10-main.fa5a270",
-    "@dxos/react-ui": "0.4.10-main.fa5a270",
-    "@dxos/storybook-utils": "0.4.10-main.fa5a270"
+    "vitest": "^1.5.0",
+    "@braneframe/types": "0.4.10-main.fd8ea31",
+    "@dxos/config": "0.4.10-main.fd8ea31",
+    "@dxos/echo-signals": "0.4.10-main.fd8ea31",
+    "@dxos/keyboard": "0.4.10-main.fd8ea31",
+    "@dxos/random": "0.4.10-main.fd8ea31",
+    "@dxos/echo-typegen": "0.4.10-main.fd8ea31",
+    "@dxos/react-client": "0.4.10-main.fd8ea31",
+    "@dxos/react-ui": "0.4.10-main.fd8ea31",
+    "@dxos/storybook-utils": "0.4.10-main.fd8ea31"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.0.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "@dxos/react-client": "0.4.10-main.fa5a270"
+    "@dxos/react-client": "0.4.10-main.fd8ea31"
   },
   "publishConfig": {
     "access": "public"

package/src/components/TextEditor/TextEditor.stories.tsx

@@ -10,11 +10,13 @@ import defaultsDeep from 'lodash.defaultsdeep';
 import React, { type FC, type KeyboardEvent, StrictMode, useMemo, useRef, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 
-import { TextObject } from '@dxos/echo-schema';
+import { TextV0Type } from '@braneframe/types';
+import { create } from '@dxos/echo-schema';
 import { keySymbols, parseShortcut } from '@dxos/keyboard';
 import { PublicKey } from '@dxos/keys';
 import { log } from '@dxos/log';
 import { faker } from '@dxos/random';
+import { createDocAccessor, createEchoObject } from '@dxos/react-client/echo';
 import { Button, DensityProvider, Input, ThemeProvider, useThemeContext } from '@dxos/react-ui';
 import { baseSurface, defaultTx, getSize, mx, textBlockWidth } from '@dxos/react-ui-theme';
 import { withTheme } from '@dxos/storybook-utils';
@@ -49,7 +51,6 @@ import {
   type CommentsOptions,
   type SelectionState,
 } from '../../extensions';
-import { useDocAccessor } from '../../hooks';
 import translations from '../../translations';
 
 faker.seed(101);
@@ -65,11 +66,11 @@ const text = {
     //
     '## Tasks',
     '',
-    '- [x] decorator',
-    '- [ ] checkbox',
-    '  - [ ] state',
-    '    - [ ] indent',
-    '    - [x] style',
+    `- [x] ${faker.lorem.sentences()}`,
+    `- [ ] ${faker.lorem.sentences()}`,
+    `  - [ ] ${faker.lorem.sentences()}`,
+    `    - [ ] ${faker.lorem.sentences()}`,
+    `    - [x] ${faker.lorem.sentences()}`,
     '',
   ),
 
@@ -77,9 +78,9 @@ const text = {
     //
     '## List',
     '',
-    '- new york',
-    '- london',
-    '- tokyo',
+    `- ${faker.lorem.sentences()}`,
+    `- ${faker.lorem.sentences()}`,
+    `- ${faker.lorem.sentences()}`,
     '',
   ),
 
@@ -87,9 +88,9 @@ const text = {
     //
     '## Numbered',
     '',
-    '1. one',
-    '2. two',
-    '3. three',
+    `1. ${faker.lorem.sentences()}`,
+    `2. ${faker.lorem.sentences()}`,
+    `3. ${faker.lorem.sentences()}`,
     '',
   ),
 
@@ -241,7 +242,7 @@ type StoryProps = {
   comments?: Comment[];
   readonly?: boolean;
   placeholder?: string;
-} & Pick<TextEditorProps, 'extensions'>;
+} & Pick<TextEditorProps, 'selection' | 'extensions'>;
 
 const Story = ({
   id = 'editor-' + PublicKey.random().toHex().slice(0, 8),
@@ -252,7 +253,7 @@ const Story = ({
   placeholder = 'New document.',
   ...props
 }: StoryProps) => {
-  const { accessor } = useDocAccessor(new TextObject(text));
+  const [object] = useState(createEchoObject(create(TextV0Type, { content: text ?? '' })));
 
   const viewRef = useRef<EditorView>(null);
   useComments(viewRef.current, id, comments);
@@ -268,10 +269,10 @@ const Story = ({
           editor: { className: 'min-bs-dvh px-8 bg-white dark:bg-black' },
         },
       }),
-      createDataExtensions({ id, text: accessor }),
+      createDataExtensions({ id, text: createDocAccessor(object, ['content']) }),
       _extensions,
     ],
-    [_extensions],
+    [_extensions, object],
   );
 
   return (
@@ -294,11 +295,13 @@ export default {
   parameters: { translations, layout: 'fullscreen' },
 };
 
+// TODO(burdon): Test invalid inputs (e.g., selection).
+
 const defaults = [
   autocomplete({
     onSearch: (text) => links.filter(({ label }) => label.toLowerCase().includes(text.toLowerCase())),
   }),
-  decorateMarkdown({ renderLinkButton }),
+  decorateMarkdown({ renderLinkButton, selectionChangeDelay: 100 }),
   formattingKeymap(),
   image(),
   table(),

package/src/components/TextEditor/TextEditor.tsx

@@ -16,6 +16,7 @@ import React, {
 } from 'react';
 
 import { log } from '@dxos/log';
+import { useDefaultValue } from '@dxos/react-ui';
 import { isNotFalsy } from '@dxos/util';
 
 import { documentId, editorMode, focusEvent } from '../../extensions';
@@ -51,12 +52,13 @@ export const TextEditor = forwardRef<EditorView | null, TextEditorProps>(
   (
     {
       id,
+      // TODO(wittjosiah): Rename initialText?
       doc,
       selection,
       extensions,
       className,
       autoFocus,
-      scrollTo = EditorView.scrollIntoView(0, { yMargin: 0 }),
+      scrollTo: propsScrollTo,
       moveToEndOfLine,
       debug,
       dataTestId,
@@ -65,6 +67,7 @@ export const TextEditor = forwardRef<EditorView | null, TextEditorProps>(
   ) => {
     // NOTE: Increments by 2 in strict mode.
     const [instanceId] = useState(() => `text-editor-${++instanceCount}`);
+    const scrollTo = useDefaultValue(propsScrollTo, EditorView.scrollIntoView(0, { yMargin: 0 }));
 
     // TODO(burdon): Make tabster optional.
     const tabsterDOMAttribute = useFocusableGroup({ tabBehavior: 'limited' });
@@ -90,10 +93,10 @@ export const TextEditor = forwardRef<EditorView | null, TextEditorProps>(
       //
       // EditorState
       // https://codemirror.net/docs/ref/#state.EditorStateConfig
+      // NOTE: Don't set selection here in case it is invalid (and crashes the state); dispatch below.
       //
       const state = EditorState.create({
         doc,
-        selection,
         extensions: [
           id && documentId.of(id),
           // TODO(burdon): NOTE: Doesn't catch errors in keymap functions.
@@ -150,7 +153,7 @@ export const TextEditor = forwardRef<EditorView | null, TextEditorProps>(
         log('destroy', { id, instanceId });
         view?.destroy();
       };
-    }, [doc, selection, extensions]);
+    }, [id, selection, scrollTo, editorMode, extensions]);
 
     // Focus editor on Enter (e.g., when tabbing to this component).
     const handleKeyUp = useCallback<KeyboardEventHandler<HTMLDivElement>>(

package/src/components/Toolbar/Toolbar.stories.tsx

@@ -6,9 +6,11 @@ import '@dxosTheme';
 
 import React, { type FC, useState } from 'react';
 
-import { TextObject } from '@dxos/echo-schema';
+import { TextV0Type } from '@braneframe/types';
+import { create } from '@dxos/echo-schema';
 import { PublicKey } from '@dxos/keys';
 import { faker } from '@dxos/random';
+import { createDocAccessor } from '@dxos/react-client/echo';
 import { Tooltip, useThemeContext } from '@dxos/react-ui';
 import { textBlockWidth } from '@dxos/react-ui-theme';
 import { withTheme } from '@dxos/storybook-utils';
@@ -28,26 +30,25 @@ import {
   useComments,
   useFormattingState,
 } from '../../extensions';
-import { useActionHandler, useDocAccessor, useTextEditor } from '../../hooks';
+import { useActionHandler, useTextEditor } from '../../hooks';
 import translations from '../../translations';
 
 faker.seed(101);
 
 const Story: FC<{ content: string }> = ({ content }) => {
   const { themeMode } = useThemeContext();
-  const [item] = useState({ text: new TextObject(content) });
-  const { id, doc, accessor } = useDocAccessor(item.text);
+  const [text] = useState(create(TextV0Type, { content }));
   const [formattingState, formattingObserver] = useFormattingState();
   const { parentRef, view } = useTextEditor(() => {
     return {
-      id,
-      doc,
+      id: text.id,
+      doc: text.content,
       extensions: [
         formattingObserver,
         createBasicExtensions(),
         createMarkdownExtensions({ themeMode }),
         createThemeExtensions({ themeMode, slots: { editor: { className: 'p-2' } } }),
-        createDataExtensions({ id, text: accessor }),
+        createDataExtensions({ id: text.id, text: createDocAccessor(text, ['content']) }),
         comments({
           onCreate: ({ cursor }) => {
             const id = PublicKey.random().toHex();
@@ -61,12 +62,12 @@ const Story: FC<{ content: string }> = ({ content }) => {
         table(),
       ],
     };
-  }, [id, accessor, formattingObserver, themeMode]);
+  }, [text, formattingObserver, themeMode]);
 
   const handleAction = useActionHandler(view);
 
   const [_comments, setComments] = useState<Comment[]>([]);
-  useComments(view, id, _comments);
+  useComments(view, text.id, _comments);
 
   return (
     <Tooltip.Provider>

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

@@ -8,10 +8,11 @@ import { BroadcastChannelNetworkAdapter } from '@automerge/automerge-repo-networ
 import '@preact/signals-react';
 import React, { useEffect, useMemo, useState } from 'react';
 
+import { TextV0Type } from '@braneframe/types';
 import { Repo } from '@dxos/automerge/automerge-repo';
-import { createDocAccessor, Filter, DocAccessor } from '@dxos/echo-schema';
+import { create, type Expando } from '@dxos/echo-schema';
 import { type PublicKey } from '@dxos/keys';
-import { Expando, TextObject, useSpace } from '@dxos/react-client/echo';
+import { Filter, DocAccessor, createDocAccessor, useSpace } from '@dxos/react-client/echo';
 import { ClientRepeater } from '@dxos/react-client/testing';
 import { useThemeContext } from '@dxos/react-ui';
 import { withTheme } from '@dxos/storybook-utils';
@@ -97,9 +98,9 @@ const EchoStory = ({ spaceKey }: { spaceKey: PublicKey }) => {
   // const identity = useIdentity();
   const space = useSpace(spaceKey);
   const source = useMemo<DocAccessor | undefined>(() => {
-    const { objects = [] } = space?.db.query(Filter.from({ type: 'test' })) ?? {};
+    const { objects = [] } = space?.db.query<Expando>(Filter.from({ type: 'test' })) ?? {};
     if (objects.length) {
-      return createDocAccessor(objects[0].content);
+      return createDocAccessor(objects[0].content, ['content']);
     }
   }, [space]);
 
@@ -124,9 +125,9 @@ export const WithEcho = {
         createSpace
         onCreateSpace={async (space) => {
           space.db.add(
-            new Expando({
+            create({
               type: 'test',
-              content: new TextObject(initialContent),
+              content: create(TextV0Type, { content: initialContent }),
             }),
           );
         }}

package/src/extensions/automerge/automerge.ts

@@ -8,7 +8,7 @@ import { StateField, type Extension } from '@codemirror/state';
 import { EditorView, ViewPlugin } from '@codemirror/view';
 
 import { next as A } from '@dxos/automerge/automerge';
-import { type DocAccessor } from '@dxos/echo-schema';
+import { type DocAccessor } from '@dxos/react-client/echo';
 
 import { cursorConverter } from './cursor';
 import { updateHeadsEffect, isReconcile, type State } from './defs';

package/src/extensions/automerge/cursor.ts

@@ -2,30 +2,16 @@
 // Copyright 2024 DXOS.org
 //
 
-import get from 'lodash.get';
-
-import { next as A } from '@dxos/automerge/automerge';
-import { type DocAccessor } from '@dxos/echo-schema';
 import { log } from '@dxos/log';
+import { toCursor, type DocAccessor, fromCursor } from '@dxos/react-client/echo';
 
 import { type CursorConverter } from '../cursor';
 
-export const cursorConverter = ({ handle, path }: DocAccessor): CursorConverter => ({
+export const cursorConverter = (accessor: DocAccessor): CursorConverter => ({
   // TODO(burdon): Handle assoc to associate with a previous character.
   toCursor: (pos) => {
-    const doc = handle.docSync();
-    if (!doc) {
-      return '';
-    }
-
-    const value = get(doc, path);
-    if (typeof value === 'string' && value.length <= pos) {
-      return 'end';
-    }
-
     try {
-      // NOTE: Slice is needed because getCursor mutates the array.
-      return A.getCursor(doc, path.slice(), pos);
+      return toCursor(accessor, pos);
     } catch (err) {
       log.catch(err);
       return ''; // In case of invalid request (e.g., wrong document).
@@ -33,27 +19,8 @@ export const cursorConverter = ({ handle, path }: DocAccessor): CursorConverter
   },
 
   fromCursor: (cursor) => {
-    if (cursor === '') {
-      return 0;
-    }
-
-    const doc = handle.docSync();
-    if (!doc) {
-      return 0;
-    }
-
-    if (cursor === 'end') {
-      const value = get(doc, path);
-      if (typeof value === 'string') {
-        return value.length;
-      } else {
-        return 0;
-      }
-    }
-
     try {
-      // NOTE: Slice is needed because getCursor mutates the array.
-      return A.getCursorPosition(doc, path.slice(), cursor);
+      return fromCursor(accessor, cursor);
     } catch (err) {
       log.catch(err);
       return 0; // In case of invalid request (e.g., wrong document).

package/src/extensions/automerge/sync.ts

@@ -8,7 +8,7 @@ import { type StateField } from '@codemirror/state';
 import { type EditorView } from '@codemirror/view';
 
 import { next as A } from '@dxos/automerge/automerge';
-import { type IDocHandle } from '@dxos/echo-schema';
+import { type IDocHandle } from '@dxos/react-client/echo';
 
 import { getLastHeads, getPath, type State, reconcileAnnotation, updateHeads, isReconcile } from './defs';
 import { updateAutomerge } from './update-automerge';

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

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

package/src/extensions/factories.ts

@@ -21,9 +21,8 @@ import {
 import defaultsDeep from 'lodash.defaultsdeep';
 
 import { generateName } from '@dxos/display-name';
-import { type DocAccessor } from '@dxos/echo-schema';
 import { log } from '@dxos/log';
-import { type Space } from '@dxos/react-client/echo';
+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, hueTokens } from '@dxos/react-ui-theme';
@@ -162,14 +161,14 @@ export const createThemeExtensions = ({ theme, themeMode, slots: _slots }: Theme
 
 export type DataExtensionsProps = {
   id: string;
-  text: DocAccessor;
+  text?: DocAccessor;
   space?: Space;
   identity?: Identity | null;
 };
 
 // TODO(burdon): Move out of react-ui-editor (remove echo deps).
 export const createDataExtensions = ({ id, text, space, identity }: DataExtensionsProps): Extension[] => {
-  const extensions: Extension[] = [automerge(text)];
+  const extensions: Extension[] = text ? [automerge(text)] : [];
 
   if (space && identity) {
     const peerId = identity?.identityKey.toHex();