added preview link

packages/core/editor/src/UI/Overlay/Overlay.tsx

@@ -8,10 +8,10 @@ type Props = {
   onClick?: (e: MouseEvent) => void;
 };
 
-const Overlay = (props: Props) => {
+const Overlay = ({ className, onClick, children, lockScroll = true }: Props) => {
   return (
-    <FloatingOverlay lockScroll className={props.className} onClick={props.onClick}>
-      {props.children}
+    <FloatingOverlay lockScroll={lockScroll} className={className} onClick={onClick}>
+      {children}
     </FloatingOverlay>
   );
 };

packages/plugins/link/package.json

@@ -34,5 +34,8 @@
   "bugs": {
     "url": "https://github.com/Darginec05/Editor-Yoopta/issues"
   },
-  "gitHead": "29e4ae316ec75bb43d3822d028abcb0c34256ec5"
+  "dependencies": {
+    "@floating-ui/react": "^0.26.16",
+    "lucide-react": "^0.379.0"
+  }
 }

packages/plugins/link/src/plugin/index.tsx

@@ -1,4 +1,4 @@
-import { generateId, YooptaPlugin } from '@yoopta/editor';
+import { YooptaPlugin } from '@yoopta/editor';
 import { LinkElementProps, LinkPluginElementKeys } from '../types';
 import { LinkRender } from '../ui/LinkRender';
 

packages/plugins/link/src/styles.css

