@dxos/react-ui-editor 0.8.4-main.72ec0f3 → 0.8.4-main.765dc60934

package/src/extensions/autocomplete/placeholder.ts

@@ -1,117 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-// Based on https://github.com/codemirror/view/blob/main/src/placeholder.ts
-//
-
-import { type Extension } from '@codemirror/state';
-import { Decoration, EditorView, ViewPlugin, type ViewUpdate, WidgetType } from '@codemirror/view';
-
-import { clientRectsFor, flattenRect } from '../../util';
-
-type Content = string | HTMLElement | ((view: EditorView) => HTMLElement);
-
-export type PlaceholderOptions = {
-  content: Content;
-  delay?: number;
-};
-
-/**
- * Shows a transient placeholder at the current cursor position.
- */
-export const placeholder = ({ content, delay = 3_000 }: PlaceholderOptions): Extension => {
-  const plugin = ViewPlugin.fromClass(
-    class {
-      _timeout: ReturnType<typeof setTimeout> | undefined;
-      _decorations = Decoration.none;
-
-      update(update: ViewUpdate) {
-        if (this._timeout) {
-          window.clearTimeout(this._timeout);
-          this._timeout = undefined;
-        }
-
-        // Check if the active line (where cursor is) is empty.
-        const activeLine = update.view.state.doc.lineAt(update.view.state.selection.main.head);
-        const isEmpty = activeLine.text.trim() === '';
-        if (isEmpty) {
-          // Create widget decoration at the start of the current line.
-          const lineStart = activeLine.from;
-          this._timeout = setTimeout(() => {
-            this._decorations = Decoration.set([
-              Decoration.widget({
-                widget: new PlaceholderWidget(content),
-                side: 1,
-              }).range(lineStart),
-            ]);
-
-            update.view.update([]);
-          }, delay);
-        }
-
-        this._decorations = Decoration.none;
-      }
-
-      destroy() {
-        if (this._timeout) {
-          clearTimeout(this._timeout);
-        }
-      }
-    },
-    {
-      provide: (plugin) => {
-        return [EditorView.decorations.of((view) => view.plugin(plugin)?._decorations ?? Decoration.none)];
-      },
-    },
-  );
-
-  return typeof content === 'string'
-    ? [plugin, EditorView.contentAttributes.of({ 'aria-placeholder': content })]
-    : plugin;
-};
-
-export class PlaceholderWidget extends WidgetType {
-  constructor(readonly content: Content) {
-    super();
-  }
-
-  toDOM(view: EditorView) {
-    const wrap = document.createElement('span');
-    wrap.className = 'cm-placeholder';
-    wrap.style.pointerEvents = 'none';
-    wrap.setAttribute('aria-hidden', 'true');
-    wrap.appendChild(
-      typeof this.content === 'string'
-        ? document.createTextNode(this.content)
-        : typeof this.content === 'function'
-          ? this.content(view)
-          : this.content.cloneNode(true),
-    );
-
-    return wrap;
-  }
-
-  override coordsAt(dom: HTMLElement) {
-    const rects = dom.firstChild ? clientRectsFor(dom.firstChild) : [];
-    if (!rects.length) {
-      return null;
-    }
-
-    const style = getComputedStyle(dom.parentNode as HTMLElement);
-    const rect = flattenRect(rects[0], style.direction !== 'rtl');
-    const lineHeight = parseInt(style.lineHeight);
-    if (rect.bottom - rect.top > lineHeight * 1.5) {
-      return {
-        left: rect.left,
-        right: rect.right,
-        top: rect.top,
-        bottom: rect.top + lineHeight,
-      };
-    }
-
-    return rect;
-  }
-
-  override ignoreEvent() {
-    return false;
-  }
-}

package/src/extensions/autocomplete/typeahead.ts

@@ -1,87 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { EditorSelection, type Extension, Prec, RangeSetBuilder } from '@codemirror/state';
-import {
-  type Command,
-  Decoration,
-  type DecorationSet,
-  type EditorView,
-  ViewPlugin,
-  type ViewUpdate,
-  keymap,
-} from '@codemirror/view';
-
-import { type CompoetionContext } from './match';
-import { PlaceholderWidget } from './placeholder';
-
-// TODO(burdon): Option to complete only at end of line.
-export type TypeaheadOptions = {
-  onComplete?: (context: CompoetionContext) => string | undefined;
-};
-
-/**
- * Shows a completion placeholder.
- */
-export const typeahead = ({ onComplete }: TypeaheadOptions = {}): Extension => {
-  let hint: string | undefined;
-
-  const complete: Command = (view: EditorView) => {
-    if (!hint) {
-      return false;
-    }
-
-    const selection = view.state.selection.main;
-    view.dispatch({
-      changes: [{ from: selection.from, to: selection.to, insert: hint }],
-      selection: EditorSelection.cursor(selection.from + hint.length),
-    });
-
-    return true;
-  };
-
-  return [
-    ViewPlugin.fromClass(
-      class {
-        decorations: DecorationSet = Decoration.none;
-        update(update: ViewUpdate) {
-          const builder = new RangeSetBuilder<Decoration>();
-          const selection = update.view.state.selection.main;
-          const line = update.view.state.doc.lineAt(selection.from);
-
-          // TODO(burdon): Check at end of line and matches start of previous word.
-          // TODO(burdon): Context grammar.
-          if (selection.from === selection.to && selection.from === line.to) {
-            const str = update.state.sliceDoc(line.from, selection.from);
-            hint = onComplete?.({ line: str });
-            if (hint) {
-              builder.add(selection.from, selection.to, Decoration.widget({ widget: new PlaceholderWidget(hint) }));
-            }
-          }
-
-          this.decorations = builder.finish();
-        }
-      },
-      {
-        decorations: (v) => v.decorations,
-      },
-    ),
-
-    // Keys.
-    Prec.highest(
-      keymap.of([
-        {
-          key: 'Tab',
-          preventDefault: true,
-          run: complete,
-        },
-        {
-          key: 'ArrowRight',
-          preventDefault: true,
-          run: complete,
-        },
-      ]),
-    ),
-  ];
-};

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

