Overview

This PR implements a new IRenderable for RazorConsole that properly handles the composition of block-level and inline-level elements, addressing issue #[issue_number].

Problem

Previously, RazorConsole lacked a way to distinguish between:

• Block elements: Elements that should start on a new line (e.g., <div>, <p>, <panel>)
• Inline elements: Elements that should continue on the same line (e.g., <span>, <strong>, <em>)

This made it difficult to create rich, flowing content that mixed different display types, similar to HTML's block and inline model.

Solution

Core Implementation

BlockInlineRenderable - A new IRenderable that intelligently groups and renders items based on their display type:

var items = new List<BlockInlineRenderable.RenderableItem>
{
    BlockInlineRenderable.Block(new Markup("[bold]Title:[/]")),
    BlockInlineRenderable.Inline(new Markup("Status: ")),
    BlockInlineRenderable.Inline(new Markup("[green]✓ Success[/]")),
};

var renderable = new BlockInlineRenderable(items);
AnsiConsole.Write(renderable);

Output:

Title:
Status: ✓ Success

Example Translator

FlowElementTranslator demonstrates practical usage by enabling mixed content in Razor components:

<div data-flow="mixed">
    <div data-text="true">Block element</div>
    <span data-text="true">Inline </span>
    <span data-text="true">[bold]inline[/]</span>
</div>

Key Features

• Block elements always start on a new line (unless first in the sequence)
• Inline elements flow together on the same line
• Proper measurement and rendering for Spectre.Console integration
• Support for explicit display control via data-display="block|inline" attribute
• Works seamlessly with existing Spectre.Console renderables like Panel, Table, etc.

Testing

• Added 13 comprehensive tests for BlockInlineRenderable
• Added 6 tests for FlowElementTranslator
• All 88 tests passing
• Visual validation with Gallery app component

Files Changed

New Components:

• src/RazorConsole.Core/Renderables/BlockInlineRenderable.cs - Core renderable implementation
• src/RazorConsole.Core/Vdom/Translators/FlowElementTranslator.cs - Example translator
• src/RazorConsole.Gallery/Components/BlockInlineGallery.razor - Interactive demo

Tests:

• src/RazorConsole.Tests/Renderables/BlockInlineRenderableTests.cs
• src/RazorConsole.Tests/Vdom/FlowElementTranslatorTests.cs

Documentation:

• design-doc/block-inline-renderable.md - Detailed usage guide
• IMPLEMENTATION_SUMMARY.md - Implementation overview

Modified:

• src/RazorConsole.Core/Vdom/VdomSpectreTranslator.cs - Registered FlowElementTranslator
• src/RazorConsole.Gallery/Components/App.razor - Added gallery navigation

Visual Examples

Multiple inline elements:

This is all on one line!

Mixed content:

Title:
Status: ✓ Success | ⚠ 2 warnings
Last updated: 2025-01-24

Complex mixing with panels:

Inline 1 Inline 2 Inline 3
┌───────────────┐
│ Block Panel 1 │
└───────────────┘
After panels

Breaking Changes

None - this is a purely additive feature that doesn't modify existing behavior.

Future Enhancements

Potential improvements for future iterations:

• Support for inline-block elements
• Text wrapping for long inline sequences
• CSS-like box model properties

Fixes #54

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.