@dxos/react-ui-editor 0.4.1 → 0.4.2-main.0e5b9e5

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

@@ -5,11 +5,10 @@
 import '@dxosTheme';
 
 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 '@preact/signals-react';
+import { EditorView } from '@codemirror/view'; // Register react integration.
 import get from 'lodash.get';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import { type Prop } from '@dxos/automerge/automerge';
 import { Repo, type DocHandle } from '@dxos/automerge/automerge-repo';
@@ -21,38 +20,41 @@ import { ClientRepeater } from '@dxos/react-client/testing';
 import { withTheme } from '@dxos/storybook-utils';
 
 import { MarkdownEditor } from './TextEditor';
-import { type IDocHandle, automerge, awareness } from '../../extensions';
-import { useTextModel } from '../../hooks';
+import { type IDocHandle, automerge, awareness, createBasicBundle } from '../../extensions';
+import { useTextEditor, useTextModel } from '../../hooks';
+import { defaultTheme } from '../../themes';
 
-// TODO(burdon): Move to components.
+const initialContent = 'Hello world!';
+
+type TestObject = {
+  text: string;
+};
 
 type EditorProps = {
   handle: IDocHandle;
-  path: Prop[];
+  path?: Prop[];
 };
 
-const Editor = ({ handle, path }: EditorProps) => {
-  const containerRef = useRef<HTMLDivElement | null>(null);
-  const editorRoot = useRef<EditorView>();
-
-  useEffect(() => {
-    const view = (editorRoot.current = new EditorView({
-      doc: get(handle.docSync()!, path),
-      extensions: [basicSetup, automerge({ handle, path }), awareness()],
-      parent: containerRef.current as any,
-    }));
-
-    return () => {
-      view.destroy();
-    };
-  }, []);
+const Editor = ({ handle, path = ['text'] }: EditorProps) => {
+  const { parentRef } = useTextEditor({
+    autoFocus: true,
+    doc: get(handle.docSync()!, path),
+    extensions: [
+      //
+      EditorView.baseTheme(defaultTheme),
+      EditorView.editorAttributes.of({ class: 'p-2 bg-white' }),
+      createBasicBundle({ placeholder: 'Type here...' }),
+      automerge({ handle, path }),
+      awareness(),
+    ],
+  });
 
-  return <div className='codemirror-editor' ref={containerRef} onKeyDown={(evt) => evt.stopPropagation()} />;
+  return <div ref={parentRef} />;
 };
 
 const Story = () => {
-  const [object1, setObject1] = useState<DocHandle<any> | null>(null);
-  const [object2, setObject2] = useState<DocHandle<any> | null>(null);
+  const [object1, setObject1] = useState<DocHandle<TestObject>>();
+  const [object2, setObject2] = useState<DocHandle<TestObject>>();
 
   useEffect(() => {
     queueMicrotask(async () => {
@@ -64,8 +66,8 @@ const Story = () => {
       });
 
       const object1 = repo1.create();
-      object1.change((doc: any) => {
-        doc.text = 'Hello world!';
+      object1.change((doc: TestObject) => {
+        doc.text = initialContent;
       });
 
       const object2 = repo2.find(object1.url);
@@ -81,13 +83,9 @@ const Story = () => {
   }
 
   return (
-    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', width: '100vw' }}>
-      <div>
-        <Editor handle={object1} path={['text']} />
-      </div>
-      <div>
-        <Editor handle={object2} path={['text']} />
-      </div>
+    <div className='grid grid-cols-2 gap-4'>
+      <Editor handle={object1} />
+      <Editor handle={object2} />
     </div>
   );
 };
@@ -100,16 +98,15 @@ export default {
 
 export const Default = {};
 
-const EchoStory = ({ id, spaceKey }: { id: number; spaceKey: PublicKey }) => {
+const EchoStory = ({ spaceKey }: { 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,
+    text: obj?.content,
   });
 
   if (!model) {
@@ -117,18 +114,14 @@ const EchoStory = ({ id, spaceKey }: { id: number; spaceKey: PublicKey }) => {
   }
 
   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 className='flex flex-col w-full p-2'>
+      <MarkdownEditor model={model} slots={{ editor: { className: 'bg-white p-2' } }} />
     </div>
-    // </div>
   );
 };
 
 export const WithEcho = {
+  decorators: [withTheme],
   render: () => {
     return (
       <ClientRepeater
@@ -138,7 +131,7 @@ export const WithEcho = {
           space.db.add(
             new Expando({
               type: 'test',
-              content: new TextObject('Hello world!'),
+              content: new TextObject(initialContent),
             }),
           );
         }}
@@ -146,5 +139,4 @@ export const WithEcho = {
       />
     );
   },
-  decorators: [withTheme],
 };

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

@@ -86,7 +86,7 @@ export default {
 };
 
 const content = [
-  'Demo',
+  '# Demo',
   '',
   'The editor supports **Markdown** styles.',
   '',

package/src/extensions/annotations.ts

@@ -0,0 +1,78 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type EditorState, type Extension, StateField } from '@codemirror/state';
+import { Decoration, EditorView } from '@codemirror/view';
+
+import { isNotFalsy } from '@dxos/util';
+
+import { Cursor } from './cursor';
+
+type Annotation = {
+  cursor: string;
+};
+
+export type AnnotationOptions = {
+  match?: RegExp; // TODO(burdon): Update via hook (e.g., for search).
+};
+
+const annotationMark = Decoration.mark({ class: 'cm-annotation' });
+
+export const annotations = (options: AnnotationOptions = {}): Extension => {
+  // TODO(burdon): Build index of matches and cursors (in background function).
+  //  Define annotation action in prompt. E.g., extract company names. Find links, etc.
+  //  Show popover card. A16Z chain demo. Identify, extract, research, link. Multi-agent.
+  const match = (state: EditorState) => {
+    const annotations: Annotation[] = [];
+    const text = state.doc.toString();
+    if (options.match) {
+      const matches = text.matchAll(options.match);
+      for (const match of matches) {
+        const from = match.index!;
+        const to = from + match[0].length;
+        const cursor = Cursor.getCursorFromRange(state, { from, to });
+        annotations.push({ cursor });
+      }
+    }
+
+    return annotations;
+  };
+
+  const annotationsState = StateField.define<Annotation[]>({
+    create: (state) => {
+      return match(state);
+    },
+    update: (value, tr) => {
+      if (!tr.changes.empty) {
+        return match(tr.state);
+      }
+
+      return value;
+    },
+  });
+
+  return [
+    annotationsState,
+    EditorView.decorations.compute([annotationsState], (state) => {
+      const annotations = state.field(annotationsState);
+      const decorations = annotations
+        .map((annotation) => {
+          const range = Cursor.getRangeFromCursor(state, annotation.cursor);
+          return range && annotationMark.range(range.from, range.to);
+        })
+        .filter(isNotFalsy);
+
+      return Decoration.set(decorations);
+    }),
+    styles,
+  ];
+};
+
+const styles = EditorView.baseTheme({
+  '.cm-annotation': {
+    textDecoration: 'underline',
+    textDecorationStyle: 'wavy',
+    textDecorationColor: 'red',
+  },
+});

package/src/extensions/automerge/automerge.ts

@@ -4,15 +4,14 @@
 // Ref: https://github.com/automerge/automerge-codemirror
 //
 
-import { invertedEffects } from '@codemirror/commands';
-import { StateField, type Extension, type StateEffect } from '@codemirror/state';
+import { StateField, type Extension } from '@codemirror/state';
 import { EditorView, ViewPlugin } from '@codemirror/view';
 
 import { next as A, type Prop } from '@dxos/automerge/automerge';
 
 import { cursorConverter } from './cursor';
 import { updateHeadsEffect, type IDocHandle, isReconcile, type State } from './defs';
-import { PatchSemaphore } from './semaphore';
+import { Syncer } from './sync';
 import { Cursor } from '../cursor';
 
 export type AutomergeOptions = {
@@ -55,7 +54,7 @@ export const automerge = ({ handle, path }: AutomergeOptions): Extension => {
     },
   });
 
-  const semaphore = new PatchSemaphore(handle, syncState);
+  const syncer = new Syncer(handle, syncState);
 
   return [
     Cursor.converter.of(cursorConverter(handle, path)),
@@ -73,7 +72,7 @@ export const automerge = ({ handle, path }: AutomergeOptions): Extension => {
         }
 
         _handleChange() {
-          semaphore.reconcile(this._view);
+          syncer.reconcile(this._view, false);
         }
       },
     ),
@@ -81,23 +80,8 @@ export const automerge = ({ handle, path }: AutomergeOptions): Extension => {
     // Reconcile local updates.
     EditorView.updateListener.of(({ view, changes }) => {
       if (!changes.empty) {
-        semaphore.reconcile(view);
+        syncer.reconcile(view, true);
       }
     }),
-
-    // TODO(burdon): Record undo transactions.
-    //  See https://github.com/yjs/y-codemirror.next/tree/main
-    // https://codemirror.net/examples/inverted-effect
-    invertedEffects.of((tr) => {
-      // Each change results it three transactions: insert, delete, insert.
-      const effects: StateEffect<any>[] = [];
-      if (!tr.changes.empty) {
-        tr.changes.iterChanges((fromA, toA, fromB, toB, inserted) => {
-          // effects.push(effectType.of({});
-        });
-      }
-
-      return effects;
-    }),
   ];
 };

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

@@ -12,11 +12,11 @@ import { next as A } from '@dxos/automerge/automerge';
 import {
   getLastHeads,
   getPath,
-  isReconcile,
-  reconcileAnnotation,
-  updateHeads,
   type IDocHandle,
   type State,
+  reconcileAnnotation,
+  updateHeads,
+  isReconcile,
 } from './defs';
 import { updateAutomerge } from './update-automerge';
 import { updateCodeMirror } from './update-codemirror';
@@ -24,8 +24,8 @@ import { updateCodeMirror } from './update-codemirror';
 /**
  * Implements three-way merge (on each mutation).
  */
-export class PatchSemaphore {
-  private _inReconcile = false;
+export class Syncer {
+  private _pending = false;
 
   // prettier-ignore
   constructor(
@@ -33,46 +33,44 @@ export class PatchSemaphore {
     private readonly _state: StateField<State>
   ) {}
 
-  reconcile(view: EditorView) {
-    if (!this._inReconcile) {
-      this._inReconcile = true;
-      this.doReconcile(view);
-      this._inReconcile = false;
+  reconcile(view: EditorView, editor: boolean) {
+    // TODO(burdon): Better way to do mutex?
+    if (this._pending) {
+      return;
     }
-  }
-
-  private doReconcile(view: EditorView) {
-    const path = getPath(view.state, this._state);
 
-    // Get the heads before the unreconciled transactions are applied.
-    const oldHeads = getLastHeads(view.state, this._state);
-    let selection = view.state.selection;
+    this._pending = true;
+    if (editor) {
+      this.onEditorChange(view);
+    } else {
+      this.onAutomergeChange(view);
+    }
+    this._pending = false;
+  }
 
-    // First undo all the unreconciled transactions.
+  onEditorChange(view: EditorView) {
+    // Apply the unreconciled transactions to the document.
     const transactions = view.state.field(this._state).unreconciledTransactions.filter((tx) => !isReconcile(tx));
-    const toInvert = transactions.slice().reverse();
-    for (const tr of toInvert) {
-      const inverted = tr.changes.invert(tr.startState.doc);
-      selection = selection.map(inverted);
+    const newHeads = updateAutomerge(this._state, this._handle, transactions, view.state);
+
+    if (newHeads) {
       view.dispatch({
-        changes: inverted,
-        annotations: reconcileAnnotation.of(true),
+        effects: updateHeads(newHeads),
+        annotations: reconcileAnnotation.of(false),
       });
     }
+  }
 
-    // Apply the unreconciled transactions to the document.
-    // NOTE: null and undefined each come from automerge and repo respectively.
-    let newHeads = updateAutomerge(this._state, this._handle, transactions, view.state);
-    if (newHeads === null || newHeads === undefined) {
-      // TODO(alexjg): this is the call that's resetting the editor state on click.
-      newHeads = A.getHeads(this._handle.docSync()!);
-    }
-
-    // Now get the diff between the updated state of the document and the heads and apply that to the codemirror doc.
+  onAutomergeChange(view: EditorView) {
+    // 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.docSync()!);
     const diff = A.equals(oldHeads, newHeads) ? [] : A.diff(this._handle.docSync()!, oldHeads, newHeads);
+
+    const selection = view.state.selection;
+    const path = getPath(view.state, this._state);
     updateCodeMirror(view, selection, path, diff);
 
-    // Update automerge state.
     view.dispatch({
       effects: updateHeads(newHeads),
       annotations: reconcileAnnotation.of(false),

package/src/extensions/index.ts

@@ -2,6 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
+export * from './annotations';
 export * from './autocomplete';
 export * from './automerge';
 export * from './awareness';

package/src/hooks/useTextModel.ts

@@ -47,6 +47,10 @@ export const useInMemoryTextModel = ({
 };
 
 const createModel = ({ space, identity, text }: UseTextModelProps) => {
+  if (!text) {
+    return undefined;
+  }
+
   invariant(isAutomergeObject(text));
   const obj = text as any as AutomergeTextCompat;
   const doc = getRawDoc(obj, [obj.field]);
@@ -64,11 +68,7 @@ const createModel = ({ space, identity, text }: UseTextModelProps) => {
       peerId: identity?.identityKey.toHex() ?? 'Anonymous',
     });
 
-  const extensions = [
-    //
-    modelState.init(() => model),
-    automerge({ handle: doc.handle, path: doc.path }),
-  ];
+  const extensions = [modelState.init(() => model), automerge({ handle: doc.handle, path: doc.path })];
   if (awarenessProvider) {
     extensions.push(awareness(awarenessProvider));
   }

package/dist/types/src/extensions/automerge/semaphore.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"semaphore.d.ts","sourceRoot":"","sources":["../../../../../src/extensions/automerge/semaphore.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAInD,OAAO,EAML,KAAK,UAAU,EACf,KAAK,KAAK,EACX,MAAM,QAAQ,CAAC;AAIhB;;GAEG;AACH,qBAAa,cAAc;IAKvB,OAAO,CAAC,QAAQ,CAAC,OAAO;IACxB,OAAO,CAAC,QAAQ,CAAC,MAAM;IALzB,OAAO,CAAC,YAAY,CAAS;gBAIV,OAAO,EAAE,UAAU,EACnB,MAAM,EAAE,UAAU,CAAC,KAAK,CAAC;IAG5C,SAAS,CAAC,IAAI,EAAE,UAAU;IAQ1B,OAAO,CAAC,WAAW;CAqCpB"}