Main Markdown Component

/**
 * Main Gradio-integrated markdown component
 * Provides full markdown rendering with Gradio framework integration
 */
export default class MarkdownComponent extends SvelteComponent<MarkdownProps, MarkdownEvents, MarkdownSlots>;

interface MarkdownProps {
  /** HTML element ID for the component */
  elem_id?: string;
  /** Array of CSS classes to apply */
  elem_classes?: string[];
  /** Controls component visibility */
  visible?: boolean;
  /** Markdown content to render */
  value?: string;
  /** Loading status for UI feedback */
  loading_status: LoadingStatus;
  /** Enable right-to-left text direction */
  rtl?: boolean;
  /** Enable HTML sanitization for security */
  sanitize_html?: boolean;
  /** Preserve line breaks in content */
  line_breaks?: boolean;
  /** Gradio instance for event handling and integration */
  gradio: Gradio<{
    change: never;
    copy: CopyData;
    clear_status: LoadingStatus;
  }>;
  /** LaTeX delimiter configuration for math rendering */
  latex_delimiters: LatexDelimiter[];
  /** Generate clickable header links */
  header_links?: boolean;
  /** Component height constraint */
  height?: number | string | undefined;
  /** Minimum height constraint */
  min_height?: number | string | undefined;
  /** Maximum height constraint */
  max_height?: number | string | undefined;
  /** Show copy-to-clipboard button */
  show_copy_button?: boolean;
  /** Enable container styling */
  container?: boolean;
  /** Theme mode for styling */
  theme_mode: ThemeMode;
  /** Enable padding around content */
  padding?: boolean;
}

interface MarkdownEvents {
  /** Dispatched when content changes */
  change: CustomEvent<never>;
  /** Dispatched when content is copied */
  copy: CustomEvent<CopyData>;
  /** Dispatched to clear loading status */
  clear_status: CustomEvent<LoadingStatus>;
}

interface MarkdownSlots {}

/**
 * Re-export of the base markdown component
 * Provides core functionality without Gradio wrapper
 */
export { default as BaseMarkdown } from "./shared/Markdown.svelte";

/**
 * Re-export of the example component
 * Provides compact preview functionality
 */
export { default as BaseExample } from "./Example.svelte";

import Markdown from "@gradio/markdown";
import type { LoadingStatus } from "@gradio/statustracker";
import type { Gradio } from "@gradio/utils";

// Component usage in Svelte
<Markdown
  elem_id="main-content"
  elem_classes={["prose", "dark:prose-invert"]}
  visible={true}
  value="# Welcome\n\nThis is **bold** text with `code`."
  loading_status={loadingStatus}
  rtl={false}
  sanitize_html={true}
  line_breaks={false}
  gradio={gradioInstance}
  latex_delimiters={[]}
  header_links={false}
  height="400px"
  min_height="200px"
  max_height="600px"
  show_copy_button={false}
  container={true}
  theme_mode="light"
  padding={true}
/>

<Markdown
  value="The Pythagorean theorem: $a^2 + b^2 = c^2$"
  latex_delimiters={[
    { left: "$", right: "$", display: false },
    { left: "$$", right: "$$", display: true }
  ]}
  gradio={gradioInstance}
/>

<Markdown
  value="Content that can be copied to clipboard"
  show_copy_button={true}
  gradio={gradioInstance}
  on:copy={(event) => {
    console.log("Copied:", event.detail.value);
  }}
/>

<Markdown
  value={longContent}
  height="300px"
  min_height="150px"
  max_height="500px"
  container={true}
  gradio={gradioInstance}
/>

import type { Gradio, CopyData } from "@gradio/utils";
import type { LoadingStatus } from "@gradio/statustracker";

const gradioInstance: Gradio<{
  change: never;
  copy: CopyData;
  clear_status: LoadingStatus;
}> = {
  dispatch: (event, data) => {
    // Handle Gradio events
  },
  autoscroll: boolean,
  i18n: I18nFormatter,
  // ... other Gradio configuration
};

/* Component uses these CSS variables */
--block-padding: 1rem;
--body-text-color: #000;
--size-1: 0.25rem;
--size-1-5: 0.375rem;
--size-2: 0.5rem;

// Listen for component events
<Markdown
  gradio={gradioInstance}
  on:change={() => {
    // Content changed
  }}
  on:copy={(event) => {
    // Content copied: event.detail.value
  }}
  on:clear_status={() => {
    // Loading status cleared
  }}
/>