Harden authored link popups

Author: MaggieAppleton

e2e/research-child-surface.e2e.ts

@@ -46,6 +46,7 @@ test("authored links open from parent and child documents", async ({ baseURL, jo
 	await parentLink.click();
 	let parentPopup = await parentPopupPromise;
 	await expect(parentPopup).toHaveURL("https://example.com/parent-source");
+	expect(await parentPopup.evaluate(() => opener === null)).toBe(true);
 	await parentPopup.close();
 
 	let sidebar = page.getByRole("complementary", { name: "Projects" });

packages/editor/src/widgets-plugin.tsx

@@ -11,8 +11,10 @@
  * only way a later value arrives.
  */
 
+import { useEffect } from "react";
+import { $getSelection, $isRangeSelection } from "lexical";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { addComposerChild$, realmPlugin } from "@mdxeditor/editor";
-import { ClickableLinkPlugin } from "@lexical/react/LexicalClickableLinkPlugin";
 
 import { ChangeObserver } from "./changes-observer";
 import { CommentLayer } from "./comment-layer";
@@ -34,6 +36,42 @@ import type { WidgetOptions } from "./widget-options";
 export { widgets$ } from "./widget-options";
 export type { WidgetOptions } from "./widget-options";
 
+function SafeClickableLinkPlugin() {
+	let [editor] = useLexicalComposerContext();
+
+	useEffect(() => {
+		let follow = (event: MouseEvent) => {
+			if (event.defaultPrevented || (event.button !== 0 && event.button !== 1)) return;
+			let target = event.target;
+			if (!(target instanceof Element)) return;
+			let link = target.closest<HTMLAnchorElement>("a[href]");
+			if (!link || link.hasAttribute("download")) return;
+			let selecting = editor.read(() => {
+				let selection = $getSelection();
+				return $isRangeSelection(selection) && !selection.isCollapsed();
+			});
+			if (selecting) {
+				event.preventDefault();
+				return;
+			}
+			event.preventDefault();
+			event.stopPropagation();
+			window.open(link.href, "_blank", "noopener,noreferrer");
+		};
+		let middle = (event: MouseEvent) => {
+			if (event.button === 1) follow(event);
+		};
+		return editor.registerRootListener((current, previous) => {
+			previous?.removeEventListener("click", follow);
+			previous?.removeEventListener("mouseup", middle);
+			current?.addEventListener("click", follow);
+			current?.addEventListener("mouseup", middle);
+		});
+	}, [editor]);
+
+	return null;
+}
+
 export const widgetsPlugin = realmPlugin<WidgetOptions>({
 	init(realm, params) {
 		realm.pub(widgets$, params ?? {});
@@ -59,7 +97,7 @@ export const widgetsPlugin = realmPlugin<WidgetOptions>({
 		realm.pub(addComposerChild$, ResearchDeletionPlugin);
 		// Link nodes live inside Lexical's contenteditable root, where a normal
 		// browser click changes the selection instead of following the anchor.
-		realm.pub(addComposerChild$, () => <ClickableLinkPlugin newTab />);
+		realm.pub(addComposerChild$, SafeClickableLinkPlugin);
 		// Also where `@lexical/table`'s own plugins are registered, which the
 		// editor otherwise runs without.
 		realm.pub(addComposerChild$, TableChrome);