mdx/

component.rs

use crate::error::Error;
use crate::parser::{Alignment, InlineNode, Node};
use std::collections::HashMap;

/// Trait for custom markdown components
pub trait Component {
    /// The name of the component as used in markdown
    fn name(&self) -> &str;

    /// Render the component to HTML
    fn render(
        &self,
        attributes: &HashMap<String, String>,
        children: &[Node],
    ) -> Result<String, Error>;

    /// Process any CSS needed for the component
    fn css(&self) -> Option<String> {
        None
    }
}

/// Registry for custom components
pub struct ComponentRegistry {
    components: HashMap<String, Box<dyn Component>>,
}

impl ComponentRegistry {
    /// Create a new component registry
    pub fn new() -> Self {
        Self {
            components: HashMap::new(),
        }
    }

    /// Register a component
    pub fn register<C: Component + 'static>(&mut self, component: C) {
        self.components
            .insert(component.name().to_string(), Box::new(component));
    }

    /// Get a component by name
    pub fn get(&self, name: &str) -> Option<&dyn Component> {
        self.components.get(name).map(|c| c.as_ref())
    }

    /// Check if a component exists
    pub fn contains(&self, name: &str) -> bool {
        self.components.contains_key(name)
    }

    /// Get all CSS for registered components
    pub fn get_all_css(&self) -> String {
        self.components
            .values()
            .filter_map(|c| c.css())
            .collect::<Vec<_>>()
            .join("\n\n")
    }
}

// Helper function to render nodes to HTML
fn render_nodes_to_html(nodes: &[Node]) -> Result<String, Error> {
    let mut html = String::new();

    for node in nodes {
        match node {
            Node::Paragraph(inline_nodes) => {
                html.push_str("<p>");
                for inline_node in inline_nodes {
                    html.push_str(&render_inline_node(inline_node)?);
                }
                html.push_str("</p>\n");
            }
            Node::Heading { level, content, id } => {
                html.push_str(&format!(
                    "<h{0} id=\"{1}\">{2}</h{0}>\n",
                    level, id, content
                ));
            }
            Node::BlockQuote(children) => {
                html.push_str("<blockquote>\n");
                html.push_str(&render_nodes_to_html(children)?);
                html.push_str("</blockquote>\n");
            }
            Node::CodeBlock {
                language, content, ..
            } => {
                if let Some(lang) = language {
                    html.push_str(&format!(
                        "<pre><code class=\"language-{}\">{}\n</code></pre>\n",
                        lang, content
                    ));
                } else {
                    html.push_str(&format!("<pre><code>{}\n</code></pre>\n", content));
                }
            }
            Node::List { ordered, items } => {
                if *ordered {
                    html.push_str("<ol>\n");
                } else {
                    html.push_str("<ul>\n");
                }

                for item in items {
                    html.push_str("<li>");
                    html.push_str(&render_nodes_to_html(item)?);
                    html.push_str("</li>\n");
                }

                if *ordered {
                    html.push_str("</ol>\n");
                } else {
                    html.push_str("</ul>\n");
                }
            }
            Node::ThematicBreak => {
                html.push_str("<hr>\n");
            }
            Node::Html(content) => {
                html.push_str(content);
                html.push('\n');
            }
            Node::Table {
                headers,
                rows,
                alignments,
            } => {
                html.push_str("<table class=\"markrust-table\">\n");

                // Table header
                html.push_str("<thead>\n<tr>\n");
                for (i, header) in headers.iter().enumerate() {
                    let align_class = if i < alignments.len() {
                        match alignments[i] {
                            Alignment::Left => " class=\"align-left\"",
                            Alignment::Center => " class=\"align-center\"",
                            Alignment::Right => " class=\"align-right\"",
                            Alignment::None => "",
                        }
                    } else {
                        ""
                    };

                    html.push_str(&format!("<th{}>\n", align_class));
                    for inline_node in header {
                        html.push_str(&render_inline_node(inline_node)?);
                    }
                    html.push_str("</th>\n");
                }
                html.push_str("</tr>\n</thead>\n");

                // Table body
                html.push_str("<tbody>\n");
                for row in rows {
                    html.push_str("<tr>\n");
                    for (i, cell) in row.iter().enumerate() {
                        let align_class = if i < alignments.len() {
                            match alignments[i] {
                                Alignment::Left => " class=\"align-left\"",
                                Alignment::Center => " class=\"align-center\"",
                                Alignment::Right => " class=\"align-right\"",
                                Alignment::None => "",
                            }
                        } else {
                            ""
                        };

                        html.push_str(&format!("<td{}>\n", align_class));
                        for inline_node in cell {
                            html.push_str(&render_inline_node(inline_node)?);
                        }
                        html.push_str("</td>\n");
                    }
                    html.push_str("</tr>\n");
                }
                html.push_str("</tbody>\n</table>\n");
            }
            Node::Component {
                name: _,
                attributes: _,
                children,
            } => {
                // This typically would use the component registry but here we'll just render the children
                html.push_str(&render_nodes_to_html(children)?);
            }
        }
    }

    Ok(html)
}

