@dxos/react-ui-editor 0.8.3 → 0.8.4-main.1068cf700f

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

@@ -1,140 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import '@dxos-theme';
-
-import '@preact/signals-react';
-
-import { Repo } from '@automerge/automerge-repo';
-import { BroadcastChannelNetworkAdapter } from '@automerge/automerge-repo-network-broadcastchannel';
-import React, { useEffect, useState } from 'react';
-
-import { Obj, Ref, Type } from '@dxos/echo';
-import { DocAccessor, createDocAccessor, useQuery, useSpace, type Space, Query } from '@dxos/react-client/echo';
-import { useIdentity, type Identity } from '@dxos/react-client/halo';
-import { ClientRepeater, type ClientRepeatedComponentProps } from '@dxos/react-client/testing';
-import { useThemeContext } from '@dxos/react-ui';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
-
-import { editorSlots } from '../../defaults';
-import { useTextEditor } from '../../hooks';
-import translations from '../../translations';
-import { createBasicExtensions, createDataExtensions, createThemeExtensions } from '../factories';
-
-const initialContent = 'Hello world!';
-
-type TestObject = {
-  text: string;
-};
-
-type EditorProps = {
-  source: DocAccessor;
-  autoFocus?: boolean;
-  space?: Space;
-  identity?: Identity;
-};
-
-const Editor = ({ source, autoFocus, space, identity }: EditorProps) => {
-  const { themeMode } = useThemeContext();
-  const { parentRef } = useTextEditor(
-    () => ({
-      initialValue: DocAccessor.getValue(source),
-      extensions: [
-        createBasicExtensions({ placeholder: 'Type here...' }),
-        createThemeExtensions({ themeMode, slots: editorSlots }),
-        createDataExtensions({ id: 'test', text: source, space, identity }),
-      ],
-      autoFocus,
-    }),
-    [source, themeMode],
-  );
-
-  return <div ref={parentRef} className='flex w-full' />;
-};
-
-const Story = () => {
-  const [object1, setObject1] = useState<DocAccessor<TestObject>>();
-  const [object2, setObject2] = useState<DocAccessor<TestObject>>();
-
-  useEffect(() => {
-    queueMicrotask(async () => {
-      const repo1 = new Repo({ network: [new BroadcastChannelNetworkAdapter()] });
-      const repo2 = new Repo({ network: [new BroadcastChannelNetworkAdapter()] });
-
-      const object1 = repo1.create<TestObject>();
-      object1.change((doc: TestObject) => {
-        doc.text = initialContent;
-      });
-
-      const object2 = await repo2.find<TestObject>(object1.url);
-      await object2.whenReady();
-
-      // TODO(mykola): Fix types.
-      setObject1({ handle: object1 as any, path: ['text'] });
-      setObject2({ handle: object2 as any, path: ['text'] });
-    });
-  }, []);
-
-  if (!object1 || !object2) {
-    return null;
-  }
-
-  return (
-    <div role='none' className='grid grid-cols-2 bs-full is-full divide-x divide-neutral-500'>
-      <Editor source={object1} autoFocus />
-      <Editor source={object2} />
-    </div>
-  );
-};
-
-export default {
-  title: 'ui/react-ui-editor/Automerge',
-  component: Editor,
-  decorators: [withTheme, withLayout({ fullscreen: true })],
-  render: () => <Story />,
-  parameters: { translations },
-};
-
-const EchoStory = ({ spaceKey }: ClientRepeatedComponentProps) => {
-  const identity = useIdentity();
-  const space = useSpace(spaceKey);
-  const [source, setSource] = useState<DocAccessor>();
-  const objects = useQuery(space, Query.type(Type.Expando, { type: 'test' }));
-
-  useEffect(() => {
-    if (!source && objects.length) {
-      const source = createDocAccessor(objects[0].content, ['content']);
-      setSource(source);
-    }
-  }, [objects, source]);
-
-  if (!source) {
-    return null;
-  }
-
-  return <Editor source={source} space={space} identity={identity ?? undefined} />;
-};
-
-export const Default = {};
-
-export const WithEcho = {
-  decorators: [withTheme],
-  render: () => {
-    return (
-      <ClientRepeater
-        count={2}
-        component={EchoStory}
-        createSpace
-        onSpaceCreated={async ({ space }) => {
-          space.db.add(
-            Obj.make(Type.Expando, {
-              type: 'test',
-              content: Ref.make(Obj.make(Type.Expando, { content: initialContent })),
-            }),
-          );
-        }}
-      />
-    );
-  },
-};

package/src/extensions/automerge/automerge.test.tsx

