cms-block-editor 1.0.9 → 1.0.13

package/README.md

@@ -11,7 +11,9 @@ 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  
+🎬 **Videos** - Native HTML5 video upload with playback controls  
 🎥 **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  
@@ -72,6 +74,7 @@ Main editor component with full editing capabilities.
 - `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
+- `onVideoAdded?: (file: File) => Promise<string>` - Custom video upload handler that returns the video URL
 - `useBase64Url?: boolean` - Use base64 encoding for images (default: `true`)
 
 ### CMSRenderer
@@ -94,7 +97,9 @@ 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
+- **Videos**: Native HTML5 video upload, drag-and-drop, playback controls (autoplay, loop, mute), resize support
 - **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
@@ -132,6 +137,39 @@ Read-only renderer for displaying saved content.
 
 ## Advanced Usage
 
+### Custom Video Upload
+
+Upload videos to your server:
+
+```typescript
+import { CMSBlockEditor } from 'cms-block-editor';
+
+function Editor() {
+  const [content, setContent] = useState('');
+
+  const handleVideoUpload = async (file: File): Promise<string> => {
+    const formData = new FormData();
+    formData.append('video', file);
+    
+    const response = await fetch('/api/upload-video', {
+      method: 'POST',
+      body: formData,
+    });
+    
+    const data = await response.json();
+    return data.url;
+  };
+
+  return (
+    <CMSBlockEditor 
+      value={content}
+      onChange={(state) => setContent(JSON.stringify(state))}
+      onVideoAdded={handleVideoUpload}
+    />
+  );
+}
+```
+
 ### Custom Image Upload
 
 Upload images to your server instead of using base64 encoding:
@@ -291,6 +329,8 @@ Check out the [example app](./example-app) for a complete implementation with:
 ## Documentation
 
 Comprehensive guides available:
+- [Video Upload Guide](./docs/VIDEO-GUIDE.md) - Native HTML5 video upload and playback
+- [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,262 @@
     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);
+  }
+}
+.video-node-wrapper {
+  position: relative;
+  display: inline-block;
+  max-width: 100%;
+}
+.video-node-wrapper.selected {
+  outline: 2px solid #667eea;
+  outline-offset: 2px;
+}
+.video-node-wrapper video {
+  display: block;
+  width: 100%;
+  height: auto;
+  border-radius: 4px;
+  background: #000;
+}
+.video-resize-handle {
+  position: absolute;
+  background: #667eea;
+  border: 2px solid white;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  z-index: 10;
+  transition: all 0.2s;
+}
+.video-resize-handle:hover {
+  background: #5568d3;
+  transform: scale(1.2);
+}
+@media (max-width: 768px) {
+  .video-node-wrapper {
+    width: 100% !important;
+  }
+}
 
 /* src/styles/renderer.css */
 .cms-renderer {
@@ -2947,4 +3203,15 @@
     background: #3a3a3a;
   }
 }
+.cms-renderer video {
+  max-width: 100%;
+  height: auto;
+  border-radius: 4px;
+  margin: 16px 0;
+}
+.cms-renderer .video-node-wrapper {
+  display: block;
+  max-width: 100%;
+  margin: 16px 0;
+}
 /*# sourceMappingURL=index.css.map */