// Helper function to render inline nodes to HTML
fn render_inline_node(node: &InlineNode) -> Result<String, Error> {
    match node {
        InlineNode::Text(text) => Ok(text.to_string()),
        InlineNode::Emphasis(children) => {
            let mut html = String::from("<em>");
            for child in children {
                html.push_str(&render_inline_node(child)?);
            }
            html.push_str("</em>");
            Ok(html)
        }
        InlineNode::Strong(children) => {
            let mut html = String::from("<strong>");
            for child in children {
                html.push_str(&render_inline_node(child)?);
            }
            html.push_str("</strong>");
            Ok(html)
        }
        InlineNode::Strikethrough(children) => {
            let mut html = String::from("<del>");
            for child in children {
                html.push_str(&render_inline_node(child)?);
            }
            html.push_str("</del>");
            Ok(html)
        }
        InlineNode::Link { text, url, title } => {
            let title_attr = if let Some(title) = title {
                format!(" title=\"{}\"", title)
            } else {
                String::new()
            };

            let mut html = format!("<a href=\"{}\"{}>", url, title_attr);
            for child in text {
                html.push_str(&render_inline_node(child)?);
            }
            html.push_str("</a>");
            Ok(html)
        }
        InlineNode::Image { alt, url, title } => {
            let title_attr = if let Some(title) = title {
                format!(" title=\"{}\"", title)
            } else {
                String::new()
            };

            Ok(format!(
                "<img src=\"{}\" alt=\"{}\"{}>",
                url, alt, title_attr
            ))
        }
        InlineNode::Code(code) => Ok(format!("<code>{}</code>", code)),
        InlineNode::LineBreak => Ok(String::from("<br>")),
        InlineNode::Html(html) => Ok(html.to_string()),
    }
}

impl Default for ComponentRegistry {
    fn default() -> Self {
        let mut registry = Self::new();

        // Register built-in components
        registry.register(AlertComponent::new());
        registry.register(TabsComponent::new());
        registry.register(DetailsComponent::new());
        registry.register(CardComponent::new());
        registry.register(TimelineComponent::new());
        registry.register(CalloutComponent::new());
        registry.register(GridComponent::new());

        registry
    }
}

// Built-in component implementations

/// Alert component for displaying info, warning, success or error messages
pub struct AlertComponent;

impl Default for AlertComponent {
    fn default() -> Self {
        Self::new()
    }
}

impl AlertComponent {
    pub fn new() -> Self {
        Self
    }
}

impl Component for AlertComponent {
    fn name(&self) -> &str {
        "alert"
    }

