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

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

@@ -11,11 +11,12 @@ import React, { type FC, type KeyboardEvent, StrictMode, useMemo, useRef, useSta
 import { createRoot } from 'react-dom/client';
 
 import { TextV0Type } from '@braneframe/types';
-import * as E from '@dxos/echo-schema';
+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';
@@ -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,8 +253,7 @@ const Story = ({
   placeholder = 'New document.',
   ...props
 }: StoryProps) => {
-  const [object] = useState(E.object(TextV0Type, { content: text ?? '' }));
-  const accessor = E.getRawDoc(object, ['content']);
+  const [object] = useState(createEchoObject(create(TextV0Type, { content: text ?? '' })));
 
   const viewRef = useRef<EditorView>(null);
   useComments(viewRef.current, id, comments);
@@ -269,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 (
@@ -295,6 +295,8 @@ 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())),

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

@@ -7,9 +7,10 @@ import '@dxosTheme';
 import React, { type FC, useState } from 'react';
 
 import { TextV0Type } from '@braneframe/types';
-import * as E from '@dxos/echo-schema';
+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';
@@ -36,21 +37,18 @@ faker.seed(101);
 
 const Story: FC<{ content: string }> = ({ content }) => {
   const { themeMode } = useThemeContext();
-  const [text] = useState(E.object(TextV0Type, { content }));
-  const id = text.id;
-  const doc = text.content;
-  const accessor = E.getRawDoc(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();
@@ -64,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,11 +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 { Filter, DocAccessor, TextCompatibilitySchema } from '@dxos/echo-schema';
-import * as E from '@dxos/echo-schema';
+import { create, type Expando } from '@dxos/echo-schema';
 import { type PublicKey } from '@dxos/keys';
-import { 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';
@@ -98,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<E.ExpandoType>(Filter.from({ type: 'test' })) ?? {};
+    const { objects = [] } = space?.db.query<Expando>(Filter.from({ type: 'test' })) ?? {};
     if (objects.length) {
-      return E.getRawDoc(objects[0].content, ['content']);
+      return createDocAccessor(objects[0].content, ['content']);
     }
   }, [space]);
 
@@ -125,9 +125,9 @@ export const WithEcho = {
         createSpace
         onCreateSpace={async (space) => {
           space.db.add(
-            E.object({
+            create({
               type: 'test',
-              content: E.object(TextCompatibilitySchema, { content: 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();

package/src/hooks/index.ts

@@ -4,4 +4,3 @@
 
 export * from './useActionHandler';
 export * from './useTextEditor';
-export * from './useDocAccessor';

package/src/hooks/useTextEditor.ts

@@ -36,9 +36,9 @@ export const useTextEditor = (cb: () => UseTextEditorProps = () => ({}), deps: D
       log('create', { id });
 
       // 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): Doesn't catch errors in keymap functions.

package/dist/types/src/hooks/useDocAccessor.d.ts

@@ -1,9 +0,0 @@
-import { type DocAccessor, type EchoReactiveObject } from '@dxos/echo-schema';
-export declare const useDocAccessor: <T = any>(text: EchoReactiveObject<{
-    content: string;
-}>) => {
-    id: string;
-    doc: string | undefined;
-    accessor: DocAccessor<T>;
-};
-//# sourceMappingURL=useDocAccessor.d.ts.map

package/dist/types/src/hooks/useDocAccessor.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useDocAccessor.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useDocAccessor.ts"],"names":[],"mappings":"AAMA,OAAO,EAAqB,KAAK,WAAW,EAAkB,KAAK,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAGjH,eAAO,MAAM,cAAc,kBACnB,mBAAmB;IAAE,OAAO,EAAE,MAAM,CAAA;CAAE,CAAC;QACtC,MAAM;SAAO,MAAM,GAAG,SAAS;;CASvC,CAAC"}

package/src/hooks/useDocAccessor.ts

@@ -1,21 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { useMemo } from 'react';
-
-import { createDocAccessor, type DocAccessor, getTextContent, type EchoReactiveObject } from '@dxos/echo-schema';
-
-// TODO(burdon): Remove.
-export const useDocAccessor = <T = any>(
-  text: EchoReactiveObject<{ content: string }>,
-): { id: string; doc: string | undefined; accessor: DocAccessor<T> } => {
-  return useMemo(
-    () => ({
-      id: text.id,
-      doc: getTextContent(text),
-      accessor: createDocAccessor<T>(text),
-    }),
-    [text],
-  );
-};