@@ -1,78 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { type DocHandle, Repo } from '@automerge/automerge-repo';
-import { EditorState } from '@codemirror/state';
-import { EditorView } from '@codemirror/view';
-import { render, screen } from '@testing-library/react';
-// TODO(wittjosiah): Move to vitest expect (and remove from package.json).
-import chai, { expect } from 'chai';
-import chaiDom from 'chai-dom';
-import React, { type FC, useEffect, useRef, useState } from 'react';
-import { describe, test } from 'vitest';
-
-import { get } from '@dxos/util';
-
-import { automerge } from './automerge';
-
-type TestObject = {
-  text: string;
-};
-
-const path = ['text'];
-
-class Generator {
-  constructor(private readonly _handle: DocHandle<TestObject>) {}
-  update(text: string): void {
-    this._handle.change((doc: TestObject) => {
-      doc.text = text;
-    });
-  }
-}
-
-const Test: FC<{ handle: DocHandle<TestObject>; generator: Generator }> = ({ handle, generator }) => {
-  const ref = useRef<HTMLDivElement>(null);
-  const [view, setView] = useState<EditorView>();
-  useEffect(() => {
-    const extensions = [
-      // TODO(mykola): Fix types.
-      automerge({ handle: handle as any, path }),
-      EditorView.updateListener.of((update) => {
-        if (view.state.doc.toString() === 'hello!') {
-          // Update editor.
-          update.view.dispatch({ changes: { from: view.state.doc.length - 1, insert: ' world' } });
-        }
-      }),
-    ];
-
-    const view = new EditorView({
-      state: EditorState.create({ doc: get(handle.doc()!, path), extensions }),
-      parent: ref.current!,
-    });
-
-    setView(view);
-  }, []);
-
-  useEffect(() => {}, [view]);
-
-  return <div ref={ref} />;
-};
-
-chai.use(chaiDom);
-
-describe('Automerge', () => {
-  test('basic sync', () => {
-    const repo = new Repo({ network: [] });
-    const handle = repo.create<TestObject>();
-    const generator = new Generator(handle);
-    render(<Test handle={handle} generator={generator} />);
-    expect(screen.getByRole('textbox')).to.have.text('');
-
-    generator.update('hello!');
-    expect(screen.getByRole('textbox')).to.have.text('hello world!');
-  });
-
-  // TODO(burdon): Test history/undo.
-  // TODO(burdon): https://testing-library.com/docs/react-testing-library/example-intro/
-});

package/src/extensions/automerge/automerge.ts

@@ -1,85 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-// Copyright 2024 Automerge
-// Ref: https://github.com/automerge/automerge-codemirror
-//
-
-import { next as A } from '@automerge/automerge';
-import { StateField, type Extension } from '@codemirror/state';
-import { EditorView, ViewPlugin } from '@codemirror/view';
-
-import { type DocAccessor } from '@dxos/react-client/echo';
-
-import { cursorConverter } from './cursor';
-import { updateHeadsEffect, isReconcile, type State } from './defs';
-import { Syncer } from './sync';
-import { Cursor } from '../../util';
-
-export const automerge = (accessor: DocAccessor): Extension => {
-  const syncState = StateField.define<State>({
-    create: () => ({
-      path: accessor.path.slice(),
-      lastHeads: A.getHeads(accessor.handle.doc()!),
-      unreconciledTransactions: [],
-    }),
-
-    update: (value, tr) => {
-      const result: State = {
-        path: accessor.path.slice(),
-        lastHeads: value.lastHeads,
-        unreconciledTransactions: value.unreconciledTransactions.slice(),
-      };
-
-      let clearUnreconciled = false;
-      for (const effect of tr.effects) {
-        if (effect.is(updateHeadsEffect)) {
-          result.lastHeads = effect.value.newHeads;
-          clearUnreconciled = true;
-        }
-      }
-
-      if (clearUnreconciled) {
-        result.unreconciledTransactions = [];
-      } else {
-        if (!isReconcile(tr)) {
-          result.unreconciledTransactions.push(tr);
-        }
-      }
-
-      return result;
-    },
-  });
-
-  const syncer = new Syncer(accessor.handle, syncState);
-
-  return [
-    Cursor.converter.of(cursorConverter(accessor)),
-
-    // Track heads.
-    syncState,
-
-    // Reconcile external updates.
-    ViewPlugin.fromClass(
-      class {
-        constructor(private readonly _view: EditorView) {
-          accessor.handle.addListener('change', this._handleChange);
-        }
-
-        destroy() {
-          accessor.handle.removeListener('change', this._handleChange);
-        }
-
-        readonly _handleChange = () => {
-          syncer.reconcile(this._view, false);
-        };
-      },
-    ),
-
-    // Reconcile local updates.
-    EditorView.updateListener.of(({ view, changes }) => {
-      if (!changes.empty) {
-        syncer.reconcile(view, true);
-      }
-    }),
-  ];
-};

