@clevertask/scribe 0.1.13 → 0.1.15

package/README.md

@@ -11,6 +11,7 @@ A versatile, block-based rich text editor for diverse applications, built with T
 - **Markdown Support:** Parse and render Markdown content effortlessly.
 - **Markdown Paste:** Paste plain-text markdown into the editor and have it converted into rich content automatically.
 - **Table Authoring:** Insert, resize, and edit tables with controls that stay next to the active table.
+- **Experimental External Link Previews:** Opt into Compact and Preview card presentations while keeping ordinary links available.
 - **Versatile Integration:** Easily integrate `@clevertask/scribe` into any project requiring rich text editing.
 - **View and Edit:** Seamlessly switch between viewing and editing modes.
 - **Experimental Table of Contents:** Subscribe to heading changes and render an app-owned table of contents outside the editor.
@@ -21,6 +22,7 @@ A versatile, block-based rich text editor for diverse applications, built with T
   - [Installation](#installation)
   - [Usage](#usage)
   - [Table Authoring](#table-authoring)
+  - [External Link Previews](#external-link-previews)
   - [Experimental Table of Contents](#experimental-table-of-contents)
   - [Math Expressions](#math-expressions)
   - [Props](#props)
@@ -119,6 +121,55 @@ Keyboard users can press `Alt + F10` while editing a table to focus its controls
 
 Simple headed tables serialize as GFM Markdown. Tables with merged cells, multiple blocks in a cell, resized columns, or other structures that GFM cannot represent are kept as sanitized raw HTML inside the Markdown output so their structure is not silently lost.
 
+## External Link Previews
+
+> [!NOTE]
+> External Link Previews are experimental. Their public API, built-in card presentation, and link-options UI may change as we test them in real document workflows.
+
+External link previews are opt-in. Scribe owns their editor behavior and presentation, while your app owns metadata fetching. Pass a resolver that calls an authenticated app endpoint; Scribe never requests the destination website directly.
+
+That endpoint should validate the destination, block private or reserved network addresses, re-check redirects, and enforce response-size and timeout limits before returning sanitized metadata.
+
+```tsx
+import { Scribe, type ExternalLinkPreviewResolver } from "@clevertask/scribe";
+import { useCallback } from "react";
+
+function DocumentEditor() {
+  const resolveLinkPreview = useCallback<ExternalLinkPreviewResolver>(async (href, { signal }) => {
+    const response = await fetch(`/api/link-previews?url=${encodeURIComponent(href)}`, {
+      credentials: "include",
+      signal,
+    });
+
+    if (!response.ok) {
+      return null;
+    }
+
+    return response.json();
+  }, []);
+  const shouldPreview = useCallback((href: string) => {
+    return new URL(href).origin !== window.location.origin;
+  }, []);
+
+  return (
+    <Scribe
+      externalLinkPreview={{
+        resolve: resolveLinkPreview,
+        shouldPreview,
+        // Defaults to false. Enable only if standalone pastes should fetch immediately.
+        autoPreviewOnPaste: false,
+      }}
+    />
+  );
+}
+```
+
+By default, pasting a standalone external URL creates an ordinary link and does not call the resolver. Select the link and choose Compact or Preview card to request metadata. Set `autoPreviewOnPaste: true` if standalone URL pastes should become Compact previews automatically. Pasting a URL over selected text always keeps an ordinary labeled link. While editing, select a Plain, Compact, or Card link to open its contextual menu. From there you can edit or open the destination, refresh preview metadata, or switch presentation; a Preview card is available only when the link has its own line. Keyboard users can press `Alt + F10` from a selected link to open the same menu and press Escape to return to the document.
+
+The resolver runs only after an explicit conversion, programmatic preview insertion, preview destination edit, refresh, or—when deliberately enabled—an automatic standalone paste. It never runs merely because a saved document opens. It receives an `AbortSignal`, and can return `pageTitle`, `description`, `siteName`, `faviconUrl`, `imageUrl`, and `fetchedAt`. Use `shouldPreview` to keep app-owned or otherwise unsupported destinations on the ordinary-link path.
+
+Preview nodes use sanitized raw HTML when content is serialized as Markdown, so their metadata and presentation survive Scribe's current Markdown round trip. A caller-owned `externalEditor` must register `ExternalLinkPreview` itself.
+
 ## Experimental Table of Contents
 
 Scribe can expose table-of-contents data without rendering a table-of-contents block inside the editable document. Enable the experimental API with `enableTableOfContents`, keep the latest items in your app state, and call `scrollToTableOfContentsItem` when a user selects an entry.
@@ -201,6 +252,7 @@ If your content arrives as HTML (for example from a server), use the helper belo
 | `autoFocus`               | `boolean`                                                          | `false`                    | Controls whether the editor should automatically focus when mounted.                                                                                                                                                                                     |
 | `extensions`              | `Extension[]`                                                      | `undefined`                | You can set your own extensions for the text editor. For more information, [check the tip tap extensions docs](https://tiptap.dev/docs/editor/core-concepts/extensions)                                                                                  |
 | `externalEditor`          | `Editor`                                                           | `undefined`                | Uses a caller-owned Tiptap editor. The caller remains responsible for its extension and plugin lifecycle, including table resizing, and for destroying it.                                                                                               |
+| `externalLinkPreview`     | `Partial<ExternalLinkPreviewOptions>`                              | `undefined`                | Experimental. Opts into external-link metadata resolution and enhanced Compact/Card presentation. The consumer owns fetching and destination policy; automatic previews on paste default to disabled.                                                    |
 | `editorProps`             | `EditorProps`                                                      | `undefined`                | A tiptap-based prop to handle advanced use cases, you can read about it on their [documentation](https://tiptap.dev/docs/editor/api/editor#editorprops)                                                                                                  |
 | `showBarMenu`             | `boolean`                                                          | `true`                     | Determines whether to show the text editor top menu bar or not. This menu bar shows options to format the text                                                                                                                                           |
 | `placeholderText`         | `string`                                                           | `Type "/" for commands...` | Change the initial placeholder for your text editor                                                                                                                                                                                                      |

package/dist/{BarMenu-O2IVhHXx.js → BarMenu-x4sf3ECS.js}

@@ -1,4 +1,4 @@
-import { a as e } from "./dist-BoYfa2nz.js";
+import { s as e } from "./dist-DDjaA1Pn.js";
 import { getPopupMountTarget as t } from "./components/Scribe/extension/getPopupMountTarget.js";
 import n from "./components/Menu/LinkEditor.js";
 import { hideLinkBubbleMenu as r } from "./components/Menu/linkBubbleMenuPlugin.js";

package/dist/components/Menu/BarMenu.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../BarMenu-O2IVhHXx.js";
+import { t as e } from "../../BarMenu-x4sf3ECS.js";
 export { e as default };

package/dist/components/Menu/BubbleMenu.js

@@ -1,6 +1,6 @@
-import { a as e } from "../../dist-BoYfa2nz.js";
+import { s as e } from "../../dist-DDjaA1Pn.js";
 import { getPopupMountTarget as t } from "../Scribe/extension/getPopupMountTarget.js";
-import { t as n } from "../../menus-B1Zz0GjH.js";
+import { t as n } from "../../menus-U2HdvQnu.js";
 import { Flex as r, IconButton as i } from "@radix-ui/themes";
 import { useCallback as a } from "react";
 import { jsx as o } from "react/jsx-runtime";

package/dist/components/Menu/CalloutBubbleMenu.js

@@ -1,6 +1,6 @@
-import { a as e } from "../../dist-BoYfa2nz.js";
+import { s as e } from "../../dist-DDjaA1Pn.js";
 import { getPopupMountTarget as t } from "../Scribe/extension/getPopupMountTarget.js";
-import { t as n } from "../../menus-B1Zz0GjH.js";
+import { t as n } from "../../menus-U2HdvQnu.js";
 import { CalloutIcon as r, RemoveCalloutIcon as i } from "../../icons/CalloutIcon.js";
 import { CALLOUT_VARIANTS as a, CALLOUT_VARIANT_LABELS as o, isCalloutVariant as s } from "../Scribe/extension/callout.js";
 import { calloutBubbleMenuPluginKey as c, getSelectionCalloutContext as l } from "./calloutBubbleMenuPlugin.js";

package/dist/components/Menu/ExternalLinkDisplayOptions.d.ts

@@ -0,0 +1,13 @@
+import type { Editor } from "@tiptap/react";
+import type { ExternalLinkDisplay } from "../Scribe/extension/external-link-preview/types";
+export type { ExternalLinkDisplay } from "../Scribe/extension/external-link-preview/types";
+export interface ExternalLinkDisplayOptionsProps {
+    currentDisplay: ExternalLinkDisplay;
+    editor: Editor;
+    executeDisplayChange?: (display: ExternalLinkDisplay) => boolean;
+    onDisplayChange?: (display: ExternalLinkDisplay) => void;
+    targetPosition?: number;
+}
+declare const ExternalLinkDisplayOptions: ({ currentDisplay, editor, executeDisplayChange, onDisplayChange, targetPosition, }: ExternalLinkDisplayOptionsProps) => import("react").JSX.Element | null;
+export default ExternalLinkDisplayOptions;
+//# sourceMappingURL=ExternalLinkDisplayOptions.d.ts.map

package/dist/components/Menu/ExternalLinkDisplayOptions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExternalLinkDisplayOptions.d.ts","sourceRoot":"","sources":["../../../lib/components/Menu/ExternalLinkDisplayOptions.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAE5C,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iDAAiD,CAAC;AAE3F,YAAY,EAAE,mBAAmB,EAAE,MAAM,iDAAiD,CAAC;AAE3F,MAAM,WAAW,+BAA+B;IAC9C,cAAc,EAAE,mBAAmB,CAAC;IACpC,MAAM,EAAE,MAAM,CAAC;IACf,oBAAoB,CAAC,EAAE,CAAC,OAAO,EAAE,mBAAmB,KAAK,OAAO,CAAC;IACjE,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,mBAAmB,KAAK,IAAI,CAAC;IACzD,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAuCD,QAAA,MAAM,0BAA0B,uFAM7B,+BAA+B,uCA4FjC,CAAC;eAEa,0BAA0B"}

package/dist/components/Menu/ExternalLinkDisplayOptions.js

@@ -0,0 +1,90 @@
+import { Button as e, Flex as t, Text as n } from "@radix-ui/themes";
+import { useCallback as r, useId as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region lib/components/Menu/ExternalLinkDisplayOptions.tsx
+var s = [
+	{
+		description: "Show a regular text link.",
+		display: "plain",
+		label: "Plain link"
+	},
+	{
+		description: "Show the page title and site icon.",
+		display: "compact",
+		label: "Compact"
+	},
+	{
+		description: "Show an image, title, and description.",
+		display: "card",
+		label: "Preview card"
+	}
+], c = (e) => e.commands, l = (e) => e.can(), u = ({ currentDisplay: u, editor: d, executeDisplayChange: f, onDisplayChange: p, targetPosition: m }) => {
+	let h = i(), g = c(d), _ = l(d), v = typeof g.setExternalLinkDisplay == "function", y = (e) => typeof m == "number" ? !!_.setExternalLinkDisplay?.(e, m) : !!_.setExternalLinkDisplay?.(e), b = {
+		plain: u === "plain" || y("plain"),
+		compact: u === "compact" || y("compact"),
+		card: u === "card" || y("card")
+	}, x = v && b.compact, S = v && b.card, C = u !== "plain" || x || S, w = r((e) => {
+		e !== u && (f?.(e) ?? (typeof m == "number" ? d.chain().focus().setExternalLinkDisplay(e, m).run() : c(d).setExternalLinkDisplay?.(e))) && p?.(e);
+	}, [
+		u,
+		d,
+		f,
+		p,
+		m
+	]);
+	return !v || !C ? null : /* @__PURE__ */ o(t, {
+		direction: "column",
+		gap: "2",
+		children: [/* @__PURE__ */ a(n, {
+			as: "p",
+			size: "2",
+			weight: "medium",
+			children: "Display as"
+		}), /* @__PURE__ */ a(t, {
+			role: "group",
+			"aria-label": "Display as",
+			direction: "column",
+			gap: "1",
+			children: s.map((r) => {
+				let i = u === r.display, s = b[r.display], c = `${h}-${r.display}-description`, l = r.display === "card" && !s ? "Preview card needs its own line." : r.description;
+				return /* @__PURE__ */ a(e, {
+					type: "button",
+					"aria-describedby": c,
+					"aria-label": r.label,
+					"aria-pressed": i,
+					color: "gray",
+					disabled: !s,
+					variant: i ? "soft" : "ghost",
+					onClick: () => w(r.display),
+					style: {
+						height: "auto",
+						justifyContent: "flex-start",
+						paddingBottom: 8,
+						paddingTop: 8,
+						textAlign: "left",
+						width: "100%"
+					},
+					children: /* @__PURE__ */ o(t, {
+						direction: "column",
+						gap: "1",
+						align: "start",
+						children: [/* @__PURE__ */ a(n, {
+							as: "span",
+							size: "2",
+							weight: "medium",
+							children: r.label
+						}), /* @__PURE__ */ a(n, {
+							id: c,
+							as: "span",
+							size: "1",
+							color: "gray",
+							children: l
+						})]
+					})
+				}, r.display);
+			})
+		})]
+	});
+};
+//#endregion
+export { u as default };

package/dist/components/Menu/LinkBubbleMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LinkBubbleMenu.d.ts","sourceRoot":"","sources":["../../../lib/components/Menu/LinkBubbleMenu.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAkB,MAAM,eAAe,CAAC;AAKvD,OAAO,EAAE,EAAE,EAAqD,MAAM,OAAO,CAAC;AAS9E,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,MAAM,CAAC;CAChB;AAID,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CA+J3C,CAAC;eAEa,cAAc"}
+{"version":3,"file":"LinkBubbleMenu.d.ts","sourceRoot":"","sources":["../../../lib/components/Menu/LinkBubbleMenu.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAkB,MAAM,eAAe,CAAC;AAKvD,OAAO,EAAE,EAAE,EAA2E,MAAM,OAAO,CAAC;AAepG,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,MAAM,CAAC;CAChB;AAiCD,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAia3C,CAAC;eAEa,cAAc"}

package/dist/components/Menu/LinkBubbleMenu.js

@@ -1,92 +1,192 @@
-import { a as e } from "../../dist-BoYfa2nz.js";
+import { s as e } from "../../dist-DDjaA1Pn.js";
 import { getPopupMountTarget as t } from "../Scribe/extension/getPopupMountTarget.js";
 import n from "./LinkEditor.js";
-import { hideLinkBubbleMenu as r, linkBubbleMenuPluginKey as i, showLinkBubbleMenu as a } from "./linkBubbleMenuPlugin.js";
-import { t as o } from "../../menus-B1Zz0GjH.js";
-import { Box as s } from "@radix-ui/themes";
-import { useCallback as c, useEffect as l, useMemo as u, useRef as d, useState as f } from "react";
-import { jsx as p } from "react/jsx-runtime";
+import { getExternalLinkPreviewHostname as r } from "../Scribe/extension/external-link-preview/attributes.js";
+import { consumeLinkBubbleMenuFocusTarget as i, getPlainLinkContextAtPosition as a, getSelectionLinkContext as o, hideLinkBubbleMenu as s, linkBubbleMenuPluginKey as c, showLinkBubbleMenu as l } from "./linkBubbleMenuPlugin.js";
+import { t as u } from "../../menus-U2HdvQnu.js";
+import { getSelectionContextualMenuOwner as d } from "./contextualMenuOwner.js";
+import { getExternalLinkPreviewResolutionStatus as f } from "../Scribe/extension/external-link-preview/resolver.js";
+import { Box as p } from "@radix-ui/themes";
+import { useCallback as m, useEffect as h, useMemo as g, useRef as _, useState as v } from "react";
+import { jsx as y } from "react/jsx-runtime";
 //#region lib/components/Menu/LinkBubbleMenu.tsx
-var m = ({ editor: m }) => {
-	let [h, g] = f(""), _ = d(null), v = d(null), y = e({
-		editor: m,
+var b = /auto|overlay|scroll/, x = (e) => {
+	let t = e.ownerDocument.defaultView;
+	if (!t) return [];
+	let n = [], r = e.parentElement;
+	for (; r && r !== e.ownerDocument.body && r !== e.ownerDocument.documentElement;) {
+		let e = t.getComputedStyle(r);
+		b.test(`${e.overflow} ${e.overflowX} ${e.overflowY}`) && n.push(r), r = r.parentElement;
+	}
+	return n;
+}, S = ({ editor: b }) => {
+	let [S, C] = v(""), [w, T] = v(0), [E, D] = v(null), O = _(null), k = _(null), A = _(null), j = e({
+		editor: b,
 		selector: ({ editor: e }) => {
-			let { from: t, to: n } = e.state.selection;
-			return {
-				from: t,
-				href: e.getAttributes("link").href ?? "",
-				to: n
+			let t = o(e.state);
+			return !t || t.kind === "plain" ? {
+				canRefresh: !1,
+				context: t,
+				status: "idle",
+				statusLabel: ""
+			} : {
+				canRefresh: e.can().refreshExternalLinkPreview(t.position),
+				context: t,
+				status: f(e.state, t.position),
+				statusLabel: t.attributes.siteName || r(t.attributes.href)
 			};
 		}
 	});
-	l(() => {
-		g(y.href);
+	h(() => {
+		C(j.context?.href ?? "");
 	}, [
-		y.from,
-		y.href,
-		y.to
-	]), l(() => () => {
-		v.current !== null && window.cancelAnimationFrame(v.current);
-	}, []), l(() => {
-		if (m.isDestroyed) return;
-		let e = m.view.dom, t = null, n = !1, r = (r) => {
-			if (r.button !== 0 || !m.isEditable) return;
+		j.context?.from,
+		j.context?.href,
+		j.context?.to
+	]), h(() => () => {
+		A.current !== null && window.cancelAnimationFrame(A.current);
+	}, []), h(() => {
+		if (b.isDestroyed) return;
+		let e = b.view.dom, t = null, n = (e) => !e || (b.commands.setTextSelection({
+			from: e.from,
+			to: e.to
+		}), d(b.state) !== "link") ? !1 : (l(b, "url"), !0), r = (n) => {
+			if (n.button !== 0 || !b.isEditable) return;
+			let r = n.target?.closest?.("a");
+			!r || !e.contains(r) || r.closest("[data-type=\"external-link-preview\"]") || (t = {
+				x: n.clientX,
+				y: n.clientY
+			});
+		}, i = (r) => {
+			if (r.button !== 0 || !b.isEditable) return;
 			let i = r.target?.closest?.("a");
-			!i || !e.contains(i) || (t !== null && window.clearTimeout(t), t = window.setTimeout(() => {
-				if (t = null, n || m.isDestroyed || !m.isEditable || !r.defaultPrevented) return;
-				let { from: e, to: i } = m.state.selection;
-				e === i || !m.isActive("link") || a(m);
+			if (!i || !e.contains(i) || i.closest("[data-type=\"external-link-preview\"]")) return;
+			let o = r.detail > 0 && t !== null && Math.hypot(r.clientX - t.x, r.clientY - t.y) > 4;
+			if (t = null, o) return;
+			let s;
+			try {
+				s = b.view.posAtDOM(i, 0);
+			} catch {
+				return;
+			}
+			let c = a(b.state, s), l = c ? b.view.nodeDOM(c.from) : null;
+			!l || !i.contains(l) || n(c) && r.preventDefault();
+		};
+		return e.addEventListener("mousedown", r), e.addEventListener("click", i), () => {
+			e.removeEventListener("mousedown", r), e.removeEventListener("click", i);
+		};
+	}, [b]), h(() => {
+		let e = b.view.dom, t = (e) => {
+			if (e.key !== "F10" || !e.altKey || e.ctrlKey || e.metaKey || e.shiftKey || !b.isEditable) return;
+			let t = o(b.state);
+			t?.kind === "plain" && (b.chain().extendMarkRange("link").run(), t = o(b.state)), !(!t || d(b.state) !== "link") && (e.preventDefault(), e.stopImmediatePropagation(), l(b, t.kind === "preview" ? "dialog" : "url"));
+		};
+		return e.addEventListener("keydown", t, !0), () => e.removeEventListener("keydown", t, !0);
+	}, [b]), h(() => {
+		let e = b.view.dom.ownerDocument, t = e.defaultView;
+		if (!t) return;
+		let n = (e) => {
+			let n = O.current;
+			!n?.isConnected || !(e instanceof t.Node) || n.contains(e) || b.view.dom.contains(e) || s(b);
+		}, r = (e) => n(e.target), i = (e) => n(e.target);
+		return e.addEventListener("pointerdown", r, !0), e.addEventListener("focusin", i), () => {
+			e.removeEventListener("pointerdown", r, !0), e.removeEventListener("focusin", i);
+		};
+	}, [b]), h(() => {
+		let e = b.view.dom.ownerDocument.defaultView;
+		if (!e) return;
+		let t = x(b.view.dom), n = null, r = () => {
+			n === null && (n = e.requestAnimationFrame(() => {
+				n = null, b.isDestroyed || b.view.dispatch(b.state.tr.setMeta(c, "updatePosition"));
 			}));
 		};
-		return e.addEventListener("mouseup", r), () => {
-			n = !0, t !== null && window.clearTimeout(t), e.removeEventListener("mouseup", r);
+		return e.addEventListener("scroll", r, { passive: !0 }), t.forEach((e) => {
+			e.addEventListener("scroll", r, { passive: !0 });
+		}), () => {
+			n !== null && e.cancelAnimationFrame(n), e.removeEventListener("scroll", r), t.forEach((e) => {
+				e.removeEventListener("scroll", r);
+			});
+		};
+	}, [b]), h(() => {
+		let e = b.view.dom.closest("[data-scribe-root]"), t = b.view.dom.ownerDocument.defaultView;
+		if (!e || !t) return;
+		let n = () => {
+			let t = e.getBoundingClientRect().width;
+			D(t > 0 ? Math.max(t - 16, 0) : null);
+		};
+		if (n(), !t.ResizeObserver) return;
+		let r = new t.ResizeObserver(n);
+		return r.observe(e), () => r.disconnect();
+	}, [b]);
+	let M = m(() => {
+		if (b.isDestroyed) return;
+		let e = b.state.selection.to;
+		s(b), b.chain().setTextSelection(e).focus().run();
+	}, [b]), N = m(() => {
+		let e = o(b.state);
+		e?.kind === "preview" && b.commands.refreshExternalLinkPreview(e.position);
+	}, [b]), P = m(() => {
+		A.current !== null && window.cancelAnimationFrame(A.current);
+		let e = o(b.state), t = i(b), n = () => {
+			t === "dialog" ? O.current?.focus() : (k.current?.focus(), k.current?.select());
 		};
-	}, [m]);
-	let b = c(() => {
-		if (m.isDestroyed) return;
-		let e = m.state.selection.to;
-		r(m), m.chain().setTextSelection(e).focus().run();
-	}, [m]), x = c(() => {
-		v.current !== null && window.cancelAnimationFrame(v.current), v.current = window.requestAnimationFrame(() => {
-			_.current?.focus(), _.current?.select(), v.current = null;
+		C(e?.href ?? ""), T((e) => e + 1), n(), A.current = window.requestAnimationFrame(() => {
+			n(), A.current = null;
 		});
-	}, []), S = c(({ editor: e, element: t, from: n, to: r }) => {
-		let i = t.contains(t.ownerDocument.activeElement);
-		return e.isEditable && n !== r && e.isActive("link") && i;
-	}, []), C = c(() => t(m), [m]), w = u(() => ({
+	}, [b]), F = m(() => {
+		A.current !== null && (window.cancelAnimationFrame(A.current), A.current = null);
+	}, []), I = m((e) => {
+		e.key === "Escape" && (e.preventDefault(), e.stopPropagation(), M());
+	}, [M]), L = m(({ editor: e, element: t, state: n }) => {
+		let r = t.contains(t.ownerDocument.activeElement);
+		return e.isEditable && !!o(n) && d(n) === "link" && r;
+	}, []), R = m(() => t(b), [b]), z = g(() => ({
 		strategy: "fixed",
 		placement: "bottom",
 		offset: 8,
 		flip: {},
 		shift: { padding: 8 },
 		inline: !0,
-		onShow: x
-	}), [x]);
-	return /* @__PURE__ */ p(o, {
-		editor: m,
-		pluginKey: i,
+		onHide: F,
+		onShow: P
+	}), [F, P]), B = j.context;
+	return /* @__PURE__ */ y(u, {
+		editor: b,
+		pluginKey: c,
 		updateDelay: 0,
-		appendTo: C,
-		shouldShow: S,
-		options: w,
-		children: /* @__PURE__ */ p(s, {
+		resizeDelay: 0,
+		appendTo: R,
+		shouldShow: L,
+		options: z,
+		children: /* @__PURE__ */ y(p, {
+			ref: O,
 			className: "scribe-link-popover",
 			role: "dialog",
 			"aria-label": "Edit link",
+			"aria-keyshortcuts": "Alt+F10",
+			tabIndex: -1,
+			onKeyDown: I,
 			style: {
-				maxWidth: "calc(100vw - 32px)",
+				maxWidth: E === null ? "calc(100vw - 32px)" : `min(${E}px, calc(100vw - 32px))`,
 				width: 320
 			},
-			children: /* @__PURE__ */ p(n, {
-				editor: m,
-				existingHref: y.href,
-				inputRef: _,
-				onClose: b,
-				onValueChange: g,
-				value: h
+			children: /* @__PURE__ */ y(n, {
+				canRefreshPreview: j.canRefresh,
+				currentDisplay: B?.display ?? "plain",
+				editor: b,
+				existingHref: B?.href ?? "",
+				inputRef: k,
+				onClose: M,
+				onRefreshPreview: N,
+				onValueChange: C,
+				previewStatus: j.status,
+				previewStatusLabel: j.statusLabel,
+				resetToken: w,
+				targetPosition: B?.kind === "preview" ? B.position : void 0,
+				value: S
 			})
 		})
 	});
 };
 //#endregion
-export { m as default };
+export { S as default };

package/dist/components/Menu/LinkEditor.d.ts

@@ -1,12 +1,21 @@
 import { Editor } from "@tiptap/react";
 import { FC, RefObject } from "react";
+import type { ExternalLinkPreviewResolutionStatus } from "../Scribe/extension/external-link-preview/types";
+import type { ExternalLinkDisplay } from "./ExternalLinkDisplayOptions";
 export interface LinkEditorProps {
+    canRefreshPreview?: boolean;
+    currentDisplay?: ExternalLinkDisplay;
     editor: Editor;
     existingHref: string;
     inputRef?: RefObject<HTMLInputElement | null>;
     onClose: () => void;
+    onRefreshPreview?: () => void;
     onValueChange: (value: string) => void;
+    previewStatus?: ExternalLinkPreviewResolutionStatus;
+    previewStatusLabel?: string;
+    resetToken?: number;
     selectTextblockEndAfterSave?: boolean;
+    targetPosition?: number;
     value: string;
 }
 declare const LinkEditor: FC<LinkEditorProps>;

package/dist/components/Menu/LinkEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LinkEditor.d.ts","sourceRoot":"","sources":["../../../lib/components/Menu/LinkEditor.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvC,OAAO,EACL,EAAE,EAGF,SAAS,EAKV,MAAM,OAAO,CAAC;AAGf,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IAC9C,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,2BAA2B,CAAC,EAAE,OAAO,CAAC;IACtC,KAAK,EAAE,MAAM,CAAC;CACf;AAED,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CAkJnC,CAAC;eAEa,UAAU"}
+{"version":3,"file":"LinkEditor.d.ts","sourceRoot":"","sources":["../../../lib/components/Menu/LinkEditor.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvC,OAAO,EACL,EAAE,EAGF,SAAS,EAKV,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,mCAAmC,EAAE,MAAM,iDAAiD,CAAC;AAE3G,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAGxE,MAAM,WAAW,eAAe;IAC9B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,cAAc,CAAC,EAAE,mBAAmB,CAAC;IACrC,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IAC9C,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,aAAa,CAAC,EAAE,mCAAmC,CAAC;IACpD,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,2BAA2B,CAAC,EAAE,OAAO,CAAC;IACtC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CAkRnC,CAAC;eAEa,UAAU"}