feat: make floating link generic and use it for all editors

.gitignore

@@ -85,3 +85,5 @@ deploy/selfhost/plane-app/
 ## Storybook
 *storybook.log
 output.css
+
+dev-editor

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

@@ -1,21 +1,9 @@
-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, useEditorState } from "@tiptap/react";
 // components
 import { EditorContainer, EditorContentWrapper } from "@/components/editors";
-import { LinkView, LinkViewProps } from "@/components/links";
 import { AIFeaturesMenu, BlockMenu, EditorBubbleMenu } from "@/components/menus";
+// helpers
+import { getExtensionStorage } from "@/helpers/get-extension-storage";
 // types
 import { TAIHandler, TDisplayConfig } from "@/types";
 
@@ -31,133 +19,34 @@ 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 editorState = useEditorState({
+    editor,
+    selector: ({ editor }: { editor: Editor }) => ({
+      linkExtensionStorage: getExtensionStorage(editor, "link"),
+    }),
   });
 
-  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]
-  );
-
+  console.log("!editorState.linkExtensionStorage.isPreviewOpen", editorState.linkExtensionStorage);
   return (
-    <>
-      <div className="frame-renderer flex-grow w-full -mx-5" 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 -mx-5">
+      <EditorContainer
+        displayConfig={displayConfig}
+        editor={editor}
+        editorContainerClassName={editorContainerClassName}
+        id={id}
+      >
+        <EditorContentWrapper editor={editor} id={id} tabIndex={tabIndex} />
+        {editor.isEditable && (
+          <div>
+            {bubbleMenuEnabled && !editorState.linkExtensionStorage.isPreviewOpen && (
+              <EditorBubbleMenu editor={editor} />
+            )}
+            <BlockMenu editor={editor} />
+            <AIFeaturesMenu menu={aiHandler?.menu} />
+          </div>
+        )}
+      </EditorContainer>
+    </div>
   );
 };

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

@@ -1,11 +1,13 @@
-import { FC, ReactNode } from "react";
 import { Editor } from "@tiptap/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;
@@ -17,6 +19,7 @@ interface EditorContainerProps {
 
 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,21 +69,25 @@ export const EditorContainer: FC<EditorContainerProps> = (props) => {
   };
 
   return (
-    <div
-      id={`editor-container-${id}`}
-      onClick={handleContainerClick}
-      onMouseLeave={handleContainerMouseLeave}
-      className={cn(
-        "editor-container cursor-text relative",
-        {
-          "active-editor": editor?.isFocused && editor?.isEditable,
-        },
-        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",
+          {
+            "active-editor": editor?.isFocused && editor?.isEditable,
+          },
+          displayConfig.fontSize ?? DEFAULT_DISPLAY_CONFIG.fontSize,
+          displayConfig.fontStyle ?? DEFAULT_DISPLAY_CONFIG.fontStyle,
+          editorContainerClassName
+        )}
+      >
+        {children}
+      </div>
+      <LinkViewContainer editor={editor} containerRef={containerRef} />
+    </>
   );
 };

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;