railspress-engine 0.1.2 → 1.2.0

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();
+  }
+
+})();

data/app/assets/stylesheets/railspress/admin/badges.css

@@ -0,0 +1,70 @@
+/*
+ * RailsPress Admin - Badges & Tags
+ * Status badges and tag components
+ */
+
+/* Badges */
+.rp-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 10px;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  border-radius: 999px;
+}
+
+.rp-badge--draft {
+  background: var(--rp-bg);
+  color: var(--rp-text-muted);
+  border: 1px solid var(--rp-border);
+}
+
+.rp-badge--published {
+  background: var(--rp-success-light);
+  color: var(--rp-success);
+}
+
+.rp-badge--scheduled {
+  background: var(--rp-info-light, #e8f4fd);
+  color: var(--rp-primary, #1e88e5);
+}
+
+.rp-badge--pending {
+  background: var(--rp-info-light);
+  color: var(--rp-primary);
+}
+
+.rp-badge--processing {
+  background: #fff8e6;
+  color: #b8860b;
+}
+
+.rp-badge--completed {
+  background: var(--rp-success-light);
+  color: var(--rp-success);
+}
+
+.rp-badge--failed {
+  background: var(--rp-danger-light);
+  color: var(--rp-danger);
+}
+
+/* Tags */
+.rp-tag {
+  display: inline-flex;
+  padding: 2px 8px;
+  font-size: 0.75rem;
+  font-weight: 500;
+  background: var(--rp-primary-light);
+  color: var(--rp-primary);
+  border-radius: 4px;
+}
+
+.rp-tag-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--rp-space-xs);
+  margin-top: var(--rp-space-xs);
+}

data/app/assets/stylesheets/railspress/admin/base.css

@@ -0,0 +1,25 @@
+/*
+ * RailsPress Admin - Base Styles
+ * Reset and typography foundation
+ */
+
+@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:wght@600;700&display=swap');
+
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  font-size: 16px;
+  -webkit-font-smoothing: antialiased;
+}
+
+body {
+  font-family: var(--rp-font-body);
+  font-size: 0.9375rem;
+  line-height: 1.5;
+  color: var(--rp-text);
+  background: var(--rp-bg);
+}

data/app/assets/stylesheets/railspress/admin/buttons.css

@@ -0,0 +1,140 @@
+/*
+ * RailsPress Admin - Buttons & Links
+ * Button components and link styles
+ */
+
+/* Buttons */
+.rp-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--rp-space-sm);
+  padding: 10px 20px;
+  font-family: var(--rp-font-body);
+  font-size: 0.875rem;
+  font-weight: 600;
+  text-decoration: none;
+  border-radius: var(--rp-radius);
+  border: 1px solid transparent;
+  cursor: pointer;
+  transition: all 0.15s;
+  white-space: nowrap;
+}
+
+.rp-btn:focus {
+  outline: none;
+  box-shadow: 0 0 0 3px var(--rp-primary-light);
+}
+
+.rp-btn--primary {
+  background: var(--rp-primary);
+  color: white;
+  box-shadow: 0 2px 6px rgba(61, 90, 128, 0.25);
+  transition: all 0.15s ease;
+}
+
+.rp-btn--primary:hover {
+  background: var(--rp-primary-hover);
+  box-shadow: 0 4px 10px rgba(61, 90, 128, 0.35);
+  transform: translateY(-1px);
+}
+
+.rp-btn--secondary {
+  background: var(--rp-bg-elevated);
+  color: var(--rp-text);
+  border-color: var(--rp-border);
+}
+
+.rp-btn--secondary:hover {
+  background: var(--rp-bg);
+  border-color: var(--rp-text-muted);
+}
+
+.rp-btn--danger {
+  background: var(--rp-danger);
+  color: white;
+}
+
+.rp-btn--danger:hover {
+  background: #8f3436;
+}
+
+.rp-btn--text {
+  background: none;
+  border: none;
+  color: var(--rp-text-muted);
+  padding: 8px 12px;
+}
+
+.rp-btn--text:hover {
+  color: var(--rp-text);
+  text-decoration: underline;
+}
+
+.rp-btn--sm {
+  padding: 6px 12px;
+  font-size: 0.8125rem;
+}
+
+.rp-btn--lg {
+  padding: 14px 28px;
+  font-size: 1rem;
+}
+
+/* Links */
+.rp-link {
+  color: var(--rp-primary);
+  text-decoration: none;
+  font-weight: 500;
+}
+
+.rp-link:hover {
+  text-decoration: underline;
+}
+
+.rp-link--danger {
+  color: var(--rp-danger);
+  background: none;
+  border: none;
+  padding: 0;
+  font: inherit;
+  cursor: pointer;
+}
+
+/* Icon Buttons */
+.rp-icon-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  background: none;
+  border: 1px solid transparent;
+  border-radius: var(--rp-radius);
+  color: var(--rp-text-muted);
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.rp-icon-btn svg {
+  width: 16px;
+  height: 16px;
+}
+
+.rp-icon-btn:hover {
+  background: var(--rp-bg);
+  color: var(--rp-primary);
+  border-color: var(--rp-border);
+}
+
+.rp-icon-btn--danger:hover {
+  background: var(--rp-danger-light);
+  color: var(--rp-danger);
+  border-color: var(--rp-danger-light);
+}
+
+.rp-icon-btn--disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}

