@dxos/react-ui-editor 0.4.10-main.d4e372f → 0.4.10-main.d51f2c2

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

@@ -6,7 +6,8 @@ import '@dxosTheme';
 
 import React, { type FC, useState } from 'react';
 
-import { TextObject } from '@dxos/echo-schema';
+import { TextV0Type } from '@braneframe/types';
+import { createDocAccessor, create } from '@dxos/echo-schema';
 import { PublicKey } from '@dxos/keys';
 import { faker } from '@dxos/random';
 import { Tooltip, useThemeContext } from '@dxos/react-ui';
@@ -28,26 +29,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 +61,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 { Filter, DocAccessor, create, createDocAccessor, type Expando } from '@dxos/echo-schema';
 import { type PublicKey } from '@dxos/keys';
-import { Expando, TextObject, useSpace } from '@dxos/react-client/echo';
+import { 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/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 { toCursor, type DocAccessor, fromCursor } from '@dxos/echo-schema';
 import { log } from '@dxos/log';
 
 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/factories.ts

@@ -162,14 +162,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

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

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 TextObject, type EchoReactiveObject } from '@dxos/echo-schema';
-export declare const useDocAccessor: <T = any>(text: TextObject | 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,EAEL,KAAK,WAAW,EAEhB,KAAK,UAAU,EACf,KAAK,kBAAkB,EACxB,MAAM,mBAAmB,CAAC;AAG3B,eAAO,MAAM,cAAc,kBACnB,UAAU,GAAG,mBAAmB;IAAE,OAAO,EAAE,MAAM,CAAA;CAAE,CAAC;QACnD,MAAM;SAAO,MAAM,GAAG,SAAS;;CASvC,CAAC"}

package/src/hooks/useDocAccessor.ts

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