feat(json-crdt-peritext-ui): 🎸 use entangled portal to position focus bottom overlay

Author: streamich

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

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

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

@@ -1,38 +1,10 @@
 // biome-ignore lint: lint/style/useImportType
 import * as React from 'react';
-import {rule} from 'nano-theme';
 import {FormattingsManagePane} from '../../../formatting/FormattingsManagePane';
-import {EntangledPortal, type EntangledPortalStateOpts} from '../../../../../components/EntangledPortal';
+import {BottomPanePortal} from '../../util/BottomPanePortal';
 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);
-  let y = base.y;
-  if (x < gap) x = gap;
-  else if (x + dest.width + gap > window.innerWidth) x = window.innerWidth - dest.width - gap;
-  const {scrollY} = window;
-  const body = document.body;
-  const html = document.documentElement;
-  const pageHeight = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);
-  if (base.y + dest.height + scrollY > pageHeight) y = base.y - (base.y + dest.height + scrollY - pageHeight);
-  return [x, y];
-};
-
-const span = {className: spanClass};
-
-const entangledProps = {
-  position,
-  span,
-};
-
-export interface CaretBottomOverlayProps extends CaretViewProps {
-  children: React.ReactNode;
-}
+export interface CaretBottomOverlayProps extends CaretViewProps {}
 
 export const CaretBottomOverlay: React.FC<CaretBottomOverlayProps> = (props) => {
   const {fwd, bwd} = props;
@@ -41,8 +13,8 @@ export const CaretBottomOverlay: React.FC<CaretBottomOverlayProps> = (props) =>
   if (!inline) return;
 
   return (
-    <EntangledPortal {...entangledProps}>
+    <BottomPanePortal>
       <FormattingsManagePane inline={inline} />
-    </EntangledPortal>
+    </BottomPanePortal>
   );
 };

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

@@ -1,6 +1,6 @@
 // biome-ignore lint: lint/style/useImportType
 import * as React from 'react';
-import {CaretFrame} from '../CaretFrame';
+import {CaretFrame} from '../util/CaretFrame';
 import {CaretTopOverlay} from './CaretTopOverlay';
 import {CaretBottomOverlay} from './CaretBottomOverlay';
 import type {CaretViewProps} from '../../../../web/react/cursor/CaretView';

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

@@ -1,11 +1,12 @@
 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 './CaretFrame';
-import {FormattingsNewPane} from '../formatting/FormattingsNewPane';
-import type {CaretViewProps} from '../../../web/react/cursor/CaretView';
+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 type {CaretViewProps} from '../../../../web/react/cursor/CaretView';
 
 export interface RenderFocusProps extends CaretViewProps {
   children: React.ReactNode;
@@ -41,7 +42,11 @@ export const RenderFocus: React.FC<RenderFocusProps> = ({children, cursor}) => {
     );
 
   if (!!formatting && showInlineToolbarValue && !isScrubbing && toolbar.txt.editor.mainCursor() === cursor) {
-    under = <FormattingsNewPane formatting={formatting} onSave={() => formatting.save()} />;
+    under = (
+      <BottomPanePortal>
+        <FormattingsNewPane formatting={formatting} onSave={() => formatting.save()} />
+      </BottomPanePortal>
+    );
   }
 
   return (

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

@@ -0,0 +1,41 @@
+// 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;
+  if (x < gap) x = gap;
+  else if (x + dest.width + gap > window.innerWidth) x = window.innerWidth - dest.width - gap;
+  const {scrollY} = window;
+  const body = document.body;
+  const html = document.documentElement;
+  const pageHeight = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);
+  if (base.y + dest.height + scrollY > pageHeight) y = base.y - (base.y + dest.height + scrollY - pageHeight);
+  return [x, y];
+};
+
+const span = {className: spanClass};
+
+const entangledProps = {
+  position,
+  span,
+};
+
+export interface BottomPanePortalProps {
+  children: React.ReactNode;
+}
+
+export const BottomPanePortal: React.FC<BottomPanePortalProps> = ({children}) => {
+  return (
+    <EntangledPortal {...entangledProps}>
+      {children}
+    </EntangledPortal>
+  );
+};