Django-Spellbook

Try the New Markdown Editor!

Version 0.1.15

Released: May 21, 2025

✅

This release delivers two powerful new SpellBlocks for enhanced interactivity and layout control, along with a major architectural refactor that lays the foundation for advanced features like nested blocks and database interactions.

New Features

Button SpellBlock

The ~ button ~ SpellBlock provides a comprehensive solution for creating styled, interactive link buttons with extensive customization options:

{~ button href="/features" ~}
Learn More
{~~}

Learn More

Renders as a styled button linking to /features

Button Features

Button with Visual Styling:

{~ button href="/download-report" type="success" size="lg" ~}
Download Report
{~~}

Download Report

Button with Icons:

{~ button href="/settings" type="secondary" icon_left="sb-icon-settings" ~}
Manage Settings
{~~}

Manage Settings

Disabled Button:

{~ button href="/restricted" type="primary" disabled="true" ~}
Access Restricted
{~~}

Access Restricted

Button Parameters

  • href: URL for link buttons (creates <a> tag)
  • type: Visual style ("default", "primary", "secondary", "success", "warning", "danger", "info", "accent", "black", "white", "emphasis", "subtle", "distinct", "aether", "artifact", "sylvan")
  • size: Button size ("sm", "md", "lg")
  • target: Link target (e.g., "_blank")
  • disabled: Disabled state (true/false)
  • icon_left/icon_right: Icon classes for button decoration
  • class: Custom CSS classes
  • id: HTML id attribute

Align SpellBlock

The ~ align ~ SpellBlock offers precise control over content positioning and layout with intelligent dimension handling:

{~ align pos="center" width="80%" class="sb-border sb-p-2" ~}
### Centered Content
This content is perfectly centered with specific dimensions.
{~~}

Centered Content

This content is perfectly centered with specific dimensions.

Smart Dimension Processing

The Align SpellBlock intelligently processes width and height values:

  • "auto" remains as CSS auto
  • Numbers ≤ 100 become percentages: 50 → 50%
  • Numbers > 100 become pixels: 300 → 300px
  • Explicit units preserved: "75%", "150px"
{~ align pos="end" width="60" content_align="start" class="sb-border sb-p-2" ~}
### Right-Aligned Container
This content is positioned at the end (right) with 60% width.
Text content is aligned to the start (left) within the container.
{~~}

Right-Aligned Container

This content is positioned at the end (right) with 60% width.
Text content is aligned to the start (left) within the container.

Align Parameters

  • pos: Container position ("start", "center", "end")
  • width: Container width (auto, percentage, pixels)
  • height: Container height (auto, percentage, pixels)
  • content_align: Text alignment within container ("start", "center", "end")
  • class: Custom CSS classes for container
  • content_class: Custom CSS classes for inner content
  • id: HTML id attribute

Architecture Improvements

CSS Architecture Modernization

Color Utilities Module

All color-related utilities are now organized in a dedicated module:

  • Background Colors: sb-bg-primary, sb-bg-success, opacity variants
  • Text Colors: sb-primary, sb-secondary, sb-accent with opacity support
  • Border Colors: sb-border-primary, sb-border-neutral with variants
  • Hover States: sb-hover:bg-primary, sb-hover:text-accent-75

Future Roadmap

This architectural foundation enables exciting upcoming features:

  • Nested SpellBlocks: Complex layouts with parent-child relationships
  • Database-Connected Blocks: Q&A systems, dynamic content blocks
  • Advanced Form Components: Complete form building with validation
  • Grid and Layout Systems: Sophisticated responsive layouts
  • Performance Optimizations: Caching and incremental processing
ℹ️

We're committed to continuous improvement and building the most powerful markdown processing toolkit for Django. If you have feedback or feature requests, please open an issue on GitHub.