@particle-academy/react-fancy 5.66.0 → 5.68.0

package/CHANGELOG.md

@@ -11,6 +11,97 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [5.68.0] - 2026-10-27
+
+### Added
+
+- **`Editor` forwards `copyButtons`, `clipboardWriter` and `onCopy` to the
+  `ContentRenderer` its view mode renders through.** 5.67.0 turned copy buttons
+  on in view mode but gave a host no way to route those copies (a sandboxed
+  Electron window), observe them, or turn them off from `Editor`. Same types and
+  same defaults as on `ContentRenderer`; with the props absent nothing changes.
+  They have no effect in edit mode. Editor's docs now also document `mode`.
+- **`ContentRenderer streaming="progressive"`: an open block shows as it
+  fills.** `streaming={true}` still hides an open block until it closes. In the
+  new mode:
+  - an open tag of a registered extension whose opening tag is complete renders
+    its component with the body so far (a `markdown` extension gets it as
+    `content` and rendered, sanitised, as `children`);
+  - an open code fence renders as a code block of what has arrived, with **no
+    copy button until it closes** (hidden rather than disabled: half a block is
+    never what a copy means). Finished blocks before it keep theirs;
+  - a partial opening tag (`<result title="Do`), a partial closing tag, a fence
+    marker still arriving and a fence opener line with no newline yet are still
+    held back, so none of it flashes raw. Inside an open fence `<` is code;
+  - it closes the open fence and open tags itself and renders normally, so the
+    body is the one the final render shows once the real closes arrive.
+  - The root carries `data-streaming-mode="progressive"` as well as
+    `data-streaming="true"`.
+
+  It is a value of `streaming` rather than a new prop because it is a way of
+  streaming: a separate flag would add a combination that means nothing.
+  `streaming` is now typed `boolean | "progressive"`. Code that passes a
+  boolean is unaffected; code that READS the prop's type and assumes `boolean`
+  needs to allow the string.
+
+### Changed
+
+- **Docs: `markdown` tags are lifted only at line start and only when closed,
+  and that is now stated as deliberate.** The behaviour is unchanged.
+  Progressive streaming does not relax either rule.
+
+## [5.67.0] - 2026-10-27
+
+### Added
+
+- **`ContentRenderer`: copy buttons, markdown-body tags, streaming, and a
+  clipboard writer** (genie#1263). Genie and MOIC render chat markup with this.
+  Until now Genie split replies into blocks itself, because custom tags were
+  only found after the markdown had become HTML.
+  - **Copy buttons** on every code block and table. They are react-fancy
+    `Button`s with `copy`/`check` icons and the handle
+    `data-react-fancy-content-copy="code" | "table"`, plus `data-copy-state`.
+    Code copies exactly what is between the fences: no language label and no
+    added trailing newline. A table copies as TSV. Every copy is announced as
+    `Copied` or `Copy failed` in a polite live region
+    (`[data-react-fancy-content-renderer-live]`). Opt out with
+    `copyButtons={false}`, or per kind with `copyButtons={{ table: false }}`.
+    `onCopy` reports `{ kind, index, text, html, ok }`.
+  - **`markdown: true` on a `RenderExtension`.** A tag that starts a line is
+    lifted out of the markdown source before conversion. The component gets
+    the raw markdown body as `content`, and the body rendered as `children`.
+    The rendered body is sanitised, and it gets nested extensions and copy
+    buttons. Same-name nesting is balanced. Tags inside code are left alone.
+    Nesting stops at depth 8.
+  - **`streaming`** holds back an unfinished trailing tag of a registered
+    extension (`<res`, `<result title="x`, an opened tag with no close yet,
+    `</res`) and an open code fence, so none of it flashes as raw text. A `<`
+    that cannot become a registered tag still renders (`a < b`). When
+    `streaming` turns off, everything renders. While streaming, the root
+    carries `data-streaming="true"`.
+  - **`clipboardWriter`** lets a host supply its own clipboard write, for a
+    sandboxed Electron window where `navigator.clipboard` can fail silently.
+    The default writes text/html plus text/plain through `ClipboardItem`. If
+    that is missing or refused, it falls back to `writeText`. A writer fails if
+    it throws, rejects, returns `false`, or has not settled after 5 s. A failure
+    is never silent.
+  - New types: `ContentCopyKind`, `ContentCopyEvent`, `ContentClipboardPayload`,
+    `ContentClipboardWriter`. `RenderExtensionProps` gains an optional
+    `children`.
+
+### Changed
+
+- **`ContentRenderer` (and `Editor`'s view mode, which renders through it) now
+  shows copy buttons by default.** Each `<pre>` and `<table>` is wrapped in a
+  `div[data-react-fancy-content-copy-block]`. A live-region `<span>` sits at
+  the end of the root. Pass `copyButtons={false}` to get the old markup back.
+  If you style or select `pre`/`table` by direct-child position, check it. If
+  you do not, do nothing.
+- **Attributes of a lifted `markdown` tag are cleaned before the component sees
+  them.** `on*`, `srcdoc` and unsafe URLs are removed. This matches what the
+  HTML sanitiser already did to tags matched in HTML, so nothing an existing
+  extension received changes.
+
 ## [5.66.0] - 2026-10-27
 
 ### Added

package/dist/ContentRenderer.types-RO_l7_6N.d.cts

@@ -0,0 +1,137 @@
+import { ComponentType, ReactNode } from 'react';
+
+/** Props passed to every render-extension component. */
+interface RenderExtensionProps {
+    /**
+     * The inner content of the custom tag (raw string). For an extension with
+     * `markdown: true` in markdown content this is the raw MARKDOWN body, before
+     * conversion. Either way it is untrusted: render `children` rather than
+     * injecting it.
+     */
+    content: string;
+    /**
+     * Parsed attributes from the opening tag. Event handlers (`on*`), `srcdoc`,
+     * and URL attributes with an unsafe scheme are removed (unless the renderer
+     * is `unsafe`).
+     */
+    attributes: Record<string, string>;
+    /**
+     * Only for extensions with `markdown: true`: the body, rendered by the same
+     * pipeline as the rest of the content (sanitised, nested extensions, copy
+     * buttons).
+     */
+    children?: ReactNode;
+}
+/** Registers a custom tag with a React component for rendering. */
+interface RenderExtension {
+    /** Tag name to match, e.g. "questions", "thinking". Case-insensitive. */
+    tag: string;
+    /** React component that renders the matched tag. */
+    component: ComponentType<RenderExtensionProps>;
+    /**
+     * Whether this is a block-level element.
+     * Block extensions are wrapped in a `<div>`, inline in a `<span>`.
+     * @default true
+     */
+    block?: boolean;
+    /**
+     * The tag's body is MARKDOWN. In markdown content, a tag that starts a line
+     * is lifted out of the source before conversion, so the component gets the
+     * raw markdown as `content` and the rendered, sanitised body as `children`.
+     * In HTML content the body is HTML and `children` renders it.
+     * @default false
+     */
+    markdown?: boolean;
+}
+/** A parsed segment — either raw HTML or a matched extension tag. */
+type ContentSegment = {
+    type: "html";
+    content: string;
+} | {
+    type: "extension";
+    tag: string;
+    content: string;
+    attributes: Record<string, string>;
+};
+/** Register a single render extension globally (available to all ContentRenderer and Editor instances). */
+declare function registerExtension(extension: RenderExtension): void;
+/** Register multiple render extensions globally. */
+declare function registerExtensions(extensions: RenderExtension[]): void;
+
+/** What a copy button copies. */
+type ContentCopyKind = "code" | "table";
+/** What is handed to a clipboard writer. */
+interface ContentClipboardPayload {
+    kind: ContentCopyKind;
+    /**
+     * Plain text. For code: exactly the code between the fences, with no
+     * language label and no added trailing newline. For a table: TSV (tab
+     * between cells, newline between rows, no trailing newline).
+     */
+    text: string;
+    /** The block's sanitised HTML (`<pre>…</pre>` or `<table>…</table>`), for rich paste. */
+    html: string;
+}
+/**
+ * Writes one copy to the clipboard. Throwing, rejecting, or returning `false`
+ * means the copy failed; the failure is announced, never swallowed.
+ */
+type ContentClipboardWriter = (payload: ContentClipboardPayload) => void | boolean | Promise<void | boolean>;
+/** Reported through `onCopy` after every copy attempt. */
+interface ContentCopyEvent extends ContentClipboardPayload {
+    /** Position of the button among this renderer's copy buttons, in document order. */
+    index: number;
+    /** Whether the clipboard write succeeded. */
+    ok: boolean;
+}
+interface ContentRendererProps {
+    value: string;
+    format?: "html" | "markdown" | "auto";
+    lineSpacing?: number;
+    className?: string;
+    /** Per-instance render extensions. Merged with any globally-registered extensions. */
+    extensions?: RenderExtension[];
+    /**
+     * Skip HTML sanitization. By default, rendered output is sanitized to remove
+     * `<script>`, `<iframe>`, event handlers, and `javascript:` URIs. Pass
+     * `unsafe` only when the input is fully trusted (e.g. server-rendered
+     * markdown from your own CMS).
+     * @default false
+     */
+    unsafe?: boolean;
+    /**
+     * Copy buttons on code blocks and tables. `false` turns them all off; an
+     * object turns kinds off individually (`{ table: false }`).
+     * @default true
+     */
+    copyButtons?: boolean | {
+        code?: boolean;
+        table?: boolean;
+    };
+    /** Called after every copy attempt, successful or not. */
+    onCopy?: (event: ContentCopyEvent) => void;
+    /**
+     * Host-supplied clipboard writer, for environments where
+     * `navigator.clipboard` is unreliable (e.g. a sandboxed Electron window:
+     * pass one that calls Electron's `clipboard`). The default writes
+     * text/html + text/plain via `ClipboardItem`, falling back to `writeText`.
+     */
+    clipboardWriter?: ContentClipboardWriter;
+    /**
+     * The value is still arriving. Set it back to `false` when the stream ends
+     * and everything renders.
+     *
+     * - `true` holds back an unfinished trailing custom tag (of a registered
+     *   extension) or code fence until it closes, so a partial `<result` or half
+     *   a code block never flashes as raw text.
+     * - `"progressive"` shows an open block as it fills: an open registered tag
+     *   whose opening tag is complete renders its component with the body so
+     *   far, and an open code fence renders as a code block of what has arrived
+     *   (with no copy button until it closes). A partial opening tag
+     *   (`<result title="Do`) is still held back.
+     * @default false
+     */
+    streaming?: boolean | "progressive";
+}
+
+export { type ContentClipboardPayload as C, type RenderExtension as R, type ContentClipboardWriter as a, type ContentCopyEvent as b, type ContentCopyKind as c, type ContentRendererProps as d, type RenderExtensionProps as e, registerExtensions as f, type ContentSegment as g, registerExtension as r };

package/dist/ContentRenderer.types-RO_l7_6N.d.ts

@@ -0,0 +1,137 @@
+import { ComponentType, ReactNode } from 'react';
+
+/** Props passed to every render-extension component. */
+interface RenderExtensionProps {
+    /**
+     * The inner content of the custom tag (raw string). For an extension with
+     * `markdown: true` in markdown content this is the raw MARKDOWN body, before
+     * conversion. Either way it is untrusted: render `children` rather than
+     * injecting it.
+     */
+    content: string;
+    /**
+     * Parsed attributes from the opening tag. Event handlers (`on*`), `srcdoc`,
+     * and URL attributes with an unsafe scheme are removed (unless the renderer
+     * is `unsafe`).
+     */
+    attributes: Record<string, string>;
+    /**
+     * Only for extensions with `markdown: true`: the body, rendered by the same
+     * pipeline as the rest of the content (sanitised, nested extensions, copy
+     * buttons).
+     */
+    children?: ReactNode;
+}
+/** Registers a custom tag with a React component for rendering. */
+interface RenderExtension {
+    /** Tag name to match, e.g. "questions", "thinking". Case-insensitive. */
+    tag: string;
+    /** React component that renders the matched tag. */
+    component: ComponentType<RenderExtensionProps>;
+    /**
+     * Whether this is a block-level element.
+     * Block extensions are wrapped in a `<div>`, inline in a `<span>`.
+     * @default true
+     */
+    block?: boolean;
+    /**
+     * The tag's body is MARKDOWN. In markdown content, a tag that starts a line
+     * is lifted out of the source before conversion, so the component gets the
+     * raw markdown as `content` and the rendered, sanitised body as `children`.
+     * In HTML content the body is HTML and `children` renders it.
+     * @default false
+     */
+    markdown?: boolean;
+}
+/** A parsed segment — either raw HTML or a matched extension tag. */
+type ContentSegment = {
+    type: "html";
+    content: string;
+} | {
+    type: "extension";
+    tag: string;
+    content: string;
+    attributes: Record<string, string>;
+};
+/** Register a single render extension globally (available to all ContentRenderer and Editor instances). */
+declare function registerExtension(extension: RenderExtension): void;
+/** Register multiple render extensions globally. */
+declare function registerExtensions(extensions: RenderExtension[]): void;
+
+/** What a copy button copies. */
+type ContentCopyKind = "code" | "table";
+/** What is handed to a clipboard writer. */
+interface ContentClipboardPayload {
+    kind: ContentCopyKind;
+    /**
+     * Plain text. For code: exactly the code between the fences, with no
+     * language label and no added trailing newline. For a table: TSV (tab
+     * between cells, newline between rows, no trailing newline).
+     */
+    text: string;
+    /** The block's sanitised HTML (`<pre>…</pre>` or `<table>…</table>`), for rich paste. */
+    html: string;
+}
+/**
+ * Writes one copy to the clipboard. Throwing, rejecting, or returning `false`
+ * means the copy failed; the failure is announced, never swallowed.
+ */
+type ContentClipboardWriter = (payload: ContentClipboardPayload) => void | boolean | Promise<void | boolean>;
+/** Reported through `onCopy` after every copy attempt. */
+interface ContentCopyEvent extends ContentClipboardPayload {
+    /** Position of the button among this renderer's copy buttons, in document order. */
+    index: number;
+    /** Whether the clipboard write succeeded. */
+    ok: boolean;
+}
+interface ContentRendererProps {
+    value: string;
+    format?: "html" | "markdown" | "auto";
+    lineSpacing?: number;
+    className?: string;
+    /** Per-instance render extensions. Merged with any globally-registered extensions. */
+    extensions?: RenderExtension[];
+    /**
+     * Skip HTML sanitization. By default, rendered output is sanitized to remove
+     * `<script>`, `<iframe>`, event handlers, and `javascript:` URIs. Pass
+     * `unsafe` only when the input is fully trusted (e.g. server-rendered
+     * markdown from your own CMS).
+     * @default false
+     */
+    unsafe?: boolean;
+    /**
+     * Copy buttons on code blocks and tables. `false` turns them all off; an
+     * object turns kinds off individually (`{ table: false }`).
+     * @default true
+     */
+    copyButtons?: boolean | {
+        code?: boolean;
+        table?: boolean;
+    };
+    /** Called after every copy attempt, successful or not. */
+    onCopy?: (event: ContentCopyEvent) => void;
+    /**
+     * Host-supplied clipboard writer, for environments where
+     * `navigator.clipboard` is unreliable (e.g. a sandboxed Electron window:
+     * pass one that calls Electron's `clipboard`). The default writes
+     * text/html + text/plain via `ClipboardItem`, falling back to `writeText`.
+     */
+    clipboardWriter?: ContentClipboardWriter;
+    /**
+     * The value is still arriving. Set it back to `false` when the stream ends
+     * and everything renders.
+     *
+     * - `true` holds back an unfinished trailing custom tag (of a registered
+     *   extension) or code fence until it closes, so a partial `<result` or half
+     *   a code block never flashes as raw text.
+     * - `"progressive"` shows an open block as it fills: an open registered tag
+     *   whose opening tag is complete renders its component with the body so
+     *   far, and an open code fence renders as a code block of what has arrived
+     *   (with no copy button until it closes). A partial opening tag
+     *   (`<result title="Do`) is still held back.
+     * @default false
+     */
+    streaming?: boolean | "progressive";
+}
+
+export { type ContentClipboardPayload as C, type RenderExtension as R, type ContentClipboardWriter as a, type ContentCopyEvent as b, type ContentCopyKind as c, type ContentRendererProps as d, type RenderExtensionProps as e, registerExtensions as f, type ContentSegment as g, registerExtension as r };

package/dist/button.cjs

@@ -1,8 +1,7 @@
 'use strict';
 
 require('./chunk-M5MUGSON.cjs');
-var chunkC5YX5XVL_cjs = require('./chunk-C5YX5XVL.cjs');
-require('./chunk-X2FC7ODX.cjs');
+var chunk3U7PUZLI_cjs = require('./chunk-3U7PUZLI.cjs');
 require('./chunk-XCZZVRBY.cjs');
 require('./chunk-MXWR3T3N.cjs');
 require('./chunk-ZU5Q77OT.cjs');
@@ -11,11 +10,11 @@ require('./chunk-ZU5Q77OT.cjs');
 
 Object.defineProperty(exports, "Action", {
   enumerable: true,
-  get: function () { return chunkC5YX5XVL_cjs.Action; }
+  get: function () { return chunk3U7PUZLI_cjs.Action; }
 });
 Object.defineProperty(exports, "Button", {
   enumerable: true,
-  get: function () { return chunkC5YX5XVL_cjs.Button; }
+  get: function () { return chunk3U7PUZLI_cjs.Button; }
 });
 //# sourceMappingURL=button.cjs.map
 //# sourceMappingURL=button.cjs.map

package/dist/button.js

@@ -1,6 +1,5 @@
 import './chunk-LQ4ICCN2.js';
-export { Action, Button } from './chunk-TLRRMYNV.js';
-import './chunk-6TBRBN7H.js';
+export { Action, Button } from './chunk-OXERDFFF.js';
 import './chunk-45BBNJQD.js';
 import './chunk-J3A4Z2P7.js';
 import './chunk-MMW2JGKZ.js';

package/dist/{chunk-J44EV6SP.js → chunk-23AVEYUP.js}

@@ -1,6 +1,6 @@
 import { Tooltip } from './chunk-GR2WKBER.js';
 import { useInlinePaste, InlinePasteEditor, PastedFilesInput, markedIds, expandMarkers } from './chunk-YIKXJWO4.js';
-import { Button } from './chunk-TLRRMYNV.js';
+import { Button } from './chunk-OXERDFFF.js';
 import { Icon } from './chunk-J3A4Z2P7.js';
 import { cn } from './chunk-MMW2JGKZ.js';
 import { forwardRef, useState, useRef, useCallback, useReducer, useMemo, useEffect, useLayoutEffect, useImperativeHandle } from 'react';
@@ -815,5 +815,5 @@ function fmtSize(b) {
 }
 
 export { PromptInput, browserPlatformHints, detectPlatform, modifierKeyLabel, promptDataUrlToFile, promptFileToDataUrl };
-//# sourceMappingURL=chunk-J44EV6SP.js.map
-//# sourceMappingURL=chunk-J44EV6SP.js.map
+//# sourceMappingURL=chunk-23AVEYUP.js.map
+//# sourceMappingURL=chunk-23AVEYUP.js.map