data/app/assets/stylesheets/railspress/admin/cards.css

@@ -0,0 +1,52 @@
+/*
+ * RailsPress Admin - Cards
+ * Card components
+ */
+
+.rp-card {
+  background: var(--rp-bg-elevated);
+  border-radius: var(--rp-radius);
+  box-shadow: var(--rp-shadow-md);
+  border: none;
+}
+
+.rp-card--padded {
+  padding: var(--rp-space-xl);
+}
+
+/* Detail list for show views */
+.rp-detail-list {
+  padding: var(--rp-space-lg);
+}
+
+.rp-detail-item {
+  padding: var(--rp-space-md) 0;
+  border-bottom: 1px solid var(--rp-border);
+}
+
+.rp-detail-item:last-child {
+  border-bottom: none;
+}
+
+.rp-detail-label {
+  font-size: var(--rp-font-sm);
+  color: var(--rp-text-secondary);
+  font-weight: 500;
+  margin-bottom: var(--rp-space-xs);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.rp-detail-value {
+  color: var(--rp-text-primary);
+  line-height: 1.5;
+}
+
+.rp-rich-text-content {
+  max-width: 65ch;
+}
+
+.rp-text-content {
+  max-width: 65ch;
+  white-space: pre-wrap;
+}

data/app/assets/stylesheets/railspress/admin/components/exports.css

@@ -0,0 +1,55 @@
+/*
+ * RailsPress Admin - Exports
+ * Export page styles
+ */
+
+.rp-export-format-card {
+  margin-bottom: var(--rp-space-lg);
+}
+
+.rp-export-format-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--rp-space-lg);
+}
+
+.rp-export-format-info {
+  display: flex;
+  flex-direction: column;
+  gap: var(--rp-space-xs);
+}
+
+.rp-export-format-info strong {
+  font-size: 1rem;
+  color: var(--rp-text);
+}
+
+.rp-export-format-info span {
+  color: var(--rp-text-muted);
+  font-size: 0.9rem;
+  line-height: 1.5;
+}
+
+.rp-export-format-info code {
+  background: var(--rp-bg);
+  padding: 0.1em 0.4em;
+  border-radius: var(--rp-radius-sm);
+  font-size: 0.85em;
+}
+
+.rp-export-format-action {
+  flex-shrink: 0;
+}
+
+@media (max-width: 767px) {
+  .rp-export-format-content {
+    flex-direction: column;
+    align-items: stretch;
+    text-align: center;
+  }
+
+  .rp-export-format-action {
+    margin-top: var(--rp-space-md);
+  }
+}