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

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/dist/utils/vendor-classification.d.ts

@@ -1,26 +1,52 @@
 /**
- * Vendor classifications: the ONE vocabulary of `vendor_classification.classification`.
+ * Vendor classifications: whatever `vendor_classification.classification` holds on the
+ * server. The database owns the vocabulary (its CHECK constraint is the list), the catalog
+ * builds its filters from the rows that exist, and nothing here limits which values are valid.
  *
- * A vendor may carry several (an OpenFrame product is `open_source` and
- * `openframe_selected`). The two OpenFrame ones are drawn with the OpenFrame
- * mark and ONE word, everywhere: a tag on a card, a filter in the catalog.
+ * This module only ENRICHES the values we want to present specially: a curated label, a
+ * tooltip description and a group. A value with no entry still works everywhere, labelled
+ * by title case. To present a new value better, add an entry here; to make it exist, add it
+ * to the database.
  *
- *   - `openframe_selected`: a tool OpenFrame is built on, picked by the team.
- *   - `openframe_shipped`: a tool or OpenFrame product that is in the released product today.
- *   - `openframe_connect`: a service OpenFrame connects to and manages.
+ * Groups:
+ *   - `license`: how the software is licensed.
+ *   - `lifecycle`: where the product is in its life (a tag and a filter; a card's one tag stays the license).
+ *   - `openframe`: drawn with the OpenFrame mark and ONE word (`word`).
  */
