♻️ fix: Added new drag handle hide behavior to Pages (#3426)

- Removed unused `switchLinkView` function in `PageRenderer`
- Added `hideDragHandle` prop to `PageRenderer` component
- Updated `EditorContainer` component in `PageRenderer` to include `hideDragHandle` prop
- Removed unused code and variables in `DocumentEditor` component
- Added `hideDragHandleOnMouseLeave` state variable in `DocumentEditor` component
- Added `setHideDragHandleFunction` to set the hideDragHandle function from the DragAndDrop extension
- Passed `hideDragHandleOnMouseLeave` as prop to `PageRenderer` component in `DocumentEditor`
- Removed unused code and variables in `PageDetailsPage` component
- Updated `customClassName` prop in `PageRenderer` component used in `PageDetailsPage`

chore(deps): Update dependencies

- Updated `@tippyjs/react` dependency to version 4.2.6
- Updated `mobx-react-lite` dependency to version 4.0.5
- Updated `tippy.js` dependency to version 6.3.7

Co-authored-by: sriram veeraghanta <veeraghanta.sriram@gmail.com>

packages/editor/document-editor/src/ui/components/page-renderer.tsx

@@ -27,11 +27,20 @@ type IPageRenderer = {
   }) => void;
   editorClassNames: string;
   editorContentCustomClassNames?: string;
+  hideDragHandle?: () => void;
   readonly: boolean;
 };
 
 export const PageRenderer = (props: IPageRenderer) => {
-  const { documentDetails, editor, editorClassNames, editorContentCustomClassNames, updatePageTitle, readonly } = props;
+  const {
+    documentDetails,
+    editor,
+    editorClassNames,
+    editorContentCustomClassNames,
+    updatePageTitle,
+    readonly,
+    hideDragHandle,
+  } = props;
 
   const [pageTitle, setPagetitle] = useState(documentDetails.title);
 
@@ -65,14 +74,6 @@ export const PageRenderer = (props: IPageRenderer) => {
     setIsOpen(false);
   };
 
-  const switchLinkView = (view: "LinkPreview" | "LinkEditView" | "LinkInputView") => {
-    if (!linkViewProps) return;
-    setLinkViewProps({
-      ...linkViewProps,
-      view: view,
-    });
-  };
-
   const handleLinkHover = useCallback(
     (event: React.MouseEvent) => {
       if (!editor) return;
@@ -167,7 +168,7 @@ export const PageRenderer = (props: IPageRenderer) => {
         />
       )}
       <div className="flex relative h-full w-full flex-col pr-5 editor-renderer" onMouseOver={handleLinkHover}>
-        <EditorContainer editor={editor} editorClassNames={editorClassNames}>
+        <EditorContainer hideDragHandle={hideDragHandle} editor={editor} editorClassNames={editorClassNames}>
           <EditorContentWrapper editor={editor} editorContentCustomClassNames={editorContentCustomClassNames} />
         </EditorContainer>
       </div>

packages/editor/document-editor/src/ui/extensions/index.tsx

@@ -11,7 +11,8 @@ import { LayersIcon } from "@plane/ui";
 export const DocumentEditorExtensions = (
   uploadFile: UploadImage,
   issueEmbedConfig?: IIssueEmbedConfig,
-  setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void
+  setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void,
+  setHideDragHandle?: (hideDragHandlerFromDragDrop: () => void) => void
 ) => {
   const additionalOptions: ISlashCommandItem[] = [
     {
@@ -35,7 +36,7 @@ export const DocumentEditorExtensions = (
 
   return [
     SlashCommand(uploadFile, setIsSubmitting, additionalOptions),
-    DragAndDrop,
+    DragAndDrop(setHideDragHandle),
     Placeholder.configure({
       placeholder: ({ node }) => {
         if (node.type.name === "heading") {

packages/editor/document-editor/src/ui/index.tsx

@@ -86,6 +86,14 @@ const DocumentEditor = ({
   const [sidePeekVisible, setSidePeekVisible] = useState(true);
   const router = useRouter();
 
+  const [hideDragHandleOnMouseLeave, setHideDragHandleOnMouseLeave] = React.useState<() => void>(() => {});
+
+  // this essentially sets the hideDragHandle function from the DragAndDrop extension as the Plugin
+  // loads such that we can invoke it from react when the cursor leaves the container
+  const setHideDragHandleFunction = (hideDragHandlerFromDragDrop: () => void) => {
+    setHideDragHandleOnMouseLeave(() => hideDragHandlerFromDragDrop);
+  };
+
   const editor = useEditor({
     onChange(json, html) {
       updateMarkings(json);
@@ -104,7 +112,12 @@ const DocumentEditor = ({
     cancelUploadImage,
     rerenderOnPropsChange,
     forwardedRef,
-    extensions: DocumentEditorExtensions(uploadFile, embedConfig?.issueEmbedConfig, setIsSubmitting),
+    extensions: DocumentEditorExtensions(
+      uploadFile,
+      embedConfig?.issueEmbedConfig,
+      setIsSubmitting,
+      setHideDragHandleFunction
+    ),
   });
 
   if (!editor) {
@@ -152,6 +165,7 @@ const DocumentEditor = ({
         <div className="h-full w-[calc(100%-14rem)] lg:w-[calc(100%-18rem-18rem)]">
           <PageRenderer
             onActionCompleteHandler={onActionCompleteHandler}
+            hideDragHandle={hideDragHandleOnMouseLeave}
             readonly={false}
             editor={editor}
             editorContentCustomClassNames={editorContentCustomClassNames}

web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx

@@ -322,7 +322,7 @@ const PageDetailsPage: NextPageWithLayout = observer(() => {
                   setIsSubmitting={setIsSubmitting}
                   updatePageTitle={updatePageTitle}
                   onActionCompleteHandler={actionCompleteAlert}
-                  customClassName="tracking-tight self-center px-0 h-full w-full"
+                  customClassName="tracking-tight self-center h-full w-full right-[0.675rem]"
                   onChange={(_description_json: Object, description_html: string) => {
                     setShowAlert(true);
                     onChange(description_html);