tessl/npm-gradio--markdown

Svelte-based Markdown rendering component with LaTeX support, HTML sanitization, and code highlighting for Gradio UI applications

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Example Component

Name: tessl/npm-gradio--markdown
Author: tessl

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.

Capabilities

BaseExample Component

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 {}

Text Truncation Utility

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;

Usage Examples

Gallery Display

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={[]}
/>

Table Display

<BaseExample
  value="# Header\n\nSome content for table preview"
  type="table"
  selected={true}
  sanitize_html={true}
  line_breaks={false}
  latex_delimiters={[]}
/>

Empty State Handling

// Handles null/empty values gracefully
<BaseExample
  value={null}
  type="gallery"
  selected={false}
  sanitize_html={true}
  line_breaks={false}
  latex_delimiters={[]}
/>
// Renders empty content safely

LaTeX Preview

<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 }
  ]}
/>

Custom Truncation Length

// 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..."

Display Types

Gallery Type

Optimized for grid-based gallery layouts with compact card-style presentation.

/* Applied when type="gallery" */
.gallery {
  padding: var(--size-1) var(--size-2);
}

Table Type

Optimized for tabular data display with minimal styling for clean row presentation.

/* Applied when type="table" */
.table {
  /* Minimal styling for table context */
}

Selection States

Visual feedback for interactive selection scenarios:

/* Applied when selected={true} */
.selected {
  /* Selection styling applied via CSS class */
}

Text Processing

Truncation Behavior

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: ""

Content Sanitization

Like other components in the package, BaseExample supports HTML sanitization:

sanitize_html={true} - Removes potentially dangerous HTML elements
sanitize_html={false} - Preserves HTML content (use only with trusted sources)

Integration with MarkdownCode

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.

Styling Integration

CSS Classes

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 */
}

Responsive Design

The component is designed to work within constrained spaces:

Gallery mode includes padding for card-like appearance
Table mode uses minimal styling for density
Text truncation prevents overflow in tight layouts

Performance Characteristics

Lightweight Design

No event dispatching or complex state management
Single utility function for text processing
Minimal DOM structure for fast rendering

Memory Efficiency

No timers or cleanup requirements
Stateless functional approach to text truncation
Efficient string processing with early returns

Render Optimization

Uses reactive statements only for essential updates
Minimal re-rendering when props change
Optimized for list/grid contexts with many instances

Use Cases

Data Tables

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}

Content Galleries

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}

Preview Lists

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}

docs

tessl/npm-gradio--markdown