feat(json-crdt-peritext-ui): 🎸 show only main cursor toolbar over focus caret

Author: streamich

src/json-crdt-peritext-ui/plugins/toolbar/RenderFocus.tsx

@@ -27,7 +27,7 @@ export interface RenderFocusProps extends CaretViewProps {
   children: React.ReactNode;
 }
 
-export const RenderFocus: React.FC<RenderFocusProps> = ({children}) => {
+export const RenderFocus: React.FC<RenderFocusProps> = ({children, cursor}) => {
   const {toolbar} = useToolbarPlugin()!;
   const showInlineToolbar = toolbar.showInlineToolbar;
   const [showInlineToolbarValue, toolbarVisibilityChangeTime] = useSyncStore(showInlineToolbar);
@@ -43,7 +43,7 @@ export const RenderFocus: React.FC<RenderFocusProps> = ({children}) => {
 
   let toolbarElement: React.ReactNode = null;
 
-  if (showInlineToolbarValue && !isScrubbing)
+  if (showInlineToolbarValue && !isScrubbing && (toolbar.txt.editor.mainCursor() === cursor))
     toolbarElement = (
       <CaretToolbar
         disabled={!enableAfterCoolDown /* || (!focus && blurTimeout) */}

src/json-crdt-peritext-ui/plugins/toolbar/block/LeafBlockFrame/index.tsx

@@ -18,12 +18,12 @@ const topLeftOverlay = rule({
   l: '-72px',
 });
 
-const topRightOverlay = rule({
-  d: 'block',
-  pos: 'absolute',
-  t: '-36px',
-  r: '-16px',
-});
+// const topRightOverlay = rule({
+//   d: 'block',
+//   pos: 'absolute',
+//   t: '-36px',
+//   r: '-16px',
+// });
 
 export interface LeafBlockFrameProps extends RenderBlockProps {}
 

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

@@ -26,17 +26,17 @@ export const BlockView: React.FC<BlockViewProps> = React.memo(
         const hasCursor = inline.hasCursor();
         if (hasCursor) {
           const attr = inline.attr();
-          const italic = attr[CommonSliceType.i] && attr[CommonSliceType.i][0];
+          const italic = attr[CommonSliceType.i]?.[0];
           const cursorStart = inline.cursorStart();
           if (cursorStart) {
             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} />;
+                element = <CaretView key={key} italic={!!italic} point={cursorStart.start} cursor={cursorStart} />;
               else {
                 const isItalic = italic instanceof InlineAttrEnd || italic instanceof InlineAttrPassing;
-                element = <FocusView key={key} italic={isItalic} />;
+                element = <FocusView key={key} italic={isItalic} cursor={cursorStart} />;
               }
             } else element = <AnchorView key={key} />;
             elements.push(element);
@@ -46,18 +46,19 @@ export const BlockView: React.FC<BlockViewProps> = React.memo(
         if (hasCursor) {
           const cursorEnd = inline.cursorEnd();
           const attr = inline.attr();
-          const italic = attr[CommonSliceType.i] && attr[CommonSliceType.i][0];
+          const italic = attr[CommonSliceType.i]?.[0];
           if (cursorEnd) {
             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} />;
+              if (cursorEnd.isCollapsed()) element = <CaretView key={key} italic={!!italic} point={cursorEnd.start} cursor={cursorEnd} />;
               else
                 element = (
                   <FocusView
                     key={key}
                     left
                     italic={italic instanceof InlineAttrStart || italic instanceof InlineAttrPassing}
+                    cursor={cursorEnd}
                   />
                 );
             } else element = <AnchorView key={key} />;

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

@@ -2,11 +2,13 @@
 import * as React from 'react';
 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';
 
 export interface CaretViewProps {
   italic?: boolean;
   point: Point<string>;
+  cursor: Cursor<string>;
 }
 
 export const CaretView: React.FC<CaretViewProps> = (props) => {

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

@@ -2,10 +2,12 @@
 import * as React from 'react';
 import {usePeritext} from '../context';
 import {Caret} from './Caret';
+import type {Cursor} from '../../../../json-crdt-extensions/peritext/editor/Cursor';
 
 export interface FocusViewProps {
   left?: boolean;
   italic?: boolean;
+  cursor: Cursor<string>;
 }
 
 export const FocusView: React.FC<FocusViewProps> = (props) => {