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

package/src/utils/markdown-link.ts

@@ -0,0 +1,148 @@
+/**
+ * One link format for the markdown editors and one `rel` rule for the renderers.
+ *
+ * A FOLLOWED link is written as markdown, `[text](url)`, exactly as the editors always wrote it.
+ * A link with an authored `rel` (nofollow, sponsored or ugc, the values Google reads) is written as
+ * an HTML anchor, `<a href="url" rel="sponsored">text</a>`: markdown has no attribute syntax, and
+ * an HTML anchor is what stored content already uses for links that carry attributes (the
+ * sanitizer keeps `rel` on `a`). Reading back accepts both forms, so a link can be switched either
+ * way. Nothing is rewritten unless an editor changes a link.
+ *
+ * Server-safe: no React, no DOM.
+ */
+
+/** The `rel` tokens an author may set on a link. Search engines read these; nothing else is kept. */
+export const AUTHORED_LINK_REL_TOKENS = ['nofollow', 'ugc', 'sponsored'] as const;
+
+export type AuthoredLinkRel = (typeof AUTHORED_LINK_REL_TOKENS)[number];
+
+/** What a renderer adds to every link that opens in a new tab. */
+const NEW_TAB_REL = 'noopener noreferrer';
+
+/** The authored SEO tokens in a `rel` value, in their canonical order. */
+export function authoredRelTokens(rel: string | readonly string[] | null | undefined): AuthoredLinkRel[] {
+  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));
+}
+
+/** Whether an authored `rel` asks search engines not to follow the link. */
+export function isNofollowRel(rel: string | readonly string[] | null | undefined): boolean {
+  return authoredRelTokens(rel).includes('nofollow');
+}
+
+/**
+ * The `rel` a renderer writes for a link: the author's SEO tokens, plus `noopener noreferrer` when
+ * the link opens in a new tab. `undefined` when there is nothing to write.
+ */
+export function renderedLinkRel(
+  authoredRel: string | readonly string[] | null | undefined,
+  opensInNewTab: boolean,
+): string | undefined {
+  const tokens: string[] = authoredRelTokens(authoredRel);
+  if (opensInNewTab) tokens.push(NEW_TAB_REL);
+  return tokens.length > 0 ? tokens.join(' ') : undefined;
+}
+
+/** A link as the editor's dialog edits it. */
+export interface MarkdownLinkFields {
+  text: string;
+  url: string;
+  /** The authored `rel` values. Empty = a followed link. */
+  rel: AuthoredLinkRel[];
+}
+
+/** A link found in the editor's text, with the range it occupies. */
+export interface MarkdownLinkMatch extends MarkdownLinkFields {
+  start: number;
+  end: number;
+}
+
+// `[text](url)` or `[text](url "title")`, never an image (`![…]`). The text may hold escaped brackets.
+const MARKDOWN_LINK_RE = /(?<!!)\[((?:\\.|[^\]\\])*)\]\(\s*<?([^\s)>]*)>?(?:\s+"[^"]*")?\s*\)/g;
+// One HTML anchor, attributes and text. Nested anchors are not valid HTML, so the first `</a>` ends it.
+const HTML_LINK_RE = /<a\s([^>]*)>([\s\S]*?)<\/a\s*>/gi;
+
+function htmlAttribute(attributes: string, name: string): string | null {
+  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: string): string {
+  return value
+    .replace(/&quot;/g, '"')
+    .replace(/&#39;/g, "'")
+    .replace(/&lt;/g, '<')
+    .replace(/&gt;/g, '>')
+    .replace(/&amp;/g, '&');
+}
+
+function escapeHtmlAttribute(value: string): string {
+  return value.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+}
+
+function escapeHtmlText(value: string): string {
+  return value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+}
+
+/** Brackets end the link text and `<` would open raw HTML (CommonMark), so all three are escaped. */
+function escapeMarkdownLinkText(value: string): string {
+  return value.replace(/([\\[\]<])/g, '\\$1');
+}
+
+function unescapeMarkdownLinkText(value: string): string {
+  return value.replace(/\\([\\[\]<])/g, '$1');
+}
+
+/** A URL inside `(…)` breaks on whitespace and unbalanced parentheses; percent-encode them. */
+function encodeMarkdownUrl(url: string): string {
+  return url.replace(/\s/g, match => encodeURIComponent(match)).replace(/[()]/g, match => encodeURIComponent(match));
+}
+
+/**
+ * The link the selection `[selectionStart, selectionEnd]` is in or on, if any: a markdown link or an
+ * HTML anchor that contains the whole selection (a caret counts when it touches the link).
+ */
+export function findMarkdownLinkAt(
+  text: string,
+  selectionStart: number,
+  selectionEnd: number = selectionStart,
+): MarkdownLinkMatch | null {
+  const from = Math.min(selectionStart, selectionEnd);
+  const to = Math.max(selectionStart, selectionEnd);
+  const contains = (start: number, end: number) => 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;
+}
+
+/** The text that writes a link: markdown when followed, an HTML anchor when it carries a `rel`. */
+export function formatMarkdownLink({ text, url, rel }: MarkdownLinkFields): string {
+  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)})`;
+}

package/src/utils/markdown-to-plain.ts

@@ -3,15 +3,24 @@
  * (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).
+ * The text is what a reader of the rendered page reads: the markdown is parsed with the SAME
+ * pipeline the renderer uses (remark with GFM and line breaks, then rehype with raw HTML, as in
+ * `components/ui/markdown/engine.tsx`), and the result is the `innerText` of that HTML
+ * (`hast-util-to-text`). So link, emphasis and heading syntax, raw HTML tags (`<a rel>`, `<div>`),
+ * escapes (`\<`) and entities (`&amp;`) all come out as their text; script and style content and
+ * comments do not. Code blocks and images are left out: their content is not prose.
  *
- * All regex patterns are linear (negated character classes, non-greedy with
- * bounded targets) — no nested quantifiers, no catastrophic backtracking on
- * pathological input.
+ * The two consumers differ only in whitespace — `mode: 'article'` keeps paragraph breaks;
+ * `mode: 'preview'` collapses everything to a single line.
  */
+import type { Element, Root } from 'hast';
+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';
 
 export interface MarkdownToPlainOptions {
   /**
@@ -27,8 +36,9 @@ export interface MarkdownToPlainOptions {
   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 function stripInlineMarkdown(s: string): string {
   return s
     .replace(/\[([^\]]+)\]\([^)]+\)/g, '$1') // [text](url) → text
@@ -37,26 +47,58 @@ export function stripInlineMarkdown(s: string): string {
     .replace(/`([^`]+)`/g, '$1'); // `inline code` → inline code
 }
 
