fix remirror toolbar position when panning on canvas (#346)

Author: lihebi

ui/src/components/Canvas.tsx

@@ -752,6 +752,8 @@ function CanvasImpl() {
     store,
     (state) => state.helperLineVertical
   );
+  const toggleMoved = useStore(store, (state) => state.toggleMoved);
+  const toggleClicked = useStore(store, (state) => state.toggleClicked);
 
   return (
     <Box
@@ -768,6 +770,12 @@ function CanvasImpl() {
           onNodesChange={onNodesChange}
           onEdgesChange={onEdgesChange}
           onConnect={onConnect}
+          onMove={() => {
+            toggleMoved();
+          }}
+          onPaneClick={() => {
+            toggleClicked();
+          }}
           onNodeDragStop={(event, node) => {
             removeDragHighlight();
             let mousePos = project({ x: event.clientX, y: event.clientY });

ui/src/components/nodes/Rich.tsx

@@ -243,6 +243,23 @@ const DelayAutoFocusInput = ({
   return <input ref={inputRef} {...rest} />;
 };
 
+function useUpdatePositionerOnMove() {
+  // Update (all) the positioners whenever there's a move (pane) on reactflow,
+  // so that the toolbar moves with the Rich pod and content.
+  const { forceUpdatePositioners, emptySelection } = useCommands();
+  const store = useContext(RepoContext);
+  if (!store) throw new Error("Missing BearContext.Provider in the tree");
+  const moved = useStore(store, (state) => state.moved);
+  const clicked = useStore(store, (state) => state.clicked);
+  useEffect(() => {
+    forceUpdatePositioners();
+  }, [moved]);
+  useEffect(() => {
+    emptySelection();
+  }, [clicked]);
+  return;
+}
+
 const FloatingLinkToolbar = ({ children }) => {
   const {
     isEditing,
@@ -254,6 +271,7 @@ const FloatingLinkToolbar = ({ children }) => {
     setHref,
     cancelHref,
   } = useFloatingLinkState();
+  useUpdatePositionerOnMove();
   const active = useActive();
   const activeLink = active.link();
   const { empty } = useCurrentSelection();
@@ -294,13 +312,16 @@ const FloatingLinkToolbar = ({ children }) => {
   return (
     <>
       {!isEditing && (
-        <FloatingToolbar>
+        // By default, MUI's Popper creates a Portal, which is a ROOT html
+        // elements that prevents paning on reactflow canvas. Therefore, we
+        // disable the portal behavior.
+        <FloatingToolbar disablePortal>
           {linkEditButtons}
           {children}
         </FloatingToolbar>
       )}
       {!isEditing && empty && (
-        <FloatingToolbar positioner={linkPositioner}>
+        <FloatingToolbar positioner={linkPositioner} disablePortal>
           {linkEditButtons}
           {children}
         </FloatingToolbar>

ui/src/lib/store/canvasSlice.tsx

@@ -275,6 +275,13 @@ export interface CanvasSlice {
   setPaneFocus: () => void;
   setPaneBlur: () => void;
 
+  // onMove indicator
+  moved: boolean;
+  toggleMoved: () => void;
+  // clicked-on-canvas indicator
+  clicked: boolean;
+  toggleClicked: () => void;
+
   addNode: (
     type: "CODE" | "SCOPE" | "RICH",
     position: XYPosition,
@@ -941,6 +948,12 @@ export const createCanvasSlice: StateCreator<MyState, [], [], CanvasSlice> = (
   },
   setPaneFocus: () => set({ isPaneFocused: true }),
   setPaneBlur: () => set({ isPaneFocused: false }),
+
+  moved: false,
+  toggleMoved: () => set({ moved: !get().moved }),
+  clicked: false,
+  toggleClicked: () => set({ clicked: !get().clicked }),
+
   /**
    * This node2children is maintained with the canvas reactflow states, not with
    * the pods. This mapping may be used by other components, e.g. the runtime.