[PE-304] feat: make floating link generic and use it for all editors

.gitignore

@@ -88,6 +88,7 @@ deploy/selfhost/plane-app/
 *storybook.log
 output.css
 
+dev-editor
 # Redis
 *.rdb
-*.rdb.gz
+*.rdb.gz

packages/editor/src/core/components/editors/document/page-renderer.tsx

@@ -1,20 +1,6 @@
-import { useCallback, useRef, useState } from "react";
-import {
-  autoUpdate,
-  computePosition,
-  flip,
-  hide,
-  shift,
-  useDismiss,
-  useFloating,
-  useInteractions,
-} from "@floating-ui/react";
-import { Node } from "@tiptap/pm/model";
-import { EditorView } from "@tiptap/pm/view";
-import { Editor, ReactRenderer } from "@tiptap/react";
+import { Editor } from "@tiptap/react";
 // components
 import { EditorContainer, EditorContentWrapper } from "@/components/editors";
-import { LinkView, LinkViewProps } from "@/components/links";
 import { AIFeaturesMenu, BlockMenu, EditorBubbleMenu } from "@/components/menus";
 // types
 import { TAIHandler, TDisplayConfig } from "@/types";
@@ -31,133 +17,24 @@ type IPageRenderer = {
 
 export const PageRenderer = (props: IPageRenderer) => {
   const { aiHandler, bubbleMenuEnabled, displayConfig, editor, editorContainerClassName, id, tabIndex } = props;
-  // states
-  const [linkViewProps, setLinkViewProps] = useState<LinkViewProps>();
-  const [isOpen, setIsOpen] = useState(false);
-  const [coordinates, setCoordinates] = useState<{ x: number; y: number }>();
-  const [cleanup, setCleanup] = useState(() => () => {});
-
-  const { refs, floatingStyles, context } = useFloating({
-    open: isOpen,
-    onOpenChange: setIsOpen,
-    middleware: [flip(), shift(), hide({ strategy: "referenceHidden" })],
-    whileElementsMounted: autoUpdate,
-  });
-
-  const dismiss = useDismiss(context, {
-    ancestorScroll: true,
-  });
-
-  const { getFloatingProps } = useInteractions([dismiss]);
-
-  const floatingElementRef = useRef<HTMLElement | null>(null);
-
-  const closeLinkView = () => setIsOpen(false);
-
-  const handleLinkHover = useCallback(
-    (event: React.MouseEvent) => {
-      if (!editor) return;
-      const target = event.target as HTMLElement;
-      const view = editor.view as EditorView;
-
-      if (!target || !view) return;
-      const pos = view.posAtDOM(target, 0);
-      if (!pos || pos < 0) return;
-
-      if (target.nodeName !== "A") return;
-
-      const node = view.state.doc.nodeAt(pos) as Node;
-      if (!node || !node.isAtom) return;
-
-      // we need to check if any of the marks are links
-      const marks = node.marks;
-
-      if (!marks) return;
-
-      const linkMark = marks.find((mark) => mark.type.name === "link");
-
-      if (!linkMark) return;
-
-      if (floatingElementRef.current) {
-        floatingElementRef.current?.remove();
-      }
-
-      if (cleanup) cleanup();
-
-      const href = linkMark.attrs.href;
-      const componentLink = new ReactRenderer(LinkView, {
-        props: {
-          view: "LinkPreview",
-          url: href,
-          editor: editor,
-          from: pos,
-          to: pos + node.nodeSize,
-        },
-        editor,
-      });
-
-      const referenceElement = target as HTMLElement;
-      const floatingElement = componentLink.element as HTMLElement;
-
-      floatingElementRef.current = floatingElement;
-
-      const cleanupFunc = autoUpdate(referenceElement, floatingElement, () => {
-        computePosition(referenceElement, floatingElement, {
-          placement: "bottom",
-          middleware: [
-            flip(),
-            shift(),
-            hide({
-              strategy: "referenceHidden",
-            }),
-          ],
-        }).then(({ x, y }) => {
-          setCoordinates({ x: x - 300, y: y - 50 });
-          setIsOpen(true);
-          setLinkViewProps({
-            closeLinkView: closeLinkView,
-            view: "LinkPreview",
-            url: href,
-            editor: editor,
-            from: pos,
-            to: pos + node.nodeSize,
-          });
-        });
-      });
-
-      setCleanup(cleanupFunc);
-    },
-    [editor, cleanup]
-  );
 
   return (
-    <>
-      <div className="frame-renderer flex-grow w-full" onMouseOver={handleLinkHover}>
-        <EditorContainer
-          displayConfig={displayConfig}
-          editor={editor}
-          editorContainerClassName={editorContainerClassName}
-          id={id}
-        >
-          <EditorContentWrapper editor={editor} id={id} tabIndex={tabIndex} />
-          {editor.isEditable && (
-            <div>
-              {bubbleMenuEnabled && <EditorBubbleMenu editor={editor} />}
-              <BlockMenu editor={editor} />
-              <AIFeaturesMenu menu={aiHandler?.menu} />
-            </div>
-          )}
-        </EditorContainer>
-      </div>
-      {isOpen && linkViewProps && coordinates && (
-        <div
-          style={{ ...floatingStyles, left: `${coordinates.x}px`, top: `${coordinates.y}px` }}
-          className="absolute"
-          ref={refs.setFloating}
-        >
-          <LinkView {...linkViewProps} style={floatingStyles} {...getFloatingProps()} />
-        </div>
-      )}
-    </>
+    <div className="frame-renderer flex-grow w-full">
+      <EditorContainer
+        displayConfig={displayConfig}
+        editor={editor}
+        editorContainerClassName={editorContainerClassName}
+        id={id}
+      >
+        <EditorContentWrapper editor={editor} id={id} tabIndex={tabIndex} />
+        {editor.isEditable && (
+          <>
+            {bubbleMenuEnabled && <EditorBubbleMenu editor={editor} />}
+            <BlockMenu editor={editor} />
+            <AIFeaturesMenu menu={aiHandler?.menu} />
+          </>
+        )}
+      </EditorContainer>
+    </div>
   );
 };

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

@@ -1,22 +1,25 @@
 import { Editor } from "@tiptap/react";
-import { FC, ReactNode } from "react";
+import { FC, ReactNode, useRef } from "react";
 // plane utils
 import { cn } from "@plane/utils";
 // constants
 import { DEFAULT_DISPLAY_CONFIG } from "@/constants/config";
 // types
 import { TDisplayConfig } from "@/types";
+// components
+import { LinkViewContainer } from "./link-view-container";
 
 interface EditorContainerProps {
   children: ReactNode;
   displayConfig: TDisplayConfig;
-  editor: Editor | null;
+  editor: Editor;
   editorContainerClassName: string;
   id: string;
 }
 
 export const EditorContainer: FC<EditorContainerProps> = (props) => {
   const { children, displayConfig, editor, editorContainerClassName, id } = props;
+  const containerRef = useRef<HTMLDivElement>(null);
 
   const handleContainerClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
     if (event.target !== event.currentTarget) return;
@@ -66,22 +69,26 @@ export const EditorContainer: FC<EditorContainerProps> = (props) => {
   };
 
   return (
-    <div
-      id={`editor-container-${id}`}
-      onClick={handleContainerClick}
-      onMouseLeave={handleContainerMouseLeave}
-      className={cn(
-        `editor-container cursor-text relative line-spacing-${displayConfig.lineSpacing ?? DEFAULT_DISPLAY_CONFIG.lineSpacing}`,
-        {
-          "active-editor": editor?.isFocused && editor?.isEditable,
-          "wide-layout": displayConfig.wideLayout,
-        },
-        displayConfig.fontSize ?? DEFAULT_DISPLAY_CONFIG.fontSize,
-        displayConfig.fontStyle ?? DEFAULT_DISPLAY_CONFIG.fontStyle,
-        editorContainerClassName
-      )}
-    >
-      {children}
-    </div>
+    <>
+      <div
+        ref={containerRef}
+        id={`editor-container-${id}`}
+        onClick={handleContainerClick}
+        onMouseLeave={handleContainerMouseLeave}
+        className={cn(
+          `editor-container cursor-text relative line-spacing-${displayConfig.lineSpacing ?? DEFAULT_DISPLAY_CONFIG.lineSpacing}`,
+          {
+            "active-editor": editor?.isFocused && editor?.isEditable,
+            "wide-layout": displayConfig.wideLayout,
+          },
+          displayConfig.fontSize ?? DEFAULT_DISPLAY_CONFIG.fontSize,
+          displayConfig.fontStyle ?? DEFAULT_DISPLAY_CONFIG.fontStyle,
+          editorContainerClassName
+        )}
+      >
+        {children}
+        <LinkViewContainer editor={editor} containerRef={containerRef} />
+      </div>
+    </>
   );
 };

packages/editor/src/core/components/editors/editor-content.tsx

@@ -1,5 +1,5 @@
-import { FC, ReactNode } from "react";
 import { Editor, EditorContent } from "@tiptap/react";
+import { FC, ReactNode } from "react";
 
 interface EditorContentProps {
   children?: ReactNode;

packages/editor/src/core/components/editors/link-view-container.tsx

@@ -0,0 +1,126 @@
+import { autoUpdate, flip, hide, shift, useDismiss, useFloating, useInteractions } from "@floating-ui/react";
+import { Editor, useEditorState } from "@tiptap/react";
+import { FC, useCallback, useEffect, useState } from "react";
+// components
+import { LinkView, LinkViewProps } from "@/components/links";
+
+interface LinkViewContainerProps {
+  editor: Editor;
+  containerRef: React.RefObject<HTMLDivElement>;
+}
+
+export const LinkViewContainer: FC<LinkViewContainerProps> = ({ editor, containerRef }) => {
+  const [linkViewProps, setLinkViewProps] = useState<LinkViewProps>();
+  const [isOpen, setIsOpen] = useState(false);
+  const [virtualElement, setVirtualElement] = useState<any>(null);
+
+  const editorState = useEditorState({
+    editor,
+    selector: ({ editor }: { editor: Editor }) => ({
+      linkExtensionStorage: editor.storage.link,
+    }),
+  });
+
+  const { refs, floatingStyles, context } = useFloating({
+    open: isOpen,
+    onOpenChange: setIsOpen,
+    elements: {
+      reference: virtualElement,
+    },
+    middleware: [
+      flip({
+        fallbackPlacements: ["top", "bottom"],
+      }),
+      shift({
+        padding: 5,
+      }),
+      hide(),
+    ],
+    whileElementsMounted: autoUpdate,
+    placement: "bottom-start",
+  });
+
+  const dismiss = useDismiss(context);
+
+  const { getReferenceProps, getFloatingProps } = useInteractions([dismiss]);
+
+  const handleLinkHover = useCallback(
+    (event: MouseEvent) => {
+      if (!editor || editorState.linkExtensionStorage.isBubbleMenuOpen) return;
+
+      // Find the closest anchor tag from the event target
+      const target = (event.target as HTMLElement)?.closest("a");
+      if (!target) return;
+
+      const referenceProps = getReferenceProps();
+      Object.entries(referenceProps).forEach(([key, value]) => {
+        target.setAttribute(key, value as string);
+      });
+
+      const view = editor.view;
+      if (!view) return;
+
+      try {
+        const pos = view.posAtDOM(target, 0);
+        if (pos === undefined || pos < 0) return;
+
+        const node = view.state.doc.nodeAt(pos);
+        if (!node) return;
+
+        const linkMark = node.marks?.find((mark) => mark.type.name === "link");
+        if (!linkMark) return;
+
+        setVirtualElement(target);
+
+        // Only update if not already open or if hovering over a different link
+        if (!isOpen || (linkViewProps && (linkViewProps.from !== pos || linkViewProps.to !== pos + node.nodeSize))) {
+          setLinkViewProps({
+            view: "LinkPreview", // Always start with preview for new links
+            url: linkMark.attrs.href,
+            text: node.text || "",
+            editor: editor,
+            from: pos,
+            to: pos + node.nodeSize,
+            closeLinkView: () => {
+              setIsOpen(false);
+              editorState.linkExtensionStorage.isPreviewOpen = false;
+            },
+          });
+          setIsOpen(true);
+        }
+      } catch (error) {
+        console.error("Error handling link hover:", error);
+      }
+    },
+    [editor, editorState.linkExtensionStorage, getReferenceProps, isOpen, linkViewProps]
+  );
+
+  // Set up event listeners
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    container.addEventListener("mouseover", handleLinkHover);
+
+    return () => {
+      container.removeEventListener("mouseover", handleLinkHover);
+    };
+  }, [handleLinkHover]);
+
+  // Close link view when bubble menu opens
+  useEffect(() => {
+    if (editorState.linkExtensionStorage.isBubbleMenuOpen && isOpen) {
+      setIsOpen(false);
+    }
+  }, [editorState.linkExtensionStorage, isOpen]);
+
+  return (
+    <>
+      {isOpen && linkViewProps && virtualElement && (
+        <div ref={refs.setFloating} style={{ ...floatingStyles, zIndex: 100 }} {...getFloatingProps()}>
+          <LinkView {...linkViewProps} style={floatingStyles} />
+        </div>
+      )}
+    </>
+  );
+};

packages/editor/src/core/components/links/index.ts

@@ -1,4 +1,3 @@
 export * from "./link-edit-view";
-export * from "./link-input-view";
 export * from "./link-preview";
 export * from "./link-view";