-export declare const VENDOR_CLASSIFICATIONS: readonly ["open_source", "commercial", "openframe_selected", "openframe_shipped", "openframe_connect"];
-export type VendorClassificationValue = (typeof VENDOR_CLASSIFICATIONS)[number];
-export type OpenFrameClassification = Extract<VendorClassificationValue, `openframe_${string}`>;
-export interface OpenFrameClassificationCopy {
-    /** The word drawn beside the OpenFrame mark. */
-    word: string;
-    /** The full name, for plain-text surfaces (a select option, an aria label). */
+export type VendorClassificationValue = string;
+export type VendorClassificationGroup = 'license' | 'lifecycle' | 'openframe';
+export interface VendorClassificationCopy {
+    /** The label on a tag, a filter and a plain-text surface. */
     label: string;
     /** What the classification means, for a tooltip. */
     description: string;
+    group: VendorClassificationGroup;
+    /** OpenFrame group only: the one word drawn beside the OpenFrame mark. */
+    word?: string;
+    /** The icon drawn beside the label, by name (resolved by the shared icon resolver), and its tone. */
+    icon?: VendorClassificationIconConfig;
 }
-export declare const OPENFRAME_CLASSIFICATIONS: Record<OpenFrameClassification, OpenFrameClassificationCopy>;
-export declare function isVendorClassification(value: string): value is VendorClassificationValue;
-export declare function isOpenFrameClassification(value: string | null | undefined): value is OpenFrameClassification;
+/**
+ * A classification's icon, as data: `name` is any name the shared resolver knows (an alias such
+ * as `openframe-logo`, an icon of the design set by its kebab name, or a lucide name). `tone`:
+ * `accent` (the brand colour), `neutral` (secondary text on a tile) or `warning`.
+ */
+export interface VendorClassificationIconConfig {
+    name: string;
+    tone: 'accent' | 'neutral' | 'warning';
+}
+/** In display order: a filter list shows OpenFrame first, then license, then lifecycle. */
+export declare const VENDOR_CLASSIFICATION_COPY: Readonly<Record<string, VendorClassificationCopy>>;
+/** The enrichment of a classification, or undefined for a value we do not present specially. */
+export declare function vendorClassificationCopy(value: string | null | undefined): VendorClassificationCopy | undefined;
+/** The group of a classification, or undefined for a value with no enrichment. */
+export declare function vendorClassificationGroup(value: string | null | undefined): VendorClassificationGroup | undefined;
+/** A classification drawn with the OpenFrame mark (it has a `word`). */
+export declare function isOpenFrameClassification(value: string | null | undefined): boolean;
+/**
+ * Sort order for a list of classifications (a filter list): the enriched values in their
+ * display order (OpenFrame Selected, Connect, Shipped, then license, then lifecycle), then
+ * every other value the server holds, alphabetically.
+ */
+export declare function compareVendorClassifications(a: string, b: string): number;
 //# sourceMappingURL=vendor-classification.d.ts.map

package/dist/utils/vendor-classification.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vendor-classification.d.ts","sourceRoot":"","sources":["../../src/utils/vendor-classification.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,eAAO,MAAM,sBAAsB,wGAMzB,CAAC;AAEX,MAAM,MAAM,yBAAyB,GAAG,CAAC,OAAO,sBAAsB,CAAC,CAAC,MAAM,CAAC,CAAC;AAEhF,MAAM,MAAM,uBAAuB,GAAG,OAAO,CAAC,yBAAyB,EAAE,aAAa,MAAM,EAAE,CAAC,CAAC;AAEhG,MAAM,WAAW,2BAA2B;IAC1C,gDAAgD;IAChD,IAAI,EAAE,MAAM,CAAC;IACb,+EAA+E;IAC/E,KAAK,EAAE,MAAM,CAAC;IACd,oDAAoD;IACpD,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,yBAAyB,EAAE,MAAM,CAAC,uBAAuB,EAAE,2BAA2B,CAkBlG,CAAC;AAEF,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,MAAM,GAAG,KAAK,IAAI,yBAAyB,CAExF;AAED,wBAAgB,yBAAyB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,KAAK,IAAI,uBAAuB,CAE5G"}
+{"version":3,"file":"vendor-classification.d.ts","sourceRoot":"","sources":["../../src/utils/vendor-classification.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH,MAAM,MAAM,yBAAyB,GAAG,MAAM,CAAC;AAE/C,MAAM,MAAM,yBAAyB,GAAG,SAAS,GAAG,WAAW,GAAG,WAAW,CAAC;AAE9E,MAAM,WAAW,wBAAwB;IACvC,6DAA6D;IAC7D,KAAK,EAAE,MAAM,CAAC;IACd,oDAAoD;IACpD,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,yBAAyB,CAAC;IACjC,0EAA0E;IAC1E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qGAAqG;IACrG,IAAI,CAAC,EAAE,8BAA8B,CAAC;CACvC;AAED;;;;GAIG;AACH,MAAM,WAAW,8BAA8B;IAC7C,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAC;CACxC;AAED,2FAA2F;AAC3F,eAAO,MAAM,0BAA0B,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,wBAAwB,CAAC,CA6DzF,CAAC;AAEF,gGAAgG;AAChG,wBAAgB,wBAAwB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,wBAAwB,GAAG,SAAS,CAG/G;AAED,kFAAkF;AAClF,wBAAgB,yBAAyB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,yBAAyB,GAAG,SAAS,CAEjH;AAED,wEAAwE;AACxE,wBAAgB,yBAAyB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,OAAO,CAEnF;AAID;;;;GAIG;AACH,wBAAgB,4BAA4B,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CASzE"}

package/dist/utils/vendor-classification.js

@@ -1,36 +1,87 @@
-const VENDOR_CLASSIFICATIONS = [
-  "open_source",
-  "commercial",
-  "openframe_selected",
-  "openframe_shipped",
-  "openframe_connect"
-];
-const OPENFRAME_CLASSIFICATIONS = {
+const VENDOR_CLASSIFICATION_COPY = {
   openframe_selected: {
-    word: "Selected",
     label: "OpenFrame Selected",
-    description: "OpenFrame is a unified platform that integrates multiple open-source IT and security tools into a single dashboard for MSPs. This filter shows vendors selected by our team for their excellence, community support, and MSP-specific value."
+    word: "Selected",
+    description: "OpenFrame is a unified platform that integrates multiple open-source IT and security tools into a single dashboard for MSPs. This filter shows vendors selected by our team for their excellence, community support, and MSP-specific value.",
+    group: "openframe",
+    icon: { name: "openframe-logo", tone: "accent" }
+  },
+  openframe_connect: {
+    label: "OpenFrame Connect",
+    word: "Connect",
+    description: "Services OpenFrame connects to and manages for every client, such as Microsoft 365 and Google Workspace, beside devices and tickets.",
+    group: "openframe",
+    icon: { name: "openframe-logo", tone: "accent" }
   },
   openframe_shipped: {
-    word: "Shipped",
     label: "OpenFrame Shipped",
-    description: "Tools and OpenFrame products that are in the released OpenFrame product today, not on the roadmap."
+    word: "Shipped",
+    description: "Tools and OpenFrame products that are in the released OpenFrame product today, not on the roadmap.",
+    group: "openframe",
+    icon: { name: "openframe-logo", tone: "accent" }
   },
-  openframe_connect: {
-    word: "Connect",
-    label: "OpenFrame Connect",
-    description: "Services OpenFrame connects to and manages for every client, such as Microsoft 365 and Google Workspace, beside devices and tickets."
+  open_source: {
+    label: "Open Source",
+    description: "Released under an OSI-approved open-source license.",
+    group: "license",
+    icon: { name: "code", tone: "accent" }
+  },
+  source_available: {
+    label: "Source-available",
+    description: "The source code is public, but the license restricts how it may be used (for example SSPL, BSL, the Elastic License, or limits on company size or on offering it as a service).",
+    group: "license",
+    icon: { name: "file-code", tone: "neutral" }
+  },
+  commercial: {
+    label: "Commercial",
+    description: "Proprietary software sold by the vendor.",
+    group: "license",
+    icon: { name: "dollar", tone: "neutral" }
+  },
+  end_of_life: {
+    label: "End of life",
+    description: "The vendor has discontinued or retired the product. No new releases.",
+    group: "lifecycle",
+    icon: { name: "alert-triangle", tone: "warning" }
+  },
+  end_of_support: {
+    label: "End of support",
+    description: "The vendor no longer provides support or security fixes, though the product can still be obtained.",
+    group: "lifecycle",
+    icon: { name: "clock", tone: "warning" }
+  },
+  unmaintained: {
+    label: "Unmaintained",
+    description: "No release for years and no official end-of-life notice.",
+    group: "lifecycle",
+    icon: { name: "pause-circle", tone: "warning" }
   }
 };
-function isVendorClassification(value) {
-  return VENDOR_CLASSIFICATIONS.includes(value);
+function vendorClassificationCopy(value) {
+  if (!value || !Object.prototype.hasOwnProperty.call(VENDOR_CLASSIFICATION_COPY, value)) return void 0;
+  return VENDOR_CLASSIFICATION_COPY[value];
+}
+function vendorClassificationGroup(value) {
+  return vendorClassificationCopy(value)?.group;
 }
 function isOpenFrameClassification(value) {
-  return !!value && Object.prototype.hasOwnProperty.call(OPENFRAME_CLASSIFICATIONS, value);
+  return vendorClassificationGroup(value) === "openframe";
+}
+const DISPLAY_ORDER = Object.keys(VENDOR_CLASSIFICATION_COPY);
+function compareVendorClassifications(a, b) {
+  const ia = DISPLAY_ORDER.indexOf(a);
+  const ib = DISPLAY_ORDER.indexOf(b);
+  if (ia !== -1 || ib !== -1) {
+    if (ia === -1) return 1;
+    if (ib === -1) return -1;
+    return ia - ib;
+  }
+  return a.localeCompare(b);
 }
 export {
-  OPENFRAME_CLASSIFICATIONS,
-  VENDOR_CLASSIFICATIONS,
+  VENDOR_CLASSIFICATION_COPY,
+  compareVendorClassifications,
   isOpenFrameClassification,
-  isVendorClassification
+  vendorClassificationCopy,
+  vendorClassificationGroup
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flamingo-stack/openframe-frontend-core",
-  "version": "0.0.744",
+  "version": "0.0.746",
   "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/filter-checkbox-item.tsx

@@ -1,30 +1,46 @@
 'use client';
 
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import type { ReactNode } from 'react';
 import { cn } from '../../utils/cn';
 import { CheckboxCheckmarkIcon } from '../icons-v2-generated/signs-and-symbols/checkbox-checkmark-icon';
 
 export interface FilterCheckboxItemProps {
-  label: string;
+  /** Text, or a richer label (an icon with a word and a tooltip). */
+  label: ReactNode;
+  /** The accessible name when `label` is not plain text. */
+  ariaLabel?: string;
   checked: boolean;
   onChange: (checked: boolean) => void;
   count?: number;
+  /** Ignore clicks (e.g. while a navigation started by this filter is pending). */
+  disabled?: boolean;
   className?: string;
 }
 
-export function FilterCheckboxItem({ label, checked, onChange, count, className }: FilterCheckboxItemProps) {
+export function FilterCheckboxItem({
+  label,
+  ariaLabel,
+  checked,
+  onChange,
+  count,
+  disabled,
+  className,
+}: FilterCheckboxItemProps) {
   return (
     <div
       className={cn(
         'flex items-center gap-3 border-b border-ods-border bg-ods-card last:border-b-0',
-        'cursor-pointer transition-colors hover:bg-ods-bg-hover',
+        disabled ? 'cursor-wait opacity-70' : 'cursor-pointer transition-colors hover:bg-ods-bg-hover',
         count !== undefined ? 'px-4 py-3' : 'p-3',
         className,
       )}
-      onClick={() => onChange(!checked)}
+      onClick={() => !disabled && onChange(!checked)}
     >
       <CheckboxPrimitive.Root
         checked={checked}
+        disabled={disabled}
+        aria-label={ariaLabel ?? (typeof label === 'string' ? label : undefined)}
         onCheckedChange={c => onChange(c === true)}
         className={cn(
           'h-6 w-6 shrink-0 rounded-[6px] border-2',
@@ -37,7 +53,7 @@ export function FilterCheckboxItem({ label, checked, onChange, count, className
           <CheckboxCheckmarkIcon size={10} />
         </CheckboxPrimitive.Indicator>
       </CheckboxPrimitive.Root>
-      <span className="flex-1 text-ods-text-primary text-h4">{label}</span>
+      <span className="min-w-0 flex-1 text-ods-text-primary text-h4">{label}</span>
       {count !== undefined && (
         <span className="shrink-0 text-ods-text-secondary text-h5">{count.toLocaleString()}</span>
       )}

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>
   );