cms-block-editor 1.0.12 → 1.0.13

package/README.md

@@ -13,6 +13,7 @@ A powerful, feature-rich block editor for CMS applications built with Lexical an
 📐 **Layouts** - Flexbox and CSS Grid support with visual controls  
 🖼️ **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  
@@ -73,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
@@ -97,6 +99,7 @@ Read-only renderer for displaying saved content.
 ### Media
 - **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
@@ -134,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:
@@ -293,6 +329,7 @@ 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)

package/dist/index.css

@@ -2522,6 +2522,39 @@
     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 {
@@ -3170,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 */