@@ -1,149 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import '@preact/signals-react';
-
-import { Repo } from '@automerge/automerge-repo';
-import { BroadcastChannelNetworkAdapter } from '@automerge/automerge-repo-network-broadcastchannel';
-import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React, { useEffect, useState } from 'react';
-
-import { Obj, Ref, Type } from '@dxos/echo';
-import { DocAccessor, Query, type Space, createDocAccessor, useQuery, useSpace } from '@dxos/react-client/echo';
-import { type Identity, useIdentity } from '@dxos/react-client/halo';
-import { type ClientRepeatedComponentProps, ClientRepeater } from '@dxos/react-client/testing';
-import { useThemeContext } from '@dxos/react-ui';
-import { withTheme } from '@dxos/react-ui/testing';
-import { render } 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...', search: true }),
-        createThemeExtensions({ themeMode, slots: editorSlots }),
-        createDataExtensions({ id: 'test', text: source, space, identity }),
-      ],
-      autoFocus,
-    }),
-    [source, themeMode],
-  );
-
-  return <div ref={parentRef} className='flex is-full' />;
-};
-
-const DefaultStory = () => {
-  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>
-  );
-};
-
-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(() => {
-    const content = objects[0]?.content.target;
-    if (!source && content) {
-      const source = createDocAccessor(content, ['content']);
-      setSource(source);
-    }
-  }, [objects, source]);
-
-  if (!source) {
-    return null;
-  }
-
-  return <Editor source={source} space={space} identity={identity ?? undefined} />;
-};
-
-const meta = {
-  title: 'ui/react-ui-editor/Automerge',
-  component: Editor as any,
-  render: render(DefaultStory),
-  decorators: [withTheme],
-  parameters: {
-    layout: 'fullscreen',
-    translations,
-  },
-} satisfies Meta<typeof DefaultStory>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {},
-};
-
-export const WithEcho: Story = {
-  render: () => {
-    return (
-      <ClientRepeater
-        count={2}
-        component={EchoStory}
-        createSpace
-        onCreateSpace={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,105 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-// Copyright 2024 Automerge
-// Ref: https://github.com/automerge/automerge-codemirror
-//
-
-import { next as A } from '@automerge/automerge';
-import { type Extension, StateField, Transaction } from '@codemirror/state';
-import { EditorView, ViewPlugin } from '@codemirror/view';
-
-import { DocAccessor } from '@dxos/client/echo';
-
-import { Cursor } from '../../util';
-import { initialSync } from '../state';
-
-import { cursorConverter } from './cursor';
-import { type State, isReconcile, updateHeadsEffect } from './defs';
-import { Syncer } from './sync';
-
-export const automerge = (accessor: DocAccessor): Extension => {
-  const syncState = StateField.define<State>({
-    create: () => {
-      return {
-        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);
-
-          requestAnimationFrame(() => {
-            const value = DocAccessor.getValue<string>(accessor);
-            const current = this._view.state.doc.toString();
-            if (value !== current) {
-              // TODO(burdon): This attempts to set the initial state, but creates problems.
-              // this._view.dispatch({
-              //   changes: { from: 0, to: this._view.state.doc.length, insert: value },
-              //   annotations: initialSync,
-              // });
-            }
-          });
-        }
-
-        destroy() {
-          accessor.handle.removeListener('change', this._handleChange);
-        }
-
-        readonly _handleChange = () => {
-          syncer.reconcile(this._view, false);
-        };
-      },
-    ),
-
-    // Reconcile local updates.
-    EditorView.updateListener.of(({ view, changes, transactions }) => {
-      if (!changes.empty) {
-        // Only reconcile if it's not an initial sync (to avoid loops)
-        const isInitialSync = transactions.some((tr) => tr.annotation(Transaction.userEvent) === initialSync.value);
-        if (!isInitialSync) {
-          syncer.reconcile(view, true);
-        }
-      }
-    }),
-  ];
-};

package/src/extensions/automerge/cursor.ts

@@ -1,28 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { type DocAccessor, fromCursor, toCursor } from '@dxos/client/echo';
-import { log } from '@dxos/log';
-
-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, type EditorState, StateEffect, type StateField, 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,79 +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/client/echo';
-import { log } from '@dxos/log';
-
-import { type State, getLastHeads, getPath, isReconcile, reconcileAnnotation, 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 {
-    if (this._pending) {
-      return;
-    }
-
-    this._pending = true;
-    if (editor) {
-      this.onEditorChange(view);
-    } else {
-      this.onAutomergeChange(view);
-    }
-    this._pending = false;
-  }
-
-  private onEditorChange(view: EditorView): void {
-    log('onEditorChange');
-
-    // 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),
-      });
-    }
-  }
-
-  private onAutomergeChange(view: EditorView): void {
-    log('onAutomergeChange');
-
-    // 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),
-    });
-  }
-}