feat(json-crdt-peritext-ui): 🎸 improve entangled overlay rendering

Author: streamich

src/json-crdt-peritext-ui/components/EntangledPortal.tsx

@@ -85,6 +85,7 @@ class EntangledPortalState implements UiLifeCycles {
 }
 
 export interface EntangledPortalProps extends EntangledPortalStateOpts {
+  span?: React.HTMLAttributes<HTMLSpanElement>;
   children?: React.ReactNode;
 }
 
@@ -94,16 +95,13 @@ export interface EntangledPortalProps extends EntangledPortalStateOpts {
  * with the <span> on resize and scroll.
  */
 export const EntangledPortal: React.FC<EntangledPortalProps> = (props) => {
-  const {children} = props;
+  const {span, children} = props;
   const state = React.useMemo(() => new EntangledPortalState(props), []);
   state.opts = props;
   React.useEffect(state.start, [state]);
 
   return (
-    <span
-      style={{width: 1, height: 1, display: 'inline-block', border: '1px solid red'}}
-      ref={state.base}
-    >
+    <span {...span} ref={state.base}>
       <Portal>
         <div ref={state.dest}>
           {children}

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

@@ -1,8 +1,13 @@
 import * as React from 'react';
+import {rule} from 'nano-theme';
 import {ManageFormattingsCard} from '../../../formatting/ManageFormattingsCard';
 import {EntangledPortal, EntangledPortalStateOpts} from '../../../../../components/EntangledPortal';
 import type {CaretViewProps} from '../../../../../web/react/cursor/CaretView';
 
+const spanClass = rule({
+  pe: 'none',
+});
+
 const gap = 4
 const position: EntangledPortalStateOpts['position'] = (base, dest) => {
   let x = base.x - (dest.width >> 1);
@@ -12,6 +17,13 @@ const position: EntangledPortalStateOpts['position'] = (base, dest) => {
   return [x, y];
 };
 
+const span = {className: spanClass};
+
+const entangledProps = {
+  position,
+  span,
+};
+
 export interface CaretBottomOverlayProps extends CaretViewProps {
   children: React.ReactNode;
 }
@@ -23,7 +35,7 @@ export const CaretBottomOverlay: React.FC<CaretBottomOverlayProps> = (props) =>
   if (!inline) return;
 
   return (
-    <EntangledPortal position={position}>
+    <EntangledPortal {...entangledProps}>
       <ManageFormattingsCard inline={inline} />
     </EntangledPortal>
   );