@flamingo-stack/openframe-frontend-core 0.0.744 → 0.0.745

package/dist/utils/markdown-link.js

@@ -0,0 +1,83 @@
+const AUTHORED_LINK_REL_TOKENS = ["nofollow", "ugc", "sponsored"];
+const NEW_TAB_REL = "noopener noreferrer";
+function authoredRelTokens(rel) {
+  if (!rel) return [];
+  const given = new Set(
+    (typeof rel === "string" ? rel.split(/\s+/) : rel).map((token) => token.trim().toLowerCase()).filter(Boolean)
+  );
+  return AUTHORED_LINK_REL_TOKENS.filter((token) => given.has(token));
+}
+function isNofollowRel(rel) {
+  return authoredRelTokens(rel).includes("nofollow");
+}
+function renderedLinkRel(authoredRel, opensInNewTab) {
+  const tokens = authoredRelTokens(authoredRel);
+  if (opensInNewTab) tokens.push(NEW_TAB_REL);
+  return tokens.length > 0 ? tokens.join(" ") : void 0;
+}
+const MARKDOWN_LINK_RE = /(?<!!)\[((?:\\.|[^\]\\])*)\]\(\s*<?([^\s)>]*)>?(?:\s+"[^"]*")?\s*\)/g;
+const HTML_LINK_RE = /<a\s([^>]*)>([\s\S]*?)<\/a\s*>/gi;
+function htmlAttribute(attributes, name) {
+  const match = new RegExp(`(?:^|\\s)${name}\\s*=\\s*(?:"([^"]*)"|'([^']*)'|([^\\s"'>]+))`, "i").exec(attributes);
+  if (!match) return null;
+  return match[1] ?? match[2] ?? match[3] ?? "";
+}
+function decodeHtmlEntities(value) {
+  return value.replace(/&quot;/g, '"').replace(/&#39;/g, "'").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&amp;/g, "&");
+}
+function escapeHtmlAttribute(value) {
+  return value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function escapeHtmlText(value) {
+  return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function escapeMarkdownLinkText(value) {
+  return value.replace(/([\\[\]<])/g, "\\$1");
+}
+function unescapeMarkdownLinkText(value) {
+  return value.replace(/\\([\\[\]<])/g, "$1");
+}
+function encodeMarkdownUrl(url) {
+  return url.replace(/\s/g, (match) => encodeURIComponent(match)).replace(/[()]/g, (match) => encodeURIComponent(match));
+}
+function findMarkdownLinkAt(text, selectionStart, selectionEnd = selectionStart) {
+  const from = Math.min(selectionStart, selectionEnd);
+  const to = Math.max(selectionStart, selectionEnd);
+  const contains = (start, end) => start <= from && to <= end;
+  for (const match of text.matchAll(HTML_LINK_RE)) {
+    const start = match.index ?? 0;
+    const end = start + match[0].length;
+    if (!contains(start, end)) continue;
+    const attributes = match[1] ?? "";
+    return {
+      start,
+      end,
+      text: decodeHtmlEntities(match[2] ?? ""),
+      url: decodeHtmlEntities(htmlAttribute(attributes, "href") ?? ""),
+      rel: authoredRelTokens(htmlAttribute(attributes, "rel"))
+    };
+  }
+  for (const match of text.matchAll(MARKDOWN_LINK_RE)) {
+    const start = match.index ?? 0;
+    const end = start + match[0].length;
+    if (!contains(start, end)) continue;
+    return { start, end, text: unescapeMarkdownLinkText(match[1] ?? ""), url: match[2] ?? "", rel: [] };
+  }
+  return null;
+}
+function formatMarkdownLink({ text, url, rel }) {
+  const label = text.length > 0 ? text : url;
+  const tokens = authoredRelTokens(rel);
+  if (tokens.length > 0) {
+    return `<a href="${escapeHtmlAttribute(url)}" rel="${tokens.join(" ")}">${escapeHtmlText(label)}</a>`;
+  }
+  return `[${escapeMarkdownLinkText(label)}](${encodeMarkdownUrl(url)})`;
+}
+export {
+  AUTHORED_LINK_REL_TOKENS,
+  authoredRelTokens,
+  findMarkdownLinkAt,
+  formatMarkdownLink,
+  isNofollowRel,
+  renderedLinkRel
+};

package/dist/utils/markdown-to-plain.d.ts

@@ -1,17 +1,3 @@
-/**
- * Convert markdown source to plain text. Used by both the SEO server component
- * (article-body echo in JSON-LD) and chat entity-card preview (clamped previews
- * inside chat cards).
- *
- * The two consumers differ only in pre/post processing — `mode: 'article'`
- * strips code blocks + images + headings + list bullets and preserves paragraph
- * breaks; `mode: 'preview'` collapses everything to a single line. Both share
- * the same inline-marker strip (link / bold / italic / inline-code).
- *
- * All regex patterns are linear (negated character classes, non-greedy with
- * bounded targets) — no nested quantifiers, no catastrophic backtracking on
- * pathological input.
- */
 export interface MarkdownToPlainOptions {
     /**
      * - `'article'` (default): preserve paragraph structure (`\n\n` as separator),
@@ -25,8 +11,9 @@ export interface MarkdownToPlainOptions {
     /** Optional max-character cap. Truncates with no ellipsis (caller-decided). */
     maxChars?: number;
 }
-/** Strip inline markdown markers (bold, italic, inline-code, links). Shared
- *  by `extractSections`'s `stripFormattingMarkers` and `markdownToPlainText`. */
+/** Strip inline markdown markers (bold, italic, inline-code, links) from ONE line of text.
+ *  Shared by `extractSections`'s `stripFormattingMarkers` and the heading ids, whose output is
+ *  an anchor: it stays a fixed, regex-only rule so no heading id ever moves. */
 export declare function stripInlineMarkdown(s: string): string;
 export declare function markdownToPlainText(markdown: string, options?: MarkdownToPlainOptions): string;
 //# sourceMappingURL=markdown-to-plain.d.ts.map

package/dist/utils/markdown-to-plain.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"markdown-to-plain.d.ts","sourceRoot":"","sources":["../../src/utils/markdown-to-plain.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,MAAM,WAAW,sBAAsB;IACrC;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAC7B,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;iFACiF;AACjF,wBAAgB,mBAAmB,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAMrD;AAED,wBAAgB,mBAAmB,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,GAAE,sBAA2B,GAAG,MAAM,CA0BlG"}
+{"version":3,"file":"markdown-to-plain.d.ts","sourceRoot":"","sources":["../../src/utils/markdown-to-plain.ts"],"names":[],"mappings":"AAwBA,MAAM,WAAW,sBAAsB;IACrC;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAC7B,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;gFAEgF;AAChF,wBAAgB,mBAAmB,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAMrD;AAyCD,wBAAgB,mBAAmB,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,GAAE,sBAA2B,GAAG,MAAM,CAmBlG"}

package/dist/utils/markdown-to-plain.js

@@ -1,14 +1,44 @@
+import { toText } from "hast-util-to-text";
+import rehypeRaw from "rehype-raw";
+import { remark } from "remark";
+import remarkBreaks from "remark-breaks";
+import remarkGfm from "remark-gfm";
+import remarkRehype from "remark-rehype";
+import { SKIP, visit } from "unist-util-visit";
 function stripInlineMarkdown(s) {
   return s.replace(/\[([^\]]+)\]\([^)]+\)/g, "$1").replace(/\*\*([^*]+)\*\*/g, "$1").replace(/\*([^*]+)\*/g, "$1").replace(/`([^`]+)`/g, "$1");
 }
+const toHtmlTree = remark().use(remarkGfm).use(remarkBreaks).use(remarkRehype, { allowDangerousHtml: true }).use(rehypeRaw);
+const NOT_PROSE = /* @__PURE__ */ new Set(["pre", "img"]);
+const TABLE_SECTIONS = /* @__PURE__ */ new Set(["thead", "tbody", "tfoot"]);
+function proseTree(markdown) {
+  const tree = toHtmlTree.runSync(toHtmlTree.parse(markdown));
+  visit(tree, "element", (node, index, parent) => {
+    if (NOT_PROSE.has(node.tagName) && parent && index !== void 0) {
+      parent.children.splice(index, 1);
+      return [SKIP, index];
+    }
+    if (TABLE_SECTIONS.has(node.tagName) && parent && index !== void 0) {
+      const followedBySection = parent.children.slice(index + 1).some((sibling) => sibling.type === "element" && TABLE_SECTIONS.has(sibling.tagName));
+      const rows = node.children.filter(
+        (child) => child.type === "element" && child.tagName === "tr"
+      );
+      const lastRow = rows[rows.length - 1];
+      if (followedBySection && lastRow) {
+        lastRow.children.push({ type: "element", tagName: "br", properties: {}, children: [] });
+      }
+    }
+    return void 0;
+  });
+  return tree;
+}
 function markdownToPlainText(markdown, options = {}) {
   const { mode = "article", maxChars } = options;
-  let out = markdown.replace(/```[\s\S]*?```/g, "").replace(/!\[[^\]]*\]\([^)]+\)/g, "");
-  out = stripInlineMarkdown(out).replace(/^#+\s*/gm, "").replace(/^\s*[-*+]\s+/gm, "");
+  let out = toText(proseTree(markdown));
   if (mode === "preview") {
     out = out.replace(/\s+/g, " ").trim();
   } else {
-    out = out.replace(/\n{3,}/g, "\n\n").trim();
+    out = out.replace(/[^\S\n]*\n[^\S\n]*/g, "\n").replace(/\n{3,}/g, "\n\n").trim();
   }
   if (maxChars != null && out.length > maxChars) {
     out = out.slice(0, maxChars);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flamingo-stack/openframe-frontend-core",
-  "version": "0.0.744",
+  "version": "0.0.745",
   "description": "Shared design system and components for all Flamingo platforms",
   "type": "module",
   "sideEffects": [
@@ -480,6 +480,7 @@
     "framer-motion": "^12.23.12",
     "globals": "^16.4.0",
     "graphql": "^16.12.0",
+    "hast-util-to-text": "^4.0.2",
     "libphonenumber-js": "^1.12.40",
     "lucide-react": "^0.454.0",
     "mermaid": "^11.14.0",
@@ -504,6 +505,7 @@
     "remark": "^15.0.1",
     "remark-breaks": "^4.0.0",
     "remark-gfm": "^4.0.1",
+    "remark-rehype": "^11.1.2",
     "sonner": "^1.2.4",
     "tailwind-merge": "^3.4.0",
     "tailwindcss-animate": "^1.0.7",

package/src/components/embeds/reddit-embed-client.tsx

@@ -3,6 +3,7 @@
 import { useState, useEffect, useRef } from 'react';
 import Link from '../../embed-shims/next-link';
 import { formatLargeNumber } from '../../utils/format';
+import { renderedLinkRel } from '../../utils/markdown-link';
 import type { MediaItem as CarouselMediaItem } from '../../utils/media-carousel-utils-stub';
 import { socialCache } from '../../utils/social-embed-cache';
 import { MediaCarousel } from '../media-carousel';
@@ -159,10 +160,13 @@ type RedditListingResponse = Array<{ data?: { children?: Array<{ data?: RedditPo
 
 interface RedditEmbedProps {
   url: string;
+  /** The `rel` the author wrote on the post's link (`nofollow` …), kept on the card's links to the post. */
+  rel?: string;
   maxWidth?: number;
 }
 
-export function RedditEmbedClient({ url, maxWidth = 700 }: RedditEmbedProps) {
+export function RedditEmbedClient({ url, maxWidth = 700, rel }: RedditEmbedProps) {
+  const postLinkRel = renderedLinkRel(rel, true);
   const { redditProxyUrl } = useRichMarkdownRuntime();
   const [redditData, setRedditData] = useState<RedditPost | null>(null);
   const [loading, setLoading] = useState(true);
@@ -261,7 +265,7 @@ export function RedditEmbedClient({ url, maxWidth = 700 }: RedditEmbedProps) {
             <Link
               href={url}
               target="_blank"
-              rel="noopener noreferrer"
+              rel={postLinkRel}
               className="inline-flex items-center space-x-2 rounded-md bg-[#FF4500] px-4 py-2 text-white transition-colors text-h6 hover:bg-[#E03D00]"
             >
               <RedditIcon />
@@ -562,7 +566,7 @@ export function RedditEmbedClient({ url, maxWidth = 700 }: RedditEmbedProps) {
           <Link
             href={url}
             target="_blank"
-            rel="noopener noreferrer"
+            rel={postLinkRel}
             className="inline-flex items-center space-x-2 text-ods-accent transition-colors text-h6 hover:opacity-80"
           >
             <ExternalLinkIcon />

package/src/components/embeds/twitter-embed-client.tsx

@@ -3,6 +3,7 @@
 import { useState, useEffect, useRef } from 'react';
 import Image from '../../embed-shims/next-image';
 import Link from '../../embed-shims/next-link';
+import { renderedLinkRel } from '../../utils/markdown-link';
 import { socialCache } from '../../utils/social-embed-cache';
 import { XLogoIcon } from '../icons-v2-generated/brand-logos/x-logo-icon';
 import { TwitterContainer } from './embed-container';
@@ -71,11 +72,14 @@ interface TwitterOEmbedResponse {
 
 interface TwitterEmbedProps {
   url: string;
+  /** The `rel` the author wrote on the post's link (`nofollow` …), kept on the card's links to the post. */
+  rel?: string;
   tweetId?: string;
   maxWidth?: number;
 }
 
-export function TwitterEmbedClient({ url, tweetId, maxWidth = 700 }: TwitterEmbedProps) {
+export function TwitterEmbedClient({ url, tweetId, maxWidth = 700, rel }: TwitterEmbedProps) {
+  const postLinkRel = renderedLinkRel(rel, true);
   const { twitterProxyUrl } = useRichMarkdownRuntime();
   const [tweetData, setTweetData] = useState<TwitterOEmbedResponse | null>(null);
   const [fetchLoading, setLoading] = useState(true);
@@ -179,7 +183,7 @@ export function TwitterEmbedClient({ url, tweetId, maxWidth = 700 }: TwitterEmbe
             <Link
               href={url}
               target="_blank"
-              rel="noopener noreferrer"
+              rel={postLinkRel}
               className="inline-flex items-center space-x-2 rounded-md bg-ods-bg-surface px-4 py-2 text-ods-text-primary transition-colors text-h6 hover:bg-ods-bg-active"
             >
               <XIcon />
@@ -318,7 +322,7 @@ export function TwitterEmbedClient({ url, tweetId, maxWidth = 700 }: TwitterEmbe
           <Link
             href={url}
             target="_blank"
-            rel="noopener noreferrer"
+            rel={postLinkRel}
             className="inline-flex items-center space-x-2 text-ods-accent transition-colors text-h6 hover:opacity-80"
           >
             <ExternalLinkIcon />

package/src/components/ui/index.ts

@@ -204,6 +204,7 @@ export * from './tag-key-value-filter';
 
 // Markdown Editor (MDEditor-based)
 export * from './markdown-editor';
+export * from './markdown-link-command';
 
 // File Upload
 export * from './file-upload';

package/src/components/ui/markdown/base-components.tsx

@@ -14,6 +14,7 @@ import { useAuthedImageSrc } from '../../../hooks/use-authed-image-src';
 import type { ResolveLinkResult } from '../../../types/doc-source';
 import { cn } from '../../../utils/cn';
 import { slugifyHeadingText } from '../../../utils/markdown-heading-id';
+import { renderedLinkRel } from '../../../utils/markdown-link';
 import { getHashTargetElement, navigateSamePageHash, HUB_HEADER_OFFSET_PX } from '../../../utils/same-page-hash-nav';
 import { extractText, resolveFallbackHeadingId, useAssignedHeadingIds, useHeadingId } from './heading-ids';
 import { MermaidDiagram } from './mermaid-diagram';
@@ -250,7 +251,7 @@ export function buildBaseComponents({
     ),
 
     // --- links ---
-    a: ({ href, children, className: linkClassName }: MdRenderProps<'a'>) => {
+    a: ({ href, children, className: linkClassName, rel: authoredRel }: MdRenderProps<'a'>) => {
       const isBroken = href !== undefined && brokenLinks.includes(href);
       const isInternalDocLink =
         propCurrentPath !== undefined &&
@@ -339,7 +340,9 @@ export function buildBaseComponents({
           href={href}
           className={`relative text-ods-accent no-underline transition-colors duration-200 after:absolute after:-bottom-0.5 after:left-0 after:h-0.5 after:w-0 after:bg-ods-accent after:transition-all after:duration-300 after:content-[''] hover:after:w-full ${linkClassName || ''}`}
           target={href?.startsWith('http') ? '_blank' : undefined}
-          rel={href?.startsWith('http') ? 'noopener noreferrer' : undefined}
+          // The author's SEO tokens (`<a rel="nofollow">`, the editor's Nofollow choice) are kept;
+          // every other authored token is dropped, and a new-tab link always gets noopener noreferrer.
+          rel={renderedLinkRel(authoredRel, href?.startsWith('http') ?? false)}
           onClick={inPageAnchorId !== null ? handleAnchorClick : undefined}
         >
           {children}

package/src/components/ui/markdown/rich/embed-overrides.tsx

@@ -22,15 +22,18 @@ import { Video } from '../../../features/video';
 import { buildStandardLeafRenderers, hasRenderableSrc, type MdRenderProps } from '../base-components';
 import type { TextSizeElement } from '../text-size';
 
-/** Depth-first search of a hast node for the first `<a href>` matching `hostRe`. */
-function findFirstHref(node: ElementContent | undefined, hostRe: RegExp): string | null {
+/** Depth-first search of a hast node for the first `<a href>` matching `hostRe`, with the `rel` written on it. */
+function findFirstLink(node: ElementContent | undefined, hostRe: RegExp): { href: string; rel?: string } | null {
   if (!node || node.type !== 'element') return null;
   if (node.tagName === 'a') {
-    const href = node.properties.href;
-    if (typeof href === 'string' && hostRe.test(href)) return href;
+    const { href, rel } = node.properties;
+    if (typeof href === 'string' && hostRe.test(href)) {
+      const relText = Array.isArray(rel) ? rel.join(' ') : typeof rel === 'string' ? rel : undefined;
+      return { href, rel: relText };
+    }
   }
   for (const child of node.children) {
-    const found = findFirstHref(child, hostRe);
+    const found = findFirstLink(child, hostRe);
     if (found) return found;
   }
   return null;
@@ -202,12 +205,12 @@ export function buildRichEmbedOverrides({
       const { node, className } = bqProps;
       const classNames: string = Array.isArray(className) ? className.join(' ') : (className ?? '');
       if (classNames.includes('reddit-embed-bq')) {
-        const postUrl = findFirstHref(node, /reddit\.com/);
-        if (postUrl) return <RedditEmbedClient url={postUrl} />;
+        const post = findFirstLink(node, /reddit\.com/);
+        if (post) return <RedditEmbedClient url={post.href} rel={post.rel} />;
       }
       if (classNames.includes('twitter-tweet')) {
-        const tweetUrl = findFirstHref(node, /(?:twitter\.com|x\.com)\/[^/]+\/status\//);
-        if (tweetUrl) return <TwitterEmbedClient url={tweetUrl} />;
+        const tweet = findFirstLink(node, /(?:twitter\.com|x\.com)\/[^/]+\/status\//);
+        if (tweet) return <TwitterEmbedClient url={tweet.href} rel={tweet.rel} />;
       }
       return standard.blockquote(bqProps);
     },

package/src/components/ui/markdown-editor.tsx

@@ -7,6 +7,7 @@ import { useRef, useCallback, useState, useEffect } from 'react';
 import dynamic from '../../embed-shims/next-dynamic';
 import { cn } from '../../utils/cn';
 import { IMAGE_FILE_ACCEPT, fileMediaType } from '../../utils/media-type';
+import { useMarkdownLinkCommand } from './markdown-link-command';
 
 const MDEditor = dynamic(() => import('@uiw/react-md-editor'), { ssr: false });
 
@@ -135,6 +136,8 @@ export function MarkdownEditor({
   const [isUploading, setIsUploading] = useState(false);
   const [uploadProgress, setUploadProgress] = useState('');
   const [defaultExtraCommands, setDefaultExtraCommands] = useState<ICommand[]>([]);
+  // The toolbar's link button opens the shared link dialog (text, URL, Follow / Nofollow).
+  const { commands: toolbarCommands, linkDialog } = useMarkdownLinkCommand();
 
   useEffect(() => {
     let cancelled = false;
@@ -352,6 +355,7 @@ export function MarkdownEditor({
           visibleDragbar={true}
           height={height}
           minHeight={minHeight}
+          commands={toolbarCommands}
           extraCommands={extraCommands}
           style={
             {
@@ -387,6 +391,8 @@ export function MarkdownEditor({
 
       {uploadProgress && <p className="mt-1 text-ods-text-secondary text-h6">{uploadProgress}</p>}
 
+      {linkDialog}
+
       <MarkdownEditorStyles />
     </div>
   );

package/src/components/ui/markdown-link-command.tsx

@@ -0,0 +1,252 @@
+'use client';
+
+import type { ICommand, TextAreaTextApi, TextRange } from '@uiw/react-md-editor';
+import { type ReactNode, useEffect, useId, useMemo, useState } from 'react';
+import {
+  type AuthoredLinkRel,
+  findMarkdownLinkAt,
+  formatMarkdownLink,
+  type MarkdownLinkFields,
+} from '../../utils/markdown-link';
+import { Button } from './button';
+import { Input } from './input';
+import { ModalV2, ModalV2Footer, ModalV2Header, ModalV2Title } from './modal-v2';
+import { TabSelector } from './tab-selector';
+
+type LinkRelChoice = 'follow' | AuthoredLinkRel;
+
+/** What each choice tells search engines, in Google's own terms (Search Central, "Qualify your outbound links"). */
+const LINK_REL_CHOICES: { id: LinkRelChoice; label: string; hint: string }[] = [
+  { id: 'follow', label: 'Follow', hint: 'Search engines follow this link. This is the default.' },
+  {
+    id: 'nofollow',
+    label: 'Nofollow',
+    hint: 'Search engines are asked not to follow this link (rel="nofollow").',
+  },
+  {
+    id: 'sponsored',
+    label: 'Sponsored',
+    hint: 'For ads, paid placements and sponsorships (rel="sponsored").',
+  },
+  { id: 'ugc', label: 'UGC', hint: 'For links in content written by users, such as comments (rel="ugc").' },
+];
+
+const LINK_REL_ITEMS = LINK_REL_CHOICES.map(({ id, label }) => ({ id, label }));
+
+/** The choice a link's `rel` shows: the most specific value it carries (sponsored, then ugc, then nofollow). */
+function choiceOf(rel: readonly AuthoredLinkRel[]): LinkRelChoice {
+  if (rel.includes('sponsored')) return 'sponsored';
+  if (rel.includes('ugc')) return 'ugc';
+  if (rel.includes('nofollow')) return 'nofollow';
+  return 'follow';
+}
+
+export interface MarkdownLinkDialogProps {
+  isOpen: boolean;
+  /** The link being edited, or the selection a new link starts from. */
+  initial: MarkdownLinkFields;
+  /** True when `initial` is a link already in the text: the dialog then offers to remove it. */
+  editing: boolean;
+  onSubmit: (link: MarkdownLinkFields) => void;
+  /** Replaces the link with its text. */
+  onRemove: () => void;
+  onClose: () => void;
+}
+
+/**
+ * The link dialog of the markdown editors: the link's text, its address, and what it tells search
+ * engines: Follow (the default), Nofollow, Sponsored or UGC. Any choice but Follow writes the link
+ * as `<a rel="…">`. A link that carries several values (`rel="ugc nofollow"`) keeps them all until
+ * the choice is changed.
+ */
+export function MarkdownLinkDialog({ isOpen, initial, editing, onSubmit, onRemove, onClose }: MarkdownLinkDialogProps) {
+  const formId = useId();
+  const [text, setText] = useState(initial.text);
+  const [url, setUrl] = useState(initial.url);
+  const [rel, setRel] = useState(initial.rel);
+
+  // Re-seed while rendering when the dialog opens on another link (the modal stays mounted).
+  const [seededWith, setSeededWith] = useState({ isOpen, initial });
+  if (seededWith.isOpen !== isOpen || seededWith.initial !== initial) {
+    setSeededWith({ isOpen, initial });
+    if (isOpen) {
+      setText(initial.text);
+      setUrl(initial.url);
+      setRel(initial.rel);
+    }
+  }
+
+  const choice = choiceOf(rel);
+  const trimmedUrl = url.trim();
+  const submit = () => {
+    if (!trimmedUrl) return;
+    onSubmit({ text: text.trim(), url: trimmedUrl, rel });
+  };
+
+  return (
+    <ModalV2 isOpen={isOpen} onClose={onClose} className="text-left md:max-w-[560px]">
+      <ModalV2Header>
+        <ModalV2Title>{editing ? 'Edit link' : 'Add link'}</ModalV2Title>
+      </ModalV2Header>
+
+      <form
+        id={formId}
+        className="flex w-full flex-col gap-[var(--spacing-system-l)]"
+        onSubmit={event => {
+          event.preventDefault();
+          submit();
+        }}
+      >
+        <Input label="Text" value={text} onChange={event => setText(event.target.value)} placeholder="Link text" />
+        <Input
+          label="URL"
+          value={url}
+          onChange={event => setUrl(event.target.value)}
+          placeholder="https://"
+          autoFocus
+          inputMode="url"
+        />
+        <div className="flex flex-col gap-[var(--spacing-system-xsf)]">
+          <TabSelector
+            label="Search engines"
+            value={choice}
+            onValueChange={value => {
+              const next = LINK_REL_CHOICES.find(option => option.id === value)?.id ?? 'follow';
+              setRel(next === 'follow' ? [] : [next]);
+            }}
+            items={LINK_REL_ITEMS}
+            variant="secondary"
+          />
+          <p className="text-ods-text-secondary text-h6">
+            {LINK_REL_CHOICES.find(option => option.id === choice)?.hint}
+          </p>
+        </div>
+      </form>
+
+      <ModalV2Footer>
+        {editing ? (
+          <Button type="button" variant="outline" onClick={onRemove} className="flex-1">
+            Remove link
+          </Button>
+        ) : (
+          <Button type="button" variant="outline" onClick={onClose} className="flex-1">
+            Cancel
+          </Button>
+        )}
+        {/* A submit button of the form (by `form`), so Enter in either field saves the link. */}
+        <Button type="submit" form={formId} variant="accent" disabled={!trimmedUrl} className="flex-1">
+          {editing ? 'Save' : 'Add link'}
+        </Button>
+      </ModalV2Footer>
+    </ModalV2>
+  );
+}
+
+interface PendingLink {
+  api: TextAreaTextApi;
+  range: TextRange;
+  initial: MarkdownLinkFields;
+  editing: boolean;
+}
+
+const EMPTY_LINK: MarkdownLinkFields = { text: '', url: '', rel: [] };
+
+const LOOKS_LIKE_URL = /^(?:https?:\/\/|www\.|mailto:|\/|#)\S*$/i;
+
+function initialFieldsFromSelection(selectedText: string): MarkdownLinkFields {
+  const selected = selectedText.trim();
+  return LOOKS_LIKE_URL.test(selected) ? { text: '', url: selected, rel: [] } : { text: selected, url: '', rel: [] };
+}
+
+export interface MarkdownLinkCommand {
+  /**
+   * The editor's toolbar: the vendor's commands with its `link` command replaced by this dialog.
+   * `undefined` until the vendor's commands have loaded (the editor then shows its own defaults).
+   */
+  commands: ICommand[] | undefined;
+  /** The dialog. Render it beside the editor. */
+  linkDialog: ReactNode;
+}
+
+/**
+ * The link command every markdown editor uses: the toolbar's link button and Ctrl/Cmd+L open
+ * {@link MarkdownLinkDialog} on the link under the caret (markdown or HTML), or on the selection
+ * for a new link, and write the result back as one undoable edit.
+ */
+export function useMarkdownLinkCommand(): MarkdownLinkCommand {
+  const [vendorCommands, setVendorCommands] = useState<ICommand[] | undefined>(undefined);
+  const [pending, setPending] = useState<PendingLink | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    void (async () => {
+      try {
+        const mod = await import('@uiw/react-md-editor');
+        if (!cancelled && mod.commands?.getCommands) setVendorCommands(mod.commands.getCommands());
+      } catch (error) {
+        // Chunk load failure: the editor keeps its own default toolbar.
+        console.error('Failed to load markdown editor toolbar commands:', error);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  const commands = useMemo(() => {
+    if (!vendorCommands) return undefined;
+    return vendorCommands.map(command => {
+      if (command.name !== 'link') return command;
+      const linkCommand: ICommand = {
+        name: 'link',
+        keyCommand: 'link',
+        shortcuts: 'ctrlcmd+l',
+        buttonProps: { 'aria-label': 'Add or edit a link (ctrl + l)', title: 'Add or edit a link (ctrl + l)' },
+        icon: command.icon,
+        execute: (state, api) => {
+          const existing = findMarkdownLinkAt(state.text, state.selection.start, state.selection.end);
+          setPending(
+            existing
+              ? {
+                  api,
+                  range: { start: existing.start, end: existing.end },
+                  initial: { text: existing.text, url: existing.url, rel: existing.rel },
+                  editing: true,
+                }
+              : {
+                  api,
+                  range: state.selection,
+                  initial: initialFieldsFromSelection(state.selectedText),
+                  editing: false,
+                },
+          );
+        },
+      };
+      return linkCommand;
+    });
+  }, [vendorCommands]);
+
+  // Writes over the link's range as ONE edit through the editor's own text API, so Undo restores it.
+  const write = (current: PendingLink, text: string) => {
+    setPending(null);
+    current.api.setSelectionRange(current.range);
+    current.api.replaceSelection(text);
+  };
+
+  const linkDialog = (
+    <MarkdownLinkDialog
+      isOpen={pending !== null}
+      initial={pending?.initial ?? EMPTY_LINK}
+      editing={pending?.editing ?? false}
+      onSubmit={link => {
+        if (pending) write(pending, formatMarkdownLink(link));
+      }}
+      onRemove={() => {
+        if (pending) write(pending, pending.initial.text);
+      }}
+      onClose={() => setPending(null)}
+    />
+  );
+
+  return { commands, linkDialog };
+}

package/src/utils/index.ts

@@ -424,6 +424,7 @@ export * from './doc-path-utils';
 export * from './doc-tree-nav';
 export * from './tree-builder';
 export * from './markdown-heading-id';
+export * from './markdown-link';
 export * from './markdown-section-extractor';
 export * from './markdown-to-plain';
 export * from './embed-url-converters';