From ddb032b020fd8ea02b0869f760e45fcbf843cc0b Mon Sep 17 00:00:00 2001
From: streamich <streamich@gmail.com>
Date: Wed, 8 Jan 2025 13:41:43 +0100
Subject: [PATCH] =?UTF-8?q?feat(json-crdt-peritext-ui):=20=F0=9F=8E=B8=20i?=
 =?UTF-8?q?mprove=20inline=20menu=20presentation=20logic?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../plugins/toolbar/Chrome/index.tsx                  |  4 ++--
 .../plugins/toolbar/RenderCaret.tsx                   |  9 ++++++++-
 src/json-crdt-peritext-ui/plugins/toolbar/context.ts  |  2 +-
 src/json-crdt-peritext-ui/plugins/toolbar/state.ts    | 11 +++++++----
 4 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/json-crdt-peritext-ui/plugins/toolbar/Chrome/index.tsx b/src/json-crdt-peritext-ui/plugins/toolbar/Chrome/index.tsx
index d63e4eb2e2..fb97defa25 100644
--- a/src/json-crdt-peritext-ui/plugins/toolbar/Chrome/index.tsx
+++ b/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}>
diff --git a/src/json-crdt-peritext-ui/plugins/toolbar/RenderCaret.tsx b/src/json-crdt-peritext-ui/plugins/toolbar/RenderCaret.tsx
index 0e4b3cd96f..313b06ce13 100644
--- a/src/json-crdt-peritext-ui/plugins/toolbar/RenderCaret.tsx
+++ b/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>
   );
diff --git a/src/json-crdt-peritext-ui/plugins/toolbar/context.ts b/src/json-crdt-peritext-ui/plugins/toolbar/context.ts
index b34425c71a..c0f8195786 100644
--- a/src/json-crdt-peritext-ui/plugins/toolbar/context.ts
+++ b/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);
diff --git a/src/json-crdt-peritext-ui/plugins/toolbar/state.ts b/src/json-crdt-peritext-ui/plugins/toolbar/state.ts
index ba67932c06..558eddd086 100644
--- a/src/json-crdt-peritext-ui/plugins/toolbar/state.ts
+++ b/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();
     };
   }
 }