feat: LexicalClickableLinkPlugin should support ctrl click mode #4565 (…

…#4839)

packages/lexical-playground/src/plugins/FloatingLinkEditorPlugin/index.tsx

@@ -13,12 +13,14 @@ import {$findMatchingParent, mergeRegister} from '@lexical/utils';
 import {
   $getSelection,
   $isRangeSelection,
+  CLICK_COMMAND,
   COMMAND_PRIORITY_CRITICAL,
   COMMAND_PRIORITY_HIGH,
   COMMAND_PRIORITY_LOW,
   GridSelection,
   KEY_ESCAPE_COMMAND,
   LexicalEditor,
+  LexicalNode,
   NodeSelection,
   RangeSelection,
   SELECTION_CHANGE_COMMAND,
@@ -268,13 +270,19 @@ function useFloatingLinkEditorToolbar(
   const [activeEditor, setActiveEditor] = useState(editor);
   const [isLink, setIsLink] = useState(false);
 
+  const getLinkElements = (
+    selection: RangeSelection,
+  ): Array<LexicalNode | null> => {
+    const node = getSelectedNode(selection);
+    const linkParent = $findMatchingParent(node, $isLinkNode);
+    const autoLinkParent = $findMatchingParent(node, $isAutoLinkNode);
+
+    return [linkParent, autoLinkParent];
+  };
   const updateToolbar = useCallback(() => {
     const selection = $getSelection();
     if ($isRangeSelection(selection)) {
-      const node = getSelectedNode(selection);
-      const linkParent = $findMatchingParent(node, $isLinkNode);
-      const autoLinkParent = $findMatchingParent(node, $isAutoLinkNode);
-
+      const [linkParent, autoLinkParent] = getLinkElements(selection);
       // We don't want this menu to open for auto links.
       if (linkParent != null && autoLinkParent == null) {
         setIsLink(true);
@@ -283,7 +291,19 @@ function useFloatingLinkEditorToolbar(
       }
     }
   }, []);
-
+  const openLinkInNewTab = useCallback((_payload: MouseEvent) => {
+    const selection = $getSelection();
+    if ($isRangeSelection(selection)) {
+      const [linkParent, autoLinkParent] = getLinkElements(selection);
+      const url = linkParent?.__url || autoLinkParent?.__url;
+      if (
+        (linkParent != null || autoLinkParent != null) &&
+        (_payload?.metaKey || _payload?.ctrlKey)
+      ) {
+        window.open(url, '_blank');
+      }
+    }
+  }, []);
   useEffect(() => {
     return mergeRegister(
       editor.registerUpdateListener(({editorState}) => {
@@ -300,8 +320,16 @@ function useFloatingLinkEditorToolbar(
         },
         COMMAND_PRIORITY_CRITICAL,
       ),
+      editor.registerCommand(
+        CLICK_COMMAND,
+        (_payload, newEditor) => {
+          openLinkInNewTab(_payload);
+          return false;
+        },
+        COMMAND_PRIORITY_CRITICAL,
+      ),
     );
-  }, [editor, updateToolbar]);
+  }, [editor, updateToolbar, openLinkInNewTab]);
 
   return createPortal(
     <FloatingLinkEditor