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

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

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