@clevertask/scribe 0.1.29 → 0.1.31

package/README.md

@@ -11,7 +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.
+- **Ordinary Links:** Edit display text and URL with an accessible popover and native Tiptap paste behavior.
 - **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.
@@ -23,7 +23,7 @@ A versatile, block-based rich text editor for diverse applications, built with T
   - [Headless schema](#headless-schema)
   - [Usage](#usage)
   - [Table Authoring](#table-authoring)
-  - [External Link Previews](#external-link-previews)
+  - [Links](#links)
   - [Experimental Table of Contents](#experimental-table-of-contents)
   - [Math Expressions](#math-expressions)
   - [Props](#props)
@@ -240,56 +240,42 @@ calls to `insertContent`, Markdown table paste, and rich-HTML table paste remain
 points. Applications that require a hard no-nested-table guarantee must validate or filter those
 paths too.
 
-## 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.
-
-Compact links work locally without a metadata provider. Scribe builds their visible label from authored link text or, for a raw URL, from its hostname and path. The exact destination—including its query and fragment—remains unchanged. Preview cards 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. When enabled, standalone pastes become local Compact links.
-        autoPreviewOnPaste: false,
-      }}
-    />
-  );
-}
-```
-
-By default, pasting a standalone external URL creates an ordinary link. Select it and choose Compact to shorten only its presentation, with no metadata request. A meaningful authored label is kept; a raw URL is shown as `hostname/path` without its query or fragment. Switching back to Plain restores the original label and exact destination. Set `autoPreviewOnPaste: true` only if standalone URL pastes should become local Compact links 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, or switch presentation. A Preview card is available only when the link has its own line and metadata is already stored or a resolver is configured. Refresh is available only for Preview cards with a resolver. 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 when a Preview card needs metadata: after explicit Card conversion, programmatic Card insertion, a Card destination edit, or Card refresh. Compact creation, editing, automatic paste, and document reopen make no metadata request. The resolver 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.
+## Links
+
+Scribe uses Tiptap's Link extension for ordinary links and URL paste. Clicking an existing link
+opens its popover with focus on the dialog, keeping the software keyboard closed. Tap
+either field to start typing, then choose **Apply** or **Remove link**. The popover follows
+the visible viewport when the keyboard opens, scrolling its form when space is limited.
+The toolbar Link action still focuses the URL immediately.
+An unchanged label preserves the link's inline formatting. Keyboard users can press `Alt + F10`
+from a link to open the form and Escape to return to the document.
+
+Pasting recognizable URL-only content over selected text applies a link using native Tiptap
+behavior; ordinary text replaces the selection. Rich clipboard content follows Tiptap's parsed
+content handling. Scribe does not fetch metadata or create Compact/Preview card presentations.
+Automatic links and URL paste use Tiptap's native URL/protocol recognition and safety checks,
+including email and FTP links. The manual URL form accepts HTTP(S), bare domains and
+root-relative links. Application-owned task and document reference extensions remain separate:
+URL paste links eligible text around selected inline atoms without marking the atoms themselves,
+while an atom-only selection follows normal paste replacement.
+
+### Legacy preview compatibility
+
+Saved `externalLinkPreview` nodes still load in the interactive and headless schemas and render
+as ordinary links using their authored `linkText` and exact `href`. Their node identity, display
+value and metadata remain serialized in HTML, JSON and Markdown. Reading a document does not
+convert these nodes or discard metadata. No stored favicon or preview image is requested.
+
+The exported `ExternalLinkPreview` extension, constants, types and `externalLinkPreview` options
+remain for compatibility. `autoPreviewOnPaste`, `resolve` and `shouldPreview` are deprecated and
+ignored; `HTMLAttributes` still applies to the legacy wrapper. A caller-owned `externalEditor`
+must register the compatibility extension to read existing preview nodes.
+
+The deprecated `insertExternalLinkPreview` and `updateExternalLinkPreview` commands retain the
+legacy node shape and attributes, displayed as ordinary links, without fetching metadata.
+`setExternalLinkDisplay("compact" | "card")` and `refreshExternalLinkPreview` return `false`.
+`setExternalLinkDisplay("plain")` and `convertExternalLinkPreviewToPlain` remain explicit,
+undoable conversions to ordinary Link-marked text. There is no automatic content migration.
 
 ## Experimental Table of Contents
 
@@ -386,7 +372,7 @@ The `createScribeEditor` helper accepts the same `enableUndoRedo` option.
 | `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.                                                                                               |
 | `enableUndoRedo`          | `boolean`                                                          | `true`                     | Enables Scribe's built-in undo and redo history. Set it to `false` when another extension owns history. This creation-time option does not configure a caller-owned `externalEditor`.                                                                    |
-| `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.                                                    |
+| `externalLinkPreview`     | `Partial<ExternalLinkPreviewOptions>`                              | `undefined`                | Deprecated compatibility options. Only HTMLAttributes affects legacy wrappers; metadata resolution, preview policy and automatic previews are ignored.                                                                                                   |
 | `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-Bm5IfWVV.js

@@ -0,0 +1,302 @@
+import { a as e } from "./dist-SM4NoN4h.js";
+import { getPopupMountTarget as t } from "./components/Scribe/extension/getPopupMountTarget.js";
+import { getSelectionLinkContext as n, hideLinkBubbleMenu as r } from "./components/Menu/linkBubbleMenuPlugin.js";
+import i from "./components/Menu/LinkEditor.js";
+import { BlockQuoteIcon as a, BoldIcon as o, CodeBlockIcon as s, HighlightIcon as c, HorizontalLineIcon as l, ImageIcon as u, InlineCodeIcon as d, ItalicIcon as f, LinkIcon as p, OrderedListIcon as m, StrikeIcon as h, UnorderedListIcon as g } from "./icons/ToolbarIcons.js";
+import { Box as _, Button as v, Flex as y, IconButton as b, Popover as x, Separator as S, Text as C, TextField as w } from "@radix-ui/themes";
+import { Fragment as T, useCallback as E, useState as D } from "react";
+import { jsx as O, jsxs as k } from "react/jsx-runtime";
+//#region node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
+function A(e) {
+	var t, n, r = "";
+	if (typeof e == "string" || typeof e == "number") r += e;
+	else if (typeof e == "object") {
+		if (Array.isArray(e)) {
+			var i = e.length;
+			for (t = 0; t < i; t++) e[t] && (n = A(e[t])) && (r && (r += " "), r += n);
+		} else for (n in e) e[n] && (r && (r += " "), r += n);
+	}
+	return r;
+}
+function j() {
+	for (var e, t, n = 0, r = "", i = arguments.length; n < i; n++) (e = arguments[n]) && (t = A(e)) && (r && (r += " "), r += t);
+	return r;
+}
+//#endregion
+//#region lib/components/Menu/BarMenu.tsx
+var M = ({ editor: A }) => {
+	let [M, N] = D(!1), [P, F] = D(!1), [I, L] = D(""), [R, z] = D(""), B = t(A), V = e({
+		editor: A,
+		selector: ({ editor: e }) => e ? {
+			isBold: e.isActive("bold"),
+			isItalic: e.isActive("italic"),
+			isStrike: e.isActive("strike"),
+			isCode: e.isActive("code"),
+			isHighlight: e.isActive("highlight"),
+			isBulletList: e.isActive("bulletList"),
+			isOrderedList: e.isActive("orderedList"),
+			isLink: e.isActive("link"),
+			isImage: e.isActive("image"),
+			isCodeBlock: e.isActive("codeBlock"),
+			isBlockquote: e.isActive("blockquote")
+		} : null
+	}), H = E((e) => {
+		if (e) {
+			r(A);
+			let e = n(A.state)?.href ?? "";
+			L(e), F(!1);
+		}
+		N(e);
+	}, [A]), U = E((e) => {
+		if (e) {
+			r(A);
+			let e = A.getAttributes("image").src ?? "";
+			z(e), N(!1);
+		}
+		F(e);
+	}, [A]), W = E(() => {
+		let e = R.trim();
+		e && (A.chain().focus().setImage({ src: e }).run(), F(!1));
+	}, [A, R]), G = E((e) => {
+		e.preventDefault();
+	}, []), K = E(({ target: { value: e } }) => {
+		z(e);
+	}, []), q = [
+		[
+			{
+				name: "bold",
+				icon: o,
+				command: () => A.chain().focus().toggleBold().run(),
+				isActive: () => !!V?.isBold,
+				isToggle: !0,
+				label: "Bold"
+			},
+			{
+				name: "italic",
+				icon: f,
+				command: () => A.chain().focus().toggleItalic().run(),
+				isActive: () => !!V?.isItalic,
+				isToggle: !0,
+				label: "Italic"
+			},
+			{
+				name: "strike",
+				icon: h,
+				command: () => A.chain().focus().toggleStrike().run(),
+				isActive: () => !!V?.isStrike,
+				isToggle: !0,
+				label: "Strikethrough"
+			}
+		],
+		[{
+			name: "inline-code",
+			icon: d,
+			command: () => A.chain().focus().toggleCode().run(),
+			isActive: () => !!V?.isCode,
+			isToggle: !0,
+			label: "Inline code"
+		}, {
+			name: "highlight",
+			icon: c,
+			command: () => A.chain().focus().toggleHighlight().run(),
+			isActive: () => !!V?.isHighlight,
+			isToggle: !0,
+			label: "Highlight"
+		}],
+		[{
+			name: "unordered-list",
+			icon: g,
+			command: () => A.chain().focus().toggleBulletList().run(),
+			isActive: () => !!V?.isBulletList,
+			isToggle: !0,
+			label: "Bulleted list"
+		}, {
+			name: "ordered-list",
+			icon: m,
+			command: () => A.chain().focus().toggleOrderedList().run(),
+			isActive: () => !!V?.isOrderedList,
+			isToggle: !0,
+			label: "Numbered list"
+		}],
+		[
+			{
+				name: "link",
+				icon: p,
+				isActive: () => !!V?.isLink,
+				label: "Link",
+				popover: "link"
+			},
+			{
+				name: "image",
+				icon: u,
+				isActive: () => !!V?.isImage,
+				disabled: !1,
+				label: "Insert image",
+				popover: "image"
+			},
+			{
+				name: "code-block",
+				icon: s,
+				command: () => A.chain().focus().toggleCodeBlock().run(),
+				isActive: () => !!V?.isCodeBlock,
+				isToggle: !0,
+				label: "Code block"
+			},
+			{
+				name: "block-quote",
+				icon: a,
+				command: () => A.chain().focus().toggleBlockquote().run(),
+				isActive: () => !!V?.isBlockquote,
+				isToggle: !0,
+				label: "Block quote"
+			},
+			{
+				name: "horizontal-line",
+				icon: l,
+				command: () => A.chain().focus().setHorizontalRule().run(),
+				isActive: () => !1,
+				label: "Horizontal rule"
+			}
+		]
+	];
+	return /* @__PURE__ */ O(_, {
+		className: "scribe-toolbar",
+		role: "toolbar",
+		"aria-label": "Text formatting",
+		children: /* @__PURE__ */ O(y, {
+			align: "center",
+			gap: "3",
+			wrap: "wrap",
+			children: q.map((e, t) => /* @__PURE__ */ k(T, { children: [/* @__PURE__ */ O(y, {
+				align: "center",
+				gap: "2",
+				wrap: "wrap",
+				children: e.map((e, t) => e.popover === "link" ? /* @__PURE__ */ k(x.Root, {
+					open: M,
+					onOpenChange: H,
+					children: [/* @__PURE__ */ O(x.Trigger, { children: /* @__PURE__ */ O(b, {
+						type: "button",
+						"aria-label": e.label,
+						radius: "medium",
+						color: "gray",
+						variant: e.isActive() ? "soft" : "ghost",
+						disabled: e.disabled || !A.isEditable,
+						title: e.label,
+						onMouseDown: G,
+						className: j(e.disabled && "scribe-toolbar-button--disabled"),
+						children: /* @__PURE__ */ O(e.icon, { className: "scribe-toolbar-icon" })
+					}) }), /* @__PURE__ */ O(x.Content, {
+						"aria-label": "Link settings",
+						container: B,
+						size: "2",
+						side: "bottom",
+						align: "start",
+						style: {
+							maxWidth: "calc(100vw - 32px)",
+							width: 320
+						},
+						children: /* @__PURE__ */ O(i, {
+							editor: A,
+							existingHref: n(A.state)?.href ?? "",
+							onClose: () => N(!1),
+							onValueChange: L,
+							selectTextblockEndAfterSave: !0,
+							value: I
+						})
+					})]
+				}, `${e.name}-${t}`) : e.popover === "image" ? /* @__PURE__ */ k(x.Root, {
+					open: P,
+					onOpenChange: U,
+					children: [/* @__PURE__ */ O(x.Trigger, { children: /* @__PURE__ */ O(b, {
+						type: "button",
+						"aria-label": e.label,
+						radius: "medium",
+						color: "gray",
+						variant: e.isActive() ? "soft" : "ghost",
+						disabled: e.disabled || !A.isEditable,
+						title: e.label,
+						onMouseDown: G,
+						className: j(e.disabled && "scribe-toolbar-button--disabled"),
+						children: /* @__PURE__ */ O(e.icon, { className: "scribe-toolbar-icon" })
+					}) }), /* @__PURE__ */ O(x.Content, {
+						"aria-label": "Insert image",
+						container: B,
+						size: "2",
+						side: "bottom",
+						align: "start",
+						style: {
+							maxWidth: "calc(100vw - 32px)",
+							width: 320
+						},
+						children: /* @__PURE__ */ k(y, {
+							direction: "column",
+							gap: "4",
+							children: [
+								/* @__PURE__ */ k(_, { children: [/* @__PURE__ */ O(C, {
+									as: "p",
+									size: "3",
+									weight: "medium",
+									children: "Image"
+								}), /* @__PURE__ */ O(C, {
+									as: "p",
+									size: "2",
+									color: "gray",
+									children: "Insert an image from a URL."
+								})] }),
+								/* @__PURE__ */ O("label", { children: /* @__PURE__ */ k(y, {
+									direction: "column",
+									gap: "2",
+									children: [/* @__PURE__ */ O(C, {
+										as: "span",
+										size: "2",
+										weight: "medium",
+										children: "Image URL"
+									}), /* @__PURE__ */ O(w.Root, {
+										autoFocus: !0,
+										placeholder: "https://example.com/image.png",
+										value: R,
+										onChange: K
+									})]
+								}) }),
+								/* @__PURE__ */ k(y, {
+									justify: "end",
+									gap: "2",
+									children: [/* @__PURE__ */ O(x.Close, { children: /* @__PURE__ */ O(v, {
+										type: "button",
+										variant: "soft",
+										color: "gray",
+										children: "Cancel"
+									}) }), /* @__PURE__ */ O(v, {
+										type: "button",
+										disabled: R.trim().length === 0,
+										onClick: W,
+										children: "Save"
+									})]
+								})
+							]
+						})
+					})]
+				}, `${e.name}-${t}`) : /* @__PURE__ */ O(b, {
+					type: "button",
+					"aria-label": e.label,
+					"aria-pressed": e.isToggle ? e.isActive() : void 0,
+					radius: "medium",
+					color: "gray",
+					variant: e.isActive() ? "soft" : "ghost",
+					disabled: e.disabled || !A.isEditable,
+					title: e.label,
+					onMouseDown: G,
+					onClick: e.command,
+					className: j(e.disabled && "scribe-toolbar-button--disabled"),
+					children: /* @__PURE__ */ O(e.icon, { className: "scribe-toolbar-icon" })
+				}, `${e.name}-${t}`))
+			}), t === q.length - 1 ? null : /* @__PURE__ */ O(S, {
+				orientation: "vertical",
+				decorative: !0,
+				style: { height: 20 }
+			})] }, `format-group-${t}`))
+		})
+	});
+};
+//#endregion
+export { j as n, M as t };

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

@@ -1 +1 @@
-{"version":3,"file":"BarMenu.d.ts","sourceRoot":"","sources":["../../../lib/components/Menu/BarMenu.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,MAAM,EAAkB,MAAM,eAAe,CAAC;AACvD,OAAO,EAAe,EAAE,EAA+C,MAAM,OAAO,CAAC;AAoBrF,MAAM,WAAW,YAAY;IAC3B,MAAM,EAAE,MAAM,CAAC;CAChB;AAaD,QAAA,MAAM,OAAO,EAAE,EAAE,CAAC,YAAY,CAkV7B,CAAC;eAEa,OAAO"}
+{"version":3,"file":"BarMenu.d.ts","sourceRoot":"","sources":["../../../lib/components/Menu/BarMenu.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,MAAM,EAAkB,MAAM,eAAe,CAAC;AACvD,OAAO,EAAe,EAAE,EAA+C,MAAM,OAAO,CAAC;AAoBrF,MAAM,WAAW,YAAY;IAC3B,MAAM,EAAE,MAAM,CAAC;CAChB;AAaD,QAAA,MAAM,OAAO,EAAE,EAAE,CAAC,YAAY,CAgV7B,CAAC;eAEa,OAAO"}

package/dist/components/Menu/BarMenu.js

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

package/dist/components/Menu/BubbleMenu.js

@@ -1,6 +1,6 @@
-import { s as e } from "../../dist-B0xwy1Q5.js";
+import { a as e } from "../../dist-SM4NoN4h.js";
 import { getPopupMountTarget as t } from "../Scribe/extension/getPopupMountTarget.js";
-import { t as n } from "../../menus-scgppp2C.js";
+import { t as n } from "../../menus-BKxcTUsl.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,7 +1,7 @@
 import { CALLOUT_VARIANTS as e, CALLOUT_VARIANT_LABELS as t, isCalloutVariant as n } from "../Scribe/extension/callout.js";
-import { s as r } from "../../dist-B0xwy1Q5.js";
+import { a as r } from "../../dist-SM4NoN4h.js";
 import { getPopupMountTarget as i } from "../Scribe/extension/getPopupMountTarget.js";
-import { t as a } from "../../menus-scgppp2C.js";
+import { t as a } from "../../menus-BKxcTUsl.js";
 import { CalloutIcon as o, RemoveCalloutIcon as s } from "../../icons/CalloutIcon.js";
 import { calloutBubbleMenuPluginKey as c, getSelectionCalloutContext as l } from "./calloutBubbleMenuPlugin.js";
 import { getSelectionContextualMenuOwner as u } from "./contextualMenuOwner.js";

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,EAA2E,MAAM,OAAO,CAAC;AAepG,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,MAAM,CAAC;CAChB;AAiCD,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAma3C,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;AAapG,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,MAAM,CAAC;CAChB;AAoCD,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAkb3C,CAAC;eAEa,cAAc"}