🐛 fix: Hide drag handle when cursor leaves the editor container (#3401)

This fix adds support for hiding the drag handle when the cursor leaves the editor container. It improves the user experience by providing a cleaner interface and removing unnecessary visual elements especially while scrolling.

- Add `hideDragHandle` prop to `EditorContainer` component in `editor-container.tsx`.
- Implement `onMouseLeave` event handler in `EditorContainer` to invoke `hideDragHandle` function.
- Update `DragAndDrop` extension in `drag-drop.tsx` to accept a `setHideDragHandle` function as an optional parameter.
- Pass the `setHideDragHandle` function from `RichTextEditor` component to `DragAndDrop` extension in `RichTextEditorExtensions` function in `index.tsx`.
- Set `hideDragHandleOnMouseLeave` state in `RichTextEditor` component to store the `hideDragHandlerFromDragDrop` function.
- Create `setHideDragHandleFunction` callback function in `RichTextEditor` to update the `hideDragHandleOnMouseLeave` state.
- Pass `hideDragHandleOnMouseLeave` as `hideDragHandle` prop to `EditorContainer` component in `RichTextEditor`.

packages/editor/core/src/ui/components/editor-container.tsx

@@ -5,14 +5,18 @@ interface EditorContainerProps {
   editor: Editor | null;
   editorClassNames: string;
   children: ReactNode;
+  hideDragHandle?: () => void;
 }
 
-export const EditorContainer = ({ editor, editorClassNames, children }: EditorContainerProps) => (
+export const EditorContainer = ({ editor, editorClassNames, hideDragHandle, children }: EditorContainerProps) => (
   <div
     id="editor-container"
     onClick={() => {
       editor?.chain().focus().run();
     }}
+    onMouseLeave={() => {
+      hideDragHandle?.();
+    }}
     className={`cursor-text ${editorClassNames}`}
   >
     {children}