chore: update remaining floating menus

Author: aaryan610

packages/editor/package.json

@@ -71,6 +71,7 @@
     "lowlight": "^3.0.0",
     "lucide-react": "^0.469.0",
     "prosemirror-codemark": "^0.4.2",
+    "tippy.js": "^6.3.7",
     "tiptap-markdown": "^0.8.10",
     "uuid": "^10.0.0",
     "y-indexeddb": "^9.0.12",

packages/editor/src/core/components/menus/ai-menu.tsx

@@ -1,9 +1,9 @@
 import { useCallback, useEffect, useRef, useState } from "react";
-import tippy, { Instance } from "tippy.js";
+import tippy, { type Instance } from "tippy.js";
 // plane utils
 import { cn } from "@plane/utils";
 // types
-import { TAIHandler } from "@/types";
+import type { TAIHandler } from "@/types";
 
 type Props = {
   menu: TAIHandler["menu"];

packages/editor/src/core/components/menus/block-menu.tsx

@@ -1,7 +1,17 @@
+import {
+  useFloating,
+  autoUpdate,
+  offset,
+  flip,
+  shift,
+  useDismiss,
+  useInteractions,
+  FloatingPortal,
+} from "@floating-ui/react";
 import type { Editor } from "@tiptap/react";
 import { Copy, LucideIcon, Trash2 } from "lucide-react";
-import { useCallback, useEffect, useRef } from "react";
-import tippy, { Instance } from "tippy.js";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { cn } from "@plane/utils";
 // constants
 import { CORE_EXTENSIONS } from "@/constants/extension";
 
@@ -11,67 +21,71 @@ type Props = {
 
 export const BlockMenu = (props: Props) => {
   const { editor } = props;
-  const menuRef = useRef<HTMLDivElement>(null);
-  const popup = useRef<Instance | null>(null);
-
-  const handleClickDragHandle = useCallback((event: MouseEvent) => {
-    const target = event.target as HTMLElement;
-    if (target.matches("#drag-handle")) {
-      event.preventDefault();
-
-      popup.current?.setProps({
-        getReferenceClientRect: () => target.getBoundingClientRect(),
-      });
-
-      popup.current?.show();
-      return;
-    }
-
-    popup.current?.hide();
-    return;
-  }, []);
-
-  useEffect(() => {
-    if (menuRef.current) {
-      menuRef.current.remove();
-      menuRef.current.style.visibility = "visible";
-
-      // @ts-expect-error - Tippy types are incorrect
-      popup.current = tippy(document.body, {
-        getReferenceClientRect: null,
-        content: menuRef.current,
-        appendTo: () => document.querySelector(".frame-renderer"),
-        trigger: "manual",
-        interactive: true,
-        arrow: false,
-        placement: "left-start",
-        animation: "shift-away",
-        maxWidth: 500,
-        hideOnClick: true,
-        onShown: () => {
-          menuRef.current?.focus();
-        },
-      });
-    }
-
-    return () => {
-      popup.current?.destroy();
-      popup.current = null;
-    };
-  }, []);
+  const [isOpen, setIsOpen] = useState(false);
+  const [isAnimatedIn, setIsAnimatedIn] = useState(false);
+  const menuRef = useRef<HTMLDivElement | null>(null);
+  const virtualReferenceRef = useRef<{ getBoundingClientRect: () => DOMRect }>({
+    getBoundingClientRect: () => new DOMRect(),
+  });
+
+  // Set up Floating UI with virtual reference element
+  const { refs, floatingStyles, context } = useFloating({
+    open: isOpen,
+    onOpenChange: setIsOpen,
+    middleware: [offset({ crossAxis: -10 }), flip(), shift()],
+    whileElementsMounted: autoUpdate,
+    placement: "left-start",
+  });
+
+  const dismiss = useDismiss(context);
+  const { getFloatingProps } = useInteractions([dismiss]);
+
+  // Handle click on drag handle
+  const handleClickDragHandle = useCallback(
+    (event: MouseEvent) => {
+      const target = event.target as HTMLElement;
+      const dragHandle = target.closest("#drag-handle");
+
+      if (dragHandle) {
+        event.preventDefault();
+
+        // Update virtual reference with current drag handle position
+        virtualReferenceRef.current = {
+          getBoundingClientRect: () => dragHandle.getBoundingClientRect(),
+        };
+
+        // Set the virtual reference as the reference element
+        refs.setReference(virtualReferenceRef.current);
+
+        // Show the menu
+        setIsOpen(true);
+        return;
+      }
+
+      // If clicking outside and not on a menu item, hide the menu
+      if (menuRef.current && !menuRef.current.contains(target)) {
+        setIsOpen(false);
+      }
+    },
+    [refs]
+  );
 
+  // Set up event listeners
   useEffect(() => {
-    const handleKeyDown = () => {
-      popup.current?.hide();
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        setIsOpen(false);
+      }
     };
 
     const handleScroll = () => {
-      popup.current?.hide();
+      setIsOpen(false);
     };
+
     document.addEventListener("click", handleClickDragHandle);
     document.addEventListener("contextmenu", handleClickDragHandle);
     document.addEventListener("keydown", handleKeyDown);
-    document.addEventListener("scroll", handleScroll, true); // Using capture phase
+    document.addEventListener("scroll", handleScroll, true);
 
     return () => {
       document.removeEventListener("click", handleClickDragHandle);
@@ -81,6 +95,23 @@ export const BlockMenu = (props: Props) => {
     };
   }, [handleClickDragHandle]);
 
+  // Animation effect
+  useEffect(() => {
+    if (isOpen) {
+      setIsAnimatedIn(false);
+      // Add a small delay before starting the animation
+      const timeout = setTimeout(() => {
+        requestAnimationFrame(() => {
+          setIsAnimatedIn(true);
+        });
+      }, 50);
+
+      return () => clearTimeout(timeout);
+    } else {
+      setIsAnimatedIn(false);
+    }
+  }, [isOpen]);
+
   const MENU_ITEMS: {
     icon: LucideIcon;
     key: string;
@@ -94,7 +125,7 @@ export const BlockMenu = (props: Props) => {
       label: "Delete",
       onClick: (e) => {
         editor.chain().deleteSelection().focus().run();
-        popup.current?.hide();
+        setIsOpen(false);
         e.preventDefault();
         e.stopPropagation();
       },
@@ -143,36 +174,51 @@ export const BlockMenu = (props: Props) => {
             console.error(error.message);
           }
         }
-
-        popup.current?.hide();
+        setIsOpen(false);
       },
     },
   ];
 
-  return (
-    <div
-      ref={menuRef}
-      className="z-10 max-h-60 min-w-[7rem] overflow-y-scroll rounded-md border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 shadow-custom-shadow-rg"
-    >
-      {MENU_ITEMS.map((item) => {
-        // Skip rendering the button if it should be disabled
-        if (item.isDisabled && item.key === "duplicate") {
-          return null;
-        }
+  if (!isOpen) {
+    return null;
+  }
 
-        return (
-          <button
-            key={item.key}
-            type="button"
-            className="flex w-full items-center gap-2 truncate rounded px-1 py-1.5 text-xs text-custom-text-200 hover:bg-custom-background-80"
-            onClick={item.onClick}
-            disabled={item.isDisabled}
-          >
-            <item.icon className="h-3 w-3" />
-            {item.label}
-          </button>
-        );
-      })}
-    </div>
+  return (
+    <FloatingPortal>
+      <div
+        ref={(node) => {
+          refs.setFloating(node);
+          menuRef.current = node;
+        }}
+        style={{
+          ...floatingStyles,
+          animationFillMode: "forwards",
+          transitionTimingFunction: "cubic-bezier(0.16, 1, 0.3, 1)", // Expo ease out
+        }}
+        className={cn(
+          "z-20 max-h-60 min-w-[7rem] overflow-y-scroll rounded-lg border border-custom-border-200 bg-custom-background-100 p-1.5 shadow-custom-shadow-rg",
+          "transition-all duration-300 transform origin-top-right",
+          isAnimatedIn ? "opacity-100 scale-100" : "opacity-0 scale-75"
+        )}
+        {...getFloatingProps()}
+      >
+        {MENU_ITEMS.map((item) => {
+          if (item.isDisabled) return null;
+
+          return (
+            <button
+              key={item.key}
+              type="button"
+              className="flex w-full items-center gap-1.5 truncate rounded px-1 py-1.5 text-xs text-custom-text-200 hover:bg-custom-background-90"
+              onClick={item.onClick}
+              disabled={item.isDisabled}
+            >
+              <item.icon className="h-3 w-3" />
+              {item.label}
+            </button>
+          );
+        })}
+      </div>
+    </FloatingPortal>
   );
 };

packages/editor/src/core/extensions/core-without-props.ts

@@ -1,7 +1,6 @@
 import TaskItem from "@tiptap/extension-task-item";
 import TaskList from "@tiptap/extension-task-list";
 import { TextStyle } from "@tiptap/extension-text-style";
-import TiptapUnderline from "@tiptap/extension-underline";
 import StarterKit from "@tiptap/starter-kit";
 // helpers
 import { isValidHttpUrl } from "@/helpers/common";
@@ -76,7 +75,6 @@ export const CoreEditorExtensionsWithoutProps = [
   }),
   ImageExtensionConfig,
   CustomImageExtensionConfig,
