@juspay/svelte-ui-components 4.11.5 → 4.13.0

package/dist/MarkdownText/markdown.js

@@ -1,8 +1,9 @@
 import { Marked } from 'marked';
+import { parseFragment } from 'parse5';
 /**
  * Chat content comes from models and users, not from the app's own templates,
  * so the output must be safe without asking consumers to run a sanitizer:
- * raw HTML never passes through (it renders as escaped text), and only these
+ * raw HTML never passes through (escaped by default, tags optionally stripped), and only these
  * URL protocols survive on links. Everything else in the output is built by
  * marked from markdown syntax alone.
  */
@@ -109,10 +110,36 @@ function resolveTagAllowList(allowedTags) {
 function tagAllowed(allowed, tag) {
     return allowed === null || allowed.has(tag);
 }
-function createSanitizingRenderer(protocols, allowedTags, disableTaskLists) {
+/**
+ * As with `narrow` and `resolveTagAllowList`, a plain-JS or web-component
+ * consumer can hand this anything at runtime, so anything other than the one
+ * recognised opt-in degrades to today's escaping rather than throwing — an
+ * unrecognised value must never be the reason content silently disappears.
+ */
+function resolveRawHtmlMode(rawHtml) {
+    return rawHtml === 'strip' ? 'strip' : 'escape';
+}
+// An inert, server-compatible HTML parser handles quoted delimiters, entities
+// and raw-text elements. Escaping its text nodes prevents decoded entities from
+// becoming markup when the resulting string is rendered by Svelte.
+function rawHtmlText(node) {
+    if ('value' in node) {
+        return escapeHtml(node.value);
+    }
+    // A <template>'s children live in a separate `content` fragment rather than
+    // in childNodes, so recursing only through childNodes loses its text.
+    if ('content' in node) {
+        return rawHtmlText(node.content);
+    }
+    if ('childNodes' in node) {
+        return node.childNodes.map(rawHtmlText).join('');
+    }
+    return '';
+}
+function createSanitizingRenderer(protocols, allowedTags, disableTaskLists, rawHtml) {
     return {
         html(token) {
-            return escapeHtml(token.text);
+            return rawHtml === 'strip' ? rawHtmlText(parseFragment(token.text)) : escapeHtml(token.text);
         },
         link(token) {
             if (hasSafeProtocol(token.href, protocols.links) && tagAllowed(allowedTags, 'a')) {
@@ -233,19 +260,21 @@ function instanceFor(options) {
     const protocols = resolveProtocolSets(options.sanitize);
     const allowedTags = resolveTagAllowList(options.sanitize?.allowedTags);
     const disableTaskLists = options.sanitize?.disableTaskLists === true;
+    const rawHtml = resolveRawHtmlMode(options.sanitize?.rawHtml);
     const key = [
         breaks ? 'breaks' : 'default',
         [...protocols.links].sort().join(','),
         [...protocols.images].sort().join(','),
         allowedTags ? [...allowedTags].sort().join(',') : '*',
-        disableTaskLists ? 'no-tasks' : 'tasks'
+        disableTaskLists ? 'no-tasks' : 'tasks',
+        rawHtml
     ].join('|');
     let instance = instances.get(key);
     if (!instance) {
         instance = new Marked({
             gfm: true,
             breaks,
-            renderer: createSanitizingRenderer(protocols, allowedTags, disableTaskLists)
+            renderer: createSanitizingRenderer(protocols, allowedTags, disableTaskLists, rawHtml)
         });
         instances.set(key, instance);
     }

package/dist/MarkdownText/properties.d.ts

@@ -2,7 +2,7 @@ export type MarkdownTextProperties = OptionalMarkdownTextProperties & MandatoryM
 export type MandatoryMarkdownTextProperties = {
     /**
      * Markdown source. Rendered through the library's sanitized-by-construction
-     * pipeline: raw HTML (block and inline) is escaped and shown as text, and
+     * pipeline: raw HTML is escaped by default (or stripped via sanitize.rawHtml), and
      * link/image URLs outside the safe-protocol allow-list are stripped while
      * their text is kept.
      */
@@ -34,8 +34,9 @@ export type OptionalMarkdownTextProperties = {
  * with the library's own allow-list for each surface, so it can only NARROW
  * what already renders, never widen it (listing `javascript:` here can never
  * resurrect it). Omitting `sanitize`, or `allowedProtocols`, keeps today's
- * defaults untouched. This is independent of the "raw HTML is always escaped"
- * guarantee, which has no opt-out.
+ * defaults untouched. This is independent of how raw HTML is disposed of,
+ * which `rawHtml` governs separately; raw HTML is never inserted as markup
+ * either way, so neither option can widen what renders.
  */
 export type MarkdownSanitizeOptions = {
     /**
@@ -58,9 +59,8 @@ export type MarkdownSanitizeOptions = {
      * `'blockquote'`, `'ul'`, `'ol'`, `'table'`, `'hr'`, and `'h1'`–`'h6'`. An
      * unrecognised name is simply ignored — it narrows nothing, it does not
      * error. Omitting `allowedTags` keeps today's defaults untouched: every tag
-     * renders as it does now. This is independent of the "raw HTML is always
-     * escaped" guarantee, which has no opt-out and is never affected by this
-     * list.
+     * renders as it does now. This list governs markdown-GENERATED tags only and
+     * never affects raw HTML from the source, whose disposal is `rawHtml`'s job.
      */
     allowedTags?: string[];
     /**
@@ -71,15 +71,35 @@ export type MarkdownSanitizeOptions = {
      * safety one. Defaults to `false`, keeping today's checkbox rendering.
      */
     disableTaskLists?: boolean;
+    /**
+     * What to do with raw HTML typed literally into the markdown source, as
+     * opposed to the tags markdown itself generates (which `allowedTags`
+     * governs). Defaults to `'escape'` — today's behaviour, where
+     * `<script>alert(1)</script>` renders as visible escaped tag text.
+     *
+     * `'strip'` removes raw tags and comments while retaining their text:
+     * `<div>hello</div>` becomes `hello`. An inert HTML parser handles quoted
+     * delimiters and entities; every retained text node is escaped before output.
+     * Script/style contents remain visible text, never executable elements.
+     * Fenced code and ordinary angle-bracket prose are not raw HTML tokens and
+     * keep their existing rendering. Neither mode inserts source HTML into the DOM.
+     */
+    rawHtml?: MarkdownRawHtmlMode;
 };
+/**
+ * `'escape'` renders raw HTML as visible escaped text (the default, and what
+ * the component has always done); `'strip'` removes it. See
+ * `MarkdownSanitizeOptions.rawHtml`.
+ */
+export type MarkdownRawHtmlMode = 'escape' | 'strip';
 export type RenderMarkdownOptions = {
     /** Render single newlines as `<br>` (GFM "breaks" mode). */
     breaks?: boolean;
     /**
      * Parse as inline markdown: no block elements (`<p>`, lists, tables) are
      * produced, so the output can sit inside an existing `<p>` or `<span>`.
-     * The same sanitization applies — inline raw HTML is escaped and unsafe
-     * link/image protocols are stripped.
+     * The same sanitization applies — inline raw HTML is escaped (or dropped,
+     * per `sanitize.rawHtml`) and unsafe link/image protocols are stripped.
      */
     inline?: boolean;
     /** Accessible name for the scroll region wrapping each table. See `MarkdownTextProperties.tableLabel`. */

package/dist/Snippet/Snippet.svelte

@@ -3,7 +3,7 @@
   import type { SnippetProperties } from './properties';
   import Button from '../Button/Button.svelte';
   import copySvg from '../assets/copy.svg?raw';
-  import { createCopyResetTimer } from './copyResetTimer';
+  import { createCopyState } from './copyState.svelte';
 
   let {
     text,
@@ -17,29 +17,25 @@
     classes
   }: SnippetProperties = $props();
 
-  let copied = $state(false);
-
-  // The reset timer used to be a bare setTimeout with nothing clearing it: a
-  // second copy before the first one's timer fired left two timers racing to
-  // flip `copied`, and navigating away mid-flash left the timer armed against
-  // a destroyed component. `createCopyResetTimer` (unit-tested on its own in
-  // copyResetTimer.test.ts) guarantees only one timer is ever pending, and
-  // onDestroy guarantees it never outlives the component it targets.
-  const resetTimer = createCopyResetTimer();
-  onDestroy(resetTimer.cancel);
-
-  async function handleCopy() {
-    try {
-      await navigator.clipboard.writeText(text);
-      copied = true;
-      oncopy?.();
-      resetTimer.arm(() => {
-        copied = false;
-      }, copyResetMs);
-    } catch {
-      // Clipboard API unavailable (non-secure context, iframe restrictions)
+  // The whole copy affordance -- clipboard write, `copied` flag, the reset
+  // timer's single-pending guarantee from #530, and teardown -- lives in
+  // `createCopyState` so a consumer who wants the behaviour without this
+  // component's `<code>` box can have it (#574). Getters rather than plain
+  // values, because the factory reads its options at copy time and these are
+  // props: passing them by value would freeze whatever they were at mount.
+  const copyState = createCopyState({
+    get copyResetMs() {
+      return copyResetMs;
+    },
+    get oncopy() {
+      return oncopy;
     }
-  }
+  });
+  onDestroy(copyState.destroy);
+
+  const handleCopy = (): void => {
+    void copyState.copy(text);
+  };
 </script>
 
 <div
@@ -53,9 +49,13 @@
   </code>
   {#if showCopyButton}
     <div class="snippet-copy">
-      <Button onclick={handleCopy} ariaLabel="Copy to clipboard">
-        {#if copied}
-          <span class="snippet-copied" aria-live="polite">{copiedLabel}</span>
+      <!-- The label is only supplied while the button shows an icon and has no
+           visible text of its own. Keeping it once the label swaps to
+           "Copied!" would leave a screen reader announcing "Copy to clipboard"
+           over the visible feedback (WCAG 2.5.3, Label in Name). -->
+      <Button onclick={handleCopy} {...copyState.copied ? {} : { ariaLabel: 'Copy to clipboard' }}>
+        {#if copyState.copied}
+          <span class="snippet-copied">{copiedLabel}</span>
         {:else if typeof copyIcon === 'function'}
           {@render copyIcon()}
         {:else}
@@ -64,6 +64,13 @@
         {/if}
       </Button>
     </div>
+    <!-- A live region has to be in the DOM *before* its text changes, or many
+         screen-reader/browser pairs never announce it. The visible label is
+         swapped inside the button, so the announcement lives here instead:
+         always rendered, outside the button, with only its text changing. -->
+    <span class="snippet-status" role="status" aria-live="polite"
+      >{copyState.copied ? copiedLabel : ''}</span
+    >
   {/if}
 </div>
 
@@ -132,6 +139,20 @@
     height: 100%;
   }
 
+  /* Announced, never shown: the visible "Copied!" is the label inside the
+     button, and repeating it on screen would read as a duplicate. */
+  .snippet-status {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
+
   .snippet-copied {
     color: var(--snippet-copied-color, #4caf50);
     font-size: var(--snippet-copied-font-size, 12px);

package/dist/Snippet/copyState.svelte.d.ts

@@ -0,0 +1,47 @@
+/**
+ * The copy-and-flash affordance behind `Snippet`, without its presentation.
+ *
+ * `Snippet` couples two separable things: this state machine — clipboard
+ * write, `copied` flag, reset timer, teardown — and a `<code>` box with a
+ * `$`-style prompt. A consumer who wants "copy this value" beside arbitrary
+ * content (a hostname in a settings row, a token, a URL) could take only the
+ * pair, so the affordance got hand-rolled outside the library instead. That
+ * is how the timer safety added in #530 failed to reach the surfaces most
+ * likely to need it: a duplicate has its own bare `setTimeout` and its own
+ * bugs.
+ *
+ * Extracted as a headless factory rather than a Svelte action because the
+ * caller has to *render* from `copied` — swapping a label for an icon — and
+ * an action can attach behaviour to an element but cannot hand state back to
+ * the template. The split follows `Tooltip/tooltip-action.ts`, which likewise
+ * keeps timing logic outside the component that uses it.
+ *
+ * Options are read at copy time, not captured at creation, so a caller with
+ * reactive values can pass getters:
+ *
+ * ```ts
+ * const state = createCopyState({
+ *   get copyResetMs() { return copyResetMs; },
+ *   get oncopy() { return oncopy; }
+ * });
+ * ```
+ */
+export type CopyStateOptions = {
+    /** Milliseconds before `copied` reverts. Defaults to `2000`. */
+    copyResetMs?: number;
+    /** Called once per successful copy. Never called when the write fails. */
+    oncopy?: () => void;
+};
+export type CopyState = {
+    /** True from a successful copy until the reset delay elapses. */
+    readonly copied: boolean;
+    /**
+     * Writes `text` to the clipboard. Resolves `true` on success, `false` if
+     * the clipboard was unavailable or refused — it never rejects, so a caller
+     * needs no try/catch of its own.
+     */
+    copy: (text: string) => Promise<boolean>;
+    /** Cancels any pending reset. Call from the owner's teardown. */
+    destroy: () => void;
+};
+export declare function createCopyState(options?: CopyStateOptions): CopyState;

package/dist/Snippet/copyState.svelte.js

@@ -0,0 +1,69 @@
+import { createCopyResetTimer } from './copyResetTimer';
+const DEFAULT_COPY_RESET_MS = 2000;
+/**
+ * The type says `number`, but a plain-JS or web-component caller can pass
+ * anything, and a getter can throw. Either would reach `setTimeout` as `NaN`
+ * — which fires immediately, so the feedback never appears — or leave the
+ * flag stuck on with no timer at all. An unusable delay must degrade to the
+ * default rather than break the affordance it controls.
+ */
+function resolveResetDelay(options) {
+    let requested;
+    try {
+        requested = options.copyResetMs;
+    }
+    catch {
+        return DEFAULT_COPY_RESET_MS;
+    }
+    if (typeof requested !== 'number' || !Number.isFinite(requested) || requested < 0) {
+        return DEFAULT_COPY_RESET_MS;
+    }
+    return requested;
+}
+export function createCopyState(options = {}) {
+    let copied = $state(false);
+    let destroyed = false;
+    const resetTimer = createCopyResetTimer();
+    return {
+        get copied() {
+            return copied;
+        },
+        async copy(text) {
+            if (destroyed) {
+                return false;
+            }
+            try {
+                await navigator.clipboard.writeText(text);
+            }
+            catch {
+                /* Clipboard unavailable: non-secure context, sandboxed iframe, or a
+                   permission refusal. Reporting success here — and flashing "Copied!"
+                   over a clipboard that never received the text — is the one outcome
+                   worse than showing no feedback at all. */
+                return false;
+            }
+            // The clipboard promise can settle after its owner has unmounted.
+            if (destroyed) {
+                return false;
+            }
+            // Resolved before the flag is set, so a throwing getter cannot leave
+            // `copied` true with nothing armed to clear it.
+            const delay = resolveResetDelay(options);
+            copied = true;
+            resetTimer.arm(() => {
+                copied = false;
+            }, delay);
+            try {
+                options.oncopy?.();
+            }
+            catch {
+                // A notification callback cannot undo the successful clipboard write.
+            }
+            return true;
+        },
+        destroy() {
+            destroyed = true;
+            resetTimer.cancel();
+        }
+    };
+}

package/dist/index.d.ts

@@ -102,6 +102,7 @@ export { default as Gallery } from './Gallery/Gallery.svelte';
 export { ChatController } from './Chat/controller.svelte';
 export { partyOf } from './Chat/roles';
 export { SpeechToTextController } from './SpeechToText/controller.svelte';
+export { createCopyState } from './Snippet/copyState.svelte';
 export type * from './Button/properties';
 export type * from './Modal/properties';
 export type * from './Input/properties';
@@ -139,6 +140,7 @@ export type * from './Progress/properties';
 export type * from './Pill/properties';
 export type * from './Pagination/properties';
 export type * from './Snippet/properties';
+export type * from './Snippet/copyState.svelte';
 export type * from './Gauge/properties';
 export type * from './SplitButton/properties';
 export type * from './KeyboardInput/properties';

package/dist/index.js

@@ -102,6 +102,7 @@ export { default as Gallery } from './Gallery/Gallery.svelte';
 export { ChatController } from './Chat/controller.svelte';
 export { partyOf } from './Chat/roles';
 export { SpeechToTextController } from './SpeechToText/controller.svelte';
+export { createCopyState } from './Snippet/copyState.svelte';
 export { createSoundKit } from './SoundKit/SoundKit';
 export { validateInput, lockBodyScroll, unlockBodyScroll } from './utils';
 export { formatNumberIndian } from './_chart/format';