@djangocfg/ui-tools 2.1.431 → 2.1.432

package/src/tools/dev/code/PrettyCode/PrettyCode.client.tsx

@@ -4,8 +4,7 @@ import { Highlight, Language, themes } from 'prism-react-renderer';
 import React, { useMemo, useRef } from 'react';
 
 import { useAppT } from '@djangocfg/i18n';
-import { FloatingToolbar } from '../../../../common/FloatingToolbar';
-import { CopyAction } from '../../../../common/FloatingToolbar/actions';
+import { CodePanelHeader } from '../../../../common/CodePanelHeader';
 
 // Surface palette — fixed dark regardless of host theme. Code blocks
 // follow the IDE / GitHub / ChatGPT convention: syntax highlighting
@@ -39,13 +38,22 @@ interface PrettyCodeProps {
   inline?: boolean;
   customBg?: string; // Custom background class
   isCompact?: boolean; // Compact mode for smaller font sizes
-  scrollIsolation?: boolean; // Block scroll capture until user clicks (default: true)
+  /** @deprecated No-op since the toolbar moved into a persistent
+   *  `CodePanelHeader` (no scroll-capturing overlay). Kept for API
+   *  back-compat; will be removed in a future major. */
+  scrollIsolation?: boolean;
   /**
    * Line count at which the viewer starts to scroll instead of growing.
    * ``undefined`` (default) = always grows to fit content, no scroll.
    * Set e.g. ``50`` to cap short snippets inline and scroll long ones.
    */
   maxLines?: number;
+  /**
+   * When set, an expand (⤢) button appears in the header — but ONLY while
+   * the content is actually height-capped (i.e. exceeds `maxLines`). Lets a
+   * host open the full code full-screen. No-op when the code fits.
+   */
+  onExpand?: () => void;
   /**
    * Visual variant. ``"card"`` (default) ships full chrome (border,
    * background, hover toolbar, optional internal scroll). ``"plain"``
@@ -54,7 +62,7 @@ interface PrettyCodeProps {
   variant?: 'card' | 'plain';
 }
 
-const PrettyCode = ({ data, language, className, mode = 'dark', inline = false, customBg, isCompact = false, scrollIsolation, maxLines, variant = 'card' }: PrettyCodeProps) => {
+const PrettyCode = ({ data, language, className, mode = 'dark', inline = false, customBg, isCompact = false, maxLines, onExpand, variant = 'card' }: PrettyCodeProps) => {
   const containerRef = useRef<HTMLDivElement>(null);
   const t = useAppT();
 
@@ -302,28 +310,19 @@ const PrettyCode = ({ data, language, className, mode = 'dark', inline = false,
   return (
     <div
       ref={containerRef}
-      className={`group relative ${bgClass} rounded-lg border ${isDarkMode ? '' : 'border-border'} ${className || ''}`}
+      className={`group relative overflow-hidden ${bgClass} rounded-lg border ${isDarkMode ? '' : 'border-border'} ${className || ''}`}
       style={customBg ? undefined : surfaceStyle}
     >
-      {/* Toolbar: hidden by default, appears on hover. Absolute overlay so it doesn't shift layout.
-          scrollIsolation is force-disabled when content fits without scrolling —
-          otherwise the "Click to scroll" prompt shows on a block that has
-          nothing to scroll, which reads as a bug. */}
-      <div className="absolute inset-x-0 top-0 pointer-events-none opacity-0 group-hover:opacity-100 transition-opacity duration-150 z-30">
-        <div className="pointer-events-auto">
-          <FloatingToolbar
-            containerRef={containerRef}
-            scrollIsolation={shouldScroll ? scrollIsolation : false}
-            label={
-              <span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-muted/80 text-muted-foreground border border-border/50 backdrop-blur-sm">
-                {displayLanguage}
-              </span>
-            }
-          >
-            <CopyAction value={contentJson} title={labels.copyCode} />
-          </FloatingToolbar>
-        </div>
-      </div>
+      {/* Persistent header bar (GitHub / ChatGPT style): language label
+          left, copy button right, in flow — never floats over the code. */}
+      <CodePanelHeader
+        language={displayLanguage}
+        copyValue={contentJson}
+        copyLabel={labels.copyCode}
+        dark={isDarkMode}
+        // Expand only matters when the code is actually height-capped.
+        onExpand={onExpand && shouldScroll ? onExpand : undefined}
+      />
 
       <div
         className={shouldScroll ? 'h-full overflow-auto' : ''}
