chore(json-crdt-peritext-ui): 🤖 progress on cursor calculation

Author: streamich

src/json-crdt-peritext-ui/plugins/cursor/RenderCaret.tsx

@@ -74,6 +74,18 @@ export const RenderCaret: React.FC<RenderCaretProps> = ({italic, point, children
   const {dom} = usePeritext();
   const focus = useSyncStoreOpt(dom?.cursor.focus) || false;
   const plugin = useCursorPlugin();
+  React.useLayoutEffect(() => {
+    if (point.anchor === Anchor.After) {
+      if (point.isAbs()) return;
+      const rect = ctx.dom.getCharRect(point.id);
+      if (!rect) return;
+      const nextPoint = point.copy(p => p.refBefore());
+      if (nextPoint.isAbs()) return;
+      console.log(nextPoint.id);
+      const rect2 = ctx.dom.getCharRect(nextPoint.id);
+      console.log('rect', rect, rect2);
+    }
+  }, [point]);
 
   const anchorForward = point.anchor === Anchor.Before;
 

src/json-crdt-peritext-ui/plugins/cursor/state.ts

@@ -1,5 +1,5 @@
 import {ValueSyncStore} from '../../../util/events/sync-store';
-import {ChangeDetail} from '../../events/types';
+import type {ChangeDetail} from '../../events/types';
 import type {PeritextSurfaceState, UiLifeCycles} from '../../web';
 
 export class CursorState implements UiLifeCycles {
@@ -16,11 +16,12 @@ export class CursorState implements UiLifeCycles {
     public readonly ctx: PeritextSurfaceState,
   ) {}
 
-  /* --------------------------------------------------- {@link UiLifeCycles} */
+  /** -------------------------------------------------- {@link UiLifeCycles} */
   public start(): () => void {
     const dom = this.ctx.dom;
     let lastNow: number = 0;
-    const listener = (event: CustomEvent<ChangeDetail>) => {
+
+    const onChange = (event: CustomEvent<ChangeDetail>) => {
       const now = Date.now();
       const timeDiff = now - lastNow;
       let delta = 0;
@@ -41,9 +42,10 @@ export class CursorState implements UiLifeCycles {
       this.scoreDelta.next(delta);
       lastNow = now;
     };
-    dom.et.addEventListener('change', listener);
+
+    dom.et.addEventListener('change', onChange);
     return () => {
-      dom.et.removeEventListener('change', listener);
+      dom.et.removeEventListener('change', onChange);
     };
   }
 }

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

@@ -133,6 +133,7 @@ export class DomController implements UiLifeCycles, Printable, PeritextUiApi {
     const end = txt.point(id, Anchor.After);
     const charRange = txt.range(start, end);
     const span = this.findSpanContaining(charRange);
+    console.log('span', span);
     if (!span) return;
     const inline = (span as any)[ElementAttr.InlineOffset] as Inline | undefined;
     if (!inline) return;