@dxos/react-ui-editor 0.3.11-main.6d5715f → 0.3.11-main.870164f

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-editor",
-  "version": "0.3.11-main.6d5715f",
+  "version": "0.3.11-main.870164f",
   "description": "Document editing experience within a DXOS shell.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -38,20 +38,19 @@
     "y-codemirror.next": "^0.3.2",
     "y-protocols": "^1.0.5",
     "yjs": "^13.6.10",
-    "@dxos/async": "0.3.11-main.6d5715f",
-    "@dxos/context": "0.3.11-main.6d5715f",
-    "@dxos/automerge": "0.3.11-main.6d5715f",
-    "@dxos/display-name": "0.3.11-main.6d5715f",
-    "@dxos/debug": "0.3.11-main.6d5715f",
-    "@dxos/echo-schema": "0.3.11-main.6d5715f",
-    "@dxos/invariant": "0.3.11-main.6d5715f",
-    "@dxos/log": "0.3.11-main.6d5715f",
-    "@dxos/protocols": "0.3.11-main.6d5715f",
-    "@dxos/react-async": "0.3.11-main.6d5715f",
-    "@dxos/react-ui": "0.3.11-main.6d5715f",
-    "@dxos/react-ui-theme": "0.3.11-main.6d5715f",
-    "@dxos/util": "0.3.11-main.6d5715f",
-    "@dxos/text-model": "0.3.11-main.6d5715f"
+    "@dxos/async": "0.3.11-main.870164f",
+    "@dxos/automerge": "0.3.11-main.870164f",
+    "@dxos/display-name": "0.3.11-main.870164f",
+    "@dxos/invariant": "0.3.11-main.870164f",
+    "@dxos/debug": "0.3.11-main.870164f",
+    "@dxos/log": "0.3.11-main.870164f",
+    "@dxos/echo-schema": "0.3.11-main.870164f",
+    "@dxos/protocols": "0.3.11-main.870164f",
+    "@dxos/react-async": "0.3.11-main.870164f",
+    "@dxos/react-ui": "0.3.11-main.870164f",
+    "@dxos/text-model": "0.3.11-main.870164f",
+    "@dxos/react-ui-theme": "0.3.11-main.870164f",
+    "@dxos/util": "0.3.11-main.870164f"
   },
   "devDependencies": {
     "@automerge/automerge-repo-network-broadcastchannel": "^1.0.19",
@@ -67,18 +66,18 @@
     "deepsignal": "1.4.0-shallow.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "@dxos/config": "0.3.11-main.6d5715f",
-    "@dxos/react-client": "0.3.11-main.6d5715f",
-    "@dxos/echo-typegen": "0.3.11-main.6d5715f",
-    "@dxos/echo-signals": "0.3.11-main.6d5715f",
-    "@dxos/react-ui": "0.3.11-main.6d5715f",
-    "@dxos/storybook-utils": "0.3.11-main.6d5715f"
+    "@dxos/config": "0.3.11-main.870164f",
+    "@dxos/echo-typegen": "0.3.11-main.870164f",
+    "@dxos/echo-signals": "0.3.11-main.870164f",
+    "@dxos/react-client": "0.3.11-main.870164f",
+    "@dxos/storybook-utils": "0.3.11-main.870164f",
+    "@dxos/react-ui": "0.3.11-main.870164f"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.0.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "@dxos/react-client": "0.3.11-main.6d5715f"
+    "@dxos/react-client": "0.3.11-main.870164f"
   },
   "publishConfig": {
     "access": "public"

package/src/components/TextEditor/TextEditor.tsx

@@ -77,7 +77,7 @@ export const BaseTextEditor = forwardRef<TextEditorRef, TextEditorProps>(
     >();
     useImperativeHandle(forwardedRef, () => ({ root, state, view }), [view, state, root]);
 
-    // TODO(burdon): Factor out as extension.
+    // TODO(burdon): Factor out?
     const { awareness, peer } = model;
     useEffect(() => {
       if (awareness && peer) {

package/src/components/TextEditor/codemirror.stories.ts

@@ -17,8 +17,7 @@ import { type Identity } from '@dxos/react-client/halo';
 import { joinCommonSpace, TestBuilder, textGenerator } from '@dxos/react-client/testing';
 import { YText } from '@dxos/text-model';
 
-import { YAwarenessProvider } from '../../hooks';
-import { cursorColor } from '../../styles';
+import { cursorColor, SpaceAwarenessProvider } from '../../hooks';
 import { EditorDocument, types as schema } from '../../testing';
 
 export default {
@@ -36,7 +35,7 @@ const updateEditor = async (id: number, editor: HTMLDivElement, identity: Identi
     return;
   }
 
-  const { awareness } = new YAwarenessProvider({ space, doc, channel: `yjs.awareness.${text.id}` });
+  const { awareness } = new SpaceAwarenessProvider({ space, doc, channel: `yjs.awareness.${text.id}` });
   awareness.setLocalStateField('user', {
     name: identity.profile?.displayName ?? generateName(identity.identityKey.toHex()),
     // TODO(wittjosiah): Pick colours from theme based on identity key.

package/src/extensions/comments.ts

@@ -24,9 +24,9 @@ import { invariant } from '@dxos/invariant';
 import { log } from '@dxos/log';
 import { nonNullable } from '@dxos/util';
 
-import { type CommentRange, type EditorModel, type Range } from '../hooks';
+import { callbackWrapper } from './util';
+import { type CommentRange, type EditorModel, modelState, type Range } from '../hooks';
 import { tokens } from '../styles';
-import { callbackWrapper, CursorConverter } from '../util';
 
 // TODO(burdon): Handle delete, cut, copy, and paste (separately) text that includes comment range.
 // TODO(burdon): Consider breaking into separate plugin (since not standalone)? Like mermaid?
@@ -99,8 +99,6 @@ const setCommentState = StateEffect.define<CommentsState>();
 const commentsStateField = StateField.define<CommentsState>({
   create: () => ({ ranges: [] }),
   update: (value, tr) => {
-    const cursorConverter = tr.state.facet(CursorConverter);
-
     for (const effect of tr.effects) {
       // Update selection.
       if (effect.is(setSelection)) {
@@ -109,10 +107,10 @@ const commentsStateField = StateField.define<CommentsState>({
 
       // Update range from store.
       if (effect.is(setCommentRange)) {
-        const { comments } = effect.value;
+        const { model, comments } = effect.value;
         const ranges: ExtendedCommentRange[] = comments
           .map((comment) => {
-            const range = getRangeFromCursor(cursorConverter, comment.cursor);
+            const range = model.getRangeFromCursor!(comment.cursor);
             return range && { ...comment, ...range };
           })
           .filter(nonNullable);
@@ -220,15 +218,14 @@ export const comments = (options: CommentsOptions = {}): Extension => {
    * Create comment thread action.
    */
   const createCommentThread: Command = (view) => {
-    const cursorConverter = view.state.facet(CursorConverter);
-
     invariant(options.onCreate);
     const { head, from, to } = view.state.selection.main;
     if (from === to) {
       return false;
     }
 
-    const relPos = getCursorFromRange(cursorConverter, { from, to });
+    const model = view.state.field(modelState);
+    const relPos = model?.getCursorFromRange?.({ from, to });
     if (relPos) {
       // Create thread via callback.
       const id = callbackWrapper(options.onCreate)(relPos);
@@ -341,19 +338,19 @@ export const comments = (options: CommentsOptions = {}): Extension => {
     // Monitor cursor movement and text updates.
     // TODO(burdon): Is there a better (finer grained) way to do this?
     //
-    EditorView.updateListener.of(({ view, state, changes }) => {
-      const cursorConverter = view.state.facet(CursorConverter);
-
+    EditorView.updateListener.of(({ view, state, startState, changes }) => {
       //
       // Test if need to recompute indexed range if document changes before the end of the range.
       //
       {
         let mod = false;
+        const model = state.field(modelState);
         const { active, ranges } = state.field(commentsStateField);
         changes.iterChanges((from, to, from2, to2) => {
+          invariant(model);
           ranges.forEach((range) => {
             if (from2 === to2) {
-              const newRange = getRangeFromCursor(cursorConverter, range.cursor);
+              const newRange = model.getRangeFromCursor!(range.cursor);
               if (!newRange || newRange.to - newRange.from === 0) {
                 // TODO(burdon): Delete range if empty.
                 log.info('deleted comment', { thread: range.id });
@@ -361,7 +358,7 @@ export const comments = (options: CommentsOptions = {}): Extension => {
             }
 
             if (from <= range.to) {
-              const newRange = getRangeFromCursor(cursorConverter, range.cursor);
+              const newRange = model.getRangeFromCursor!(range.cursor);
               Object.assign(range, newRange);
               mod = true;
             }
@@ -406,16 +403,3 @@ export const comments = (options: CommentsOptions = {}): Extension => {
     }),
   ];
 };
-
-const getCursorFromRange = (cursorConverter: CursorConverter, range: Range) => {
-  const from = cursorConverter.toCursor(range.from);
-  const to = cursorConverter.toCursor(range.to, -1);
-  return [from, to].join(':');
-};
-
-const getRangeFromCursor = (cursorConverter: CursorConverter, cursor: string) => {
-  const parts = cursor.split(':');
-  const from = cursorConverter.fromCursor(parts[0]);
-  const to = cursorConverter.fromCursor(parts[1]);
-  return from && to ? { from, to } : undefined;
-};

package/src/extensions/index.ts

@@ -3,8 +3,6 @@
 //
 
 export * from './autocomplete';
-export * from './automerge';
-export * from './awareness';
 export * from './basic';
 export * from './blast';
 export * from './code';
@@ -19,4 +17,3 @@ export * from './mermaid';
 export * from './table';
 export * from './tasklist';
 export * from './typewriter';
-export * from './yjs';

package/src/{components/TextEditor → hooks/automerge}/automerge.stories.tsx

@@ -2,29 +2,19 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxosTheme';
-
+import '@preact/signals-react'; // Register react integration
 import { BroadcastChannelNetworkAdapter } from '@automerge/automerge-repo-network-broadcastchannel';
 import { EditorView } from '@codemirror/view';
-import '@preact/signals-react'; // Register react integration
 import { basicSetup } from 'codemirror';
 import get from 'lodash.get';
 import React, { useEffect, useRef, useState } from 'react';
 
+// TODO(burdon): Why separate imports?
 import { type Prop } from '@dxos/automerge/automerge';
-import { Repo, type DocHandle } from '@dxos/automerge/automerge-repo';
-import { Filter, setGlobalAutomergePreference } from '@dxos/echo-schema';
-import { type PublicKey } from '@dxos/keys';
-import { Expando, TextObject, useSpace } from '@dxos/react-client/echo';
-import { useIdentity } from '@dxos/react-client/halo';
-import { ClientRepeater } from '@dxos/react-client/testing';
-import { withTheme } from '@dxos/storybook-utils';
+import { type DocHandle, Repo } from '@dxos/automerge/automerge-repo';
 
-import { MarkdownEditor } from './TextEditor';
-import { type IDocHandle, automerge, awareness } from '../../extensions';
-import { useTextModel } from '../../hooks';
-
-// TODO(burdon): Move to components.
+import { type IDocHandle } from './handle';
+import { automergePlugin } from './plugin';
 
 type EditorProps = {
   handle: IDocHandle;
@@ -38,7 +28,7 @@ const Editor = ({ handle, path }: EditorProps) => {
   useEffect(() => {
     const view = (editorRoot.current = new EditorView({
       doc: get(handle.docSync()!, path),
-      extensions: [basicSetup, automerge({ handle, path }), awareness()],
+      extensions: [basicSetup, automergePlugin(handle, path)],
       parent: containerRef.current as any,
     }));
 
@@ -99,53 +89,3 @@ export default {
 };
 
 export const Default = {};
-
-const EchoStory = ({ id, spaceKey }: { id: number; spaceKey: PublicKey }) => {
-  const identity = useIdentity();
-  const space = useSpace(spaceKey);
-  // TODO(dmaretskyi): useQuery doesn't work.
-  const [obj] = space?.db.query(Filter.from({ type: 'test' })).objects ?? [];
-
-  const model = useTextModel({
-    text: obj?.content,
-    identity,
-    space,
-  });
-
-  if (!model) {
-    return null;
-  }
-
-  return (
-    // <div className={mx(fixedInsetFlexLayout, groupSurface)}>
-    <div className='flex justify-center overflow-y-scroll'>
-      <div className='flex flex-col w-[800px] py-16'>
-        <MarkdownEditor model={model} />
-        <div className='flex shrink-0 h-[300px]'></div>
-      </div>
-    </div>
-    // </div>
-  );
-};
-
-export const WithEcho = {
-  render: () => {
-    setGlobalAutomergePreference(true);
-    return (
-      <ClientRepeater
-        count={2}
-        createSpace
-        onCreateSpace={async (space) => {
-          space.db.add(
-            new Expando({
-              type: 'test',
-              content: new TextObject('Hello world!'),
-            }),
-          );
-        }}
-        Component={EchoStory}
-      />
-    );
-  },
-  decorators: [withTheme],
-};

package/src/hooks/automerge/handle.ts

@@ -0,0 +1,14 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import type * as A from '@dxos/automerge/automerge';
+
+export type IDocHandle<T = any> = {
+  docSync(): A.Doc<T> | undefined;
+  change(callback: A.ChangeFn<T>, options?: A.ChangeOptions<T>): void;
+  changeAt(heads: A.Heads, callback: A.ChangeFn<T>, options?: A.ChangeOptions<T>): string[] | undefined;
+
+  addListener(event: 'change', listener: () => void): void;
+  removeListener(event: 'change', listener: () => void): void;
+};

package/src/hooks/automerge/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export { type IDocHandle } from './handle';
+export { automergePlugin, type AutomergePlugin } from './plugin';

package/src/{extensions/automerge/automerge.ts → hooks/automerge/plugin.ts}

@@ -1,34 +1,57 @@
 //
 // Copyright 2023 DXOS.org
-// Copyright 2024 Automerge
-// Ref: https://github.com/automerge/automerge-codemirror
 //
 
-import { Facet, StateField, type Extension, type Transaction } from '@codemirror/state';
+import {
+  Annotation,
+  type EditorState,
+  type Extension,
+  Facet,
+  StateEffect,
+  StateField,
+  type Transaction,
+  type TransactionSpec,
+} from '@codemirror/state';
 import { ViewPlugin, type EditorView, type PluginValue, type ViewUpdate } from '@codemirror/view';
 
-import { next as A } from '@dxos/automerge/automerge';
-import { type Prop } from '@dxos/automerge/automerge';
+import * as automerge from '@dxos/automerge/automerge';
+import { type Heads, type Prop } from '@dxos/automerge/automerge';
 
-import { cursorConverter } from './cursor';
-import { effectType, type IDocHandle, isReconcileTx, type Value } from './defs';
+import { type IDocHandle } from './handle';
 import { PatchSemaphore } from './semaphore';
-import { CursorConverter } from '../../util';
+
+export type Value = {
+  lastHeads: Heads;
+  path: Prop[];
+  unreconciledTransactions: Transaction[];
+};
+
+type UpdateHeads = {
+  newHeads: Heads;
+};
+
+export const effectType = StateEffect.define<UpdateHeads>({});
+
+export const updateHeads = (newHeads: Heads): StateEffect<UpdateHeads> => effectType.of({ newHeads });
+
+export const getLastHeads = (state: EditorState, field: Field): Heads => state.field(field).lastHeads;
+
+export const getPath = (state: EditorState, field: Field): Prop[] => state.field(field).path;
+
+export type Field = StateField<Value>;
 
 const semaphoreFacet = Facet.define<PatchSemaphore, PatchSemaphore>({
   combine: (values) => values.at(-1)!, // Take last.
 });
 
-export type AutomergeOptions = {
-  handle: IDocHandle;
-  path: Prop[];
+export type AutomergePlugin = {
+  extension: Extension;
 };
 
-export const automerge = ({ handle, path }: AutomergeOptions): Extension => {
-  // TODO(burdon): Rename.
+export const automergePlugin = (handle: IDocHandle, path: Prop[]): AutomergePlugin => {
   const stateField: StateField<Value> = StateField.define({
     create: () => ({
-      lastHeads: A.getHeads(handle.docSync()!),
+      lastHeads: automerge.getHeads(handle.docSync()!),
       unreconciledTransactions: [],
       path: path.slice(),
     }),
@@ -84,11 +107,26 @@ export const automerge = ({ handle, path }: AutomergeOptions): Extension => {
   );
 
   return {
-    extension: [
-      CursorConverter.of(cursorConverter(handle, path)),
-      semaphoreFacet.of(semaphore),
-      stateField,
-      viewPlugin,
-    ],
+    extension: [stateField, semaphoreFacet.of(semaphore), viewPlugin],
   };
 };
+
+export const reconcileAnnotationType = Annotation.define<unknown>();
+
+export const isReconcileTx = (tr: Transaction): boolean => !!tr.annotation(reconcileAnnotationType);
+
+export const makeReconcile = (tr: TransactionSpec) => {
+  if (tr.annotations != null) {
+    if (tr.annotations instanceof Array) {
+      tr.annotations = [...tr.annotations, reconcileAnnotationType.of({})];
+    } else {
+      tr.annotations = [tr.annotations, reconcileAnnotationType.of({})];
+    }
+  } else {
+    tr.annotations = [reconcileAnnotationType.of({})];
+  }
+  // return {
+  // ...tr,
+  // annotations: reconcileAnnotationType.of({})
+  // }
+};

package/src/{extensions → hooks}/automerge/semaphore.ts

@@ -1,23 +1,15 @@
 //
 // Copyright 2023 DXOS.org
-// Copyright 2024 Automerge
-// Ref: https://github.com/automerge/automerge-codemirror
 //
 
-import { type StateField } from '@codemirror/state';
+// TODO(burdon): Additional copyright?
+
 import { type EditorView } from '@codemirror/view';
 
 import { next as automerge } from '@dxos/automerge/automerge';
 
-import {
-  getLastHeads,
-  getPath,
-  isReconcileTx,
-  reconcileAnnotationType,
-  updateHeads,
-  type IDocHandle,
-  type Value,
-} from './defs';
+import { type IDocHandle } from './handle';
+import { type Field, isReconcileTx, getPath, reconcileAnnotationType, updateHeads, getLastHeads } from './plugin';
 import { updateAutomerge } from './update-automerge';
 import { updateCodeMirror } from './update-codemirror';
 
@@ -30,10 +22,15 @@ type ChangeFn = (atHeads: Heads, change: (doc: Doc<unknown>) => void) => Heads |
  * TODO(burdon): Comment.
  */
 export class PatchSemaphore {
+  _field!: Field;
   _inReconcile = false;
   _queue: Array<ChangeFn> = [];
 
-  constructor(private readonly _field: StateField<Value>) {}
+  constructor(field?: Field) {
+    if (field !== undefined) {
+      this._field = field;
+    }
+  }
 
   reconcile = (handle: IDocHandle, view: EditorView) => {
     if (this._inReconcile) {
@@ -45,8 +42,9 @@ export class PatchSemaphore {
     const oldHeads = getLastHeads(view.state, this._field);
     let selection = view.state.selection;
 
-    // First undo all the unreconciled transactions.
     const transactions = view.state.field(this._field).unreconciledTransactions.filter((tx) => !isReconcileTx(tx));
+
+    // First undo all the unreconciled transactions.
     const toInvert = transactions.slice().reverse();
     for (const tx of toInvert) {
       const inverted = tx.changes.invert(tx.startState.doc);

package/src/{extensions → hooks}/automerge/update-automerge.ts

@@ -1,17 +1,18 @@
 //
 // Copyright 2023 DXOS.org
-// Copyright 2024 Automerge
-// Ref: https://github.com/automerge/automerge-codemirror
 //
 
-import { type EditorState, type StateField, type Text, type Transaction } from '@codemirror/state';
+// TODO(burdon): Additional copyright?
+
+import { type EditorState, type Text, type Transaction } from '@codemirror/state';
 
 import { next as am, type Heads } from '@dxos/automerge/automerge';
 
-import { type IDocHandle, type Value } from './defs';
+import { type IDocHandle } from './handle';
+import { type Field } from './plugin';
 
 export const updateAutomerge = (
-  field: StateField<Value>,
+  field: Field,
   handle: IDocHandle,
   transactions: Transaction[],
   state: EditorState,

package/src/{extensions → hooks}/automerge/update-codemirror.ts

@@ -1,9 +1,9 @@
 //
 // Copyright 2023 DXOS.org
-// Copyright 2024 Automerge
-// Ref: https://github.com/automerge/automerge-codemirror
 //
 
+// TODO(burdon): Additional copyright?
+
 import { ChangeSet, type ChangeSpec, type EditorSelection, type EditorState } from '@codemirror/state';
 import { type EditorView } from '@codemirror/view';
 
@@ -16,7 +16,7 @@ import {
   type SpliceTextPatch,
 } from '@dxos/automerge/automerge';
 
-import { reconcileAnnotationType } from './defs';
+import { reconcileAnnotationType } from './plugin';
 
 export const updateCodeMirror = (view: EditorView, selection: EditorSelection, target: Prop[], patches: Patch[]) => {
   for (const patch of patches) {
@@ -56,7 +56,6 @@ const handleInsert = (target: Prop[], patch: InsertPatch): Array<ChangeSpec> =>
   if (index == null) {
     return [];
   }
-
   const text = patch.values.map((v) => (v ? v.toString() : '')).join('');
   return [{ from: index, to: index, insert: text }];
 };
@@ -66,7 +65,6 @@ const handleSplice = (target: Prop[], patch: SpliceTextPatch): Array<ChangeSpec>
   if (index == null) {
     return [];
   }
-
   return [{ from: index, insert: patch.value }];
 };
 
@@ -75,7 +73,6 @@ const handleDel = (target: Prop[], patch: DelPatch): Array<ChangeSpec> => {
   if (index == null) {
     return [];
   }
-
   const length = patch.length || 1;
   return [{ from: index, to: index + length }];
 };
@@ -85,32 +82,27 @@ const handlePut = (target: Prop[], patch: PutPatch, state: EditorState): Array<C
   if (index == null) {
     return [];
   }
-
   const length = state.doc.length;
   if (typeof patch.value !== 'string') {
     return []; // TODO(dmaretskyi): How to handle non string values?
   }
-
   return [{ from: 0, to: length, insert: patch.value as any }];
 };
 
-// If the path of the patch is of the form [path, <index>] then we know this is a path to a character
-// within the sequence given by path.
+// If the path of the patch is of the form [path, <index>] then we know this is
+// a path to a character within the sequence given by path
 const charPath = (textPath: Prop[], candidatePath: Prop[]): number | null => {
   if (candidatePath.length !== textPath.length + 1) {
     return null;
   }
-
   for (let i = 0; i < textPath.length; i++) {
     if (textPath[i] !== candidatePath[i]) {
       return null;
     }
   }
-
   const index = candidatePath[candidatePath.length - 1];
   if (typeof index === 'number') {
     return index;
   }
-
   return null;
 };

package/src/hooks/index.ts

@@ -2,7 +2,5 @@
 // Copyright 2023 DXOS.org
 //
 
-export * from './automerge';
-export * from './awareness-provider';
 export * from './useTextModel';
 export * from './yjs';