feat(json-crdt-peritext-ui): 🎸 improve boundary element mapping

Author: streamich

src/json-crdt-peritext-ui/web/dom/DomController.ts

@@ -1,4 +1,5 @@
 import {printTree, type Printable} from 'tree-dump';
+import {AvlMap} from "sonic-forest/lib/avl/AvlMap";
 import {InputController} from './InputController';
 import {CursorController} from './CursorController';
 import {RichTextController} from './RichTextController';
@@ -8,12 +9,12 @@ import {AnnalsController} from './annals/AnnalsController';
 import {ElementAttr} from '../constants';
 import {Anchor} from '../../../json-crdt-extensions/peritext/rga/constants';
 import {UiHandle} from '../../events/defaults/ui/UiHandle';
-import type {ITimestampStruct} from '../../../json-crdt-patch';
+import {compare, type ITimestampStruct} from '../../../json-crdt-patch';
 import type {PeritextEventDefaults} from '../../events/defaults/PeritextEventDefaults';
 import type {PeritextEventTarget} from '../../events/PeritextEventTarget';
 import type {Rect, UiLifeCycles} from '../types';
 import type {Log} from '../../../json-crdt/log/Log';
-import type {Inline} from '../../../json-crdt-extensions';
+import type {Inline, Peritext} from '../../../json-crdt-extensions';
 import type {Range} from '../../../json-crdt-extensions/peritext/rga/Range';
 import type {PeritextUiApi} from '../../events/defaults/ui/types';
 
@@ -24,17 +25,20 @@ export interface DomControllerOpts {
 }
 
 export class DomController implements UiLifeCycles, Printable, PeritextUiApi {
+  public readonly txt: Peritext;
   public readonly et: PeritextEventTarget;
   public readonly keys: KeyController;
   public readonly comp: CompositionController;
   public readonly input: InputController;
   public readonly cursor: CursorController;
   public readonly richText: RichTextController;
   public readonly annals: AnnalsController;
+  public readonly boundaries = new AvlMap<ITimestampStruct, Element>(compare);
 
   constructor(public readonly opts: DomControllerOpts) {
     const {source, events, log} = opts;
     const {txt} = events;
+    this.txt = txt;
     const et = (this.et = opts.events.et);
     const keys = (this.keys = new KeyController({source}));
     const comp = (this.comp = new CompositionController({et, source, txt}));
@@ -77,6 +81,12 @@ export class DomController implements UiLifeCycles, Printable, PeritextUiApi {
   }
 
   protected findSpanContaining(range: Range): [span: HTMLSpanElement, inline: Inline] | undefined {
+    const start = range.start;
+    const marker = this.txt.overlay.getOrNextLowerMarker(start);
+    const markerId = marker?.id;
+    const el = this.boundaries.get(markerId);
+    // console.log('markerId', markerId);
+
     const spans = this.getSpans();
     const length = spans.length;
     for (let i = 0; i < length; i++) {

src/json-crdt-peritext-ui/web/react/BlockView.tsx

@@ -19,7 +19,7 @@ export interface BlockViewProps {
 export const BlockView: React.FC<BlockViewProps> = React.memo(
   (props) => {
     const {block, el} = props;
-    const {plugins, mapping} = usePeritext();
+    const {plugins, dom} = usePeritext();
     const elements: React.ReactNode[] = [];
     if (block instanceof LeafBlock) {
       for (const inline of block.texts()) {
@@ -78,8 +78,9 @@ export const BlockView: React.FC<BlockViewProps> = React.memo(
       <span ref={(element) => {
         el?.(element);
         if (block instanceof LeafBlock) {
-          if (element) mapping.setBlock(block, element);
-          else mapping.delBlock(block);
+          const blockId = block.start.id;
+          if (element) dom.boundaries.set(blockId, element);
+          else dom.boundaries.del(blockId);
         }
       }} style={{position: 'relative', display: 'block'}}>
         {elements.length ? elements : Char.ZeroLengthSpace}

src/json-crdt-peritext-ui/web/state/ElementMapping.ts

@@ -1,7 +1,6 @@
 import {Log} from '../../../json-crdt/log/Log';
 import {DomController} from '../dom/DomController';
 import {ValueSyncStore} from '../../../util/events/sync-store';
-import {ElementMapping} from './ElementMapping';
 import type {PeritextPlugin} from '../react/types';
 import type {Peritext} from '../../../json-crdt-extensions/peritext/Peritext';
 import type {PeritextEventDefaults} from '../../events/defaults/PeritextEventDefaults';
@@ -12,7 +11,6 @@ export class PeritextSurfaceState implements UiLifeCycles {
   public readonly dom: DomController;
   public readonly log: Log;
   public readonly render = new ValueSyncStore<number>(0);
-  public readonly mapping: ElementMapping = new ElementMapping();;
 
   public readonly rerender = (): void => {
     const {peritext, render} = this;