perf(json-crdt-peritext-ui): ⚡️ separate caret overlays into their own components

Author: streamich

src/json-crdt-peritext-ui/plugins/toolbar/ToolbarPlugin.ts

@@ -3,7 +3,7 @@ import {RenderInline} from './inline/RenderInline';
 import {RenderPeritext, type RenderPeritextProps} from './RenderPeritext';
 import {text} from '../minimal/text';
 import {RenderBlock} from './block/RenderBlock';
-import {RenderCaret} from './cursor/RenderCaret';
+import {RenderCaret} from './cursor/caret/RenderCaret';
 import {RenderFocus} from './cursor/RenderFocus';
 import type {PeritextPlugin} from '../../web/react/types';
 import type {DebugState} from '../debug/state';

src/json-crdt-peritext-ui/plugins/toolbar/cursor/caret/CaretBottomOverlay.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import type {CaretViewProps} from '../../../../web/react/cursor/CaretView';
+
+export interface CaretBottomOverlayProps extends CaretViewProps {
+  children: React.ReactNode;
+}
+
+export const CaretBottomOverlay: React.FC<CaretBottomOverlayProps> = (props) => {
+  const {fwd, bwd} = props;
+  const inline = fwd || bwd;
+
+  console.log('attr', inline?.attr());
+
+  return null;
+};

src/json-crdt-peritext-ui/plugins/toolbar/cursor/RenderCaret.tsx renamed to src/json-crdt-peritext-ui/plugins/toolbar/cursor/caret/CaretTopOverlay.tsx

@@ -1,20 +1,18 @@
 import * as React from 'react';
 import {CaretToolbar} from 'nice-ui/lib/4-card/Toolbar/ToolbarMenu/CaretToolbar';
-import {useToolbarPlugin} from '../context';
-import {useSyncStore, useSyncStoreOpt, useTimeout} from '../../../web/react/hooks';
-import {AfterTimeout} from '../../../web/react/util/AfterTimeout';
-import {CaretFrame} from './CaretFrame';
-import type {CaretViewProps} from '../../../web/react/cursor/CaretView';
+import {useToolbarPlugin} from '../../context';
+import {useSyncStore, useTimeout} from '../../../../web/react/hooks';
+import {AfterTimeout} from '../../../../web/react/util/AfterTimeout';
+import type {CaretViewProps} from '../../../../web/react/cursor/CaretView';
 
-export interface RenderCaretProps extends CaretViewProps {
+export interface CaretTopOverlayProps extends CaretViewProps {
   children: React.ReactNode;
 }
 
-export const RenderCaret: React.FC<RenderCaretProps> = ({children}) => {
+export const CaretTopOverlay: React.FC<CaretTopOverlayProps> = () => {
   const {toolbar} = useToolbarPlugin()!;
   const showInlineToolbar = toolbar.showInlineToolbar;
-  const [showCaretToolbarValue, toolbarVisibilityChangeTime] = useSyncStore(showInlineToolbar);
-  const focus = useSyncStoreOpt(toolbar.surface.dom?.cursor.focus) || false;
+  const [, toolbarVisibilityChangeTime] = useSyncStore(showInlineToolbar);
   const doHideForCoolDown = toolbarVisibilityChangeTime + 500 > Date.now();
   const enableAfterCoolDown = useTimeout(500, [doHideForCoolDown]);
 
@@ -25,19 +23,15 @@ export const RenderCaret: React.FC<RenderCaretProps> = ({children}) => {
     }, 5);
   }, []);
 
-  let over: React.ReactNode | undefined = (
+  let element: React.ReactNode | undefined = (
     <CaretToolbar disabled={!enableAfterCoolDown} menu={toolbar.getCaretMenu()} onPopupClose={handleClose} />
   );
 
   if (doHideForCoolDown) {
-    over = <AfterTimeout ms={500}>{over}</AfterTimeout>;
+    element = <AfterTimeout ms={500}>{element}</AfterTimeout>;
   }
 
-  over = null;
+  element = null;
 
-  return (
-    <CaretFrame over={over}>
-      {children}
-    </CaretFrame>
-  );
+  return element;
 };

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

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import {CaretFrame} from '../CaretFrame';
+import {CaretTopOverlay} from './CaretTopOverlay';
+import {CaretBottomOverlay} from './CaretBottomOverlay';
+import type {CaretViewProps} from '../../../../web/react/cursor/CaretView';
+
+export interface RenderCaretProps extends CaretViewProps {
+  children: React.ReactNode;
+}
+
+export const RenderCaret: React.FC<RenderCaretProps> = (props) => {
+  const {children} = props;
+
+  return (
+    <CaretFrame over={<CaretTopOverlay {...props} />} under={<CaretBottomOverlay {...props} />}>
+      {children}
+    </CaretFrame>
+  );
+};