@dxos/react-ui-editor 0.3.10 → 0.3.11-main.0e40963

package/src/{components/TextEditor/extensions → extensions}/link.ts

@@ -12,7 +12,11 @@ import {
   StateField,
   type Transaction,
 } from '@codemirror/state';
-import { Decoration, EditorView, WidgetType } from '@codemirror/view';
+import { Decoration, EditorView, WidgetType, hoverTooltip } from '@codemirror/view';
+
+import { tooltipContent } from '@dxos/react-ui-theme';
+
+const markdownLinkRegexp = /\[([^\]]+)]\(([^)]+)\)/;
 
 // Adapted from:
 // https://codemirror.net/try/?c=aW1wb3J0IHsgYmFzaWNTZXR1cCwgRWRpdG9yVmlldyB9IGZyb20gImNvZGVtaXJyb3IiCmltcG9ydCB7IG1hcmtkb3duIH0gZnJvbSAiQGNvZGVtaXJyb3IvbGFuZy1tYXJrZG93biIKaW1wb3J0IHsgc3ludGF4VHJlZSB9IGZyb20gIkBjb2RlbWlycm9yL2xhbmd1YWdlIjsKaW1wb3J0IHsgRWRpdG9yU3RhdGUsIFJhbmdlU2V0QnVpbGRlciwgU3RhdGVGaWVsZCB9IGZyb20gIkBjb2RlbWlycm9yL3N0YXRlIjsKaW1wb3J0IHsgRGVjb3JhdGlvbiwgV2lkZ2V0VHlwZSB9IGZyb20gIkBjb2RlbWlycm9yL3ZpZXciOwoKY2xhc3MgTGluayBleHRlbmRzIFdpZGdldFR5cGUgewogIGNvbnN0cnVjdG9yKHRleHQsIHVybCkgewogICAgc3VwZXIoKQogICAgdGhpcy50ZXh0ID0gdGV4dAogICAgdGhpcy51cmwgPSB1cmwKICB9CiAgZXEob3RoZXIpIHsgcmV0dXJuIHRoaXMudGV4dCA9PSBvdGhlci50ZXh0ICYmIHRoaXMudXJsID09IG90aGVyLnVybCB9CiAgdG9ET00oKSB7CiAgICBsZXQgbGluayA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoImEiKQogICAgbGluay50ZXh0Q29udGVudCA9IHRoaXMudGV4dAogICAgbGluay5ocmVmID0gdGhpcy51cmwKICAgIHJldHVybiBsaW5rOwogIH0KfQoKbGV0IGRlY29yYXRpb25zRmllbGQgPSBTdGF0ZUZpZWxkLmRlZmluZSh7CiAgY3JlYXRlKCkgewogICAgcmV0dXJuIERlY29yYXRpb24ubm9uZTsKICB9LAogIHVwZGF0ZShfLCB0cikgewogICAgY29uc3QgYnVpbGRlciA9IG5ldyBSYW5nZVNldEJ1aWxkZXIoKTsKICAgIGxldCBjdXJzb3IgPSB0ci5zdGF0ZS5zZWxlY3Rpb24ubWFpbi5oZWFkOwogICAgc3ludGF4VHJlZSh0ci5zdGF0ZSkuaXRlcmF0ZSh7CiAgICAgIGVudGVyOiAobm9kZSkgPT4gewogICAgICAgIGlmICgoY3Vyc29yIDwgbm9kZS5mcm9tIHx8IGN1cnNvciA+IG5vZGUudG8pICYmIG5vZGUubmFtZSA9PSAiTGluayIpIHsKICAgICAgICAgIGxldCBtYXJrcyA9IG5vZGUubm9kZS5nZXRDaGlsZHJlbigiTGlua01hcmsiKTsKICAgICAgICAgIGxldCB0ZXh0ID0gbWFya3MubGVuZ3RoID49IDIgPyB0ci5zdGF0ZS5zbGljZURvYyhtYXJrc1swXS50bywgbWFya3NbMV0uZnJvbSkgOiAiIgoKICAgICAgICAgIGxldCB1cmxOb2RlID0gbm9kZS5ub2RlLmdldENoaWxkKCJVUkwiKTsKICAgICAgICAgIGxldCB1cmwgPSB1cmxOb2RlID8gdHIuc3RhdGUuc2xpY2VEb2ModXJsTm9kZS5mcm9tLCB1cmxOb2RlLnRvKSA6ICIiCiAgICAgICAgICBidWlsZGVyLmFkZChub2RlLmZyb20sIG5vZGUudG8sIERlY29yYXRpb24ucmVwbGFjZSh7CiAgICAgICAgICAgIHdpZGdldDogbmV3IExpbmsodGV4dCwgdXJsKSwKICAgICAgICAgIH0pLAogICAgICAgICAgICAgICAgICAgICApOwogICAgICAgICAgcmV0dXJuIGZhbHNlOwogICAgICAgIH0KICAgICAgICByZXR1cm4gdHJ1ZTsKICAgICAgfSwKICAgIH0pOwogICAgcmV0dXJuIGJ1aWxkZXIuZmluaXNoKCk7CiAgfSwKICBwcm92aWRlOiAoZikgPT4gRWRpdG9yVmlldy5kZWNvcmF0aW9ucy5mcm9tKGYpLAp9KTsKCmxldCB2aWV3ID0gbmV3IEVkaXRvclZpZXcoewogIGRvYzogIiMgSGVsbG8gV29ybGRcblxuW1Rlc3RdKGh0dHBzOi8vZXhhbXBsZS5jb20pXG5cblxuIiwKICBleHRlbnNpb25zOiBbZGVjb3JhdGlvbnNGaWVsZCwgbWFya2Rvd24oKV0sCiAgcGFyZW50OiBkb2N1bWVudC5ib2R5LAp9KTsKCnZpZXcuZm9jdXMoKTs=