@@ -340,15 +339,13 @@ const PrettyCode = ({ data, language, className, mode = 'dark', inline = false,
             const { backgroundColor: _bg, ...restStyle } = style;
             return (
             <pre
-              className={`${prismClassName} rounded-lg`}
+              className={prismClassName}
               style={{
                 ...restStyle,
                 margin: 0,
-                // Top padding gives the hover toolbar room to sit over
-                // the first line without covering it. Before: 2.5rem —
-                // too much empty space on short snippets. Now: 1rem,
-                // toolbar overlays with translucent bg on hover only.
-                padding: '1rem 1rem 0.75rem 1rem',
+                // The header now occupies the top; the code body just needs
+                // even padding (no extra top room for an overlay anymore).
+                padding: '0.875rem 1rem',
                 fontSize,
                 lineHeight: lineHeightRatio,
                 fontFamily: 'monospace',

package/src/tools/dev/code/PrettyCode/index.tsx

@@ -15,7 +15,7 @@ const PrettyCodeClient = lazy(() => import('./PrettyCode.client'));
 
 // Loading fallback component
 const LoadingFallback = () => (
-  <div className="relative rounded-sm border border-border overflow-hidden bg-muted dark:bg-zinc-900">
+  <div className="relative rounded-sm border border-border overflow-hidden bg-muted dark:bg-code">
     <div className="p-4">
       <div className="flex items-center gap-2">
         <div className="animate-pulse h-4 w-4 rounded-full bg-muted-foreground/20"></div>
@@ -41,6 +41,9 @@ export interface PrettyCodeProps {
    * to inline short snippets and cap long ones.
    */
   maxLines?: number;
+  /** When set, a header expand (⤢) button appears while the code is
+   *  height-capped (exceeds `maxLines`). Lets a host open it full-screen. */
+  onExpand?: () => void;
   /**
    * Visual variant:
    *   - ``"card"`` (default) — full chrome: border, background, hover

package/src/tools/dev/code/PrettyCode/lazy.tsx

@@ -27,6 +27,8 @@ export interface PrettyCodeProps {
   isCompact?: boolean;
   scrollIsolation?: boolean;
   maxLines?: number;
+  /** Header expand (⤢) callback, shown while the code is height-capped. */
+  onExpand?: () => void;
   /** ``'card'`` (default) ships the full chrome. ``'plain'`` is
    *  chrome-less — for embedding inside another scroll container. */
   variant?: 'card' | 'plain';
@@ -40,7 +42,7 @@ export type { Language };
 
 function CodeLoadingFallback() {
   return (
-    <div className="relative rounded-sm border border-border overflow-hidden bg-muted dark:bg-zinc-900">
+    <div className="relative rounded-sm border border-border overflow-hidden bg-muted dark:bg-code">
       <div className="p-4">
         <div className="flex items-center gap-2">
           <div className="animate-pulse h-4 w-4 rounded-full bg-muted-foreground/20" />

package/src/tools/forms/MarkdownEditor/MarkdownEditor.tsx

@@ -18,11 +18,46 @@ import { SlashCommandNode } from './slash/SlashCommandNode';
 import { syncLeadingSlashNode } from './slash/syncSlashNode';
 import type { SlashCommandInfo } from './slash/types';
 import { SubmitOnEnter } from './submitOnEnter';
+import { ChipNode } from './chip/ChipNode';
+import { syncChips } from './chip/syncChips';
 import type { MentionAttrs, MentionConfig } from './types';
 import './styles.css';
 
 // ── Helpers ──
 
+/**
+ * Whitelist of URL schemes the autolinker is allowed to turn into a
+ * link. We deliberately keep this to real, clickable transports.
+ */
+const AUTO_LINK_PROTOCOL = /^(?:https?|ftp|mailto|file):/i;
+
+/**
+ * Decide whether an autolink candidate should actually become a link.
+ *
+ * StarterKit's bundled `Link` extension ships with a permissive default
+ * `shouldAutoLink` that links any token whose "hostname" contains a dot
+ * with a plausible TLD. That over-eagerly turns *bare file paths and
+ * dotted filenames* into `http://…` links — e.g. typing a local path
+ * like `…/positioning/manifest.md` linkifies `manifest.md` as the
+ * Moldova (`.md`) domain, and pasted prose around a dotted token can be
+ * swallowed into one anchor. None of that is wanted in a chat composer.
+ *
+ * We instead require an explicit, known protocol (`http`, `https`,
+ * `ftp`, `mailto`, `file`) or a `www.`-prefixed host. linkifyjs has
+ * already split the candidate on whitespace, so the match is inherently
+ * bounded to a single token — a path like `/a/b/file.md` is never a
+ * `*://` URL and never a `www.` host, so it stays plain text, and any
+ * Unicode/Cyrillic words after a real URL remain plain text too.
+ */
+function shouldAutoLinkUrl(url: string): boolean {
+  if (AUTO_LINK_PROTOCOL.test(url)) return true;
+  // Bare `www.host…` (no scheme) — linkify prepends the default
+  // protocol; allow it since it's an unambiguous web address, not a
+  // local path.
+  if (/^www\.[^\s/$.?#].[^\s]*$/i.test(url)) return true;
+  return false;
+}
+
 interface MarkdownManager {
   serialize: (json: Record<string, unknown>) => string;
 }
@@ -105,6 +140,38 @@ export interface MarkdownEditorProps {
    * chat package's `SlashCommand[]` — pass either directly.
    */
   slashCommands?: readonly SlashCommandInfo[];
+  /**
+   * Render absolute LOCAL file paths typed/pasted into the editor as
+   * compact, atomic file chips (icon + VSCode-style middle-ellipsis label,
+   * full path on hover) — Cursor/Finder style. Backed by an inline atom
+   * NODE (`editorChip`, `kind: 'path'`), NOT a decoration: the chip owns
+   * its rendering so a long path collapses to ONE line (`…/dev/Map/index.ts`)
+   * instead of wrapping. The node serialises back to the RAW path, so caret
+   * (whole-chip delete), copy, and the submitted markdown all keep the
+   * literal `…/manifest.md`. Detection is conservative (absolute Unix /
+   * macOS / `~` / Windows-drive / UNC / `file://` only — never bare
+   * relative tokens or web URLs).
+   *
+   * Defaults to ON (the chat composer wants it). Pass `false` for editors
+   * that should leave paths as plain text. Like `mentions`/`slashCommands`
+   * this is captured by `useEditor` on first render — flipping it after
+   * mount won't add/remove the extension on the live instance.
+   */
+  filePathChips?: boolean;
+  /**
+   * Render web URLs typed/pasted into the editor as compact, atomic URL
+   * chips (favicon — degrading to a globe glyph — + domain and a
+   * middle-ellipsis of the path, e.g. `github.com/…/README.md`, full URL on
+   * hover). Clickable (opens in a new tab, `rel=noopener`). Same atom NODE
+   * as the file-path chip (`editorChip`, `kind: 'url'`); it REPLACES the
+   * plain blue underlined link look and serialises back to the RAW URL so
+   * copy / submit / markdown keep the literal address. Uses the same
+   * autolink whitelist as the editor (`http`/`https`/`ftp`/`mailto`/`file`
+   * + bare `www.`).
+   *
+   * Defaults to ON. Captured on first render like `filePathChips`.
+   */
+  urlChips?: boolean;
   /** Called when mentioned IDs change */
   onMentionIdsChange?: (ids: string[]) => void;
   /**
@@ -169,6 +236,8 @@ export const MarkdownEditor = forwardRef<MarkdownEditorHandle, MarkdownEditorPro
     unstyled = false,
     mentions,
     slashCommands,
+    filePathChips = true,
+    urlChips = true,
     onMentionIdsChange,
     onSubmit,
     autoFocus = false,
@@ -195,6 +264,11 @@ export const MarkdownEditor = forwardRef<MarkdownEditorHandle, MarkdownEditorPro
   );
   slashCommandsRef.current = slashCommands ?? [];
   const slashEnabledOnMountRef = useRef<boolean>(slashCommands !== undefined);
+  // File-path / URL chips: captured once on mount (the ChipNode extension is
+  // installed on first render, like mentions/slash). Both default ON. Kept
+  // in refs so the post-`setContent` `syncChips` pass reads the right flags.
+  const filePathChipsOnMountRef = useRef<boolean>(filePathChips);
+  const urlChipsOnMountRef = useRef<boolean>(urlChips);
   const slashWarnedRef = useRef(false);
   if (
     process.env.NODE_ENV !== 'production' &&
@@ -241,7 +315,25 @@ export const MarkdownEditor = forwardRef<MarkdownEditorHandle, MarkdownEditorPro
 
   const extensions = useMemo(() => {
     const exts: AnyExtension[] = [
-      StarterKit.configure({ heading: { levels: [1, 2, 3] } }),
+      StarterKit.configure({
+        heading: { levels: [1, 2, 3] },
+        // Constrain the bundled Link extension's autolinker. The default
+        // links bare dotted tokens (e.g. a file path's `manifest.md`)
+        // and can over-capture pasted prose; we only auto-link real
+        // URLs (explicit scheme or `www.`). `defaultProtocol: 'https'`
+        // is the modern default for the rare schemeless `www.` case.
+        //
+        // When `urlChips` is ON the ChipNode OWNS URL rendering (a chip,
+        // not a blue underline), so we turn OFF the link autolinker to
+        // avoid the two fighting over the same token. Markdown `[text](url)`
+        // links typed deliberately still render via the link mark — only
+        // the implicit autolink of a bare URL is suppressed.
+        link: {
+          defaultProtocol: 'https',
+          autolink: !urlChipsOnMountRef.current,
+          shouldAutoLink: shouldAutoLinkUrl,
+        },
+      }),
       Placeholder.configure({ placeholder }),
       Markdown,
       // SubmitOnEnter — when the consumer wired an onSubmit, intercept
@@ -268,6 +360,22 @@ export const MarkdownEditor = forwardRef<MarkdownEditorHandle, MarkdownEditorPro
       exts.push(SlashCommandNode);
     }
 
+    // ChipNode — a single inline ATOM node that renders BOTH file-path
+    // chips (`kind: 'path'`) and URL chips (`kind: 'url'`) with a
+    // VSCode-style middle-ellipsis label, and serialises back to the raw
+    // path / URL. Registered whenever either chip feature is on (the node's
+    // input/paste rules are gated per-kind via `enablePaths`/`enableUrls`).
+    // Replaces the old FilePathChipExtension decoration — a node owns its
+    // rendering, so a long path collapses to ONE line instead of wrapping.
+    if (filePathChipsOnMountRef.current || urlChipsOnMountRef.current) {
+      exts.push(
+        ChipNode.configure({
+          enablePaths: filePathChipsOnMountRef.current,
+          enableUrls: urlChipsOnMountRef.current,
+        }),
+      );
+    }
+
     if (mentions) {
       // ── Why .extend() with renderMarkdown ──
       //
@@ -356,9 +464,41 @@ export const MarkdownEditor = forwardRef<MarkdownEditorHandle, MarkdownEditorPro
     },
     editorProps: {
       attributes: {
-        class: 'markdown-editor-content focus:outline-none text-sm',
+        // 15px matches the `.ProseMirror` typographic baseline in
+        // styles.css — a comfortable chat-composer body size. Do NOT
+        // shrink to `text-sm` here: that 14px override made the composer
+        // input read too small against the rest of the chat surface.
+        class: 'markdown-editor-content focus:outline-none text-[15px]',
         style: `min-height: ${minHeight}px`,
       },
+      handleDOMEvents: {
+        // FILE drops must NOT be consumed by ProseMirror. PM's built-in
+        // `editHandlers.drop` calls `event.preventDefault()` on the editor
+        // surface (prosemirror-view: handleDrop), which swallows a file
+        // drop before it can bubble to the host wrapper's `onDrop` (the
+        // chat composer's attach pipeline).
+        //
+        // PM's dispatch (prosemirror-view `dispatchEvent`) runs the
+        // built-in handler ONLY when the custom handler returns a falsy
+        // value AND did not `preventDefault`. So to let a file drop reach
+        // the composer we must:
+        //   • return `true`  → tells PM "handled", it SKIPS its built-in
+        //                       drop, so it never preventDefaults; the
+        //                       native event keeps bubbling to React onDrop.
+        //   • NOT preventDefault here (that would also block the bubble
+        //     target from acting, and PM treats defaultPrevented as
+        //     "handled" too — same skip, but we keep it explicit).
+        // For text / node drops (no `dataTransfer.files`) return `false`
+        // so PM's normal in-editor drop handling runs unchanged.
+        drop: (_view, event) => {
+          const dt = (event as DragEvent).dataTransfer;
+          if (dt && dt.files && dt.files.length > 0) {
+            // Hands-off: skip PM's drop, let it bubble to composer.onDrop.
+            return true;
+          }
+          return false;
+        },
+      },
     },
   });
 
@@ -383,6 +523,17 @@ export const MarkdownEditor = forwardRef<MarkdownEditorHandle, MarkdownEditorPro
       if (slashEnabledOnMountRef.current) {
         syncLeadingSlashNode(editor, slashCommandsRef.current);
       }
+      // Convert any bare path / URL text in the freshly-parsed markdown into
+      // chip atoms. Input/paste rules handle live typing; this covers
+      // content that arrived via the controlled `value` (parsed straight to
+      // plain text). The chips serialise back to the raw string, so the next
+      // `getMarkdown(editor)` still equals `value` — no feedback loop.
+      if (filePathChipsOnMountRef.current || urlChipsOnMountRef.current) {
+        syncChips(editor, {
+          paths: filePathChipsOnMountRef.current,
+          urls: urlChipsOnMountRef.current,
+        });
+      }
       isExternalUpdate.current = false;
     }
   }, [value, editor]);
@@ -444,10 +595,24 @@ export const MarkdownEditor = forwardRef<MarkdownEditorHandle, MarkdownEditorPro
     : 'rounded-md border border-input bg-background';
   const wrapperClass = `markdown-editor ${chromeClass} ${disabled ? 'opacity-60' : ''} ${className}`.trim();
 
+  // Inner content padding.
+  //
+  // Standalone editor: comfy `px-3 py-2` frame.
+  //
+  // Unstyled (embedded in the chat composer surface): the host owns the
+  // OUTER frame, but the editor text still needs a small, EVEN inset so
+  // it doesn't sit flush in the corner. We give it a balanced horizontal +
+  // top inset and a DELIBERATELY tighter bottom (`pb-px`): a symmetric
+  // `py-2` would stack a second 8px gap under the single caret line and
+  // read as a phantom empty line (the bug this replaces). `pt-1.5 pb-px`
+  // breathes at the top without re-introducing the bottom gap; `px-2`
+  // keeps left == right so the caret isn't jammed against the edge.
+  const contentPad = unstyled ? 'px-2 pt-1.5 pb-px' : 'px-3 py-2';
+
   return (
     <div className={wrapperClass}>
       {showToolbar && editor && <MarkdownToolbar editor={editor} />}
-      <div className="px-3 py-2">
+      <div className={contentPad}>
         <EditorContent editor={editor} />
       </div>
     </div>

package/src/tools/forms/MarkdownEditor/README.md

@@ -12,6 +12,8 @@ WYSIWYG markdown editor based on Tiptap. Renders markdown visually (headings, li
 - Toolbar with icon buttons
 - `@`-mentions with auto-flipping popup (`@floating-ui/dom`)
 - Customizable markdown serialization for mentions (six built-in presets)
+- File-path chips and URL chips — atomic inline nodes with VSCode-style
+  middle-ellipsis truncation (see [File-path & URL chips](#file-path--url-chips))
 - Markdown input/output (stored as plain markdown string)
 - SSR-safe (`immediatelyRender: false`)
 
@@ -57,6 +59,8 @@ import '@djangocfg/ui-tools/dist.css';
 | `disabled` | `boolean` | `false` | Read-only mode |
 | `showToolbar` | `boolean` | `true` | Show formatting toolbar |
 | `mentions` | `MentionConfig` | — | `@`-mention autocomplete config |
+| `filePathChips` | `boolean` | `true` | Render absolute local file paths as atomic chips — see [File-path & URL chips](#file-path--url-chips) |
+| `urlChips` | `boolean` | `true` | Render web URLs as atomic, clickable chips — see [File-path & URL chips](#file-path--url-chips) |
 | `onMentionIdsChange` | `(ids: string[]) => void` | — | Called when mentioned IDs change |
 | `onSubmit` | `() => boolean \| void` | — | Enter handler — when set, Enter submits and Shift+Enter inserts a newline (ChatGPT / Telegram chat behaviour). Return `false` to fall back to default HardBreak. See [Submit on Enter](#submit-on-enter) below. |
 
@@ -143,6 +147,86 @@ Either `id` or `label` may be empty strings if upstream config didn't populate t
 
 > Mentions are write-only: the markdown isn't parsed back into mention nodes on `setContent`. After submit/reset, the editor receives a plain string — fine for chat composers.
 
+## File-path & URL chips
+
+The editor turns absolute **local file paths** and **web URLs** into compact,
+atomic inline chips — like VSCode / Cursor. Both default ON; gate them with
+the `filePathChips` / `urlChips` props.
+
+```tsx
+<MarkdownEditor
+  value={text}
+  onChange={setText}
+  filePathChips   // default true — paths → chips
+  urlChips        // default true — URLs → chips
+/>
+```
+
+### What you get
+
+| | File-path chip (`kind: 'path'`) | URL chip (`kind: 'url'`) |
+|---|---|---|
+| Icon | VSCode file icon by extension (folder glyph for dirs) | favicon (Google S2) → globe glyph on error |
+| Label | middle-ellipsis, basename kept — `…/dev/Map/index.ts` | domain + middle-ellipsis path — `github.com/…/README.md` |
+| Tooltip | full path (`title`) | full URL (`title`) |
+| Clickable | no | yes — opens in a new tab (`rel=noopener noreferrer`) |
+| Detection | absolute Unix / macOS / `~` / Windows-drive / UNC / `file://` | `http`/`https`/`ftp`/`mailto`/`file` + bare `www.` |
+
+### Why a node, not a decoration (the long-path fix)
+
+The chip is an **atomic inline NODE** (`editorChip`), the same shape as the
+`@`-mention and `/`-command chips — NOT a decoration. A decoration is an
+overlay: it can style the raw text but can't replace it, so a long path
+rendered in full and **wrapped to several lines**. A node owns its
+rendering, so it shows the truncated label on **one line** while the full
+string lives in the node's attribute.
+
+A single node renders both kinds (a `kind` attribute switches path vs URL) —
+one component, one set of styles, DRY.
+
+### Text / markdown fidelity (the whole point)
+
+Each chip **serialises back to the RAW string**. `renderText` and
+`renderMarkdown` both emit the literal path / URL, so:
+
+- copying a chip yields the raw path / URL,
+- the submitted message and `getMarkdown()` contain the real string,
+- never any chip markup.
+
+A bare URL serialises as the bare URL; a file path as the literal path.
+
+### Auto-conversion
+
+- **Typing**: type a path / URL followed by a **space** and it becomes a
+  chip (an input rule on the word boundary — punctuation inside the token
+  like `.ts` is preserved because only whitespace triggers conversion).
+- **Pasting**: a paste rule converts every detected path / URL in the
+  pasted text, keeping the surrounding prose.
+- **Initial `value`**: paths / URLs in the controlled markdown are
+  converted after `setContent` (the same way leading `/`-commands are).
+
+### Caret / editing
+
+Atomic nodes behave like a single character: arrow keys step over the whole
+chip, and Backspace removes / reverts the whole chip at once (the raw text
+is never partially lost) — VSCode-like.
+
+### Standalone `<FilePathChip>`
+
+The presentational React chip still exists for rendering a known path
+**outside** the editor (a chat message, a file list). It's exported from
+`@djangocfg/ui-tools/markdown-editor`:
+
+```tsx
+import { FilePathChip } from '@djangocfg/ui-tools/markdown-editor';
+
+<FilePathChip path="/Users/me/dev/Map/index.ts" />
+```
+
+The pure detector / display helpers are exported too:
+`findFilePaths`, `splitPath`, `truncatePathLabel` (paths) and
+`findUrls`, `splitUrl`, `truncateUrlLabel`, `faviconUrl` (URLs).
+
 ## Submit on Enter
 
 For chat composers you usually want **Enter = send**, **Shift+Enter = newline** — ChatGPT / Telegram / Slack behaviour. Pass an `onSubmit` and that's what you get: