feat(json-crdt-peritext-ui): 🎸 position focus toolbar using entangled portal

Author: streamich

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

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import {CaretToolbar} from 'nice-ui/lib/4-card/Toolbar/ToolbarMenu/CaretToolbar';
-import {MoveToViewport} from 'nice-ui/lib/utils/popup/MoveToViewport';
 import {useToolbarPlugin} from '../../context';
 import {useSyncStore, useSyncStoreOpt, useTimeout} from '../../../../web/react/hooks';
 import {CaretFrame} from '../util/CaretFrame';
 import {FormattingsNewPane} from '../../formatting/FormattingsNewPane';
 import {BottomPanePortal} from '../util/BottomPanePortal';
+import {TopPanePortal} from '../util/TopPanePortal';
 import type {CaretViewProps} from '../../../../web/react/cursor/CaretView';
 
 export interface RenderFocusProps extends CaretViewProps {
@@ -32,13 +32,13 @@ export const RenderFocus: React.FC<RenderFocusProps> = ({children, cursor}) => {
 
   if (!formatting && showInlineToolbarValue && !isScrubbing && toolbar.txt.editor.mainCursor() === cursor)
     over = (
-      <MoveToViewport>
+      <TopPanePortal>
         <CaretToolbar
           disabled={!enableAfterCoolDown /* || (!focus && blurTimeout) */}
           menu={toolbar.getSelectionMenu()}
           onPopupClose={handleClose}
         />
-      </MoveToViewport>
+      </TopPanePortal>
     );
 
   if (!!formatting && showInlineToolbarValue && !isScrubbing && toolbar.txt.editor.mainCursor() === cursor) {

src/json-crdt-peritext-ui/plugins/toolbar/cursor/util/TopPanePortal.tsx

@@ -0,0 +1,36 @@
+// biome-ignore lint: lint/style/useImportType
+import * as React from 'react';
+import {rule} from 'nano-theme';
+import {EntangledPortal, type EntangledPortalStateOpts} from '../../../../components/EntangledPortal';
+
+const spanClass = rule({
+  pe: 'none',
+});
+
+const gap = 4;
+const position: EntangledPortalStateOpts['position'] = (base, dest) => {
+  let x = base.x - (dest.width >> 1);
+  let y = base.y - dest.height;
+  if (x < gap) x = gap;
+  else if (x + dest.width + gap > window.innerWidth) x = window.innerWidth - dest.width - gap;
+  return [x, y];
+};
+
+const span = {className: spanClass};
+
+const entangledProps = {
+  position,
+  span,
+};
+
+export interface TopPanePortalProps {
+  children: React.ReactNode;
+}
+
+export const TopPanePortal: React.FC<TopPanePortalProps> = ({children}) => {
+  return (
+    <EntangledPortal {...entangledProps}>
+      {children}
+    </EntangledPortal>
+  );
+};