cms-block-editor 1.0.7 → 1.0.12

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2024 [Your Name]
+Copyright (c) 2024 Samuel Clinton
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

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  
@@ -71,6 +72,8 @@ Main editor component with full editing capabilities.
 **Props:**
 - `value?: string` - Initial editor state (JSON string)
 - `onChange?: (state: any) => void` - Callback fired when content changes
+- `onImageAdded?: (file: File) => Promise<string>` - Custom image upload handler that returns the image URL
+- `useBase64Url?: boolean` - Use base64 encoding for images (default: `true`)
 
 ### CMSRenderer
 
@@ -92,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
+- **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
@@ -130,6 +134,47 @@ Read-only renderer for displaying saved content.
 
 ## Advanced Usage
 
+### Custom Image Upload
+
+Upload images to your server instead of using base64 encoding:
+
+```tsx
+import { CMSBlockEditor } from 'cms-block-editor';
+
+function Editor() {
+  const [content, setContent] = useState('');
+
+  const handleImageUpload = async (file: File): Promise<string> => {
+    // Upload to your server
+    const formData = new FormData();
+    formData.append('image', file);
+    
+    const response = await fetch('/api/upload', {
+      method: 'POST',
+      body: formData,
+    });
+    
+    const data = await response.json();
+    return data.url; // Return the uploaded image URL
+  };
+
+  return (
+    <CMSBlockEditor 
+      value={content}
+      onChange={(state) => setContent(JSON.stringify(state))}
+      onImageAdded={handleImageUpload}
+      useBase64Url={false}
+    />
+  );
+}
+```
+
+**Image Upload Options:**
+
+- **With `onImageAdded`**: Provide a custom upload handler that uploads the file to your server and returns the URL
+- **With `useBase64Url={true}`** (default): Images are encoded as base64 strings (no server upload needed)
+- **With `useBase64Url={false}` and no `onImageAdded`**: Image upload will be disabled
+
 ### With Persistence
 
 ```tsx
@@ -248,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 {