@@ -1,5 +1,13 @@
 @tailwind utilities;
 
 .yoopta-link {
-  @apply yoo-link-underline yoo-link-underline-offset-4 yoo-link-text-[#007AFF] hover:yoo-link-text-[#3b82f6]
+  @apply yoo-link-underline yoo-link-cursor-pointer yoo-link-underline-offset-4 yoo-link-relative yoo-link-text-[#007AFF] hover:yoo-link-text-[#3b82f6]
+}
+
+.yoopta-link-preview {
+  @apply yoo-link-bg-[#FFFFFF] yoo-link-flex yoo-link-items-center yoo-link-z-50 yoo-link-p-[5px] yoo-link-rounded-md yoo-link-shadow-md yoo-link-border-[1px] yoo-link-border-solid yoo-link-border-[#e3e3e3]
+}
+
+.yoopta-link-preview-text {
+  @apply yoo-link-mx-[4px] yoo-link-text-sm
 }

packages/plugins/link/src/ui/LinkHoverPreview.tsx

@@ -0,0 +1,32 @@
+import { UI, useYooptaTools } from '@yoopta/editor';
+import { Copy, Globe } from 'lucide-react';
+import { useState } from 'react';
+
+const { Overlay, Portal } = UI;
+
+const LinkHoverPreview = ({ style, setFloating, element }) => {
+  console.log('element', element);
+  const tools = useYooptaTools();
+  const [isToolsOpen, setIsToolsOpen] = useState(false);
+
+  const LinkTool = tools?.LinkTool;
+  const hasLinkTool = !!LinkTool;
+
+  return (
+    <Portal id="yoopta-link-preview">
+      <div className="yoopta-link-preview" style={style} ref={setFloating}>
+        {isToolsOpen ? (
+          <LinkTool />
+        ) : (
+          <>
+            <Globe size={14} strokeWidth={1} />
+            <span className="yoopta-link-preview-text">{element.props.url}</span>
+            <span onClick={() => setIsToolsOpen(true)}>Edit</span>
+          </>
+        )}
+      </div>
+    </Portal>
+  );
+};
+
+export { LinkHoverPreview };

packages/plugins/link/src/ui/LinkRender.tsx

@@ -1,19 +1,41 @@
-import { PluginElementRenderProps, useYooptaReadOnly } from '@yoopta/editor';
+import { PluginElementRenderProps, useYooptaReadOnly, useYooptaTools, UI } from '@yoopta/editor';
+import { useState } from 'react';
 import { LinkElementProps } from '../types';
+import { LinkHoverPreview } from './LinkHoverPreview';
+import { useFloating, offset, flip, shift, inline, autoUpdate, useTransitionStyles } from '@floating-ui/react';
+import { SquareArrowOutUpRight } from 'lucide-react';
 
 const VALID_TARGET_VALUES = ['_blank', '_self', '_parent', '_top', 'framename'];
 
 const LinkRender = ({ extendRender, ...props }: PluginElementRenderProps) => {
+  const [hovered, setHovered] = useState(false);
+
   const { className = '', ...htmlAttrs } = props.HTMLAttributes || {};
 
+  const {
+    refs: linkPreviewRefs,
+    floatingStyles: linkPreviewFloatingStyles,
+    context,
+  } = useFloating({
+    placement: 'bottom',
+    open: hovered,
+    onOpenChange: setHovered,
+    middleware: [inline(), flip(), shift(), offset(0)],
+    whileElementsMounted: autoUpdate,
+  });
+
+  const { isMounted: isActionMenuMounted, styles: linkPreviewTransitionStyles } = useTransitionStyles(context, {
+    duration: {
+      open: 100,
+      close: 100,
+    },
+  });
+
+  const linkPreviewStyles = { ...linkPreviewFloatingStyles, ...linkPreviewTransitionStyles };
+
   const { url, target = '', rel } = props.element.props || {};
   const isReadOnly = useYooptaReadOnly();
 
-  const onClick = (e) => {
-    if (isReadOnly) return;
-    e.preventDefault();
-  };
-
   const linkProps: Partial<Pick<LinkElementProps, 'rel' | 'target'>> = {
     rel,
     target,
@@ -30,18 +52,43 @@ const LinkRender = ({ extendRender, ...props }: PluginElementRenderProps) => {
   if (extendRender) {
     return extendRender(props);
   }
+  const onMouseOver = () => {
+    console.log('onMouseOver', onMouseOver);
+    setHovered(true);
+  };
+  const onMouseOut = () => {
+    console.log('onMouseOut', onMouseOut);
+    setHovered(false);
+  };
+
+  const onRef = (ref) => {
+    props.attributes.ref = ref;
+    linkPreviewRefs.setReference(ref);
+  };
+
+  const onClick = (e) => {
+    // if (isReadOnly) return;
+    // e.preventDefault();
+  };
 
   return (
     <a
       draggable={false}
       href={url || ''}
       onClick={onClick}
       className={`yoopta-link ${className}`}
+      onMouseOver={onMouseOver}
+      onMouseOut={onMouseOut}
       {...linkProps}
       {...htmlAttrs}
       {...props.attributes}
+      ref={onRef}
     >
       {props.children}
+
+      {isActionMenuMounted && !isReadOnly && (
+        <LinkHoverPreview style={linkPreviewStyles} setFloating={linkPreviewRefs.setFloating} element={props.element} />
+      )}
     </a>
   );
 };

yarn.lock

@@ -1512,6 +1512,14 @@
   dependencies:
     "@floating-ui/utils" "^0.2.1"
 
+"@floating-ui/dom@^1.0.0":
+  version "1.6.5"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.6.5.tgz#323f065c003f1d3ecf0ff16d2c2c4d38979f4cb9"
+  integrity sha512-Nsdud2X65Dz+1RHjAIP0t8z5e2ff/IRbei6BqFrl1urT8sDVzM1HMQ+R0XcU5ceRfyO3I6ayeqIfh+6Wb8LGTw==
+  dependencies:
+    "@floating-ui/core" "^1.0.0"
+    "@floating-ui/utils" "^0.2.0"
+
 "@floating-ui/dom@^1.6.1":
   version "1.6.3"
   resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.6.3.tgz#954e46c1dd3ad48e49db9ada7218b0985cee75ef"
@@ -1527,6 +1535,13 @@
   dependencies:
     "@floating-ui/dom" "^1.6.1"
 
+"@floating-ui/react-dom@^2.1.0":
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.1.0.tgz#4f0e5e9920137874b2405f7d6c862873baf4beff"
+  integrity sha512-lNzj5EQmEKn5FFKc04+zasr09h/uX8RtJRNj5gUXsSQIXHVWTVh+hVAg1vOMCexkX8EgvemMvIFpQfkosnVNyA==
+  dependencies:
+    "@floating-ui/dom" "^1.0.0"
+
 "@floating-ui/react@^0.26.11":
   version "0.26.11"
   resolved "https://registry.yarnpkg.com/@floating-ui/react/-/react-0.26.11.tgz#226d3fec890de439443b62f3138ef7de052b0998"
@@ -1536,6 +1551,15 @@
     "@floating-ui/utils" "^0.2.0"
     tabbable "^6.0.0"
 
+"@floating-ui/react@^0.26.16":
+  version "0.26.16"
+  resolved "https://registry.yarnpkg.com/@floating-ui/react/-/react-0.26.16.tgz#3415a087f452165161c2d313d1d57e8142894679"
+  integrity sha512-HEf43zxZNAI/E781QIVpYSF3K2VH4TTYZpqecjdsFkjsaU1EbaWcM++kw0HXFffj7gDUcBFevX8s0rQGQpxkow==
+  dependencies:
+    "@floating-ui/react-dom" "^2.1.0"
+    "@floating-ui/utils" "^0.2.0"
+    tabbable "^6.0.0"
+
 "@floating-ui/react@^0.26.9":
   version "0.26.9"
   resolved "https://registry.yarnpkg.com/@floating-ui/react/-/react-0.26.9.tgz#bbccbefa0e60c8b7f4c0387ba0fc0607bb65f2cc"
@@ -8345,6 +8369,11 @@ lucide-react@^0.378.0:
   resolved "https://registry.yarnpkg.com/lucide-react/-/lucide-react-0.378.0.tgz#232acb99c6baedfa90959a2c0dd11327b058bde8"
   integrity sha512-u6EPU8juLUk9ytRcyapkWI18epAv3RU+6+TC23ivjR0e+glWKBobFeSgRwOIJihzktILQuy6E0E80P2jVTDR5g==
 
+lucide-react@^0.379.0:
+  version "0.379.0"
+  resolved "https://registry.yarnpkg.com/lucide-react/-/lucide-react-0.379.0.tgz#29e34eeffae7fb241b64b09868cbe3ab888ef7cc"
+  integrity sha512-KcdeVPqmhRldldAAgptb8FjIunM2x2Zy26ZBh1RsEUcdLIvsEmbcw7KpzFYUy5BbpGeWhPu9Z9J5YXfStiXwhg==
+
 lz-string@^1.5.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.5.0.tgz#c1ab50f77887b712621201ba9fd4e3a6ed099941"