The BaseExample component (Example.svelte) provides a lightweight markdown preview component with text truncation functionality. It's specifically designed for gallery and table displays where space is limited and only a preview of the content is needed.
Compact preview component with text truncation for space-constrained displays.
/**
* Compact markdown preview component with text truncation
* Optimized for gallery and table display contexts
*/
export default class BaseExampleComponent extends SvelteComponent<BaseExampleProps, BaseExampleEvents, BaseExampleSlots>;
interface BaseExampleProps {
/** Markdown content to render (nullable for empty states) */
value: string | null;
/** Display type affecting layout styling */
type: "gallery" | "table";
/** Selection state for interactive displays */
selected?: 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[];
}
interface BaseExampleEvents {}
interface BaseExampleSlots {}Built-in text truncation functionality for preview displays.
/**
* Truncates text to specified maximum length with ellipsis
* Safely handles null values and preserves short text unchanged
*
* @param text - Input text to truncate (can be null)
* @param max_length - Maximum character length before truncation (default: 60)
* @returns Truncated string with "..." suffix if truncated, or original text
*/
function truncate_text(text: string | null, max_length?: number): string;import { BaseExample } from "@gradio/markdown";
// Gallery preview with truncated content
<BaseExample
value="This is a long markdown content that will be truncated for gallery display..."
type="gallery"
selected={false}
sanitize_html={true}
line_breaks={false}
latex_delimiters={[]}
/><BaseExample
value="# Header\n\nSome content for table preview"
type="table"
selected={true}
sanitize_html={true}
line_breaks={false}
latex_delimiters={[]}
/>// Handles null/empty values gracefully
<BaseExample
value={null}
type="gallery"
selected={false}
sanitize_html={true}
line_breaks={false}
latex_delimiters={[]}
/>
// Renders empty content safely<BaseExample
value="Preview of equation: $E = mc^2$ and more complex math..."
type="gallery"
selected={false}
sanitize_html={true}
line_breaks={false}
latex_delimiters={[
{ left: "$", right: "$", display: false }
]}
/>// The truncate_text function can be used with custom lengths
// Component internally uses default 60 character limit
<BaseExample
value="Very long content that gets truncated at 60 characters by default..."
type="table"
selected={false}
sanitize_html={true}
line_breaks={false}
latex_delimiters={[]}
/>
// Displays: "Very long content that gets truncated at 60 characters by..."Optimized for grid-based gallery layouts with compact card-style presentation.
/* Applied when type="gallery" */
.gallery {
padding: var(--size-1) var(--size-2);
}Optimized for tabular data display with minimal styling for clean row presentation.
/* Applied when type="table" */
.table {
/* Minimal styling for table context */
}Visual feedback for interactive selection scenarios:
/* Applied when selected={true} */
.selected {
/* Selection styling applied via CSS class */
}The truncate_text utility function provides consistent text truncation:
// Examples of truncation behavior
truncate_text("Short text", 60); // Returns: "Short text"
truncate_text("Very long text that exceeds sixty characters and should be truncated", 60);
// Returns: "Very long text that exceeds sixty characters and should be..."
truncate_text(null, 60); // Returns: ""
truncate_text("", 60); // Returns: ""Like other components in the package, BaseExample supports HTML sanitization:
sanitize_html={true} - Removes potentially dangerous HTML elementssanitize_html={false} - Preserves HTML content (use only with trusted sources)The component uses @gradio/markdown-code for actual markdown rendering:
import { MarkdownCode } from "@gradio/markdown-code";
// Internal rendering call
<MarkdownCode
message={truncate_text(value)}
latex_delimiters={latex_delimiters}
sanitize_html={sanitize_html}
line_breaks={line_breaks}
chatbot={false}
/>The chatbot={false} parameter ensures the component renders in standard mode rather than chat-optimized mode.
The component applies conditional CSS classes:
.prose {
/* Base prose styling */
}
.table {
/* Table-specific styling */
}
.gallery {
/* Gallery-specific styling with padding */
padding: var(--size-1) var(--size-2);
}
.selected {
/* Selection state styling */
}The component is designed to work within constrained spaces:
Display markdown content in table cells with consistent truncation:
{#each items as item}
<tr>
<td>
<BaseExample
value={item.description}
type="table"
selected={selectedItem === item.id}
sanitize_html={true}
line_breaks={false}
latex_delimiters={[]}
/>
</td>
</tr>
{/each}Preview cards in image/content galleries:
{#each gallery_items as item}
<div class="gallery-card">
<BaseExample
value={item.caption}
type="gallery"
selected={false}
sanitize_html={true}
line_breaks={false}
latex_delimiters={[]}
/>
</div>
{/each}Content previews in list interfaces:
{#each previews as preview}
<li>
<BaseExample
value={preview.content}
type="table"
selected={false}
sanitize_html={true}
line_breaks={false}
latex_delimiters={[]}
/>
</li>
{/each}