railspress-engine 0.1.2 → 1.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 23a09596799a0a89eefd920154a5aefdcae1a4247ebbfb8f161781a87adaa462
-  data.tar.gz: 3b8b24840927df71dedc373457eeb082cf429932e6542eceeec06cf59195cfea
+  metadata.gz: 00fa3ef64f615a9f1a7bb10c79085c50657dfa462e3f61e57002dfdc9e181d5e
+  data.tar.gz: c241000c9554ac492a6fed87f1d1bded59ea3257541d14e6a855c3102463cf03
 SHA512:
-  metadata.gz: 4ad75a1e6057939610e32fef6b4add2a5d4eb4b5ff47621801f45a74414205c0d30ac5e308e21b612e26d774d19f6cd488e7655dd4626772a8c7e837997680d2
-  data.tar.gz: 4f011c5faf57b329fb81ae904ff2da1ef0df5a373b7e3c41c31c16af5bc661eeddb67430daf8e8def0b9cc4f899802217287ebbfeb235e51cf1567d0067aa0d1
+  metadata.gz: aa8e9ad5cf137778317c7c94bf9c75fdffe5a32356a3a2681ef6278868e16d16d9b9686edab3bcd4c190136f8fcfc0cefab0799d50fed20c37a74978cfea7e7b
+  data.tar.gz: 2fe456078ff4a52b014a43b56f3ad8e434b62f001ac42b07dd5cc5eb335af88a5ae428c13863cf467df69e0c749bd74792b7590d94ccacc6e63b2aa528fc9089

data/LICENSE