    fn render(
        &self,
        attributes: &HashMap<String, String>,
        children: &[Node],
    ) -> Result<String, Error> {
        let binding = "info".to_string();
        let alert_type = attributes.get("type").unwrap_or(&binding);

        // Render the children to HTML using a simple renderer
        let content = if !children.is_empty() {
            render_nodes_to_html(children)?
        } else {
            // For HTML comment-based components where children can't be properly passed
            "This is an alert. In a real implementation, this would contain content.".to_string()
        };

        Ok(format!(
            r#"<div class="markrust-alert markrust-alert-{}">{}</div>"#,
            alert_type, content
        ))
    }

    fn css(&self) -> Option<String> {
        Some(
            r#"
/* Alert component styles */
.markrust-alert {
  padding: 1rem;
  border-radius: 0.375rem;
  margin-bottom: 1rem;
}

.markrust-alert-info {
  background-color: var(--info-light-color, #e0f7fa);
  border-left: 4px solid var(--info-color, #03a9f4);
}

.markrust-alert-warning {
  background-color: var(--warning-light-color, #fff8e1);
  border-left: 4px solid var(--warning-color, #ffc107);
}

.markrust-alert-error {
  background-color: var(--error-light-color, #ffebee);
  border-left: 4px solid var(--error-color, #f44336);
}

.markrust-alert-success {
  background-color: var(--success-light-color, #e8f5e9);
  border-left: 4px solid var(--success-color, #4caf50);
}
        "#
            .to_string(),
        )
    }
}

/// Tabs component for tabbed content
pub struct TabsComponent;

impl Default for TabsComponent {
    fn default() -> Self {
        Self::new()
    }
}

impl TabsComponent {
    pub fn new() -> Self {
        Self
    }
}

impl Component for TabsComponent {
    fn name(&self) -> &str {
        "tabs"
    }

    fn render(
        &self,
        _attributes: &HashMap<String, String>,
        children: &[Node],
    ) -> Result<String, Error> {
        // Process children to extract tab contents
        let mut tab_headers = Vec::new();
        let mut tab_contents = Vec::new();
        let mut tab_id = 1;

        if !children.is_empty() {
            for child in children {
                if let Node::Component {
                    name,
                    attributes,
                    children,
                } = child
                {
                    if name == "tab" {
                        let tab_label = format!("Tab {}", tab_id);
                        let label = attributes.get("label").unwrap_or(&tab_label);
                        let tab_id_str = format!("tab{}", tab_id);

                        let active_class = if tab_id == 1 { "active" } else { "" };
                        tab_headers.push(format!(
                            r#"<button class="markrust-tab-button {}" data-tab="{}">{}"#,
                            active_class, tab_id_str, label
                        ));

                        let content = render_nodes_to_html(children)?;
                        tab_contents.push(format!(
                            r#"<div class="markrust-tab-panel {}" id="{}">{}"#,
                            active_class, tab_id_str, content
                        ));

                        tab_id += 1;
                    }
                }
            }
        } else {
            // Default tabs when no children are provided
            tab_headers.push(
                r#"<button class="markrust-tab-button active" data-tab="tab1">Overview</button>"#
                    .to_string(),
            );
            tab_headers.push(
                r#"<button class="markrust-tab-button" data-tab="tab2">Details</button>"#
                    .to_string(),
            );

            tab_contents.push(r#"<div class="markrust-tab-panel active" id="tab1">Tab content for overview.</div>"#.to_string());
            tab_contents.push(
                r#"<div class="markrust-tab-panel" id="tab2">Tab content for details.</div>"#
                    .to_string(),
            );
        }

        Ok(format!(
            r#"<div class="markrust-tabs">
  <div class="markrust-tabs-header">
    {}
  </div>
  <div class="markrust-tabs-content">
    {}
  </div>
</div>"#,
            tab_headers.join("\n    "),
            tab_contents.join("\n    ")
        ))
    }

    fn css(&self) -> Option<String> {
        Some(
            r#"
/* Tabs component styles */
.markrust-tabs {
  margin-bottom: 1.5rem;
}

.markrust-tabs-header {
  display: flex;
  border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.markrust-tab-button {
  padding: 0.5rem 1rem;
  border: none;
  background: none;
  cursor: pointer;
  font-weight: 500;
  color: var(--muted-color, #6b7280);
}

.markrust-tab-button.active {
  color: var(--primary-color, #3b82f6);
  border-bottom: 2px solid var(--primary-color, #3b82f6);
}

.markrust-tab-panel {
  display: none;
  padding: 1rem 0;
}

.markrust-tab-panel.active {
  display: block;
}
        "#
            .to_string(),
        )
    }
}

/// Details component for collapsible content
pub struct DetailsComponent;

impl Default for DetailsComponent {
    fn default() -> Self {
        Self::new()
    }
}

impl DetailsComponent {
    pub fn new() -> Self {
        Self
    }
}

impl Component for DetailsComponent {
    fn name(&self) -> &str {
        "details"
    }

    fn render(
        &self,
        attributes: &HashMap<String, String>,
        children: &[Node],
    ) -> Result<String, Error> {
        let binding = "Details".to_string();
        let summary = attributes.get("summary").unwrap_or(&binding);

        // Render the children to HTML
        let content = if !children.is_empty() {
            render_nodes_to_html(children)?
        } else {
            // For HTML comment-based components where children can't be properly passed
            "This content is initially hidden and can be expanded by clicking the summary."
                .to_string()
        };

        Ok(format!(
            r#"<details class="markrust-details">
  <summary>{}</summary>
  <div class="markrust-details-content">
    {}
  </div>
</details>"#,
            summary, content
        ))
    }

    fn css(&self) -> Option<String> {
        Some(
            r#"
/* Details component styles */
.markrust-details {
  margin-bottom: 1rem;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 0.375rem;
}

.markrust-details summary {
  padding: 0.75rem 1rem;
  cursor: pointer;
  font-weight: 500;
}

.markrust-details-content {
  padding: 1rem;
  border-top: 1px solid var(--border-color, #e5e7eb);
}
        "#
            .to_string(),
        )
    }
}

/// Card component for displaying content in a card layout
pub struct CardComponent;

impl Default for CardComponent {
    fn default() -> Self {
        Self::new()
    }
}

impl CardComponent {
    pub fn new() -> Self {
        Self
    }
}

impl Component for CardComponent {
    fn name(&self) -> &str {
        "card"
    }

    fn render(
        &self,
        attributes: &HashMap<String, String>,
        children: &[Node],
    ) -> Result<String, Error> {
        let binding = "".to_string();
        let title = attributes.get("title").unwrap_or(&binding);

        // Render the children to HTML
        let content = if !children.is_empty() {
            render_nodes_to_html(children)?
        } else {
            // For HTML comment-based components where children can't be properly passed
            "This card highlights a key feature of the project.".to_string()
        };

        let title_html = if !title.is_empty() {
            format!(r#"<div class="markrust-card-header">{}</div>"#, title)
        } else {
            String::new()
        };

        Ok(format!(
            r#"<div class="markrust-card">
  {}
  <div class="markrust-card-body">
    {}
  </div>
</div>"#,
            title_html, content
        ))
    }

    fn css(&self) -> Option<String> {
        Some(
            r#"
/* Card component styles */
.markrust-card {
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 0.375rem;
  margin-bottom: 1.5rem;
  overflow: hidden;
}

.markrust-card-header {
  padding: 1rem;
  background-color: var(--card-header-bg, #f9fafb);
  border-bottom: 1px solid var(--border-color, #e5e7eb);
  font-weight: 600;
}

.markrust-card-body {
  padding: 1rem;
}
        "#
            .to_string(),
        )
    }
}

/// Timeline component for displaying events in chronological order
pub struct TimelineComponent;

impl Default for TimelineComponent {
    fn default() -> Self {
        Self::new()
    }
}

impl TimelineComponent {
    pub fn new() -> Self {
        Self
    }
}

impl Component for TimelineComponent {
    fn name(&self) -> &str {
        "timeline"
    }

    fn render(
        &self,
        _attributes: &HashMap<String, String>,
        children: &[Node],
    ) -> Result<String, Error> {
        // Process children to extract timeline items
        let mut timeline_items = Vec::new();

        if !children.is_empty() {
            for child in children {
                if let Node::Component {
                    name,
                    attributes,
                    children,
                } = child
                {
                    if name == "timeline-item" {
                        let default_empty = String::new();
                        let date = attributes.get("date").unwrap_or(&default_empty);
                        let title = attributes.get("title").unwrap_or(&default_empty);

                        let content = render_nodes_to_html(children)?;

                        timeline_items.push(format!(
                            r#"<div class="markrust-timeline-item">
    <div class="markrust-timeline-date">{}</div>
    <div class="markrust-timeline-content">
      <h4 class="markrust-timeline-title">{}</h4>
      <div class="markrust-timeline-body">{}</div>
    </div>
  </div>"#,
                            date, title, content
                        ));
                    }
                }
            }
        } else {
            // Default items when no children are provided
            timeline_items.push(
                r#"<div class="markrust-timeline-item">
    <div class="markrust-timeline-date">January 2023</div>
    <div class="markrust-timeline-content">
      <h4 class="markrust-timeline-title">Project Started</h4>
      <div class="markrust-timeline-body">Initial development of the project began.</div>
    </div>
  </div>"#
                    .to_string(),
            );

            timeline_items.push(
                r#"<div class="markrust-timeline-item">
    <div class="markrust-timeline-date">March 2023</div>
    <div class="markrust-timeline-content">
      <h4 class="markrust-timeline-title">Beta Release</h4>
      <div class="markrust-timeline-body">First beta version released to testers.</div>
    </div>
  </div>"#
                    .to_string(),
            );
        }

        Ok(format!(
            r#"<div class="markrust-timeline">
  {}
</div>"#,
            timeline_items.join("\n  ")
        ))
    }

    fn css(&self) -> Option<String> {
        Some(
            r#"
/* Timeline component styles */
.markrust-timeline {
  position: relative;
  padding-left: 2rem;
}

.markrust-timeline::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  background-color: var(--border-color, #e5e7eb);
}

.markrust-timeline-item {
  position: relative;
  padding-bottom: 2rem;
}

.markrust-timeline-item::before {
  content: '';
  position: absolute;
  left: -2rem;
  top: 0.25rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background-color: var(--primary-color, #3b82f6);
  border: 2px solid #fff;
}

.markrust-timeline-date {
  color: var(--muted-color, #6b7280);
  font-size: 0.875rem;
  margin-bottom: 0.25rem;
}

.markrust-timeline-title {
  margin-top: 0;
  margin-bottom: 0.5rem;
}
        "#
            .to_string(),
        )
    }
}

/// Callout component for highlighting important information
pub struct CalloutComponent;

impl Default for CalloutComponent {
    fn default() -> Self {
        Self::new()
    }
}

impl CalloutComponent {
    pub fn new() -> Self {
        Self
    }
}

impl Component for CalloutComponent {
    fn name(&self) -> &str {
        "callout"
    }

    fn render(
        &self,
        attributes: &HashMap<String, String>,
        children: &[Node],
    ) -> Result<String, Error> {
        let title_binding = "".to_string();
        let title = attributes.get("title").unwrap_or(&title_binding);

        let variant_binding = "info".to_string();
        let variant = attributes.get("variant").unwrap_or(&variant_binding);

        // Render the children to HTML
        let content = if !children.is_empty() {
            render_nodes_to_html(children)?
        } else {
            // For HTML comment-based components where children can't be properly passed
            "This is an important note about the functionality.".to_string()
        };

        let title_html = if !title.is_empty() {
            format!(r#"<div class="markrust-callout-title">{}</div>"#, title)
        } else {
            String::new()
        };

        Ok(format!(
            r#"<div class="markrust-callout markrust-callout-{}">
  {}
  <div class="markrust-callout-content">
    {}
  </div>
</div>"#,
            variant, title_html, content
        ))
    }

    fn css(&self) -> Option<String> {
        Some(
            r#"
/* Callout component styles */
.markrust-callout {
  padding: 1rem;
  border-radius: 0.375rem;
  margin-bottom: 1rem;
  border-left: 4px solid var(--border-color, #e5e7eb);
}

.markrust-callout-title {
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.markrust-callout-info {
  background-color: var(--info-light-color, #e0f7fa);
  border-left-color: var(--info-color, #03a9f4);
}

.markrust-callout-warning {
  background-color: var(--warning-light-color, #fff8e1);
  border-left-color: var(--warning-color, #ffc107);
}

.markrust-callout-error {
  background-color: var(--error-light-color, #ffebee);
  border-left-color: var(--error-color, #f44336);
}

.markrust-callout-success {
  background-color: var(--success-light-color, #e8f5e9);
  border-left-color: var(--success-color, #4caf50);
}
        "#
            .to_string(),
        )
    }
}

/// Grid component for creating responsive grid layouts
pub struct GridComponent;

impl Default for GridComponent {
    fn default() -> Self {
        Self::new()
    }
}

impl GridComponent {
    pub fn new() -> Self {
        Self
    }
}

impl Component for GridComponent {
    fn name(&self) -> &str {
        "grid"
    }

    fn render(
        &self,
        attributes: &HashMap<String, String>,
        children: &[Node],
    ) -> Result<String, Error> {
        let columns_binding = "2".to_string();
        let columns = attributes.get("columns").unwrap_or(&columns_binding);

        let gap_binding = "1rem".to_string();
        let gap = attributes.get("gap").unwrap_or(&gap_binding);

        // Process children to extract grid items
        let mut grid_items = Vec::new();

        if !children.is_empty() {
            for child in children {
                if let Node::Component {
                    name,
                    attributes: _,
                    children: item_children,
                } = child
                {
                    if name == "grid-item" {
                        let content = render_nodes_to_html(item_children)?;
                        grid_items.push(format!(
                            r#"<div class="markrust-grid-item">{}</div>"#,
                            content
                        ));
                    }
                }
            }
        } else {
            // Default grid items when no children are provided
            grid_items.push(
                r#"<div class="markrust-grid-item">
      <h4>Feature 1</h4>
      <p>Description of feature 1.</p>
    </div>"#
                    .to_string(),
            );

            grid_items.push(
                r#"<div class="markrust-grid-item">
      <h4>Feature 2</h4>
      <p>Description of feature 2.</p>
    </div>"#
                    .to_string(),
            );

            if columns.parse::<i32>().unwrap_or(2) > 2 {
                grid_items.push(
                    r#"<div class="markrust-grid-item">
      <h4>Feature 3</h4>
      <p>Description of feature 3.</p>
    </div>"#
                        .to_string(),
                );
            }
        }

        Ok(format!(
            r#"<div class="markrust-grid" style="--grid-columns: {}; --grid-gap: {};">
    {}
</div>"#,
            columns,
            gap,
            grid_items.join("\n    ")
        ))
    }

    fn css(&self) -> Option<String> {
        Some(
            r#"
/* Grid component styles */
.markrust-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns, 2), 1fr);
  gap: var(--grid-gap, 1rem);
  margin-bottom: 1.5rem;
}

@media (max-width: 768px) {
  .markrust-grid {
    grid-template-columns: 1fr;
  }
}

.markrust-grid-item {
  min-width: 0;
}
        "#
            .to_string(),
        )
    }
}