refactor(json-crdt-extensions): 💡 implement Cursor as a local slice

Author: streamich

src/json-crdt-extensions/peritext/Peritext.ts

@@ -64,7 +64,7 @@ export class Peritext implements Printable {
       .setSchema(s.vec(s.arr([])));
     this.localSlices = new Slices(localModel, localModel.root.node().get(0)!, this.str);
 
-    this.editor = new Editor(this);
+    this.editor = new Editor(this, this.localSlices);
   }
 
   public strApi() {

src/json-crdt-extensions/peritext/editor/Cursor.ts

@@ -0,0 +1,72 @@
+import {Point} from '../rga/Point';
+import {CursorAnchor} from '../slice/constants';
+import {PersistedSlice} from '../slice/PersistedSlice';
+
+export class Cursor<T = string> extends PersistedSlice<T> {
+  public get anchorSide(): CursorAnchor {
+    return this.type as CursorAnchor;
+  }
+
+  public set anchorSide(value: CursorAnchor) {
+    this.update({type: value});
+  }
+
+  public anchor(): Point<T> {
+    return this.anchorSide === CursorAnchor.Start ? this.start : this.end;
+  }
+
+  public focus(): Point<T> {
+    return this.anchorSide === CursorAnchor.Start ? this.end : this.start;
+  }
+
+  public set(start: Point<T>, end?: Point<T>, anchorSide: CursorAnchor = this.anchorSide): void {
+    if (!end || end === start) end = start.clone();
+    super.set(start, end);
+    this.update({
+      range: this,
+      type: anchorSide,
+    });
+  }
+
+  public setAt(start: number, length: number = 0): void {
+    let at = start;
+    let len = length;
+    if (len < 0) {
+      at += len;
+      len = -len;
+    }
+    super.setAt(at, len);
+    this.anchorSide = length < 0 ? CursorAnchor.End : CursorAnchor.Start;
+  }
+
+  /**
+   * Move one of the edges of the cursor to a new point.
+   *
+   * @param point Point to set the edge to.
+   * @param edge 0 for "focus", 1 for "anchor."
+   */
+  public setEdge(point: Point<T>, edge: 0 | 1 = 0): void {
+    if (this.start === this.end) this.end = this.end.clone();
+    let anchor = this.anchor();
+    let focus = this.focus();
+    if (edge === 0) focus = point; else anchor = point;
+    if (focus.cmpSpatial(anchor) < 0) this.set(focus, anchor, CursorAnchor.End);
+    else this.set(anchor, focus, CursorAnchor.Start);
+  }
+
+  public move(move: number): void {
+    const {start, end} = this;
+    start.move(move);
+    if (start !== end) {
+      end.move(move);
+    }
+    this.set(start, end);
+  }
+
+  // ---------------------------------------------------------------- Printable
+
+  public toStringName(): string {
+    const focusIcon = this.anchorSide === CursorAnchor.Start ? '.→|' : '|←.';
+    return `${super.toStringName()}, ${focusIcon}`;
+  }
+}

src/json-crdt-extensions/peritext/editor/Editor.ts

@@ -1,6 +1,6 @@
-import {Cursor} from '../slice/Cursor';
+import {Cursor} from './Cursor';
 import {Anchor} from '../rga/constants';
-import {SliceBehavior} from '../slice/constants';
+import {CursorAnchor, SliceBehavior} from '../slice/constants';
 import {tick, type ITimestampStruct} from '../../../json-crdt-patch/clock';
 import {PersistedSlice} from '../slice/PersistedSlice';
 import {Chars} from '../constants';
@@ -10,6 +10,7 @@ import type {Printable} from 'tree-dump/lib/types';
 import type {Point} from '../rga/Point';
 import type {SliceType} from '../types';
 import type {MarkerSlice} from '../slice/MarkerSlice';
+import type {Slices} from '../slice/Slices';
 
 export class Editor implements Printable {
   /**
@@ -18,10 +19,10 @@ export class Editor implements Printable {
    */
   public readonly cursor: Cursor;
 
-  constructor(public readonly txt: Peritext) {
-    const point = txt.point(txt.str.id, Anchor.After);
-    const cursorId = txt.str.id; // TODO: should be autogenerated to something else
-    this.cursor = new Cursor(cursorId, txt, point, point.clone());
+  constructor(public readonly txt: Peritext, slices: Slices) {
+    const point = txt.pointAbsStart();
+    const range = txt.range(point, point.clone());
+    this.cursor = slices.ins<Cursor, typeof Cursor>(range, SliceBehavior.Cursor, CursorAnchor.Start, undefined, Cursor);
   }
 
   /** @deprecated */

src/json-crdt-extensions/peritext/slice/Cursor.ts

@@ -85,7 +85,8 @@ export class PersistedSlice<T = string> extends Range<T> implements MutableSlice
       if (range.end.anchor !== end.anchor) updateHeader = true;
       if (compare(range.start.id, start.id) !== 0) changes.push([SliceTupleIndex.X1, s.con(range.start.id)]);
       if (compare(range.end.id, end.id) !== 0) changes.push([SliceTupleIndex.X2, s.con(range.end.id)]);
-      this.setRange(range);
+      this.start = range.start;
+      this.end = range.start === range.end ? range.end.clone() : range.end;
     }
     if (params.type !== undefined) {
       this.type = params.type;
@@ -137,11 +138,18 @@ export class PersistedSlice<T = string> extends Range<T> implements MutableSlice
 
   // ---------------------------------------------------------------- Printable
 
+  protected toStringName(): string {
+    const data = this.data();
+    const dataFormatted = data ? prettyOneLine(data) : '∅';
+    const dataLengthBreakpoint = 32;
+    const header = `${this.constructor.name} ${super.toString('', true)}, ${this.behavior}, ${JSON.stringify(this.type)}${dataFormatted.length < dataLengthBreakpoint ? `, ${dataFormatted}` : ''}`;
+    return header;
+  }
+
   public toString(tab: string = ''): string {
     const data = this.data();
     const dataFormatted = data ? prettyOneLine(data) : '';
     const dataLengthBreakpoint = 32;
-    const header = `${this.constructor.name} ${super.toString(tab)}, ${this.behavior}, ${JSON.stringify(this.type)}${dataFormatted.length < dataLengthBreakpoint ? `, ${dataFormatted}` : ''}`;
-    return header + printTree(tab, [dataFormatted.length < dataLengthBreakpoint ? null : (tab) => dataFormatted]);
+    return this.toStringName() + printTree(tab, [dataFormatted.length < dataLengthBreakpoint ? null : (tab) => dataFormatted]);
   }
 }

src/json-crdt-extensions/peritext/slice/PersistedSlice.ts

@@ -28,7 +28,13 @@ export class Slices implements Stateful, Printable {
     protected readonly rga: AbstractRga<string>,
   ) {}
 
-  public ins(range: Range, behavior: SliceBehavior, type: SliceType, data?: unknown): PersistedSlice {
+  public ins<S extends PersistedSlice<string>, K extends new (...args: ConstructorParameters<typeof PersistedSlice<string>>) => S>(
+    range: Range,
+    behavior: SliceBehavior,
+    type: SliceType,
+    data?: unknown,
+    Klass: K = behavior === SliceBehavior.Marker ? <any>MarkerSlice : PersistedSlice
+  ): S {
     const model = this.model;
     const set = this.set;
     const api = model.api;
@@ -57,10 +63,7 @@ export class Slices implements Stateful, Printable {
     const tuple = model.index.get(tupleId) as VecNode;
     const chunk = set.findById(chunkId)!;
     // TODO: Need to check if split slice text was deleted
-    const slice =
-      behavior === SliceBehavior.Marker
-        ? new MarkerSlice(model, this.rga, chunk, tuple, behavior, type, start, end)
-        : new PersistedSlice(model, this.rga, chunk, tuple, behavior, type, start, end);
+    const slice = new Klass(model, this.rga, chunk, tuple, behavior, type, start, end);
     this.list.set(chunk.id, slice);
     return slice;
   }

src/json-crdt-extensions/peritext/slice/Slices.ts

@@ -1,6 +1,8 @@
 /**
- * Specifies which cursor end is the "anchor", e.g. the end which does not move
- * when user changes selection.
+ * Specifies whether the start or the end of the cursor is the "anchor", e.g.
+ * the end which does not move when user changes selection. The other
+ * end is free to move, the moving end of the cursor is "focus". By default
+ * "anchor" is usually the start of the cursor.
  */
 export const enum CursorAnchor {
   Start = 0,
@@ -48,6 +50,11 @@ export const enum SliceBehavior {
    * used to re-verse inline formatting, like bold, italic, etc.
    */
   Erase = 0b011,
+
+  /**
+   * Used to mark the user's cursor position in the document.
+   */
+  Cursor = 0b100,
 }
 
 export const enum SliceTupleIndex {

src/json-crdt-extensions/peritext/slice/constants.ts

@@ -20,6 +20,14 @@ export const enum SESSION {
    */
   GLOBAL = 2,
 
+  /**
+   * Session ID used for models that are not shared with other users. For
+   * example, when a user is editing a document in a local editor, these
+   * documents could capture local information, like the cursor position, which
+   * is not shared with other users.
+   */
+  LOCAL = 3,
+
   /** Max allowed session ID, they are capped at 53-bits. */
   MAX = 9007199254740991,
 }