@@ -0,0 +1,20 @@
+O'Saasy License Agreement - https://osaasy.dev/
+
+Copyright © 2026, Avi Flombaum (https://avi.nyc).
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+No licensee or downstream recipient may use the Software (including any modified or derivative versions) to directly compete with the original Licensor by offering it to third parties as a hosted, managed, or Software-as-a-Service (SaaS) product or cloud service where the primary value of the service is the functionality of the Software itself.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+--
+
+Trademarks
+
+The Rails trademarks are the intellectual property of David Heinemeier Hansson,
+and exclusively licensed to the Rails Foundation. Uses of "Rails" and "Ruby on
+Rails" in this project are for identification purposes only and do not imply an
+endorsement by or affiliation with Rails, the trademark owner, or the Rails
+Foundation.

data/README.md

@@ -1,60 +1,224 @@
-# RailsPress
+<p align="center">
+  <strong>RailsPress</strong><br>
+  A mountable blog + CMS engine for Rails 8
+</p>
 
-A simple blog engine for Rails 8 applications.
+<p align="center">
+  <a href="https://rubygems.org/gems/railspress-engine"><img src="https://img.shields.io/gem/v/railspress-engine.svg?style=flat" alt="Gem Version"></a>
+  <img src="https://img.shields.io/badge/Rails-8.1%2B-red.svg?style=flat" alt="Rails 8.1+">
+  <img src="https://img.shields.io/badge/Ruby-3.3%2B-red.svg?style=flat" alt="Ruby 3.3+">
+  <a href="https://osaasy.dev/"><img src="https://img.shields.io/badge/License-O'Saasy-blue.svg?style=flat" alt="License"></a>
+</p>
 
-## Features
+---
+
+RailsPress is a mountable Rails engine that gives your app a complete content management system — namespaced and isolated so it stays out of your way.
+
+It manages three kinds of content:
+
+## Posts, Entities, and Blocks
+
+### Posts
 
-- Blog posts with rich text editing (ActionText)
-- Categories and tags
+Your blog. Chronological content published over time — articles, news, announcements. Categories, tags, draft/published workflow.
+
+- Rich text editing with [Lexxy](https://github.com/aviflombaum/lexxy) + markdown mode toggle
+- Categories, tags, draft/published workflow
 - SEO metadata (meta title, meta description)
-- Draft/published workflow with automatic publish timestamps
-- Admin interface for content management
+- Reading time auto-calculation
+- Header images with focal point cropping
+- Import/export (markdown + YAML frontmatter)
+
+### Entities
+
+Your pages of structured content. A portfolio with projects, a collection of case studies, a resources page with links — anything with its own schema that isn't a blog post.
+
+You define a regular ActiveRecord model, include `Railspress::Entity`, and RailsPress gives it a full admin interface with CRUD, search, pagination, image uploads, and tagging — no scaffolding or custom views required.
+
+- Define fields with `railspress_fields` DSL or let RailsPress auto-detect from your schema
+- Supports string, text, rich text, boolean, datetime, attachments, array fields, and more
+- Focal point image cropping for any attachment
+- Polymorphic tagging
+- Custom index columns, searchable fields, scopes
+- Generator: `rails generate railspress:entity Project title:string description:text`
+
+### Blocks
+
+The copy and images on your site itself. Your homepage hero headline, an "About Us" blurb, a call-to-action, a footer tagline — the content that normally lives hardcoded in templates and requires a developer to change.
+
+Blocks are organized into **groups** (e.g., "Homepage Hero", "Contact Info") and each block is either text or an image. You reference them in your views and they become editable in the admin — or inline, right on the page.
+
+- Chainable Ruby API: `Railspress::CMS.find("Hero").load("headline").value`
+- View helpers: `cms_value("Hero", "headline")` and `cms_element("Hero", "headline")`
+- Inline editing — right-click any `cms_element` in the frontend to edit in place
+- Auto-versioning with full audit trail
+- Required blocks that can't be accidentally deleted
+- Image blocks with upload, hints, and focal points
+- Export/import block groups as ZIP
+
+### Why all three?
+
+Most content doesn't fit neatly into "blog posts." A portfolio piece isn't a post. A homepage headline isn't a post. RailsPress gives you the right tool for each kind of content instead of forcing everything through one model.
+
+## Features
+
+**Admin Interface**
+- Dashboard with content stats and recent activity
+- Full CRUD for posts, categories, tags, block groups, blocks, and entities
+- Drag-and-drop image uploads with progress
+- Collapsible sidebar, responsive design
+- Vanilla CSS with BEM naming (`rp-` prefix) — no framework dependencies
+
+**Developer Experience**
+- Focal point image concern for any model: `focal_point_image :cover_photo`
+- CSS variable theming
+- Generators for installation and custom entities
 
 ## Requirements
 
-- Rails 8.0+
+- Rails 8.1+
 - Ruby 3.3+
-- ActionText (for rich text)
-- Active Storage (for image uploads)
+- ActionText
+- Active Storage
 
 ## Installation
 
+Ensure ActionText and Active Storage are installed:
+
+```bash
+rails action_text:install
+rails active_storage:install
+```
+
 Add to your Gemfile:
 
 ```ruby
-gem "railspress"
+gem "railspress-engine"
 ```
 
-Install the gem and copy migrations:
+Run the install generator:
 
 ```bash
 bundle install
-rails railspress:install:migrations
+rails generate railspress:install
 rails db:migrate
 ```
 
-Mount the engine in your routes:
+Mount the engine (the install generator does this automatically):
 
 ```ruby
 # config/routes.rb
 Rails.application.routes.draw do
-  mount Railspress::Engine => "/blog", as: :railspress
+  mount Railspress::Engine => "/railspress"
 end
 ```
 
-## Usage
+## Authentication
+
+The admin interface is publicly accessible by default. Add authentication before deploying:
 
-Access the admin interface at `/blog/admin`.
+```ruby
+# app/controllers/application_controller.rb
+class ApplicationController < ActionController::Base
+  before_action :authenticate_user!, if: :railspress_admin?
 
-From there you can:
-- Create and manage blog posts with rich text content
-- Organize posts with categories
-- Tag posts (enter tags as comma-separated values)
-- Save posts as drafts or publish them
+  private
 
-## Development
+  def railspress_admin?
+    request.path.start_with?("/railspress/admin")
+  end
+end
+```
+
+See [CONFIGURING.md](docs/CONFIGURING.md) for more authentication patterns including Devise integration.
+
+## Quick Start
+
+Access the admin at `/railspress/admin`. From there you can manage posts, entities, and blocks.
+
+### Posts
+
+Create posts with rich text, categories, tags, and header images. Build your own frontend controllers and views — see the [Blogging guide](docs/BLOGGING.md).
+
+### Entities
 
-After checking out the repo:
+Generate a model and register it:
+
+```bash
+rails generate railspress:entity Project title:string client:string description:text
+```
+
+```ruby
+class Project < ApplicationRecord
+  include Railspress::Entity
+
+  railspress_config do |c|
+    c.admin_title = "Projects"
+    c.searchable_columns = [:title, :client]
+  end
+end
+```
+
+It now has a full admin interface at `/railspress/admin/entities/projects`. See the [Entity System guide](docs/ENTITIES.md).
+
+### Blocks
+
+Set up inline editing for admins:
+
+```ruby
+# config/initializers/railspress.rb
+Railspress.configure do |config|
+  config.inline_editing_check = ->(ctx) { ctx.current_user&.admin? }
+end
+```
+
+Reference blocks in your views:
+
+```erb
+<%# Raw value (no editing wrapper) %>
+<h1><%= cms_value("Homepage", "headline") %></h1>
+
+<%# With inline editing (admins can right-click to edit in place) %>
+<h1><%= cms_element("Homepage", "headline") %></h1>
+
+<p><%= cms_element("Homepage", "subheadline") %></p>
+<%= image_tag cms_value("Homepage", "hero_image"), alt: "Hero" %>
+```
+
+Create the "Homepage" group and its blocks in the admin at `/railspress/admin/content_groups`. See the [Inline Editing guide](docs/INLINE_EDITING.md).
+
+## Generators
+
+```bash
+rails generate railspress:install                    # Full setup
+rails generate railspress:entity Project title:string # Add a managed entity
+```
+
+## Documentation
+
+**Posts, Entities, and Blocks:**
+
+| Guide | Description |
+|-------|-------------|
+| [Building a Blog](docs/BLOGGING.md) | Frontend views, RSS, SEO for posts |
+| [Entity System](docs/ENTITIES.md) | Structured content pages (portfolios, case studies, etc.) |
+| [Blocks & Inline Editing](docs/INLINE_EDITING.md) | Editable site copy and images |
+
+**Everything else:**
+
+| Guide | Description |
+|-------|-------------|
+| [Reference](docs/README.md) | Models, routes, and API reference |
+| [Configuring](docs/CONFIGURING.md) | Authors, images, inline editing, and all options |
+| [Image Focal Points](docs/image-focal-point-system.md) | Smart cropping with focal points |
+| [Import/Export](docs/IMPORT_EXPORT.md) | Bulk operations for posts and CMS content |
+| [Theming](docs/THEMING.md) | CSS variable customization |
+| [Admin Helpers](docs/ADMIN_HELPERS.md) | View helper reference |
+| [Troubleshooting](docs/TROUBLESHOOTING.md) | Common issues |
+| [Upgrading](docs/UPGRADING.md) | Version upgrades and migrations |
+| [Changelog](CHANGELOG.md) | Version history |
+
+## Development
 
 ```bash
 bundle install
@@ -64,4 +228,8 @@ bundle exec rspec
 
 ## License
 
-The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
+Available as open source under the terms of the [O'Saasy License](https://osaasy.dev/).
+
+## Trademarks
+
+The Rails trademarks are the intellectual property of David Heinemeier Hansson, and exclusively licensed to the Rails Foundation. Uses of "Rails" and "Ruby on Rails" in this project are for identification purposes only and do not imply an endorsement by or affiliation with Rails, the trademark owner, or the Rails Foundation.

data/app/assets/javascripts/railspress/admin.js

@@ -6,6 +6,44 @@
 (function() {
   'use strict';
 
+  // ============================================
+  // Sidebar Collapse Toggle
+  // ============================================
+
+  function initSidebarCollapse() {
+    var sidebar = document.querySelector('.rp-sidebar');
+    var layout = document.querySelector('.rp-admin-layout');
+    var toggle = document.querySelector('.rp-sidebar-toggle');
+
+    if (!sidebar || !toggle || !layout) return;
+
+    var STORAGE_KEY = 'rp-sidebar-collapsed';
+
+    function isCollapsed() {
+      return localStorage.getItem(STORAGE_KEY) === 'true';
+    }
+
+    function setCollapsed(collapsed) {
+      if (collapsed) {
+        sidebar.classList.add('rp-sidebar--collapsed');
+        layout.classList.add('rp-admin-layout--sidebar-collapsed');
+      } else {
+        sidebar.classList.remove('rp-sidebar--collapsed');
+        layout.classList.remove('rp-admin-layout--sidebar-collapsed');
+      }
+      localStorage.setItem(STORAGE_KEY, collapsed ? 'true' : 'false');
+    }
+
+    // Restore state on load
+    if (isCollapsed()) {
+      setCollapsed(true);
+    }
+
+    toggle.addEventListener('click', function() {
+      setCollapsed(!sidebar.classList.contains('rp-sidebar--collapsed'));
+    });
+  }
+
   // ============================================
   // Mobile Menu Toggle
   // ============================================
@@ -194,6 +232,7 @@
   // ============================================
 
   function init() {
+    initSidebarCollapse();
     initMobileMenu();
     initSlugGenerator();
     initDeleteConfirmation();

data/app/assets/javascripts/railspress/markdown_mode.js

@@ -0,0 +1,343 @@
+/**
+ * RailsPress Markdown Mode
+ * Toggle between rich text (Lexxy) and raw markdown editing
+ */
+
+(function() {
+  'use strict';
+
+  // ============================================
+  // HTML to Markdown Converter (Simple)
+  // ============================================
+
+  function htmlToMarkdown(html) {
+    if (!html || html.trim() === '' || html === '<p></p>' || html === '<p><br></p>') {
+      return '';
+    }
+
+    let md = html;
+
+    // Normalize whitespace
+    md = md.replace(/\r\n/g, '\n');
+
+    // Convert block elements first
+
+    // Headings
+    md = md.replace(/<h1[^>]*>(.*?)<\/h1>/gi, '# $1\n\n');
+    md = md.replace(/<h2[^>]*>(.*?)<\/h2>/gi, '## $1\n\n');
+    md = md.replace(/<h3[^>]*>(.*?)<\/h3>/gi, '### $1\n\n');
+    md = md.replace(/<h4[^>]*>(.*?)<\/h4>/gi, '#### $1\n\n');
+    md = md.replace(/<h5[^>]*>(.*?)<\/h5>/gi, '##### $1\n\n');
+    md = md.replace(/<h6[^>]*>(.*?)<\/h6>/gi, '###### $1\n\n');
+
+    // Code blocks (before inline code)
+    md = md.replace(/<pre[^>]*><code[^>]*class="[^"]*language-(\w+)[^"]*"[^>]*>([\s\S]*?)<\/code><\/pre>/gi, function(match, lang, code) {
+      return '```' + lang + '\n' + decodeHtmlEntities(code.trim()) + '\n```\n\n';
+    });
+    md = md.replace(/<pre[^>]*><code[^>]*>([\s\S]*?)<\/code><\/pre>/gi, function(match, code) {
+      return '```\n' + decodeHtmlEntities(code.trim()) + '\n```\n\n';
+    });
+    md = md.replace(/<pre[^>]*>([\s\S]*?)<\/pre>/gi, function(match, code) {
+      return '```\n' + decodeHtmlEntities(code.trim()) + '\n```\n\n';
+    });
+
+    // Blockquotes
+    md = md.replace(/<blockquote[^>]*>([\s\S]*?)<\/blockquote>/gi, function(match, content) {
+      const lines = content.replace(/<\/?p[^>]*>/gi, '\n').trim().split('\n');
+      return lines.map(line => '> ' + line.trim()).join('\n') + '\n\n';
+    });
+
+    // Horizontal rules
+    md = md.replace(/<hr[^>]*>/gi, '---\n\n');
+
+    // Lists
+    md = md.replace(/<ul[^>]*>([\s\S]*?)<\/ul>/gi, function(match, content) {
+      return content.replace(/<li[^>]*>([\s\S]*?)<\/li>/gi, '- $1\n') + '\n';
+    });
+    md = md.replace(/<ol[^>]*>([\s\S]*?)<\/ol>/gi, function(match, content) {
+      let index = 1;
+      return content.replace(/<li[^>]*>([\s\S]*?)<\/li>/gi, function(m, item) {
+        return (index++) + '. ' + item.trim() + '\n';
+      }) + '\n';
+    });
+
+    // Paragraphs
+    md = md.replace(/<p[^>]*>([\s\S]*?)<\/p>/gi, '$1\n\n');
+
+    // Line breaks
+    md = md.replace(/<br\s*\/?>/gi, '  \n');
+
+    // Now inline elements
+
+    // Images (before links to avoid nested issues)
+    md = md.replace(/<img[^>]*src="([^"]*)"[^>]*alt="([^"]*)"[^>]*>/gi, '![$2]($1)');
+    md = md.replace(/<img[^>]*alt="([^"]*)"[^>]*src="([^"]*)"[^>]*>/gi, '![$1]($2)');
+    md = md.replace(/<img[^>]*src="([^"]*)"[^>]*>/gi, '![]($1)');
+
+    // Links
+    md = md.replace(/<a[^>]*href="([^"]*)"[^>]*>([\s\S]*?)<\/a>/gi, '[$2]($1)');
+
+    // Bold and italic (order matters)
+    md = md.replace(/<(strong|b)[^>]*>([\s\S]*?)<\/\1>/gi, '**$2**');
+    md = md.replace(/<(em|i)[^>]*>([\s\S]*?)<\/\1>/gi, '*$2*');
+
+    // Inline code
+    md = md.replace(/<code[^>]*>(.*?)<\/code>/gi, '`$1`');
+
+    // Strikethrough
+    md = md.replace(/<(del|s|strike)[^>]*>([\s\S]*?)<\/\1>/gi, '~~$2~~');
+
+    // Remove remaining tags
+    md = md.replace(/<[^>]+>/g, '');
+
+    // Decode HTML entities
+    md = decodeHtmlEntities(md);
+
+    // Clean up whitespace
+    md = md.replace(/\n{3,}/g, '\n\n');
+    md = md.trim();
+
+    return md;
+  }
+
+  // ============================================
+  // Markdown to HTML Converter (Simple)
+  // ============================================
+
+  function markdownToHtml(md) {
+    if (!md || md.trim() === '') {
+      return '<p></p>';
+    }
+
+    let html = md;
+
+    // Escape HTML entities in the source
+    html = html.replace(/&/g, '&amp;');
+    html = html.replace(/</g, '&lt;');
+    html = html.replace(/>/g, '&gt;');
+
+    // Code blocks first (to protect their contents)
+    const codeBlocks = [];
+    html = html.replace(/```(\w*)\n([\s\S]*?)```/g, function(match, lang, code) {
+      const index = codeBlocks.length;
+      const langClass = lang ? ` class="language-${lang}"` : '';
+      codeBlocks.push(`<pre><code${langClass}>${code.trim()}</code></pre>`);
+      return `%%CODEBLOCK${index}%%`;
+    });
+
+    // Inline code (protect before other processing)
+    const inlineCodes = [];
+    html = html.replace(/`([^`]+)`/g, function(match, code) {
+      const index = inlineCodes.length;
+      inlineCodes.push(`<code>${code}</code>`);
+      return `%%INLINECODE${index}%%`;
+    });
+
+    // Headings
+    html = html.replace(/^###### (.*)$/gm, '<h6>$1</h6>');
+    html = html.replace(/^##### (.*)$/gm, '<h5>$1</h5>');
+    html = html.replace(/^#### (.*)$/gm, '<h4>$1</h4>');
+    html = html.replace(/^### (.*)$/gm, '<h3>$1</h3>');
+    html = html.replace(/^## (.*)$/gm, '<h2>$1</h2>');
+    html = html.replace(/^# (.*)$/gm, '<h1>$1</h1>');
+
+    // Horizontal rules
+    html = html.replace(/^---$/gm, '<hr>');
+    html = html.replace(/^\*\*\*$/gm, '<hr>');
+    html = html.replace(/^___$/gm, '<hr>');
+
+    // Blockquotes
+    html = html.replace(/^> (.*)$/gm, '<blockquote>$1</blockquote>');
+    // Merge consecutive blockquotes
+    html = html.replace(/<\/blockquote>\n<blockquote>/g, '\n');
+
+    // Unordered lists
+    html = html.replace(/^[\*\-] (.*)$/gm, '<li>$1</li>');
+    html = html.replace(/(<li>.*<\/li>\n?)+/g, function(match) {
+      return '<ul>\n' + match + '</ul>\n';
+    });
+
+    // Ordered lists
+    html = html.replace(/^\d+\. (.*)$/gm, '<oli>$1</oli>');
+    html = html.replace(/(<oli>.*<\/oli>\n?)+/g, function(match) {
+      return '<ol>\n' + match.replace(/oli>/g, 'li>') + '</ol>\n';
+    });
+
+    // Images
+    html = html.replace(/!\[([^\]]*)\]\(([^)]+)\)/g, '<img src="$2" alt="$1">');
+
+    // Links
+    html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2">$1</a>');
+
+    // Bold and italic
+    html = html.replace(/\*\*\*([^*]+)\*\*\*/g, '<strong><em>$1</em></strong>');
+    html = html.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
+    html = html.replace(/\*([^*]+)\*/g, '<em>$1</em>');
+    html = html.replace(/__([^_]+)__/g, '<strong>$1</strong>');
+    html = html.replace(/_([^_]+)_/g, '<em>$1</em>');
+
+    // Strikethrough
+    html = html.replace(/~~([^~]+)~~/g, '<del>$1</del>');
+
+    // Line breaks (two spaces at end of line)
+    html = html.replace(/  \n/g, '<br>\n');
+
+    // Paragraphs - wrap remaining text blocks
+    html = html.split(/\n\n+/).map(function(block) {
+      block = block.trim();
+      if (!block) return '';
+      // Don't wrap if already a block element
+      if (/^<(h[1-6]|ul|ol|blockquote|pre|hr|div|p)/i.test(block)) {
+        return block;
+      }
+      // Don't wrap code block placeholders
+      if (/^%%CODEBLOCK\d+%%$/.test(block)) {
+        return block;
+      }
+      return '<p>' + block.replace(/\n/g, '<br>') + '</p>';
+    }).join('\n');
+
+    // Restore code blocks
+    codeBlocks.forEach(function(code, index) {
+      html = html.replace(`%%CODEBLOCK${index}%%`, code);
+    });
+
+    // Restore inline code
+    inlineCodes.forEach(function(code, index) {
+      html = html.replace(`%%INLINECODE${index}%%`, code);
+    });
+
+    return html;
+  }
+
+  // ============================================
+  // Helper Functions
+  // ============================================
+
+  function decodeHtmlEntities(text) {
+    const textarea = document.createElement('textarea');
+    textarea.innerHTML = text;
+    return textarea.value;
+  }
+
+  // ============================================
+  // Markdown Mode Controller
+  // ============================================
+
+  function initMarkdownMode() {
+    console.log('[MarkdownMode] Initializing...');
+    const containers = document.querySelectorAll('[data-markdown-mode]');
+    console.log('[MarkdownMode] Found containers:', containers.length);
+
+    containers.forEach(function(container, index) {
+      console.log('[MarkdownMode] Container', index, ':', container);
+      const editor = container.querySelector('lexxy-editor');
+      const textarea = container.querySelector('[data-markdown-textarea]');
+      const toggleBtn = container.querySelector('[data-markdown-toggle]');
+      const richLabel = container.querySelector('[data-mode-label="rich"]');
+      const mdLabel = container.querySelector('[data-mode-label="markdown"]');
+
+      console.log('[MarkdownMode] Container', index, 'elements:', {
+        editor: !!editor,
+        textarea: !!textarea,
+        toggleBtn: !!toggleBtn
+      });
+
+      if (!editor || !textarea || !toggleBtn) {
+        console.log('[MarkdownMode] Container', index, 'missing required elements, skipping');
+        return;
+      }
+      console.log('[MarkdownMode] Container', index, 'initialized successfully');
+
+      let isMarkdownMode = false;
+
+      function updateLabels() {
+        if (richLabel) richLabel.hidden = isMarkdownMode;
+        if (mdLabel) mdLabel.hidden = !isMarkdownMode;
+      }
+
+      function switchToMarkdown() {
+        // Get HTML from Lexxy
+        const html = editor.value || '';
+
+        // Convert to markdown
+        const markdown = htmlToMarkdown(html);
+
+        // Show textarea, hide editor
+        textarea.value = markdown;
+        textarea.hidden = false;
+        editor.style.display = 'none';
+
+        isMarkdownMode = true;
+        toggleBtn.setAttribute('aria-pressed', 'true');
+        updateLabels();
+      }
+
+      function switchToRichText() {
+        // Get markdown from textarea
+        const markdown = textarea.value || '';
+
+        // Convert to HTML
+        const html = markdownToHtml(markdown);
+
+        // Show editor, hide textarea
+        editor.style.display = '';
+        textarea.hidden = true;
+
+        // Load HTML into Lexxy
+        editor.value = html;
+
+        isMarkdownMode = false;
+        toggleBtn.setAttribute('aria-pressed', 'false');
+        updateLabels();
+      }
+
+      toggleBtn.addEventListener('click', function() {
+        console.log('[MarkdownMode] Toggle clicked, current mode:', isMarkdownMode ? 'markdown' : 'rich');
+        if (isMarkdownMode) {
+          switchToRichText();
+        } else {
+          switchToMarkdown();
+        }
+      });
+
+      // Sync textarea changes back to hidden input on form submit
+      const form = container.closest('form');
+      if (form) {
+        form.addEventListener('submit', function() {
+          if (isMarkdownMode) {
+            // Convert markdown to HTML before submit
+            const markdown = textarea.value || '';
+            const html = markdownToHtml(markdown);
+            editor.value = html;
+          }
+        });
+      }
+
+      // Initialize labels
+      updateLabels();
+    });
+  }
+
+  // ============================================
+  // Export for testing/external use
+  // ============================================
+
+  window.RailsPress = window.RailsPress || {};
+  window.RailsPress.MarkdownMode = {
+    htmlToMarkdown: htmlToMarkdown,
+    markdownToHtml: markdownToHtml,
+    init: initMarkdownMode
+  };
+
+  // ============================================
+  // Initialize
+  // ============================================
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initMarkdownMode);
+  } else {
+    initMarkdownMode();
+  }
+
+})();