Merge pull request #893 from streamich/link-formatting

Link formatting

Author: streamich

biome.json

@@ -44,6 +44,9 @@
 			},
 			"a11y": {
 				"noSvgWithoutTitle": "off"
+			},
+			"performance": {
+				"noDelete": "off"
 			}
 		}
 	}

package.json

@@ -106,6 +106,10 @@
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.0",
     "benchmark": "^2.1.4",
+    "clipboard-copy": "^4.0.1",
+    "collaborative-editor": "^2.8.0",
+    "collaborative-input": "^1.6.1",
+    "collaborative-ui": "^1.6.0",
     "config-galore": "^1.0.0",
     "editing-traces": "https://github.com/streamich/editing-traces#6494020428530a6e382378b98d1d7e31334e2d7b",
     "fast-diff": "^1.3.0",
@@ -127,6 +131,7 @@
     "tslint": "^6.1.3",
     "tslint-config-common": "^1.6.2",
     "typescript": "^5.4.5",
+    "use-t": "^1.6.3",
     "webpack": "^5.95.0",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^5.1.0",

src/json-crdt-diff/JsonCrdtDiff.ts

@@ -182,7 +182,7 @@ export class JsonCrdtDiff {
     }
   }
 
-  public diffAny(src: JsonNode, dst: unknown): void {
+  protected diffAny(src: JsonNode, dst: unknown): void {
     if (src instanceof ConNode) {
       const val = src.val;
       if (val !== dst && !deepEqual(src.val, dst)) throw new DiffError();

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

@@ -23,16 +23,19 @@ import type {SliceSchema, SliceType} from './slice/types';
 import type {SchemaToJsonNode} from '../../json-crdt/schema/types';
 import type {AbstractRga} from '../../json-crdt/nodes/rga';
 import type {ChunkSlice} from './util/ChunkSlice';
+import type {Stateful} from './types';
 
 const EXTRA_SLICES_SCHEMA = s.vec(s.arr<SliceSchema>([]));
+const LOCAL_DATA_SCHEMA = EXTRA_SLICES_SCHEMA;
 
-type SlicesModel = Model<SchemaToJsonNode<typeof EXTRA_SLICES_SCHEMA>>;
+export type ExtraSlicesModel = Model<SchemaToJsonNode<typeof EXTRA_SLICES_SCHEMA>>;
+export type LocalModel = Model<SchemaToJsonNode<typeof LOCAL_DATA_SCHEMA>>;
 
 /**
  * Context for a Peritext instance. Contains all the data and methods needed to
  * interact with the text.
  */
-export class Peritext<T = string> implements Printable {
+export class Peritext<T = string> implements Printable, Stateful {
   /**
    * *Slices* are rich-text annotations that appear in the text. The "saved"
    * slices are the ones that are persisted in the document.
@@ -76,8 +79,8 @@ export class Peritext<T = string> implements Printable {
     public readonly str: AbstractRga<T>,
     slices: ArrNode,
     // TODO: Add test that verifies that SIDs are different across all three models.
-    extraSlicesModel: SlicesModel = Model.create(EXTRA_SLICES_SCHEMA, model.clock.sid - 1),
-    localSlicesModel: SlicesModel = Model.create(EXTRA_SLICES_SCHEMA, SESSION.LOCAL),
+    extraSlicesModel: ExtraSlicesModel = Model.create(EXTRA_SLICES_SCHEMA, model.clock.sid - 1),
+    localSlicesModel: LocalModel = Model.create(LOCAL_DATA_SCHEMA, SESSION.LOCAL),
   ) {
     this.savedSlices = new Slices(this, slices);
     this.extraSlices = new ExtraSlices(this, extraSlicesModel.root.node().get(0)!);
@@ -327,7 +330,7 @@ export class Peritext<T = string> implements Printable {
     api.apply();
   }
 
-  // ---------------------------------------------------------------- Printable
+  /** ----------------------------------------------------- {@link Printable} */
 
   public toString(tab: string = ''): string {
     const nl = () => '';
@@ -348,7 +351,7 @@ export class Peritext<T = string> implements Printable {
     );
   }
 
-  // ----------------------------------------------------------------- Stateful
+  /** ------------------------------------------------------ {@link Stateful} */
 
   public hash: number = 0;
 

src/json-crdt-extensions/peritext/__tests__/Peritext.render-block.spec.ts

@@ -62,7 +62,6 @@ const runInlineSlicesTests = (
   <0>
     "abcdefghijklmnopqrstuvwxyz" {  }
   <unfurl> { link = "foobar" }
-    "" {  }
 "
 `);
     });
@@ -132,7 +131,6 @@ const runInlineSlicesTests = (
   <0>
     "abcdefghijklmno" {  }
   <paragraph> [  ]
-    "" {  }
     "pqrst" { BOLD = [ !u ] }
     "uvwxyz" {  }
 "

src/json-crdt-extensions/peritext/block/Block.ts

@@ -3,7 +3,7 @@ import {CONST, updateJson, updateNum} from '../../../json-hash/hash';
 import {MarkerOverlayPoint} from '../overlay/MarkerOverlayPoint';
 import {UndefEndIter, type UndefIterator} from '../../../util/iterator';
 import {Inline} from './Inline';
-import {formatType} from '../slice/util';
+import {formatType, getTag} from '../slice/util';
 import {Range} from '../rga/Range';
 import type {Point} from '../rga/Point';
 import type {OverlayPoint} from '../overlay/OverlayPoint';
@@ -45,11 +45,7 @@ export class Block<T = string, Attr = unknown> extends Range<T> implements IBloc
   }
 
   public tag(): number | string {
-    const path = this.path;
-    const length = path.length;
-    if (!length) return '';
-    const step = path[length - 1];
-    return Array.isArray(step) ? step[0] : step;
+    return getTag(this.path);
   }
 
   public attr(): Attr | undefined {
@@ -109,15 +105,16 @@ export class Block<T = string, Attr = unknown> extends Range<T> implements IBloc
    */
   public texts0(): UndefIterator<Inline<T>> {
     const txt = this.txt;
+    const overlay = txt.overlay;
     const iterator = this.tuples0();
     const start = this.start;
     const end = this.end;
-    const startIsMarker = txt.overlay.isMarker(start.id);
-    const endIsMarker = txt.overlay.isMarker(end.id);
+    const startIsMarker = overlay.isMarker(start.id);
+    const endIsMarker = overlay.isMarker(end.id);
     let isFirst = true;
     let next = iterator();
     let closed = false;
-    return () => {
+    const newIterator: UndefIterator<Inline<T>> = () => {
       if (closed) return;
       const pair = next;
       next = iterator();
@@ -131,6 +128,9 @@ export class Block<T = string, Attr = unknown> extends Range<T> implements IBloc
         if (startIsMarker) {
           point1 = point1.clone();
           point1.step(1);
+          // Skip condition when inline annotations tarts immediately at th
+          // beginning of the block.
+          if (point1.cmp(point2) === 0) return newIterator();
         }
       }
       if (!endIsMarker && end.cmpSpatial(overlayPoint2) < 0) {
@@ -139,6 +139,7 @@ export class Block<T = string, Attr = unknown> extends Range<T> implements IBloc
       }
       return new Inline(txt, overlayPoint1, overlayPoint2, point1, point2);
     };
+    return newIterator;
   }
 
   /**

src/json-crdt-extensions/peritext/block/Inline.ts

@@ -1,6 +1,6 @@
 import {printTree} from 'tree-dump/lib/printTree';
 import {stringify} from '../../../json-text/stringify';
-import {SliceBehavior, SliceTypeName} from '../slice/constants';
+import {SliceStacking, SliceTypeName} from '../slice/constants';
 import {Range} from '../rga/Range';
 import {ChunkSlice} from '../util/ChunkSlice';
 import {Cursor} from '../editor/Cursor';
@@ -160,8 +160,8 @@ export class Inline<T = string> extends Range<T> implements Printable {
   public attr(): InlineAttrs<T> {
     if (this._attr) return this._attr;
     const attr: InlineAttrs<T> = (this._attr = {});
-    const p1 = this.p1 as OverlayPoint<T>;
-    const p2 = this.p2 as OverlayPoint<T>;
+    const p1 = this.p1;
+    const p2 = this.p2;
     const slices1 = p1.layers;
     const slices2 = p1.markers;
     const slices3 = p2.isAbsEnd() ? p2.markers : [];
@@ -174,22 +174,22 @@ export class Inline<T = string> extends Range<T> implements Printable {
       const slice = i >= length12 ? slices3[i - length12] : i >= length1 ? slices2[i - length1] : slices1[i];
       if (slice instanceof Range) {
         const type = slice.type as PathStep;
-        switch (slice.behavior) {
-          case SliceBehavior.Cursor: {
+        switch (slice.stacking) {
+          case SliceStacking.Cursor: {
             const stack: InlineAttrStack<T> = attr[SliceTypeName.Cursor] ?? (attr[SliceTypeName.Cursor] = []);
             stack.push(this.createAttr(slice));
             break;
           }
-          case SliceBehavior.Many: {
+          case SliceStacking.Many: {
             const stack: InlineAttrStack<T> = attr[type] ?? (attr[type] = []);
             stack.push(this.createAttr(slice));
             break;
           }
-          case SliceBehavior.One: {
+          case SliceStacking.One: {
             attr[type] = [this.createAttr(slice)];
             break;
           }
-          case SliceBehavior.Erase: {
+          case SliceStacking.Erase: {
             delete attr[type];
             break;
           }

src/json-crdt-extensions/peritext/block/__tests__/Fragment-refresh.spec.ts

@@ -5,6 +5,7 @@ import {
   setupAlphabetWithDeletesKit,
   setupAlphabetWithTwoChunksKit,
 } from '../../__tests__/setup';
+import {LeafBlock} from '../LeafBlock';
 
 const runTests = (setup: () => Kit) => {
   test('updates block hash only where something was changed - leading block', () => {
@@ -63,6 +64,24 @@ const runTests = (setup: () => Kit) => {
     expect(rootHash1).not.toBe(rootHash2);
     expect(firstBlockHash1).not.toBe(firstBlockHash2);
   });
+
+  test('does not create collapsed Inline at the beginning of block', () => {
+    const {editor, peritext} = setup();
+    editor.cursor.setAt(0);
+    editor.saved.insMarker('p');
+    editor.cursor.setAt(1, 4);
+    editor.saved.insOne('strong');
+    peritext.refresh();
+    const fragment = peritext.blocks.root;
+    const block = fragment.children[0];
+    expect(block instanceof LeafBlock).toBe(true);
+    expect(block.tag()).toBe('p');
+    const [inline0, inline1] = block.texts();
+    expect(inline0.text()).toBe('abcd');
+    expect(!!inline0.attr().strong).toBe(true);
+    expect(inline1.text()).toBe('efghijklmnopqrstuvwxyz');
+    expect(!!inline1.attr().strong).toBe(false);
+  });
 };
 
 describe('Blocks.refresh()', () => {

src/json-crdt-extensions/peritext/block/types.ts

@@ -1,4 +1,4 @@
-import type {SliceBehavior} from '../slice/constants';
+import type {SliceStacking} from '../slice/constants';
 
 export type PeritextMlNode = string | PeritextMlElement;
 
@@ -11,5 +11,5 @@ export type PeritextMlElement<Tag extends string | number = string | number, Dat
 export interface PeritextMlAttributes<Data = unknown, Inline = boolean> {
   data?: Data;
   inline?: Inline;
-  behavior?: SliceBehavior;
+  stacking?: SliceStacking;
 }