package/src/extensions/automerge/cursor.ts

@@ -1,28 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { log } from '@dxos/log';
-import { type DocAccessor, fromCursor, toCursor } from '@dxos/react-client/echo';
-
-import { type CursorConverter } from '../../util';
-
-export const cursorConverter = (accessor: DocAccessor): CursorConverter => ({
-  toCursor: (pos, assoc) => {
-    try {
-      return toCursor(accessor, pos, assoc);
-    } catch (err) {
-      log.catch(err);
-      return ''; // In case of invalid request (e.g., wrong document).
-    }
-  },
-
-  fromCursor: (cursor) => {
-    try {
-      return fromCursor(accessor, cursor);
-    } catch (err) {
-      log.catch(err);
-      return 0; // In case of invalid request (e.g., wrong document).
-    }
-  },
-});

package/src/extensions/automerge/defs.ts

@@ -1,31 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-// Copyright 2024 Automerge
-// Ref: https://github.com/automerge/automerge-codemirror
-//
-
-import { type Heads, type Prop } from '@automerge/automerge';
-import { Annotation, StateEffect, type StateField, type EditorState, type Transaction } from '@codemirror/state';
-
-export type State = {
-  path: Prop[];
-  lastHeads: Heads;
-  unreconciledTransactions: Transaction[];
-};
-
-export const getPath = (state: EditorState, field: StateField<State>): Prop[] => state.field(field).path;
-export const getLastHeads = (state: EditorState, field: StateField<State>): Heads => state.field(field).lastHeads;
-
-export type UpdateHeads = {
-  newHeads: Heads;
-};
-
-export const updateHeadsEffect = StateEffect.define<UpdateHeads>({});
-
-export const updateHeads = (newHeads: Heads): StateEffect<UpdateHeads> => updateHeadsEffect.of({ newHeads });
-
-export const reconcileAnnotation = Annotation.define<boolean>();
-
-export const isReconcile = (tr: Transaction): boolean => {
-  return !!tr.annotation(reconcileAnnotation);
-};

package/src/extensions/automerge/index.ts

@@ -1,5 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-export { automerge } from './automerge';

package/src/extensions/automerge/sync.ts

@@ -1,75 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-// Copyright 2024 Automerge
-// Ref: https://github.com/automerge/automerge-codemirror
-//
-
-import { next as A } from '@automerge/automerge';
-import { type StateField } from '@codemirror/state';
-import { type EditorView } from '@codemirror/view';
-
-import { type IDocHandle } from '@dxos/react-client/echo';
-
-import { getLastHeads, getPath, isReconcile, reconcileAnnotation, type State, updateHeads } from './defs';
-import { updateAutomerge } from './update-automerge';
-import { updateCodeMirror } from './update-codemirror';
-
-/**
- * Implements three-way merge (on each mutation).
- */
-export class Syncer {
-  private _pending = false;
-
-  // prettier-ignore
-  constructor(
-    private readonly _handle: IDocHandle,
-    private readonly _state: StateField<State>
-  ) {}
-
-  reconcile(view: EditorView, editor: boolean): void {
-    // TODO(burdon): Better way to do mutex?
-    if (this._pending) {
-      return;
-    }
-
-    this._pending = true;
-    if (editor) {
-      this.onEditorChange(view);
-    } else {
-      this.onAutomergeChange(view);
-    }
-    this._pending = false;
-  }
-
-  onEditorChange(view: EditorView): void {
-    // Apply the unreconciled transactions to the document.
-    const transactions = view.state.field(this._state).unreconciledTransactions.filter((tx) => !isReconcile(tx));
-    const newHeads = updateAutomerge(this._state, this._handle, transactions, view.state);
-
-    if (newHeads) {
-      view.dispatch({
-        effects: updateHeads(newHeads),
-        annotations: reconcileAnnotation.of(false),
-      });
-    }
-  }
-
-  onAutomergeChange(view: EditorView): void {
-    // 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.doc()!);
-    const diff = A.equals(oldHeads, newHeads) ? [] : A.diff(this._handle.doc()!, oldHeads, newHeads);
-
-    const selection = view.state.selection;
-    const path = getPath(view.state, this._state);
-    updateCodeMirror(view, selection, path, diff);
-
-    // TODO(burdon): Test conflicts?
-    // A.getConflicts(this._handle.doc()!, path[0]);
-
-    view.dispatch({
-      effects: updateHeads(newHeads),
-      annotations: reconcileAnnotation.of(false),
-    });
-  }
-}

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

