@flamingo-stack/openframe-frontend-core 0.0.743 → 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.743",
+  "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/chat/utils/history-merge.ts

@@ -160,6 +160,45 @@ function sharesRequestKey(keys: ReadonlySet<string>, others: ReadonlySet<string>
   return false;
 }
 
+/** Stream seqs of the ticket lifecycle receipts a set of rows renders. A
+ *  `TICKET_EVENT` is persisted as its own row, so history stamps the row's seq
+ *  onto the segment and it is the receipt's exact identity. */
+function ticketEventSeqs(messages: readonly MergeableChatMessage[]): Set<number> {
+  const seqs = new Set<number>();
+  for (const m of messages) {
+    if (!Array.isArray(m.content)) continue;
+    for (const seg of m.content) {
+      if (seg.type === 'ticket_event' && typeof seg.streamSeq === 'number') seqs.add(seg.streamSeq);
+    }
+  }
+  return seqs;
+}
+
+/**
+ * A kept realtime row without the ticket receipts the window already renders.
+ *
+ * Receipts arrive standalone, so a live bubble made of them grows with every
+ * status change while its `streamSeq` follows the newest one - and coverage
+ * keeps or drops a row WHOLE. Once history persisted the older receipts but
+ * not the newest, the bubble was kept and its older cards rendered a second
+ * time beside their persisted twins (resolve → reopen in a dialog Fae never
+ * answered this session). Returns `null` for a row left with nothing to show;
+ * the streaming row is never removed, it is the bubble chunks are landing in.
+ */
+function withoutPersistedTicketEvents<M extends MergeableChatMessage>(
+  m: M,
+  persistedSeqs: ReadonlySet<number>,
+  streamingMessageId: string | null,
+): M | null {
+  if (persistedSeqs.size === 0 || !Array.isArray(m.content)) return m;
+  const content = m.content.filter(
+    seg => !(seg.type === 'ticket_event' && typeof seg.streamSeq === 'number' && persistedSeqs.has(seg.streamSeq)),
+  );
+  if (content.length === m.content.length) return m;
+  if (content.length === 0 && m.id !== streamingMessageId) return null;
+  return { ...m, content };
+}
+
 /** A user row's identity is its text under its author kind; empty text is no
  *  identity (system rows persist with `content: ''`). `''` for any other row.
  *  The kind is part of the key because technician (`authorType: 'admin'`) and
@@ -665,7 +704,13 @@ export function mergeHistoryWithRealtime<M extends MergeableChatMessage>(input:
     if (keepRealtime(m)) realtimeMessages.push(m);
   }
 
-  return [...olderThanWindowMessages, ...processedToUse, ...realtimeMessages];
+  const persistedTicketEventSeqs = ticketEventSeqs(processedToUse);
+  const dedupedRealtimeMessages = realtimeMessages.flatMap(m => {
+    const kept = withoutPersistedTicketEvents(m, persistedTicketEventSeqs, streamingMessageId);
+    return kept ? [kept] : [];
+  });
+
+  return [...olderThanWindowMessages, ...processedToUse, ...dedupedRealtimeMessages];
 }
 
 export interface HistoryPrependResult<M extends MergeableChatMessage> {

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