feat(json-crdt-peritext-ui): 🎸 pass surrounding caret inlines to the renderers

Author: streamich

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

@@ -1,12 +1,13 @@
 import * as React from 'react';
+import {createElement as h} from 'react';
 import {LeafBlock} from '../../../json-crdt-extensions/peritext/block/LeafBlock';
 import {InlineView} from './InlineView';
 import {Char} from '../constants';
 import {usePeritext} from './context';
 import {CommonSliceType} from '../../../json-crdt-extensions';
 import {CaretView} from './cursor/CaretView';
 import {FocusView} from './cursor/FocusView';
-import {InlineAttrEnd, InlineAttrPassing, InlineAttrStart} from '../../../json-crdt-extensions/peritext/block/Inline';
+import {Inline, InlineAttrEnd, InlineAttrPassing, InlineAttrStart} from '../../../json-crdt-extensions/peritext/block/Inline';
 import {AnchorView} from './cursor/AnchorView';
 import type {Block} from '../../../json-crdt-extensions/peritext/block/Block';
 
@@ -22,8 +23,12 @@ export const BlockView: React.FC<BlockViewProps> = React.memo(
     const {plugins, dom} = usePeritext();
     const elements: React.ReactNode[] = [];
     if (block instanceof LeafBlock) {
-      for (const inline of block.texts()) {
+      let inline: Inline<string> | undefined;
+      let prevInline: Inline<string> | undefined;
+      for (const iterator = block.texts0(); (inline = iterator()); prevInline = inline) {
         const hasCursor = inline.hasCursor();
+
+        // Insert cursor before the inline text element.
         if (hasCursor) {
           const attr = inline.attr();
           const italic = attr[CommonSliceType.i]?.[0];
@@ -32,17 +37,22 @@ export const BlockView: React.FC<BlockViewProps> = React.memo(
             const key = cursorStart.start.key() + '-a';
             let element: React.ReactNode;
             if (cursorStart.isStartFocused()) {
-              if (cursorStart.isCollapsed())
-                element = <CaretView key={key} italic={!!italic} point={cursorStart.start} cursor={cursorStart} />;
-              else {
+              if (cursorStart.isCollapsed()) {
+                element = <CaretView key={key} italic={!!italic} point={cursorStart.start} cursor={cursorStart} fwd={inline} bwd={prevInline} />;
+              } else {
                 const isItalic = italic instanceof InlineAttrEnd || italic instanceof InlineAttrPassing;
                 element = <FocusView key={key} italic={isItalic} cursor={cursorStart} />;
               }
             } else element = <AnchorView key={key} />;
             elements.push(element);
           }
         }
-        elements.push(<InlineView key={inline.key()} inline={inline} />);
+
+        // Insert the inline text element itself.
+        const currInlineProps = {key: inline.key(), inline};
+        elements.push(h(InlineView, currInlineProps));
+
+        // Insert cursor after the inline text element.
         if (hasCursor) {
           const cursorEnd = inline.cursorEnd();
           const attr = inline.attr();
@@ -51,9 +61,9 @@ export const BlockView: React.FC<BlockViewProps> = React.memo(
             const key = cursorEnd.end.key() + '-b';
             let element: React.ReactNode;
             if (cursorEnd.isEndFocused()) {
-              if (cursorEnd.isCollapsed())
-                element = <CaretView key={key} italic={!!italic} point={cursorEnd.start} cursor={cursorEnd} />;
-              else
+              if (cursorEnd.isCollapsed()) {
+                element = <CaretView key={key} italic={!!italic} point={cursorEnd.start} cursor={cursorEnd} bwd={inline} />;
+              } else
                 element = (
                   <FocusView
                     key={key}

src/json-crdt-peritext-ui/web/react/cursor/CaretView.tsx

@@ -4,11 +4,18 @@ import {usePeritext} from '../context';
 import {Caret} from './Caret';
 import type {Cursor} from '../../../../json-crdt-extensions/peritext/editor/Cursor';
 import type {Point} from '../../../../json-crdt-extensions/peritext/rga/Point';
+import type {Inline} from '../../../../json-crdt-extensions';
 
 export interface CaretViewProps {
   italic?: boolean;
   point: Point<string>;
   cursor: Cursor<string>;
+
+  /** Inline text slice followed after the cursor. */
+  fwd?: Inline<string>;
+
+  /** Inline text slice followed before the cursor. */
+  bwd?: Inline<string>;
 }
 
 export const CaretView: React.FC<CaretViewProps> = (props) => {