cms-block-editor 1.0.9 → 1.0.12

package/README.md

@@ -11,7 +11,8 @@ A powerful, feature-rich block editor for CMS applications built with Lexical an
 ✨ **Rich Text Editing** - Full formatting support (bold, italic, underline, headings, lists, etc.)  
 🎨 **Sections** - 10 pre-designed section templates (hero, features, pricing, testimonials, etc.)  
 📐 **Layouts** - Flexbox and CSS Grid support with visual controls  
-🖼️ **Images** - Upload, resize, and drag-and-drop images  
+🖼️ **Images** - Upload, resize, drag-and-drop, and advanced editing with filters  
+🎨 **Image Filters** - 7 adjustable filters with 6 professional presets  
 🎥 **Embeds** - YouTube, Facebook, Instagram, Twitter, TikTok, Vimeo, Spotify, SoundCloud  
 🔗 **Links** - Custom link insertion with labels and options  
 📊 **Tables** - Visual table builder with configurable rows/columns and professional styling  
@@ -94,7 +95,8 @@ Read-only renderer for displaying saved content.
 - Code blocks
 
 ### Media
-- **Images**: Upload from computer, resize with 8-point handles, drag-and-drop positioning, custom upload handler support
+- **Images**: Upload from computer, resize with 8-point handles, drag-and-drop positioning, custom upload handler support, advanced editing with filters
+- **Image Filters**: Brightness, contrast, saturation, blur, grayscale, sepia, hue rotation with 6 presets
 - **YouTube**: Embed videos with custom sizing
 - **Embeds**: Support for 8+ platforms with automatic URL detection
 - **Tables**: Visual builder with configurable dimensions, header rows, and professional styling
@@ -291,6 +293,7 @@ Check out the [example app](./example-app) for a complete implementation with:
 ## Documentation
 
 Comprehensive guides available:
+- [Image Editing Guide](./docs/IMAGE-EDITING-GUIDE.md) - Advanced image filters and effects
 - [Section Creator Guide](./SECTION-CREATOR-GUIDE.md)
 - [Section Editing Guide](./SECTION-EDITING-GUIDE.md)
 - [Background Image Guide](./BACKGROUND-IMAGE-GUIDE.md)

package/dist/index.css

@@ -2299,6 +2299,229 @@
     height: 24px;
   }
 }
+.cms-image-editor-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 10000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.cms-image-editor-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.7);
+  backdrop-filter: blur(4px);
+}
+.cms-image-editor-content {
+  position: relative;
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+  max-width: 1200px;
+  width: 90%;
+  max-height: 90vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.cms-image-editor-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px 24px;
+  border-bottom: 1px solid #e5e7eb;
+}
+.cms-image-editor-header h2 {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 600;
+  color: #1f2937;
+}
+.cms-close-btn {
+  background: none;
+  border: none;
+  font-size: 32px;
+  color: #6b7280;
+  cursor: pointer;
+  padding: 0;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  transition: all 0.2s;
+}
+.cms-close-btn:hover {
+  background: #f3f4f6;
+  color: #1f2937;
+}
+.cms-image-editor-body {
+  display: grid;
+  grid-template-columns: 1fr 400px;
+  gap: 24px;
+  padding: 24px;
+  overflow-y: auto;
+  flex: 1;
+}
+.cms-image-editor-preview {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #f9fafb;
+  border-radius: 8px;
+  padding: 24px;
+  min-height: 400px;
+}
+.cms-image-editor-preview img {
+  max-width: 100%;
+  max-height: 500px;
+  border-radius: 4px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+.cms-image-editor-controls {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  overflow-y: auto;
+}
+.cms-editor-section {
+  background: #f9fafb;
+  padding: 16px;
+  border-radius: 8px;
+}
+.cms-editor-section h3 {
+  margin: 0 0 16px 0;
+  font-size: 14px;
+  font-weight: 600;
+  color: #374151;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+.cms-preset-buttons {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 8px;
+}
+.cms-preset-buttons button {
+  padding: 8px 12px;
+  background: white;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  font-size: 13px;
+  font-weight: 500;
+  color: #374151;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+.cms-preset-buttons button:hover {
+  background: #667eea;
+  color: white;
+  border-color: #667eea;
+}
+.cms-filter-control {
+  margin-bottom: 16px;
+}
+.cms-filter-control:last-child {
+  margin-bottom: 0;
+}
+.cms-filter-control label {
+  display: block;
+  font-size: 13px;
+  font-weight: 500;
+  color: #374151;
+  margin-bottom: 8px;
+}
+.cms-filter-control input[type=range] {
+  width: 100%;
+  height: 6px;
+  border-radius: 3px;
+  background: #e5e7eb;
+  outline: none;
+  -webkit-appearance: none;
+}
+.cms-filter-control input[type=range]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: #667eea;
+  cursor: pointer;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+.cms-filter-control input[type=range]::-moz-range-thumb {
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: #667eea;
+  cursor: pointer;
+  border: none;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+.cms-crop-info {
+  padding: 12px;
+  background: white;
+  border-radius: 6px;
+  border: 1px solid #d1d5db;
+}
+.cms-crop-info p {
+  margin: 0;
+  font-size: 13px;
+  color: #6b7280;
+}
+.cms-image-editor-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 24px;
+  border-top: 1px solid #e5e7eb;
+  background: #f9fafb;
+}
+.cms-image-editor-footer > div {
+  display: flex;
+  gap: 12px;
+}
+.cms-btn-primary,
+.cms-btn-secondary {
+  padding: 10px 20px;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+  border: none;
+}
+.cms-btn-primary {
+  background: #667eea;
+  color: white;
+}
+.cms-btn-primary:hover {
+  background: #5568d3;
+}
+.cms-btn-secondary {
+  background: white;
+  color: #374151;
+  border: 1px solid #d1d5db;
+}
+.cms-btn-secondary:hover {
+  background: #f3f4f6;
+}
+@media (max-width: 768px) {
+  .cms-image-editor-body {
+    grid-template-columns: 1fr;
+  }
+  .cms-preset-buttons {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
 
 /* src/styles/renderer.css */
 .cms-renderer {