-  TiptapUnderline,
   TextStyle,
   TaskList.configure({
     HTMLAttributes: {

packages/editor/src/core/extensions/custom-image/components/block.tsx

@@ -2,10 +2,6 @@ import { NodeSelection } from "@tiptap/pm/state";
 import React, { useRef, useState, useCallback, useLayoutEffect, useEffect } from "react";
 // plane imports
 import { cn } from "@plane/utils";
-// constants
-import { CORE_EXTENSIONS } from "@/constants/extension";
-// helpers
-import { getExtensionStorage } from "@/helpers/get-extension-storage";
 // local imports
 import { Pixel, TCustomImageAttributes, TCustomImageSize } from "../types";
 import { ensurePixelString, getImageBlockId } from "../utils";
@@ -62,7 +58,7 @@ export const CustomImageBlock: React.FC<CustomImageBlockProps> = (props) => {
   const [hasErroredOnFirstLoad, setHasErroredOnFirstLoad] = useState(false);
   const [hasTriedRestoringImageOnce, setHasTriedRestoringImageOnce] = useState(false);
   // extension options
-  const isTouchDevice = !!getExtensionStorage(editor, CORE_EXTENSIONS.UTILITY).isTouchDevice;
+  const isTouchDevice = !!editor.storage.utility.isTouchDevice;
 
   const updateAttributesSafely = useCallback(
     (attributes: Partial<TCustomImageAttributes>, errorMessage: string) => {

packages/editor/src/core/extensions/custom-image/components/uploader.tsx

@@ -39,7 +39,7 @@ export const CustomImageUploader = (props: CustomImageUploaderProps) => {
   const { id: imageEntityId } = node.attrs;
   // derived values
   const imageComponentImageFileMap = useMemo(() => getImageComponentImageFileMap(editor), [editor]);
-  const isTouchDevice = !!getExtensionStorage(editor, CORE_EXTENSIONS.UTILITY).isTouchDevice;
+  const isTouchDevice = !!editor.storage.utility.isTouchDevice;
 
   const onUpload = useCallback(
     (url: string) => {

packages/editor/src/core/extensions/headings-list.ts

@@ -9,6 +9,12 @@ export type HeadingExtensionStorage = {
   headings: IMarking[];
 };
 
+declare module "@tiptap/core" {
+  interface Storage {
+    [CORE_EXTENSIONS.HEADINGS_LIST]: HeadingExtensionStorage;
+  }
+}
+
 export const HeadingListExtension = Extension.create<unknown, HeadingExtensionStorage>({
   name: CORE_EXTENSIONS.HEADINGS_LIST,
 
@@ -46,6 +52,7 @@ export const HeadingListExtension = Extension.create<unknown, HeadingExtensionSt
         this.editor.emit("update", {
           editor: this.editor,
           transaction: newState.tr,
+          appendedTransactions: [],
         });
 
         return null;