Merge pull request #839 from streamich/block-discriminants

Peritext block element discriminants

Author: streamich

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

@@ -317,15 +317,15 @@ export class Inline<T = string> extends Range<T> implements Printable {
               printTree(
                 tab,
                 attrKeys.map((key) => () => {
-                  return (
-                    formatType(key) +
-                    ' = ' +
-                    stringify(
-                      attr[key].map((attr) =>
-                        attr.slice instanceof Cursor ? [attr.slice.type, attr.slice.data()] : attr.slice.data(),
-                      ),
-                    )
-                  );
+                  return key === '-1'
+                    ? '▚ (cursor)'
+                    : formatType(key) +
+                        ' = ' +
+                        stringify(
+                          attr[key].map((attr) =>
+                            attr.slice instanceof Cursor ? [attr.slice.type, attr.slice.data()] : attr.slice.data(),
+                          ),
+                        );
                 }),
               ),
         !texts.length

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

@@ -1,25 +1,27 @@
-import {printTree} from 'tree-dump/lib/printTree';
 import {Cursor} from './Cursor';
-import {stringify} from '../../../json-text/stringify';
-import {CursorAnchor, SliceBehavior, SliceHeaderMask, SliceHeaderShift} from '../slice/constants';
+import {Anchor} from '../rga/constants';
+import {formatType} from '../slice/util';
 import {EditorSlices} from './EditorSlices';
 import {next, prev} from 'sonic-forest/lib/util';
-import {isLetter, isPunctuation, isWhitespace} from './util';
-import {Anchor} from '../rga/constants';
-import {MarkerOverlayPoint} from '../overlay/MarkerOverlayPoint';
-import {UndefEndIter, type UndefIterator} from '../../../util/iterator';
+import {printTree} from 'tree-dump/lib/printTree';
+import {createRegistry} from '../registry/registry';
 import {PersistedSlice} from '../slice/PersistedSlice';
+import {stringify} from '../../../json-text/stringify';
+import {CommonSliceType, type SliceTypeSteps, type SliceType} from '../slice';
+import {isLetter, isPunctuation, isWhitespace, stepsEqual} from './util';
 import {ValueSyncStore} from '../../../util/events/sync-store';
-import {formatType} from '../slice/util';
-import {CommonSliceType, type SliceType} from '../slice';
+import {MarkerOverlayPoint} from '../overlay/MarkerOverlayPoint';
+import {UndefEndIter, type UndefIterator} from '../../../util/iterator';
 import {tick, Timespan, type ITimespanStruct} from '../../../json-crdt-patch';
-import type {ChunkSlice} from '../util/ChunkSlice';
-import type {Peritext} from '../Peritext';
+import {CursorAnchor, SliceBehavior, SliceHeaderMask, SliceHeaderShift, SliceTypeCon} from '../slice/constants';
 import type {Point} from '../rga/Point';
 import type {Range} from '../rga/Range';
-import type {CharIterator, CharPredicate, Position, TextRangeUnit, ViewStyle, ViewRange, ViewSlice} from './types';
 import type {Printable} from 'tree-dump';
+import type {Peritext} from '../Peritext';
+import type {ChunkSlice} from '../util/ChunkSlice';
 import type {MarkerSlice} from '../slice/MarkerSlice';
+import type {SliceRegistry} from '../registry/SliceRegistry';
+import type {CharIterator, CharPredicate, Position, TextRangeUnit, ViewStyle, ViewRange, ViewSlice} from './types';
 
 /**
  * For inline boolean ("Overwrite") slices, both range endpoints should be
@@ -51,6 +53,8 @@ export class Editor<T = string> implements Printable {
    */
   public readonly pending = new ValueSyncStore<Map<CommonSliceType | string | number, unknown>>(new Map());
 
+  public registry: SliceRegistry = createRegistry();
+
   constructor(public readonly txt: Peritext<T>) {
     this.saved = new EditorSlices(txt, txt.savedSlices);
     this.extra = new EditorSlices(txt, txt.extraSlices);
@@ -590,6 +594,45 @@ export class Editor<T = string> implements Printable {
 
   // --------------------------------------------------------------- formatting
 
+  public eraseFormatting(store: EditorSlices<T> = this.saved): void {
+    const overlay = this.txt.overlay;
+    for (let i = this.cursors0(), cursor = i(); cursor; cursor = i()) {
+      overlay.refresh();
+      const contained = overlay.findContained(cursor);
+      for (const slice of contained) {
+        if (slice instanceof PersistedSlice) {
+          switch (slice.behavior) {
+            case SliceBehavior.One:
+            case SliceBehavior.Many:
+            case SliceBehavior.Erase:
+              slice.del();
+          }
+        }
+      }
+      overlay.refresh();
+      const overlapping = overlay.findOverlapping(cursor);
+      for (const slice of overlapping) {
+        switch (slice.behavior) {
+          case SliceBehavior.One:
+          case SliceBehavior.Many: {
+            store.insErase(slice.type);
+          }
+        }
+      }
+    }
+  }
+
+  public clearFormatting(store: EditorSlices<T> = this.saved): void {
+    const overlay = this.txt.overlay;
+    overlay.refresh();
+    for (let i = this.cursors0(), cursor = i(); cursor; cursor = i()) {
+      const overlapping = overlay.findOverlapping(cursor);
+      for (const slice of overlapping) store.del(slice.id);
+    }
+  }
+
+  // -------------------------------------------------------- inline formatting
+
   protected toggleRangeExclFmt(
     range: Range<T>,
     type: CommonSliceType | string | number,
@@ -645,54 +688,7 @@ export class Editor<T = string> implements Printable {
     }
   }
 
-  public eraseFormatting(store: EditorSlices<T> = this.saved): void {
-    const overlay = this.txt.overlay;
-    for (let i = this.cursors0(), cursor = i(); cursor; cursor = i()) {
-      overlay.refresh();
-      const contained = overlay.findContained(cursor);
-      for (const slice of contained) {
-        if (slice instanceof PersistedSlice) {
-          switch (slice.behavior) {
-            case SliceBehavior.One:
-            case SliceBehavior.Many:
-            case SliceBehavior.Erase:
-              slice.del();
-          }
-        }
-      }
-      overlay.refresh();
-      const overlapping = overlay.findOverlapping(cursor);
-      for (const slice of overlapping) {
-        switch (slice.behavior) {
-          case SliceBehavior.One:
-          case SliceBehavior.Many: {
-            store.insErase(slice.type);
-          }
-        }
-      }
-    }
-  }
-
-  public clearFormatting(store: EditorSlices<T> = this.saved): void {
-    const overlay = this.txt.overlay;
-    overlay.refresh();
-    for (let i = this.cursors0(), cursor = i(); cursor; cursor = i()) {
-      const overlapping = overlay.findOverlapping(cursor);
-      for (const slice of overlapping) store.del(slice.id);
-    }
-  }
-
-  public split(type?: SliceType, data?: unknown, slices: EditorSlices<T> = this.saved): void {
-    for (let i = this.cursors0(), cursor = i(); cursor; cursor = i()) {
-      this.collapseCursor(cursor);
-      if (type === void 0) {
-        // TODO: detect current block type
-        type = CommonSliceType.p;
-      }
-      slices.insMarker(type, data);
-      cursor.move(1);
-    }
-  }
+  // --------------------------------------------------------- block formatting
 
   /**
    * Returns block split marker of the block inside which the point is located.
@@ -704,6 +700,21 @@ export class Editor<T = string> implements Printable {
     return this.txt.overlay.getOrNextLowerMarker(point)?.marker;
   }
 
+  /**
+   * Returns the block type at the given point. Block type is a nested array of
+   * tags, e.g. `['p']`, `['blockquote', 'p']`, `['ul', 'li', 'p']`, etc.
+   *
+   * @param point The point to get the block type at.
+   * @returns Current block type at the point.
+   */
+  public getBlockType(point: Point<T>): [type: SliceTypeSteps, marker?: MarkerSlice<T> | undefined] {
+    const marker = this.getMarker(point);
+    if (!marker) return [[SliceTypeCon.p]];
+    let steps = marker?.type ?? [SliceTypeCon.p];
+    if (!Array.isArray(steps)) steps = [steps];
+    return [steps, marker];
+  }
+
   /**
    * Insert a block split at the start of the document. The start of the
    * document is defined as immediately after all deleted characters starting
@@ -739,6 +750,92 @@ export class Editor<T = string> implements Printable {
     return this.insStartMarker(type);
   }
 
+  public getContainerPath(steps: SliceTypeSteps): SliceTypeSteps {
+    const registry = this.registry;
+    const length = steps.length;
+    for (let i = length - 1; i >= 0; i--) {
+      const step = steps[i];
+      const tag = Array.isArray(step) ? step[0] : step;
+      const isContainer = registry.isContainer(tag);
+      if (isContainer) return steps.slice(0, i + 1);
+    }
+    return [];
+  }
+
+  public getDeepestCommonContainer(steps1: SliceTypeSteps, steps2: SliceTypeSteps): number {
+    const length1 = steps1.length;
+    const length2 = steps2.length;
+    const min = Math.min(length1, length2);
+    for (let i = 0; i < min; i++) {
+      const step1 = steps1[i];
+      const step2 = steps2[i];
+      const tag1 = Array.isArray(step1) ? step1[0] : step1;
+      const tag2 = Array.isArray(step2) ? step2[0] : step2;
+      const disc1 = Array.isArray(step1) ? step1[1] : 0;
+      const disc2 = Array.isArray(step2) ? step2[1] : 0;
+      if (tag1 !== tag2 || disc1 !== disc2) return i - 1;
+      if (!this.registry.isContainer(tag1)) return i - 1;
+    }
+    return min;
+  }
+
+  /**
+   * @param at Point at which split block split happens.
+   * @param slices The slices set to use.
+   * @returns True if a marker was inserted, false if it was updated.
+   */
+  public splitAt(at: Point<T>, slices: EditorSlices<T> = this.saved): boolean {
+    const [type, marker] = this.getBlockType(at);
+    const prevMarker = marker ? this.getMarker(marker.start.copy((p) => p.halfstep(-1))) : void 0;
+    if (marker && prevMarker) {
+      const rangeFromMarker = this.txt.range(marker.start, at);
+      const noLeadingText = rangeFromMarker.length() <= 1;
+      if (noLeadingText) {
+        const markerSteps = marker.typeSteps();
+        const prevMarkerSteps = prevMarker.typeSteps();
+        if (markerSteps.length > 1) {
+          const areMarkerTypesEqual = stepsEqual(markerSteps, prevMarkerSteps);
+          if (areMarkerTypesEqual) {
+            const i = this.getDeepestCommonContainer(markerSteps, prevMarkerSteps);
+            if (i >= 0) {
+              const newType = [...markerSteps];
+              const step = newType[i];
+              const tag = Array.isArray(step) ? step[0] : step;
+              const disc = Array.isArray(step) ? step[1] : 0;
+              newType[i] = [tag, (disc + 1) % 8];
+              marker.update({type: newType});
+              return false;
+            }
+          }
+        }
+      }
+    }
+    const containerPath = this.getContainerPath(type);
+    const newType = containerPath.concat([CommonSliceType.p]);
+    slices.insMarker(newType);
+    return true;
+  }
+
+  public split(type?: SliceType, data?: unknown, slices: EditorSlices<T> = this.saved): void {
+    if (type === void 0) {
+      for (let i = this.cursors0(), cursor = i(); cursor; cursor = i()) {
+        this.collapseCursor(cursor);
+        const didInsertMarker = this.splitAt(cursor.start, slices);
+        if (didInsertMarker) cursor.move(1);
+      }
+    } else {
+      for (let i = this.cursors0(), cursor = i(); cursor; cursor = i()) {
+        this.collapseCursor(cursor);
+        if (type === void 0) {
+          // TODO: detect current block type
+          type = CommonSliceType.p;
+        }
+        slices.insMarker(type, data);
+        cursor.move(1);
+      }
+    }
+  }
+
   // ---------------------------------------------------------- export / import
 
   public export(range: Range<T>): ViewRange {

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

@@ -1,3 +1,4 @@
+import type {SliceTypeSteps} from '../slice';
 import type {CharPredicate} from './types';
 
 const LETTER_REGEX = /(\p{Letter}|\d|_)/u;
@@ -6,3 +7,20 @@ const WHITESPACE_REGEX = /\s/;
 export const isLetter: CharPredicate<string> = (char: string) => LETTER_REGEX.test(char[0]);
 export const isWhitespace: CharPredicate<string> = (char: string) => WHITESPACE_REGEX.test(char[0]);
 export const isPunctuation: CharPredicate<string> = (char: string) => !isLetter(char) && !isWhitespace(char);
+
+/**
+ * Compares two block slice types, ignores tag discriminants.
+ */
+export const stepsEqual = (a: SliceTypeSteps, b: SliceTypeSteps): boolean => {
+  const lenA = a.length;
+  const lenB = b.length;
+  if (lenA !== lenB) return false;
+  for (let i = 0; i < lenA; i++) {
+    const stepA = a[i];
+    const stepB = b[i];
+    const tagA = Array.isArray(stepA) ? stepA[0] : stepA;
+    const tagB = Array.isArray(stepB) ? stepB[0] : stepB;
+    if (tagA !== tagB) return false;
+  }
+  return true;
+};

src/json-crdt-extensions/peritext/registry/SliceRegistry.ts

@@ -19,6 +19,11 @@ export class SliceRegistryEntry<
   }
 
   constructor(
+    /**
+     * Specifies whether the slice is an inline or block element. And if it is
+     * an inline element, whether multiple instances of the same tag are allowed
+     * to be applied to a range of tex - "Many", or only one instance - "One".
+     */
     public readonly behavior: Behavior,
 
     /**
@@ -93,6 +98,10 @@ export class SliceRegistryEntry<
 }
 
 /**
+ * Slice registry contains a record of possible inline an block formatting
+ * annotations. Each entry in the registry is a {@link SliceRegistryEntry} that
+ * specifies the behavior, tag, and other properties of the slice.
+ *
  * @todo Consider moving the registry under the `/transfer` directory. Or maybe
  * `/slices` directory.
  */
@@ -102,6 +111,7 @@ export class SliceRegistry {
 
   public add(entry: SliceRegistryEntry<any, any, any>): void {
     const {tag, fromHtml} = entry;
+    this.map.set(tag, entry);
     const _fromHtml = this._fromHtml;
     if (fromHtml) {
       for (const htmlTag in fromHtml) {
@@ -115,6 +125,11 @@ export class SliceRegistry {
     if (tagStr && typeof tagStr === 'string') _fromHtml.set(tagStr, [[entry, () => [tag, null]]]);
   }
 
+  public isContainer(tag: TagType): boolean {
+    const entry = this.map.get(tag);
+    return entry?.container ?? false;
+  }
+
   public toHtml(el: PeritextMlElement): ReturnType<ToHtmlConverter<any>> | undefined {
     const entry = this.map.get(el[0]);
     return entry?.toHtml ? entry?.toHtml(el) : void 0;