feat(json-crdt-peritext-ui): 🎸 improve inline menu presentation logic

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

@@ -2,7 +2,7 @@
 import * as React from 'react';
 import {rule} from 'nano-theme';
 import {TopToolbar} from '../TopToolbar';
-import {useDefaultPlugin} from '../context';
+import {useToolbarPlugin} from '../context';
 
 const blockClass = rule({
   bg: 'white',
@@ -20,7 +20,7 @@ export interface ChromeProps {
 }
 
 export const Chrome: React.FC<ChromeProps> = ({children}) => {
-  const ctx = useDefaultPlugin();
+  const ctx = useToolbarPlugin();
 
   return (
     <div className={blockClass}>

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

@@ -3,6 +3,8 @@ import * as React from 'react';
 import {rule} from 'nano-theme';
 import {CaretToolbar} from './CaretToolbar';
 import type {CaretViewProps} from '../../react/cursor/CaretView';
+import {useToolbarPlugin} from './context';
+import {PeritextEventDetailMap} from '../../events/types';
 
 const height = 1.9;
 
@@ -27,11 +29,16 @@ export interface RenderCaretProps extends CaretViewProps {
 }
 
 export const RenderCaret: React.FC<RenderCaretProps> = ({children}) => {
+  const {toolbar} = useToolbarPlugin()!;
+
+  const lastEventIsCaretPositionChange = toolbar.lastEvent?.type === 'cursor' &&
+    typeof (toolbar.lastEvent?.detail as PeritextEventDetailMap['cursor']).at === 'number';
+
   return (
     <span className={blockClass}>
       {children}
       <span className={overClass} contentEditable={false}>
-        <CaretToolbar />
+        {lastEventIsCaretPositionChange && <CaretToolbar />}
       </span>
     </span>
   );

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

@@ -9,4 +9,4 @@ export interface ToolbarPluginContextValue {
 
 export const context = React.createContext<ToolbarPluginContextValue | null>(null);
 
-export const useDefaultPlugin = () => React.useContext(context);
+export const useToolbarPlugin = () => React.useContext(context);

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

@@ -1,18 +1,21 @@
 import type {UiLifeCyclesRender} from '../../dom/types';
+import {PeritextEventDetailMap} from '../../events/types';
 import type {PeritextSurfaceState} from "../../react";
 
 export class ToolbarState implements UiLifeCyclesRender {
+  public lastEvent: PeritextEventDetailMap['change']['ev'] | undefined = void 0;
+
   constructor (public readonly surface: PeritextSurfaceState) {}
 
   /** -------------------------------------------------- {@link UiLifeCyclesRender} */
 
   public start() {
-    const surface = this.surface;
-    const cursorUnsubscribe = surface.events.et.subscribe('cursor', (ev) => {
-      console.log(ev.detail);
+    const et = this.surface.events.et;
+    const changeUnsubscribe = et.subscribe('change', (ev) => {
+      this.lastEvent = ev.detail.ev;
     });
     return () => {
-      cursorUnsubscribe();
+      changeUnsubscribe();
     };
   }
 }