feat(json-crdt-peritext-ui): 🎸 position caret at line end

Author: streamich

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

@@ -27,11 +27,9 @@ export class UiHandle {
    */
   public getPointRect(pos: number | Point<string>, right = true): Rect | undefined {
     const txt = this.txt;
-    const point = typeof pos === 'number' ? txt.pointAt(pos) : pos;
-    const char = right ? point.rightChar() : point.leftChar();
-    if (!char) return;
-    const id = tick(char.chunk.id, char.off);
-    return this.api.getCharRect?.(id);
+    const point = typeof pos === 'number' ? txt.pointAt(pos) : pos.clone();
+    if (right) point.refBefore(); else point.refAfter();
+    return this.api.getCharRect?.(point.id);
   }
 
   public pointX(pos: number | Point<string>): [x: number, rect: Rect] | undefined {

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

@@ -74,16 +74,27 @@ export const RenderCaret: React.FC<RenderCaretProps> = ({italic, point, children
   const {dom} = usePeritext();
   const focus = useSyncStoreOpt(dom?.cursor.focus) || false;
   const plugin = useCursorPlugin();
-  React.useLayoutEffect(() => {
+  const ref = React.useRef<HTMLSpanElement>(null);
+  React.useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const style = el.style;
+    style.top = '0px';
+    style.left = '0px';
     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);
+      if (!rect2) return;
+      if (rect.x > rect2.x) {
+        const dx = rect.x + rect.width - rect2.x;
+        const dy = rect.y - rect2.y;
+        style.top = dy + 'px';
+        style.left = dx + 'px';
+      }
     }
   }, [point]);
 
@@ -105,7 +116,7 @@ export const RenderCaret: React.FC<RenderCaretProps> = ({italic, point, children
   }
 
   return (
-    <span className={blockClass}>
+    <span ref={ref} className={blockClass}>
       {children}
       {score !== plugin.lastVisScore.value && (
         <CaretScore

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

@@ -133,7 +133,6 @@ 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;