Base Markdown Component

/**
 * Base markdown component providing core rendering functionality
 * Independent of Gradio framework for maximum reusability
 */
export default class BaseMarkdownComponent extends SvelteComponent<BaseMarkdownProps, BaseMarkdownEvents, BaseMarkdownSlots>;

interface BaseMarkdownProps {
  /** Array of CSS classes to apply */
  elem_classes?: string[];
  /** Controls component visibility */
  visible?: boolean;
  /** Markdown content to render */
  value: string;
  /** Minimum height constraint */
  min_height?: number | string | undefined;
  /** Enable right-to-left text direction */
  rtl?: boolean;
  /** Enable HTML sanitization for security */
  sanitize_html?: boolean;
  /** Preserve line breaks in content */
  line_breaks?: boolean;
  /** LaTeX delimiter configuration for math rendering */
  latex_delimiters: LatexDelimiter[];
  /** Generate clickable header links */
  header_links?: boolean;
  /** Component height constraint */
  height?: number | string | undefined;
  /** Show copy-to-clipboard button */
  show_copy_button?: boolean;
  /** Loading status for conditional styling */
  loading_status?: LoadingStatus | undefined;
  /** Theme mode for styling context */
  theme_mode: ThemeMode;
}

interface BaseMarkdownEvents {
  /** Dispatched when content changes */
  change: CustomEvent<undefined>;
  /** Dispatched when content is copied */
  copy: CustomEvent<CopyData>;
}

interface BaseMarkdownSlots {}

/**
 * Handles copying content to clipboard
 * Uses modern Clipboard API with fallback support
 * @returns Promise that resolves when copy completes
 */
async function handle_copy(): Promise<void>;

/**
 * Provides visual feedback for copy operations
 * Shows temporary confirmation state for 1 second
 */
function copy_feedback(): void;

import { BaseMarkdown } from "@gradio/markdown";

// Simple markdown rendering
<BaseMarkdown
  elem_classes={["prose"]}
  visible={true}
  value="# Hello World\n\nThis is **bold** and this is *italic*."
  min_height="100px"
  rtl={false}
  sanitize_html={true}
  line_breaks={false}
  latex_delimiters={[]}
  header_links={false}
  height={undefined}
  show_copy_button={false}
  loading_status={undefined}
  theme_mode="light"
/>

<BaseMarkdown
  value="Einstein's equation: $E = mc^2$\n\n$$\\int_0^\\infty e^{-x^2} dx = \\frac{\\sqrt{\\pi}}{2}$$"
  latex_delimiters={[
    { left: "$", right: "$", display: false },    // Inline math
    { left: "$$", right: "$$", display: true }    // Display math
  ]}
  sanitize_html={true}
  line_breaks={false}
  theme_mode="light"
  on:change={() => console.log("Content changed")}
/>

<BaseMarkdown
  value="This content can be copied to clipboard"
  show_copy_button={true}
  latex_delimiters={[]}
  theme_mode="light"
  on:copy={(event) => {
    console.log("Copied to clipboard:", event.detail.value);
    // Handle copy event - perhaps show toast notification
  }}
/>

<BaseMarkdown
  value="مرحبا بالعالم - هذا نص عربي"
  rtl={true}
  elem_classes={["rtl-content"]}
  visible={true}
  latex_delimiters={[]}
  theme_mode="light"
/>

<BaseMarkdown
  value={longMarkdownContent}
  height="300px"
  min_height="150px"
  elem_classes={["scrollable-content"]}
  visible={true}
  latex_delimiters={[]}
  theme_mode="light"
/>

// Safe rendering with sanitization (recommended)
<BaseMarkdown
  value="<script>alert('xss')</script># Safe Content\n\nOnly **markdown** allowed."
  sanitize_html={true}
  latex_delimiters={[]}
  theme_mode="light"
/>

// Allow HTML (use with trusted content only)
<BaseMarkdown
  value="<div class='custom'>Custom <em>HTML</em> content</div>"
  sanitize_html={false}
  latex_delimiters={[]}
  theme_mode="light"
/>

<BaseMarkdown
  value={markdownContent}
  latex_delimiters={[]}
  theme_mode="light"
  on:change={() => {
    // Triggered whenever the value prop changes
    // Useful for analytics or state synchronization
  }}
/>

<BaseMarkdown
  value="Content to copy"
  show_copy_button={true}
  latex_delimiters={[]}
  theme_mode="light"
  on:copy={(event) => {
    const { value } = event.detail;
    // Handle successful copy
    showToast(`Copied ${value.length} characters`);
  }}
/>

/* Height and spacing */
--size-1-5: 0.375rem;
--size-1: 0.25rem;

/* Colors for math expressions */
--body-text-color: #333;

/* Inline math expressions */
:global(.math.inline) {
  fill: var(--body-text-color);
  display: inline-block;
  vertical-align: middle;
  padding: var(--size-1-5) -var(--size-1);
  color: var(--body-text-color);
}

/* Math SVG elements */
:global(.math.inline svg) {
  display: inline;
  margin-bottom: 0.22em;
}

$: value, dispatch("change"); // Only re-render when value changes

if (timer) clearTimeout(timer); // Cleanup previous timer
timer = setTimeout(() => {
  copied = false;
}, 1000);