@djangocfg/ui-tools 2.1.431 → 2.1.432

package/src/tools/forms/MarkdownEditor/url/__tests__/detect.test.ts

@@ -0,0 +1,121 @@
+import { describe, it, expect } from 'vitest';
+import {
+  findUrls,
+  splitUrl,
+  truncateUrlLabel,
+  faviconUrl,
+  normalizeHref,
+} from '../detect';
+
+describe('findUrls', () => {
+  it('detects an https URL', () => {
+    const matches = findUrls('see https://github.com/wailsapp/wails here');
+    expect(matches).toHaveLength(1);
+    expect(matches[0]!.href).toBe('https://github.com/wailsapp/wails');
+  });
+
+  it('detects an http URL', () => {
+    const matches = findUrls('http://example.com/x');
+    expect(matches[0]!.href).toBe('http://example.com/x');
+  });
+
+  it('prepends https to a bare www. host', () => {
+    const matches = findUrls('visit www.djangocfg.com/docs now');
+    expect(matches).toHaveLength(1);
+    expect(matches[0]!.href).toBe('https://www.djangocfg.com/docs');
+    expect(matches[0]!.raw).toBe('www.djangocfg.com/docs');
+  });
+
+  it('detects a mailto link', () => {
+    const matches = findUrls('mail me@example.com? no — mailto:me@example.com please');
+    expect(matches).toHaveLength(1);
+    expect(matches[0]!.href).toBe('mailto:me@example.com');
+  });
+
+  it('trims trailing prose punctuation', () => {
+    const matches = findUrls('go to https://djangocfg.com/docs.');
+    expect(matches[0]!.href).toBe('https://djangocfg.com/docs');
+    expect(matches[0]!.raw).toBe('https://djangocfg.com/docs');
+  });
+
+  it('does NOT match a bare file path', () => {
+    expect(findUrls('/Users/me/dev/manifest.md')).toHaveLength(0);
+  });
+
+  it('does NOT match a dotted filename', () => {
+    expect(findUrls('see manifest.md please')).toHaveLength(0);
+  });
+
+  it('does NOT match a URL glued onto a preceding non-space char', () => {
+    // `xhttps://...` — not a real URL boundary.
+    expect(findUrls('xhttps://evil.com')).toHaveLength(0);
+  });
+
+  it('offsets slice back to the matched raw text', () => {
+    const text = 'prefix https://a.com/b suffix';
+    const m = findUrls(text)[0]!;
+    expect(text.slice(m.start, m.end)).toBe('https://a.com/b');
+  });
+});
+
+describe('splitUrl', () => {
+  it('splits domain (www. stripped) and rest', () => {
+    const s = splitUrl('https://www.github.com/wailsapp/wails');
+    expect(s.domain).toBe('github.com');
+    expect(s.host).toBe('www.github.com');
+    expect(s.rest).toBe('/wailsapp/wails');
+  });
+
+  it('yields empty rest for a bare host', () => {
+    const s = splitUrl('https://github.com');
+    expect(s.domain).toBe('github.com');
+    expect(s.rest).toBe('');
+  });
+
+  it('splits a mailto address', () => {
+    const s = splitUrl('mailto:me@example.com');
+    expect(s.mail).toBe('me@example.com');
+    expect(s.domain).toBe('example.com');
+  });
+});
+
+describe('truncateUrlLabel', () => {
+  it('keeps a short URL as domain + path', () => {
+    expect(truncateUrlLabel('https://github.com/wailsapp/wails')).toBe(
+      'github.com/wailsapp/wails',
+    );
+  });
+
+  it('middle-ellipsises a long path, keeping domain + last segment', () => {
+    const label = truncateUrlLabel(
+      'https://github.com/wailsapp/wails/blob/main/v3/README.md',
+    );
+    expect(label).toContain('github.com');
+    expect(label).toContain('README.md');
+    expect(label).toContain('…');
+    expect(label.length).toBeLessThanOrEqual(40);
+  });
+
+  it('renders a mailto as the bare address', () => {
+    expect(truncateUrlLabel('mailto:me@example.com')).toBe('me@example.com');
+  });
+});
+
+describe('normalizeHref', () => {
+  it('prepends https to www.', () => {
+    expect(normalizeHref('www.x.com')).toBe('https://www.x.com');
+  });
+  it('leaves an explicit scheme untouched', () => {
+    expect(normalizeHref('http://x.com')).toBe('http://x.com');
+  });
+});
+
+describe('faviconUrl', () => {
+  it('builds a Google S2 favicon URL', () => {
+    expect(faviconUrl('github.com')).toContain('s2/favicons');
+    expect(faviconUrl('github.com')).toContain('domain=github.com');
+  });
+  it('returns empty for an empty host', () => {
+    expect(faviconUrl('')).toBe('');
+  });
+});