+// The renderer's own pipeline, up to the HTML tree. Built once; `runSync` has no async plugins.
+const toHtmlTree = remark()
+  .use(remarkGfm)
+  .use(remarkBreaks)
+  .use(remarkRehype, { allowDangerousHtml: true })
+  .use(rehypeRaw);
+
+/** Elements whose content is not prose: code blocks and images. */
+const NOT_PROSE = new Set(['pre', 'img']);
+
+const TABLE_SECTIONS = new Set(['thead', 'tbody', 'tfoot']);
+
+function proseTree(markdown: string): Root {
+  const tree: Root = toHtmlTree.runSync(toHtmlTree.parse(markdown));
+  visit(tree, 'element', (node: Element, index, parent) => {
+    if (NOT_PROSE.has(node.tagName) && parent && index !== undefined) {
+      parent.children.splice(index, 1);
+      return [SKIP, index];
+    }
+    // `innerText` breaks between rows of the same `thead` / `tbody` only, so the last header row
+    // ran into the first body row ("What it buysEnthusiast"). A section followed by another ends
+    // its last row with a line break.
+    if (TABLE_SECTIONS.has(node.tagName) && parent && index !== undefined) {
+      const followedBySection = parent.children
+        .slice(index + 1)
+        .some(sibling => sibling.type === 'element' && TABLE_SECTIONS.has(sibling.tagName));
+      const rows = node.children.filter(
+        (child): child is Element => 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 undefined;
+  });
+  return tree;
+}
+
 export function markdownToPlainText(markdown: string, options: MarkdownToPlainOptions = {}): string {
   const { mode = 'article', maxChars } = options;
 
-  let out = markdown
-    // Fenced code blocks — must run BEFORE inline strippers (otherwise the
-    // backtick-grave strip below grazes them).
-    .replace(/```[\s\S]*?```/g, '')
-    // Images — `![alt](src)` → empty (we drop them entirely in plain text).
-    .replace(/!\[[^\]]*\]\([^)]+\)/g, '');
-
-  out = stripInlineMarkdown(out)
-    // Heading markers (any depth).
-    .replace(/^#+\s*/gm, '')
-    // List bullets at start-of-line.
-    .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
+      // No spaces around a line break (a soft break keeps the space that followed it).
+      .replace(/[^\S\n]*\n[^\S\n]*/g, '\n')
+      .replace(/\n{3,}/g, '\n\n')
+      .trim();
   }
 
   if (maxChars != null && out.length > maxChars) {