feat: enhance CMS editor with rich text features and fix line break preservation

- Fix line break preservation with proper HardBreak extension configuration
- Add text alignment support (left, center, right, justify) for paragraphs and headings
- Add H4-H6 heading support with keyboard shortcuts
- Add code block support with syntax highlighting for multiple languages
- Enhance preview functionality with split-pane view (Edit/Preview/Split modes)
- Add custom prose CSS overrides for proper content rendering
- Update DOMPurify configuration to preserve br tags and text alignment
- Add visual indicators and help modal with all keyboard shortcuts
- Improve toolbar organization with grouped buttons and separators
- Add auto-save status indicator and word/character count

Fixes issues with:
- Line breaks not showing in gallery view
- Limited heading options (only H1-H3)
- No text formatting capabilities
- Missing preview functionality

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

frontend/src/styles/prose-overrides.css

@@ -0,0 +1,98 @@
+/* Prose overrides for CMS content */
+
+/* Preserve line breaks in prose content */
+.prose br {
+  display: block !important;
+  content: "" !important;
+  margin: 0.5em 0 !important;
+}
+
+/* Hard breaks should create visible line breaks */
+.prose .hard-break {
+  display: block !important;
+  height: 0.5em !important;
+}
+
+/* Ensure paragraphs have proper spacing */
+.prose p {
+  margin-top: 1em;
+  margin-bottom: 1em;
+}
+
+.prose p:first-child {
+  margin-top: 0;
+}
+
+.prose p:last-child {
+  margin-bottom: 0;
+}
+
+/* Code block styling */
+.prose pre {
+  background-color: #f5f5f5;
+  border-radius: 0.375rem;
+  padding: 1rem;
+  overflow-x: auto;
+  margin: 1.5em 0;
+}
+
+.prose pre code {
+  background-color: transparent;
+  padding: 0;
+  font-size: 0.875em;
+  color: inherit;
+}
+
+/* Inline code styling */
+.prose code {
+  background-color: #f5f5f5;
+  padding: 0.125rem 0.375rem;
+  border-radius: 0.25rem;
+  font-size: 0.875em;
+  font-weight: 400;
+}
+
+/* Text alignment classes */
+.prose .text-left {
+  text-align: left !important;
+}
+
+.prose .text-center {
+  text-align: center !important;
+}
+
+.prose .text-right {
+  text-align: right !important;
+}
+
+.prose .text-justify {
+  text-align: justify !important;
+}
+
+/* Syntax highlighting for code blocks */
+.prose .hljs {
+  background: transparent !important;
+  padding: 0 !important;
+}
+
+/* Basic syntax highlighting colors */
+.hljs-keyword { color: #a626a4; }
+.hljs-string { color: #50a14f; }
+.hljs-comment { color: #a0a1a7; font-style: italic; }
+.hljs-number { color: #e45649; }
+.hljs-function { color: #4078f2; }
+.hljs-tag { color: #e45649; }
+.hljs-attribute { color: #986801; }
+.hljs-selector-class { color: #986801; }
+.hljs-selector-id { color: #986801; }
+
+/* Preserve whitespace in content */
+.prose-preserve-whitespace {
+  white-space: pre-wrap;
+}
+
+/* Ensure empty paragraphs with only line breaks are visible */
+.prose p:empty::before {
+  content: "\200B"; /* Zero-width space */
+  display: inline;
+}