@@ -1,50 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-// Copyright 2024 Automerge
-// Ref: https://github.com/automerge/automerge-codemirror
-//
-
-import { next as A, type Heads } from '@automerge/automerge';
-import { type EditorState, type StateField, type Transaction, type Text } from '@codemirror/state';
-
-import { type IDocHandle } from '@dxos/react-client/echo';
-
-import { type State } from './defs';
-
-export const updateAutomerge = (
-  field: StateField<State>,
-  handle: IDocHandle,
-  transactions: Transaction[],
-  state: EditorState, // TODO(burdon): Just pass in the state field value?
-): Heads | undefined => {
-  const { lastHeads, path } = state.field(field);
-
-  // We don't want to call `automerge.updateAt` if there are no changes.
-  // Otherwise, later on `automerge.diff` will return empty patches that result in a no-op but still mess up the selection.
-  let hasChanges = false;
-  for (const tr of transactions) {
-    tr.changes.iterChanges(() => {
-      hasChanges = true;
-    });
-  }
-
-  if (!hasChanges) {
-    return undefined;
-  }
-
-  const newHeads = handle.changeAt(lastHeads, (doc: A.Doc<unknown>) => {
-    const invertedTransactions: { from: number; del: number; insert: Text }[] = [];
-    for (const tr of transactions) {
-      tr.changes.iterChanges((fromA, toA, _fromB, _toB, insert) => {
-        invertedTransactions.push({ from: fromA, del: toA - fromA, insert });
-      });
-    }
-
-    // TODO(burdon): Hack to apply in reverse order to properly apply range.
-    invertedTransactions.reverse().forEach(({ from, del, insert }) => {
-      A.splice(doc, path.slice(), from, del, insert.toString());
-    });
-  });
-
-  return newHeads ?? undefined;
-};

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

@@ -1,115 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-// Copyright 2024 Automerge
-// Ref: https://github.com/automerge/automerge-codemirror
-//
-
-import {
-  type DelPatch,
-  type InsertPatch,
-  type Patch,
-  type Prop,
-  type PutPatch,
-  type SpliceTextPatch,
-} from '@automerge/automerge';
-import { ChangeSet, type ChangeSpec, type EditorSelection, type EditorState } from '@codemirror/state';
-import { type EditorView } from '@codemirror/view';
-
-import { reconcileAnnotation } from './defs';
-
-export const updateCodeMirror = (view: EditorView, selection: EditorSelection, target: Prop[], patches: Patch[]) => {
-  for (const patch of patches) {
-    const changeSpec = handlePatch(patch, target, view.state);
-    if (changeSpec != null) {
-      const changeSet = ChangeSet.of(changeSpec, view.state.doc.length, '\n');
-      selection = selection.map(changeSet, 1);
-      view.dispatch({
-        changes: changeSet,
-        annotations: reconcileAnnotation.of(false),
-      });
-    }
-  }
-
-  view.dispatch({
-    selection,
-    annotations: reconcileAnnotation.of(false),
-  });
-};
-
-const handlePatch = (patch: Patch, target: Prop[], state: EditorState): ChangeSpec | null => {
-  if (patch.action === 'insert') {
-    return handleInsert(target, patch);
-  } else if (patch.action === 'splice') {
-    return handleSplice(target, patch);
-  } else if (patch.action === 'del') {
-    return handleDel(target, patch);
-  } else if (patch.action === 'put') {
-    return handlePut(target, patch, state);
-  } else {
-    return null;
-  }
-};
-
-const handleInsert = (target: Prop[], patch: InsertPatch): Array<ChangeSpec> => {
-  const index = charPath(target, patch.path);
-  if (index == null) {
-    return [];
-  }
-
-  const text = patch.values.map((value) => (value ? value.toString() : '')).join('');
-  return [{ from: index, to: index, insert: text }];
-};
-
-const handleSplice = (target: Prop[], patch: SpliceTextPatch): Array<ChangeSpec> => {
-  const index = charPath(target, patch.path);
-  if (index == null) {
-    return [];
-  }
-
-  return [{ from: index, insert: patch.value }];
-};
-
-const handleDel = (target: Prop[], patch: DelPatch): Array<ChangeSpec> => {
-  const index = charPath(target, patch.path);
-  if (index == null) {
-    return [];
-  }
-
-  const length = patch.length || 1;
-  return [{ from: index, to: index + length }];
-};
-
-const handlePut = (target: Prop[], patch: PutPatch, state: EditorState): Array<ChangeSpec> => {
-  const index = charPath(target, [...patch.path, 0]);
-  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.
-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;
-};