package/src/tools/forms/MarkdownEditor/url/detect.ts

@@ -0,0 +1,227 @@
+/**
+ * URL detection + display helpers for the chat editor's "URL chip" node.
+ * Pure, side-effect-free, and unit-testable — no TipTap / ProseMirror /
+ * React imports live here so the same functions back the editor node and
+ * any standalone use alike.
+ *
+ * Design goal mirrors `../filePath/detect.ts`: **LOW false-positive**. We
+ * only treat a token as a URL when it carries an explicit web scheme
+ * (`http`/`https`/`ftp`/`mailto`/`file`) or a bare `www.` host — exactly
+ * the set the editor's `shouldAutoLinkUrl` whitelist already accepts, so
+ * the chip never disagrees with the autolinker. Bare file paths and dotted
+ * filenames (`manifest.md`) are intentionally NOT matched here — those are
+ * the file-path node's job.
+ */
+
+// ── Match result ──
+
+export interface UrlMatch {
+  /** Inclusive start offset into the scanned string. */
+  start: number;
+  /** Exclusive end offset into the scanned string. */
+  end: number;
+  /**
+   * The matched URL text, normalised to a navigable href (a bare `www.`
+   * host gets an `https://` prefix so the chip's anchor works). Trailing
+   * prose punctuation is trimmed.
+   */
+  href: string;
+  /** The raw matched text exactly as it appeared (no scheme added). */
+  raw: string;
+}
+
+/**
+ * Trailing sentence punctuation that, when it hangs off the END of a
+ * detected URL token, is almost certainly prose and not part of the URL —
+ * trim it. (A URL effectively never ends in these for display purposes;
+ * a real trailing `)` that balances an opening `(` is the classic edge
+ * case but rare in a chat composer and not worth the complexity.)
+ */
+const TRAILING_PUNCT = new Set([
+  '.', ',', ')', ']', '}', ';', ':', '!', '?',
+  '«', '»', '"', "'", '”', '’', '…',
+]);
+
+/**
+ * URL shapes, as a single alternation. Each alternative is whitespace-
+ * bounded by construction (`\S` runs). Order: explicit schemes first, then
+ * the bare `www.` host.
+ *
+ * - `mailto:user@host`     — mail scheme (no `//`).
+ * - `scheme://host/...`    — http/https/ftp/file with authority.
+ * - `www.host...`          — schemeless web host (we prepend https).
+ */
+const URL_RE = new RegExp(
+  [
+    String.raw`mailto:[^\s]+`,
+    String.raw`(?:https?|ftp|file):\/\/[^\s]+`,
+    String.raw`www\.[^\s/$.?#][^\s]*`,
+  ].join('|'),
+  'giu',
+);
+
+function trimTrailingPunct(raw: string): string {
+  let end = raw.length;
+  while (end > 1 && TRAILING_PUNCT.has(raw[end - 1]!)) {
+    end -= 1;
+  }
+  return raw.slice(0, end);
+}
+
+/** Normalise a raw token to a navigable href (prepend https for `www.`). */
+export function normalizeHref(raw: string): string {
+  if (/^www\./i.test(raw)) return `https://${raw}`;
+  return raw;
+}
+
+/**
+ * Find every URL in `text`. Returns matches in document order with
+ * `{ start, end, href, raw }` where `[start, end)` are offsets into the
+ * ORIGINAL string (after trailing-punctuation trimming). File paths and
+ * bare relative tokens are intentionally NOT matched.
+ */
+export function findUrls(text: string): UrlMatch[] {
+  if (!text) return [];
+
+  const out: UrlMatch[] = [];
+  URL_RE.lastIndex = 0;
+  let m: RegExpExecArray | null;
+
+  while ((m = URL_RE.exec(text)) !== null) {
+    const raw = m[0];
+    const start = m.index;
+
+    if (raw.length === 0) {
+      URL_RE.lastIndex += 1;
+      continue;
+    }
+
+    // Leading-boundary guard: a real URL token starts the string or
+    // follows whitespace / an opening delimiter. Glued onto a preceding
+    // non-space char it's a substring of a larger token — reject.
+    if (start > 0) {
+      const prev = text[start - 1]!;
+      if (!/[\s([{<«"'‘“]/.test(prev)) continue;
+    }
+
+    const trimmed = trimTrailingPunct(raw);
+    if (trimmed.length < 4) continue;
+
+    out.push({
+      start,
+      end: start + trimmed.length,
+      href: normalizeHref(trimmed),
+      raw: trimmed,
+    });
+  }
+
+  return out;
+}
+
+// ── Split / label (Chrome-style domain + middle-ellipsis path) ──
+
+export interface SplitUrl {
+  /** Host without a leading `www.` (e.g. `github.com`). Empty if unparseable. */
+  domain: string;
+  /** Host for favicon lookup (with `www.` stripped). */
+  host: string;
+  /** Path + query + hash, leading `/` included (empty for a bare host). */
+  rest: string;
+  /** `mailto:` address (no scheme) when the URL is a mail link, else ''. */
+  mail: string;
+}
+
+/**
+ * Split an href into `{ domain, host, rest, mail }`. Uses the platform
+ * `URL` parser; falls back to a light regex when `URL` throws (it
+ * shouldn't for our matched shapes, but stay robust).
+ */
+export function splitUrl(href: string): SplitUrl {
+  if (/^mailto:/i.test(href)) {
+    const mail = href.slice('mailto:'.length);
+    const at = mail.lastIndexOf('@');
+    const domain = at >= 0 ? mail.slice(at + 1) : '';
+    return { domain, host: domain, rest: '', mail };
+  }
+
+  try {
+    const u = new URL(normalizeHref(href));
+    const host = u.hostname.replace(/^www\./i, '');
+    const rest = `${u.pathname === '/' ? '' : u.pathname}${u.search}${u.hash}`;
+    return { domain: host, host: u.hostname, rest, mail: '' };
+  } catch {
+    // Best-effort fallback for an unparseable token.
+    const noScheme = normalizeHref(href).replace(/^[a-z]+:\/\//i, '');
+    const slash = noScheme.indexOf('/');
+    const host = (slash >= 0 ? noScheme.slice(0, slash) : noScheme).replace(/^www\./i, '');
+    const rest = slash >= 0 ? noScheme.slice(slash) : '';
+    return { domain: host, host, rest, mail: '' };
+  }
+}
+
+const ELLIPSIS = '…';
+
+export interface UrlLabelOptions {
+  /**
+   * Approximate max characters for the WHOLE label (domain + path). The
+   * domain is always kept in full; only the path's middle collapses.
+   * Default 40.
+   */
+  maxChars?: number;
+}
+
+/**
+ * Produce a compact, Chrome-omnibox-style label for a URL: the domain is
+ * sacred (always shown in full), then the path's MIDDLE collapses to `…`
+ * while the LAST path segment (often the meaningful slug / filename) is
+ * kept.
+ *
+ * Examples (maxChars ≈ 40):
+ *   https://github.com/wailsapp/wails/blob/main/v3/README.md
+ *     → github.com/…/README.md
+ *   https://github.com/wailsapp/wails
+ *     → github.com/wailsapp/wails   (short — unchanged)
+ *   mailto:me@example.com → me@example.com
+ */
+export function truncateUrlLabel(href: string, opts: UrlLabelOptions = {}): string {
+  const maxChars = opts.maxChars ?? 40;
+  const { domain, rest, mail } = splitUrl(href);
+
+  if (mail) {
+    return mail.length <= maxChars ? mail : `${ELLIPSIS}${mail.slice(mail.length - (maxChars - 1))}`;
+  }
+
+  const full = `${domain}${rest}`;
+  if (full.length <= maxChars) return full;
+
+  // Collapse the path's middle, keeping the last segment.
+  const segments = rest.split('/').filter((s) => s.length > 0);
+  if (segments.length === 0) {
+    // Only a domain, but it's longer than maxChars — return as-is (CSS
+    // ellipsis is the safety net in the chip).
+    return domain;
+  }
+  const last = segments[segments.length - 1]!;
+
+  const candidates: string[] = [];
+  if (segments.length >= 2) {
+    candidates.push(`${domain}/${segments[0]!}/${ELLIPSIS}/${last}`);
+  }
+  candidates.push(`${domain}/${ELLIPSIS}/${last}`);
+  candidates.push(`${domain}/${ELLIPSIS}`);
+
+  for (const c of candidates) {
+    if (c.length <= maxChars) return c;
+  }
+  return `${domain}/${ELLIPSIS}/${last}`;
+}
+
+/**
+ * Favicon URL for a host via Google's S2 service. Degrades to the globe
+ * icon on error (the chip wires an `onerror` handler). Returns '' when the
+ * host is empty.
+ */
+export function faviconUrl(host: string, size = 32): string {
+  if (!host) return '';
+  return `https://www.google.com/s2/favicons?domain=${encodeURIComponent(host)}&sz=${size}`;
+}

package/src/tools/forms/NotionEditor/BookmarkNode.ts

@@ -0,0 +1,158 @@
+/**
+ * `BookmarkNode` — a NotionEditor block ATOM node that renders a link-preview
+ * "bookmark" card (the shared `common/link-preview/LinkPreviewCard`). It holds
+ * a single `url` attribute and renders via a React NodeView (mirrors
+ * `TaskItemView` → `ReactNodeViewRenderer`).
+ *
+ * Trigger — paste a BARE URL on an EMPTY line/block:
+ *
+ *   The `handlePaste` plugin only hijacks the paste when the clipboard is a
+ *   SINGLE bare URL AND the current block is empty (an empty paragraph). In
+ *   that case it replaces the empty block with a `bookmark` node. A URL
+ *   pasted mid-text, a labelled link, or multi-line clipboard content all
+ *   fall through to the editor's normal paste (the URL stays inline). This is
+ *   the conservative Notion rule — bookmark only on an explicit empty line.
+ *
+ * Resolver injection:
+ *
+ *   `notionExtensions({ resolveLinkPreview })` threads a host resolver into
+ *   the node's `options`. The NodeView reads it from `extension.options` and
+ *   passes it to the card, so the host (Wails/Go, a Next.js API route) unfurls
+ *   the URL exactly like chat does. Default `undefined` → the card renders its
+ *   own hostname/favicon fallback.
+ *
+ * Serialisation (markdown fidelity):
+ *
+ *   `renderMarkdown` emits the bare `url`, so `getMarkdown()` yields the raw
+ *   URL (NOT card markup) — same pattern the MarkdownEditor chip node uses.
+ *   On the next `setContent`/paste of a bare URL on an empty line the node is
+ *   re-created, so the round-trip is stable.
+ */
+
+import { Node, mergeAttributes } from '@tiptap/core';
+import { ReactNodeViewRenderer } from '@tiptap/react';
+import { Plugin, PluginKey } from '@tiptap/pm/state';
+import type { ResolveLinkPreview } from '../../../common/link-preview';
+import { BookmarkView } from './BookmarkView';
+
+export interface BookmarkNodeOptions {
+  /** Host resolver for URL unfurl. Default `undefined` → card fallback. */
+  resolveLinkPreview?: ResolveLinkPreview;
+  HTMLAttributes: Record<string, unknown>;
+}
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    bookmark: {
+      /** Insert a bookmark (link-preview) block for the given URL. */
+      setBookmark: (url: string) => ReturnType;
+    };
+  }
+}
+
+const bookmarkPasteKey = new PluginKey('notion-bookmark-paste');
+
+/** A single bare URL (http/https), nothing else on the line. */
+const BARE_URL_RE = /^https?:\/\/[^\s<>]+$/i;
+
+/** True when `text` is exactly one bare URL (no surrounding prose). */
+function isBareUrl(text: string): boolean {
+  const trimmed = text.trim();
+  if (!trimmed || /\s/.test(trimmed)) return false;
+  return BARE_URL_RE.test(trimmed);
+}
+
+export const BookmarkNode = Node.create<BookmarkNodeOptions>({
+  name: 'bookmark',
+  group: 'block',
+  atom: true,
+  draggable: true,
+  selectable: true,
+
+  addOptions() {
+    return {
+      resolveLinkPreview: undefined,
+      HTMLAttributes: {},
+    };
+  },
+
+  addAttributes() {
+    return {
+      url: {
+        default: '',
+        parseHTML: (el) => el.getAttribute('data-url') ?? '',
+        renderHTML: (attrs) => (attrs.url ? { 'data-url': attrs.url as string } : {}),
+      },
+    };
+  },
+
+  parseHTML() {
+    return [{ tag: 'div[data-type="bookmark"]' }];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return [
+      'div',
+      mergeAttributes({ 'data-type': 'bookmark' }, this.options.HTMLAttributes, HTMLAttributes),
+    ];
+  },
+
+  addNodeView() {
+    return ReactNodeViewRenderer(BookmarkView);
+  },
+
+  addCommands() {
+    return {
+      setBookmark:
+        (url: string) =>
+        ({ commands }) =>
+          commands.insertContent({ type: this.name, attrs: { url } }),
+    };
+  },
+
+  // `@tiptap/markdown` reads this — emit the bare URL so a round-trip through
+  // `getMarkdown()` yields the literal URL, never card markup.
+  renderMarkdown(node: { attrs: Record<string, unknown> }) {
+    return (node.attrs.url as string) ?? '';
+  },
+
+  addProseMirrorPlugins() {
+    const type = this.type;
+
+    return [
+      new Plugin({
+        key: bookmarkPasteKey,
+        props: {
+          // Bare-URL-on-empty-line → bookmark. Conservative: only when the
+          // clipboard is a SINGLE bare URL and the current textblock is empty.
+          handlePaste: (view, event) => {
+            const text = event.clipboardData?.getData('text/plain');
+            if (!text || !isBareUrl(text)) return false;
+
+            const { state } = view;
+            const { selection } = state;
+            const { $from, empty } = selection;
+            // Only replace when the caret sits in an EMPTY textblock with a
+            // collapsed selection — i.e. the user is on a fresh empty line.
+            if (!empty) return false;
+            const parent = $from.parent;
+            if (!parent.isTextblock || parent.content.size !== 0) return false;
+
+            const url = text.trim();
+            // Replace the empty block with the bookmark node.
+            const node = type.create({ url });
+            const tr = state.tr.replaceWith(
+              $from.before(),
+              $from.after(),
+              node,
+            );
+            view.dispatch(tr.scrollIntoView());
+            return true;
+          },
+        },
+      }),
+    ];
+  },
+});
+
+export default BookmarkNode;

package/src/tools/forms/NotionEditor/BookmarkView.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+/**
+ * React NodeView for the NotionEditor `bookmark` node. Renders the shared
+ * `LinkPreviewCard` (`appearance="full"`) inside a `NodeViewWrapper`, reading
+ * the host resolver injected via the node's `extension.options`
+ * (`resolveLinkPreview`). Mirrors `TaskItemView` — we only render the UI; the
+ * node owns the `url` attribute + markdown serialisation.
+ */
+
+import type { ReactNode } from 'react';
+import { NodeViewWrapper, type NodeViewProps } from '@tiptap/react';
+import { LinkPreviewCard } from '../../../common/link-preview';
+import { BlockError, LinkPreviewDataSchema, safeParseBlock } from '../../../common/blocks';
+import type { BookmarkNodeOptions } from './BookmarkNode';
+
+export function BookmarkView({ node, extension }: NodeViewProps) {
+  const url = (node.attrs.url as string) || '';
+  const resolver = (extension.options as BookmarkNodeOptions).resolveLinkPreview;
+
+  // An empty url is a legitimate "nothing to show yet" state (freshly inserted
+  // node) — render nothing. A NON-empty but malformed url fails the schema and
+  // shows a safe fallback instead of risking a throw downstream.
+  const validated = url ? safeParseBlock(LinkPreviewDataSchema, { url }) : null;
+
+  let content: ReactNode = null;
+  if (validated && validated.ok === true) {
+    content = <LinkPreviewCard url={validated.data.url} resolver={resolver} appearance="full" />;
+  } else if (validated && validated.ok === false) {
+    content = <BlockError label="bookmark" reason={validated.error} />;
+  }
+
+  return (
+    <NodeViewWrapper
+      data-type="bookmark"
+      className="notion-bookmark"
+      // The drag handle reorders the whole block; keep the card from stealing
+      // the drag target by marking the wrapper draggable=false (the node is
+      // already `draggable: true` at the schema level for the global handle).
+      draggable={false}
+    >
+      {content}
+    </NodeViewWrapper>
+  );
+}