Merge pull request #845 from streamich/peritext-block-rendering-improvements

Peritext block rendering improvements

Author: streamich

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

@@ -7,7 +7,7 @@ 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 {CommonSliceType, type SliceTypeSteps, type SliceType, type SliceTypeStep} from '../slice';
 import {isLetter, isPunctuation, isWhitespace, stepsEqual} from './util';
 import {ValueSyncStore} from '../../../util/events/sync-store';
 import {MarkerOverlayPoint} from '../overlay/MarkerOverlayPoint';
@@ -854,6 +854,85 @@ export class Editor<T = string> implements Printable {
     }
   }
 
+  public setStartMarker(type: SliceType, data?: unknown, slices: EditorSlices<T> = this.saved): MarkerSlice<T> {
+    const after = this.txt.pointStart() ?? this.txt.pointAbsStart();
+    after.refAfter();
+    if (Array.isArray(type) && type.length === 1) type = type[0];
+    return slices.slices.insMarkerAfter(after.id, type, data);
+  }
+
+  public tglMarkerAt(
+    point: Point<T>,
+    type: SliceType,
+    data?: unknown,
+    slices: EditorSlices<T> = this.saved,
+    def: SliceTypeStep = SliceTypeCon.p,
+  ): void {
+    const overlay = this.txt.overlay;
+    const markerPoint = overlay.getOrNextLowerMarker(point);
+    if (markerPoint) {
+      const marker = markerPoint.marker;
+      const tag = marker.tag();
+      if (!Array.isArray(type)) type = [type];
+      const typeTag = type[type.length - 1];
+      if (tag === typeTag) type = [...type.slice(0, -1), def];
+      if (Array.isArray(type) && type.length === 1) type = type[0];
+      marker.update({type});
+    } else this.setStartMarker(type, data, slices);
+  }
+
+  public updMarkerAt(point: Point<T>, type: SliceType, data?: unknown, slices: EditorSlices<T> = this.saved): void {
+    const overlay = this.txt.overlay;
+    const markerPoint = overlay.getOrNextLowerMarker(point);
+    if (markerPoint) {
+      const marker = markerPoint.marker;
+      if (Array.isArray(type) && type.length === 1) type = type[0];
+      marker.update({type});
+    } else this.setStartMarker(type, data, slices);
+  }
+
+  /**
+   * Toggle the type of a block split between the slice type and the default
+   * (paragraph) block type.
+   *
+   * @param type Slice type to toggle.
+   * @param data Custom data of the slice.
+   */
+  public tglMarker(
+    type: SliceType,
+    data?: unknown,
+    slices: EditorSlices<T> = this.saved,
+    def: SliceTypeStep = SliceTypeCon.p,
+  ): void {
+    for (let i = this.cursors0(), cursor = i(); cursor; cursor = i())
+      this.tglMarkerAt(cursor.start, type, data, slices, def);
+  }
+
+  /**
+   * Update the type of a block split at all cursor positions.
+   *
+   * @param type Slice type to set.
+   * @param data Custom data of the slice.
+   * @param slices The slices set to use, if new marker is inserted at the start
+   *     of the document.
+   */
+  public updMarker(type: SliceType, data?: unknown, slices: EditorSlices<T> = this.saved): void {
+    for (let i = this.cursors0(), cursor = i(); cursor; cursor = i())
+      this.updMarkerAt(cursor.start, type, data, slices);
+  }
+
+  public delMarker(): void {
+    const markerPoints = new Set<MarkerOverlayPoint<T>>();
+    for (let i = this.cursors0(), cursor = i(); cursor; cursor = i()) {
+      const markerPoint = this.txt.overlay.getOrNextLowerMarker(cursor.start);
+      if (markerPoint) markerPoints.add(markerPoint);
+    }
+    for (const markerPoint of markerPoints) {
+      const boundary = markerPoint.marker.boundary();
+      this.delRange(boundary);
+    }
+  }
+
   // ---------------------------------------------------------- export / import
 
   public export(range: Range<T>): ViewRange {

src/json-crdt-extensions/peritext/overlay/Overlay.ts

@@ -496,6 +496,16 @@ export class Overlay<T = string> implements Printable, Stateful {
     return op instanceof MarkerOverlayPoint && op.id.time === id.time && op.id.sid === id.sid;
   }
 
+  public skipMarkers(point: Point<T>, direction: -1 | 1): boolean {
+    while (true) {
+      const isMarker = this.isMarker(point.id);
+      if (!isMarker) return true;
+      const end = point.step(direction);
+      if (end) break;
+    }
+    return false;
+  }
+
   // ----------------------------------------------------------------- Stateful
 
   public hash: number = 0;

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

@@ -1,9 +1,22 @@
+import {Anchor} from '../rga/constants';
 import {PersistedSlice} from './PersistedSlice';
+import type {Range} from '../rga/Range';
 
 /**
  * Represents a block split in the text, i.e. it is a *marker* that shows
  * where a block was split. Markers also insert one "\n" new line character.
  * Both marker ends are attached to the "before" anchor fo the "\n" new line
  * character, i.e. it is *collapsed* to the "before" anchor.
  */
-export class MarkerSlice<T = string> extends PersistedSlice<T> {}
+export class MarkerSlice<T = string> extends PersistedSlice<T> {
+  /**
+   * Returns the {@link Range} which exactly contains the block boundary of this
+   * marker.
+   */
+  public boundary(): Range<T> {
+    const start = this.start;
+    const end = start.clone();
+    end.anchor = Anchor.After;
+    return this.txt.range(start, end);
+  }
+}

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

@@ -21,7 +21,7 @@ import {s} from '../../../json-crdt-patch';
 import type {VecNode} from '../../../json-crdt/nodes';
 import type {ITimestampStruct} from '../../../json-crdt-patch/clock';
 import type {ArrChunk} from '../../../json-crdt/nodes';
-import type {MutableSlice, SliceView, SliceType, SliceUpdateParams, SliceTypeSteps} from './types';
+import type {MutableSlice, SliceView, SliceType, SliceUpdateParams, SliceTypeSteps, SliceTypeStep} from './types';
 import type {Stateful} from '../types';
 import type {Printable} from 'tree-dump/lib/types';
 import type {AbstractRga} from '../../../json-crdt/nodes/rga';
@@ -109,6 +109,11 @@ export class PersistedSlice<T = string> extends Range<T> implements MutableSlice
   public behavior: SliceBehavior;
   public type: SliceType;
 
+  public tag(): SliceTypeStep {
+    const type = this.type;
+    return Array.isArray(type) ? type[type.length - 1] : type;
+  }
+
   public typeSteps(): SliceTypeSteps {
     const type = this.type ?? SliceTypeCon.p;
     return Array.isArray(type) ? type : [type];

src/json-crdt-peritext-ui/__demos__/components/App.tsx

@@ -7,7 +7,7 @@ import {CursorPlugin} from '../../plugins/cursor';
 import {ToolbarPlugin} from '../../plugins/toolbar';
 import {DebugPlugin} from '../../plugins/debug';
 import {BlocksPlugin} from '../../plugins/blocks';
-import {ValueSyncStore} from '../../../util/events/sync-store';
+import {DebugState} from '../../plugins/debug/state';
 
 const markdown =
   'The German __automotive sector__ is in the process of *cutting ' +
@@ -37,11 +37,11 @@ export const App: React.FC = () => {
   }, [model]);
 
   const plugins = React.useMemo(() => {
-    const debugEnabled = new ValueSyncStore(false);
+    const debugState = new DebugState();
     const cursorPlugin = new CursorPlugin();
-    const toolbarPlugin = new ToolbarPlugin({debug: debugEnabled});
+    const toolbarPlugin = new ToolbarPlugin({debug: debugState});
     const blocksPlugin = new BlocksPlugin();
-    const debugPlugin = new DebugPlugin({enabled: debugEnabled});
+    const debugPlugin = new DebugPlugin({state: debugState});
     return [cursorPlugin, toolbarPlugin, blocksPlugin, debugPlugin];
   }, []);
 

src/json-crdt-peritext-ui/events/defaults/PeritextEventDefaults.ts

@@ -45,14 +45,13 @@ export class PeritextEventDefaults implements PeritextEventHandlerMap {
       if (!pos) return;
       const currLine = ui.getLineInfo(point);
       if (!currLine) return;
-      const lineEdgeX = currLine[0][1].x;
-      const relX = pos[0] - lineEdgeX;
+      const x = pos[0];
       const iterations = Math.abs(steps);
       let nextPoint = point;
       for (let i = 0; i < iterations; i++) {
-        const nextLine = steps > 0 ? ui.getNextLineInfo(currLine) : ui.getPrevLineInfo(currLine);
+        const nextLine = steps > 0 ? ui.getNextLineInfo(currLine) : ui.getNextLineInfo(currLine, -1);
         if (!nextLine) break;
-        nextPoint = ui.findPointAtRelX(relX, nextLine);
+        nextPoint = ui.findPointAtX(x, nextLine);
         if (!nextPoint) break;
         if (point.anchor === Anchor.Before) nextPoint.refBefore();
         else nextPoint.refAfter();
@@ -187,17 +186,22 @@ export class PeritextEventDefaults implements PeritextEventHandlerMap {
 
   public readonly marker = (event: CustomEvent<events.MarkerDetail>) => {
     const {action, type, data} = event.detail;
+    const editor = this.txt.editor;
     switch (action) {
       case 'ins': {
-        this.txt.editor.split(type, data);
+        editor.split(type, data);
         break;
       }
       case 'tog': {
-        const marker = this.txt.overlay.getOrNextLowerMarker(this.txt.editor.cursor.start);
-        if (marker) {
-          marker.marker.update({type});
-        }
-        console.log('togggling..', marker);
+        if (type !== void 0) editor.tglMarker(type, data);
+        break;
+      }
+      case 'upd': {
+        if (type !== void 0) editor.updMarker(type, data);
+        break;
+      }
+      case 'del': {
+        editor.delMarker();
         break;
       }
     }

src/json-crdt-peritext-ui/events/defaults/ui/UiHandle.ts

@@ -43,9 +43,7 @@ export class UiHandle {
     return [x, rect];
   }
 
-  public findPointAtRelX(relX: number, line: UiLineInfo): Point<string> {
-    const lineRect = line[0][1];
-    const lineX = lineRect.x;
+  public findPointAtX(targetX: number, line: UiLineInfo): Point<string> {
     let point = line[0][0].clone();
     const curr = point;
     let bestDiff = 1e9;
@@ -55,8 +53,7 @@ export class UiHandle {
       const pointX = this.pointX(curr);
       if (!pointX) break;
       const [x] = pointX;
-      const currRelX = x - lineX;
-      const diff = Math.abs(currRelX - relX);
+      const diff = Math.abs(x - targetX);
       if (diff <= bestDiff) {
         bestDiff = diff;
         point = curr.clone();
@@ -104,17 +101,12 @@ export class UiHandle {
     return [left, right];
   }
 
-  public getPrevLineInfo(line: UiLineInfo): UiLineInfo | undefined {
-    const [[left]] = line;
-    if (left.isStart()) return;
-    const point = left.copy((p) => p.step(-1));
-    return this.getLineInfo(point);
-  }
-
-  public getNextLineInfo(line: UiLineInfo): UiLineInfo | undefined {
-    const [, [right]] = line;
-    if (right.viewPos() >= this.txt.str.length()) return;
-    const point = right.copy((p) => p.step(1));
+  public getNextLineInfo(line: UiLineInfo, direction: 1 | -1 = 1): UiLineInfo | undefined {
+    const edge = line[direction > 0 ? 1 : 0][0];
+    if (edge.viewPos() >= this.txt.str.length()) return;
+    const point = edge.copy((p) => p.step(direction));
+    const success = this.txt.overlay.skipMarkers(point, direction);
+    if (!success) return;
     return this.getLineInfo(point);
   }
 }

src/json-crdt-peritext-ui/plugins/debug/DebugPlugin.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import {RenderInline} from './RenderInline';
 import {RenderBlock} from './RenderBlock';
+import {RenderCaret} from './RenderCaret';
 import {RenderPeritext, type RenderPeritextProps} from './RenderPeritext';
 import type {PeritextPlugin} from '../../react/types';
-import {RenderCaret} from './RenderCaret';
 
-export interface DebugPluginOpts extends Pick<RenderPeritextProps, 'enabled'> {}
+export interface DebugPluginOpts extends Pick<RenderPeritextProps, 'state'> {}
 
 export class DebugPlugin implements PeritextPlugin {
   constructor(protected readonly opts: DebugPluginOpts = {}) {}

src/json-crdt-peritext-ui/plugins/debug/RenderBlock.tsx

@@ -21,7 +21,9 @@ export interface RenderBlockProps extends BlockViewProps {
 
 export const RenderBlock: React.FC<RenderBlockProps> = ({block, hash, children}) => {
   const ctx = useDebugCtx();
-  const enabled = useSyncStore(ctx.enabled);
+  const enabled = useSyncStore(ctx.state.enabled);
+  const showSliceOutlines = useSyncStore(ctx.state.showSliceOutlines);
+  const showSliceInfo = useSyncStore(ctx.state.showSliceInfo);
 
   if (!enabled) return children;
 
@@ -30,10 +32,12 @@ export const RenderBlock: React.FC<RenderBlockProps> = ({block, hash, children})
 
   return (
     <div style={{position: 'relative'}}>
-      <div contentEditable={false} className={labelContainerClass} onMouseDown={(e) => e.preventDefault()}>
-        <DebugLabel right={hash.toString(36)}>{block.path.map((type) => formatType(type)).join('.')}</DebugLabel>
-      </div>
-      <div style={{outline: '1px dotted blue'}}>{children}</div>
+      {showSliceInfo && (
+        <div contentEditable={false} className={labelContainerClass} onMouseDown={(e) => e.preventDefault()}>
+          <DebugLabel right={hash.toString(36)}>{block.path.map((type) => formatType(type)).join('.')}</DebugLabel>
+        </div>
+      )}
+      {showSliceOutlines ? <div style={{outline: '1px dotted blue'}}>{children}</div> : children}
     </div>
   );
 };