@@ -20,6 +24,7 @@ import { Decoration, EditorView, WidgetType } from '@codemirror/view';
 
 export type LinkOptions = {
   link?: boolean;
+  onHover?: (el: Element, url: string) => void;
   onRender?: (el: Element, url: string) => void;
 };
 
@@ -28,11 +33,62 @@ export type LinkOptions = {
  * https://codemirror.net/docs/ref/#state.StateField
  */
 export const link = (options: LinkOptions = {}): Extension => {
-  return StateField.define<RangeSet<any>>({
-    create: (state) => update(state, options),
-    update: (_: RangeSet<any>, tr: Transaction) => update(tr.state, options),
-    provide: (field) => EditorView.decorations.from(field),
-  });
+  const extensions: Extension[] = [
+    StateField.define<RangeSet<any>>({
+      create: (state) => update(state, options),
+      update: (_: RangeSet<any>, tr: Transaction) => update(tr.state, options),
+      provide: (field) => EditorView.decorations.from(field),
+    }),
+  ];
+
+  if (options.onHover) {
+    extensions.push(
+      // https://codemirror.net/examples/tooltip
+      // https://codemirror.net/docs/ref/#view.hoverTooltip
+      // https://github.com/codemirror/view/blob/main/src/tooltip.ts
+      hoverTooltip((view, pos) => {
+        const { from, text } = view.state.doc.lineAt(pos);
+        const p = pos - from;
+
+        let idx = 0;
+        let match;
+        do {
+          match = text.substring(idx).match(markdownLinkRegexp);
+          if (!match) {
+            match = undefined;
+            break;
+          }
+
+          idx = text.indexOf(match[0]);
+          if (p >= idx && p < idx + match[0].length) {
+            break;
+          }
+
+          idx += match[0].length;
+        } while (true);
+
+        if (!match) {
+          return null;
+        }
+
+        const [, , url] = match ?? [];
+
+        return {
+          pos: idx + from,
+          end: idx + from + match[0].length,
+          above: true,
+          create: () => {
+            const el = document.createElement('div');
+            el.className = tooltipContent({}, 'pli-2 plb-1');
+            options.onHover!(el, url);
+            return { dom: el, offset: { x: 0, y: 4 } };
+          },
+        };
+      }),
+    );
+  }
+
+  return extensions;
 };
 
 class LinkButton extends WidgetType {
@@ -56,12 +112,12 @@ class LinkButton extends WidgetType {
 }
 
 class LinkText extends WidgetType {
-  constructor(private readonly _pos: number, private readonly _text: string, private readonly _url?: string) {
+  constructor(private readonly _text: string, private readonly _url?: string) {
     super();
   }
 
   override eq(other: LinkText) {
-    return this._pos === other._pos && this._url === other._url;
+    return this._url === other._url;
   }
 
   toDOM(view: EditorView) {
@@ -76,7 +132,7 @@ class LinkText extends WidgetType {
       link.onclick = () => {
         view.dispatch({
           selection: {
-            anchor: this._pos,
+            anchor: view.posAtDOM(link),
           },
         });
       };
@@ -112,7 +168,7 @@ const update = (state: EditorState, options: LinkOptions) => {
             node.from,
             node.to,
             Decoration.replace({
-              widget: new LinkText(node.from, text, options.link ? url : undefined),
+              widget: new LinkText(text, options.link ? url : undefined),
             }),
           );
         }

package/src/extensions/listener.ts

@@ -0,0 +1,35 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Extension } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
+
+export type ListenerOptions = {
+  onFocus?: (focused: boolean) => void;
+  onChange?: (text: string) => void;
+};
+
+/**
+ * Event listener.
+ */
+export const listener = ({ onFocus, onChange }: ListenerOptions): Extension => {
+  const extensions: Extension[] = [];
+
+  onFocus &&
+    extensions.push(
+      EditorView.focusChangeEffect.of((_, focused) => {
+        onFocus(focused);
+        return null;
+      }),
+    );
+
+  onChange &&
+    extensions.push(
+      EditorView.updateListener.of((update) => {
+        onChange(update.state.doc.toString());
+      }),
+    );
+
+  return extensions;
+};

package/src/{components/TextEditor/extensions → extensions}/markdown/highlight.ts

@@ -8,21 +8,18 @@ import { tags, styleTags, Tag } from '@lezer/highlight';
 import { type MarkdownConfig, Table } from '@lezer/markdown';
 import get from 'lodash.get';
 
-import { mx } from '@dxos/react-ui-theme';
-
 import {
   blockquote,
   bold,
   code,
   codeMark,
   heading,
-  horizontalRule,
   inlineUrl,
   italic,
   mark,
   strikethrough,
   tokens,
-} from '../../../../styles';
+} from '../../styles';
 
 /**
  * Custom tags defined and processed by the GFM lezer extension.
@@ -35,7 +32,7 @@ export const markdownTags = {
   CodeText: Tag.define(),
   EmphasisMark: Tag.define(),
   HeaderMark: Tag.define(),
-  HorizontalRule: Tag.define(),
+  // HorizontalRule: Tag.define(),
   InlineCode: Tag.define(),
   LinkLabel: Tag.define(),
   LinkReference: Tag.define(),
@@ -182,10 +179,10 @@ export const markdownHighlightStyle = (readonly?: boolean) => {
       },
 
       // TODO(burdon): Replace with extension.
-      {
-        tag: [markdownTags.HorizontalRule],
-        class: mx(horizontalRule, readonly && '-indent-[100rem]'),
-      },
+      // {
+      //   tag: [markdownTags.HorizontalRule],
+      //   class: mx(horizontalRule, readonly && '-indent-[100rem]'),
+      // },
 
       // TODO(burdon): Only if being edited.
       {

package/src/extensions/mermaid.ts

@@ -0,0 +1,11 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type Extension } from '@codemirror/state';
+
+// TODO(burdon): How will this interact with the code extension?
+// TODO(burdon): Move to mermaid-plugin (which should contribute this extension).
+export const mermaid = (): Extension => {
+  return [];
+};

package/src/{components/TextEditor/extensions → extensions}/table.ts

@@ -9,6 +9,9 @@ import { Decoration, EditorView, WidgetType } from '@codemirror/view';
 // TODO(burdon): Snippet to create basic table.
 //  https://codemirror.net/docs/ref/#autocomplete.snippet
 
+// TODO(burdon): Advanced formatting (left/right/center).
+// TODO(burdon): Editor to auto balance columns.
+
 export type TableOptions = {};
 
 /**
@@ -73,7 +76,17 @@ const update = (state: EditorState, options: TableOptions) => {
 
   tables.forEach((table) => {
     const hide = state.readOnly || cursor < table.from || cursor > table.to;
-    hide && builder.add(table.from, table.to, Decoration.replace({ widget: new TableWidget(table) }));
+    hide &&
+      builder.add(
+        table.from,
+        table.to,
+        Decoration.replace({
+          block: true,
+          widget: new TableWidget(table),
+        }),
+      );
+
+    // Add class for styling.
     builder.add(table.from, table.to, Decoration.mark({ class: 'cm-table' }));
   });
 

package/src/{components/TextEditor/extensions/demo.ts → extensions/typewriter.ts}

@@ -15,12 +15,11 @@ export type DemoOptions = {
 const defaultItems = ['hello world!', 'this is a test.', 'this is [DXOS](https://dxos.org)'];
 
 /**
- * Demo script.
  * Configurable plugin that let's user cycle through pre-configured input script.
  */
-export const demo = ({ delay = 75, items = defaultItems }: DemoOptions = {}): Extension => {
+export const typewriter = ({ delay = 75, items = defaultItems }: DemoOptions = {}): Extension => {
   let t: any;
-  let idx = 0;
+  let idx = 0; // TODO(burdon): Make global.
 
   return [
     keymap.of([

package/src/extensions/util.ts

@@ -0,0 +1,18 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { log } from '@dxos/log';
+
+/**
+ * CodeMirror callbacks swallow errors so wrap handlers.
+ */
+// TODO(burdon): Figure out how to systematize this.
+export const callbackWrapper = <T extends Function>(fn: T): T =>
+  ((...args: any[]) => {
+    try {
+      return fn(...args);
+    } catch (error) {
+      log.catch(error);
+    }
+  }) as unknown as T;

package/src/hooks/automerge/automerge.stories.tsx

@@ -85,8 +85,7 @@ const Story = () => {
 export default {
   title: 'react-ui-editor/Automerge',
   component: Editor,
-};
-
-export const Default = {
   render: () => <Story />,
 };
+
+export const Default = {};

package/src/hooks/automerge/plugin.ts

@@ -17,8 +17,8 @@ import { ViewPlugin, type EditorView, type PluginValue, type ViewUpdate } from '
 import * as automerge from '@dxos/automerge/automerge';
 import { type Heads, type Prop } from '@dxos/automerge/automerge';
 
-import { PatchSemaphore } from './PatchSemaphore';
 import { type IDocHandle } from './handle';
+import { PatchSemaphore } from './semaphore';
 
 export type Value = {
   lastHeads: Heads;

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

@@ -10,7 +10,8 @@ import { next as automerge } from '@dxos/automerge/automerge';
 
 import { type IDocHandle } from './handle';
 import { type Field, isReconcileTx, getPath, reconcileAnnotationType, updateHeads, getLastHeads } from './plugin';
-import { automergeToCodemirror, codemirrorToAutomerge } from './translation';
+import { updateAutomerge } from './update-automerge';
+import { updateCodeMirror } from './update-codemirror';
 
 type Doc<T> = automerge.Doc<T>;
 type Heads = automerge.Heads;
@@ -55,7 +56,7 @@ export class PatchSemaphore {
     }
 
     // Apply the unreconciled transactions to the document.
-    let newHeads = codemirrorToAutomerge(this._field, handle, transactions, view.state);
+    let newHeads = updateAutomerge(this._field, handle, transactions, view.state);
 
     // NOTE: null and undefined each come from automerge and repo respectively.
     if (newHeads === null || newHeads === undefined) {
@@ -65,7 +66,7 @@ export class PatchSemaphore {
 
     // Now get the diff between the updated state of the document and the heads and apply that to the codemirror doc.
     const diff = automerge.equals(oldHeads, newHeads) ? [] : automerge.diff(handle.docSync()!, oldHeads, newHeads);
-    automergeToCodemirror(view, selection, path, diff);
+    updateCodeMirror(view, selection, path, diff);
 
     view.dispatch({
       effects: updateHeads(newHeads),

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

@@ -8,10 +8,10 @@ import { type EditorState, type Text, type Transaction } from '@codemirror/state
 
 import { next as am, type Heads } from '@dxos/automerge/automerge';
 
-import { type IDocHandle } from '../handle';
-import { type Field } from '../plugin';
+import { type IDocHandle } from './handle';
+import { type Field } from './plugin';
 
-export const codemirrorToAutomerge = (
+export const updateAutomerge = (
   field: Field,
   handle: IDocHandle,
   transactions: Transaction[],

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

@@ -16,14 +16,9 @@ import {
   type SpliceTextPatch,
 } from '@dxos/automerge/automerge';
 
-import { reconcileAnnotationType } from '../plugin';
+import { reconcileAnnotationType } from './plugin';
 
-export const automergeToCodemirror = (
-  view: EditorView,
-  selection: EditorSelection,
-  target: Prop[],
-  patches: Patch[],
-) => {
+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) {

package/src/hooks/useTextModel.ts

@@ -2,11 +2,12 @@
 // Copyright 2023 DXOS.org
 //
 
-import { type Extension } from '@codemirror/state';
+import { type Extension, StateField } from '@codemirror/state';
 import get from 'lodash.get';
 import { useEffect, useState } from 'react';
 import { yCollab } from 'y-codemirror.next';
 import type * as awarenessProtocol from 'y-protocols/awareness';
+import * as Y from 'yjs';
 
 import { invariant } from '@dxos/invariant';
 import {
@@ -19,6 +20,7 @@ import {
 } from '@dxos/react-client/echo';
 import { type Identity } from '@dxos/react-client/halo';
 import type { YText, YXmlFragment } from '@dxos/text-model';
+import { arrayToString, stringToArray } from '@dxos/util';
 
 import { automergePlugin } from './automerge';
 import { SpaceAwarenessProvider } from './yjs';
@@ -26,19 +28,34 @@ import { SpaceAwarenessProvider } from './yjs';
 // TODO(burdon): Move.
 type Awareness = awarenessProtocol.Awareness;
 
-export type DocumentRange = {
-  id: string;
+/**
+ * State field makes the model available to other extensions.
+ */
+// TODO(burdon): Use facet?
+export const modelState = StateField.define<EditorModel | undefined>({
+  create: () => undefined,
+  update: (model) => model,
+});
+
+export type Range = {
   from: number;
   to: number;
 };
 
+export type CommentRange = {
+  id: string;
+  // TODO(burdon): Split into begin/end?
+  cursor: string;
+};
+
 // TODO(wittjosiah): Factor out to common package? @dxos/react-client?
 export type EditorModel = {
   id: string;
   // TODO(burdon): Remove.
   content: string | YText | YXmlFragment | DocAccessor;
   text: () => string;
-  ranges: DocumentRange[];
+  getCursorFromRange?: (value: Range) => string;
+  getRangeFromCursor?: (cursor: string) => Range | undefined;
   extension?: Extension;
   awareness?: Awareness;
   peer?: {
@@ -48,7 +65,7 @@ export type EditorModel = {
 };
 
 // TODO(burdon): Remove space/identity dependency. Define interface for the framework re content and presence.
-export type UseTextModelOptions = {
+export type UseTextModelProps = {
   identity?: Identity | null;
   space?: Space;
   text?: TextObject;
@@ -56,39 +73,56 @@ export type UseTextModelOptions = {
 
 // TODO(burdon): Remove YJS/Automerge deps (from UI component -- create abstraction; incl. all ECHO/Space deps).
 // TODO(wittjosiah): Factor out to common package? @dxos/react-client?
-export const useTextModel = ({ identity, space, text }: UseTextModelOptions): EditorModel | undefined => {
-  const [model, setModel] = useState<EditorModel | undefined>(() => createModel({ identity, space, text }));
-  useEffect(() => {
-    setModel(createModel({ identity, space, text }));
-  }, [identity, space, text]);
+export const useTextModel = (props: UseTextModelProps): EditorModel | undefined => {
+  const { identity, space, text } = props;
+  const [model, setModel] = useState<EditorModel | undefined>(() => createModel(props));
+  useEffect(() => setModel(createModel(props)), [identity, space, text]);
   return model;
 };
 
-const createModel = (options: UseTextModelOptions) => {
-  const { text } = options;
+const createModel = (props: UseTextModelProps) => {
+  const { text } = props;
   if (isActualAutomergeObject(text)) {
-    return createAutomergeModel(options);
+    return createAutomergeModel(props);
   } else {
     if (!text?.doc) {
       return undefined;
     }
 
-    return createYjsModel(options);
+    return createYjsModel(props);
   }
 };
 
-const createYjsModel = ({ identity, space, text }: UseTextModelOptions): EditorModel => {
+const createYjsModel = ({ identity, space, text }: UseTextModelProps): EditorModel => {
   invariant(text?.doc && text?.content);
   const provider = space
     ? new SpaceAwarenessProvider({ space, doc: text.doc, channel: `yjs.awareness.${text.id}` })
     : undefined;
 
-  return {
+  const model: EditorModel = {
     id: text.doc.guid,
     content: text.content,
     text: () => text.content!.toString(),
-    ranges: [],
-    extension: yCollab(text.content as YText, provider?.awareness),
+    // https://github.com/yjs/yjs?tab=readme-ov-file#relative-positions
+    getCursorFromRange: (range: Range) => {
+      const from = Y.encodeRelativePosition(Y.createRelativePositionFromTypeIndex(text.content as YText, range.from));
+      const to = Y.encodeRelativePosition(Y.createRelativePositionFromTypeIndex(text.content as YText, range.to, -1));
+      return [arrayToString(from), arrayToString(to)].join(':');
+    },
+    getRangeFromCursor: (cursor: string) => {
+      invariant(text.doc);
+      const parts = cursor.split(':');
+      const from = Y.createAbsolutePositionFromRelativePosition(
+        Y.decodeRelativePosition(stringToArray(parts[0])),
+        text.doc,
+      );
+      const to = Y.createAbsolutePositionFromRelativePosition(
+        Y.decodeRelativePosition(stringToArray(parts[1])),
+        text.doc,
+      );
+      return from && to ? { from: from.index, to: to.index } : undefined;
+    },
+    extension: [yCollab(text.content as YText, provider?.awareness), modelState.init(() => model)],
     awareness: provider?.awareness,
     peer: identity
       ? {
@@ -97,18 +131,20 @@ const createYjsModel = ({ identity, space, text }: UseTextModelOptions): EditorM
         }
       : undefined,
   };
+
+  return model;
 };
 
-const createAutomergeModel = ({ identity, text }: UseTextModelOptions): EditorModel => {
+const createAutomergeModel = ({ identity, text }: UseTextModelProps): EditorModel => {
   const obj = text as any as AutomergeTextCompat;
   const doc = getRawDoc(obj, [obj.field]);
 
-  return {
+  const model: EditorModel = {
     id: obj.id,
     content: doc,
     text: () => get(doc.handle.docSync(), doc.path),
-    ranges: [],
-    extension: automergePlugin(doc.handle, doc.path),
+    // TODO(burdon): https://automerge.org/automerge/api-docs/js/functions/next.getCursor.html
+    extension: [automergePlugin(doc.handle, doc.path), modelState.init(() => model)],
     peer: identity
       ? {
           id: identity.identityKey.toHex(),
@@ -116,4 +152,6 @@ const createAutomergeModel = ({ identity, text }: UseTextModelOptions): EditorMo
         }
       : undefined,
   };
+
+  return model;
 };

package/src/hooks/yjs/yjs.test.ts

@@ -0,0 +1,59 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { effect } from '@preact/signals-react';
+import { expect } from 'chai';
+import * as Y from 'yjs';
+
+import { Trigger } from '@dxos/async';
+import { Expando, setGlobalAutomergePreference, TextObject } from '@dxos/echo-schema';
+import { registerSignalFactory } from '@dxos/echo-signals';
+import { describe, test } from '@dxos/test';
+import { type YText } from '@dxos/text-model';
+
+describe('YJS', () => {
+  // https://docs.yjs.dev/api/shared-types/y.text
+  // https://github.com/yjs/yjs?tab=readme-ov-file#relative-positions
+  test('absolute position', () => {
+    const obj = new TextObject('hello world');
+    const index = obj.text.indexOf('world');
+    const relPos = Y.encodeRelativePosition(Y.createRelativePositionFromTypeIndex(obj.content as YText, index));
+
+    {
+      const cursor = Y.createAbsolutePositionFromRelativePosition(Y.decodeRelativePosition(relPos), obj.doc!);
+      expect(cursor!.index).to.equal(index);
+      expect(obj.text.substring(cursor!.index)).to.equal('world');
+    }
+
+    (obj.content as YText).insert(index, 'cruel ');
+    expect(obj.text).to.equal('hello cruel world');
+
+    {
+      const cursor = Y.createAbsolutePositionFromRelativePosition(Y.decodeRelativePosition(relPos), obj.doc!);
+      expect(cursor!.index).not.to.equal(index);
+      expect(obj.text.substring(cursor!.index)).to.equal('world');
+    }
+  });
+
+  // TODO(burdon): Test deleting end character.
+
+  test.skip('effect', async () => {
+    setGlobalAutomergePreference(true);
+    registerSignalFactory();
+    const obj = new Expando({ comments: [] });
+
+    const trigger = new Trigger();
+    const unsubscribe = effect(() => {
+      // TODO(burdon): BUG: doesn't work with YJS.
+      console.log(obj.comments);
+      if (obj.comments.length > 0) {
+        trigger.wake();
+      }
+    });
+
+    obj.comments.push({ message: 'hello' });
+    await trigger.wait();
+    unsubscribe();
+  });
+});

package/src/index.ts

@@ -4,6 +4,9 @@
 
 export { TextKind } from '@dxos/protocols/proto/dxos/echo/model/text';
 export { Doc, YText, YXmlFragment } from '@dxos/text-model';
+export { type Extension } from '@codemirror/state';
 
 export * from './components';
+export * from './extensions';
 export * from './hooks';
+export * from './themes';

package/src/testing/replicator.ts

@@ -169,7 +169,6 @@ export class Replicator {
       id: doc.guid,
       text: () => content.toString(),
       content,
-      ranges: [],
       awareness: provider.awareness,
       peer: { id },
     };