cms-block-editor 1.0.12 → 1.0.14

package/README.md

@@ -13,10 +13,12 @@ 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  
 🎨 **Styling** - Background colors, images, gradients, opacity controls  
+🌈 **Themes** - 10 preset themes with light/dark mode and custom theme support  
 📱 **Responsive** - Mobile-first design with automatic responsive behavior  
 💾 **Export/Import** - HTML and Markdown support  
 🎯 **Section Editor** - Full control over section layout, spacing, and styling  
@@ -31,19 +33,21 @@ npm install cms-block-editor
 ## Quick Start
 
 ```tsx
-import { CMSBlockEditor } from 'cms-block-editor';
+import { CMSBlockEditor, ThemeProvider } from 'cms-block-editor';
 import 'cms-block-editor/dist/index.css';
 
 function App() {
   const [content, setContent] = useState('');
 
   return (
-    <CMSBlockEditor 
-      value={content}
-      onChange={(editorState) => {
-        setContent(JSON.stringify(editorState));
-      }}
-    />
+    <ThemeProvider defaultTheme="light" defaultMode="auto">
+      <CMSBlockEditor 
+        value={content}
+        onChange={(editorState) => {
+          setContent(JSON.stringify(editorState));
+        }}
+      />
+    </ThemeProvider>
   );
 }
 ```
@@ -73,6 +77,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 +102,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 +140,79 @@ Read-only renderer for displaying saved content.
 
 ## Advanced Usage
 
+### Theme System
+
+Use preset themes or create custom ones:
+
+```typescript
+import { CMSBlockEditor, ThemeProvider, ThemeSwitcher } from 'cms-block-editor';
+
+function App() {
+  return (
+    <ThemeProvider defaultTheme="ocean" defaultMode="auto">
+      <div>
+        <ThemeSwitcher />
+        <CMSBlockEditor value={content} onChange={setContent} />
+      </div>
+    </ThemeProvider>
+  );
+}
+```
+
+**Available Themes**: light, dark, ocean, forest, sunset, rose, midnight, dracula, monokai, minimal
+
+**Custom Theme**:
+```typescript
+import { Theme, lightTheme } from 'cms-block-editor';
+
+const myTheme: Theme = {
+  ...lightTheme,
+  name: 'my-theme',
+  colors: {
+    ...lightTheme.colors,
+    primary: '#ff6b6b',
+    primaryHover: '#ee5a52',
+  },
+};
+
+<ThemeProvider defaultTheme={myTheme}>
+  <CMSBlockEditor />
+</ThemeProvider>
+```
+
+### 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 +372,8 @@ Check out the [example app](./example-app) for a complete implementation with:
 ## Documentation
 
 Comprehensive guides available:
+- [Theme System Guide](./docs/THEME-GUIDE.md) - Complete theming and customization
+- [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,322 @@
     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;
+}
+
+/* src/styles/themes.css */
+:root {
+  --cms-color-primary: #667eea;
+  --cms-color-primary-hover: #5568d3;
+  --cms-color-primary-light: #e0e7ff;
+  --cms-color-primary-dark: #4c51bf;
+  --cms-color-secondary: #764ba2;
+  --cms-color-secondary-hover: #6a3f8f;
+  --cms-color-background: #ffffff;
+  --cms-color-surface: #f9fafb;
+  --cms-color-border: #e5e7eb;
+  --cms-color-divider: #d1d5db;
+  --cms-color-text-primary: #1f2937;
+  --cms-color-text-secondary: #6b7280;
+  --cms-color-text-disabled: #9ca3af;
+  --cms-color-success: #10b981;
+  --cms-color-warning: #f59e0b;
+  --cms-color-error: #ef4444;
+  --cms-color-info: #3b82f6;
+  --cms-color-editor-background: #ffffff;
+  --cms-color-editor-text: #1f2937;
+  --cms-color-editor-placeholder: #9ca3af;
+  --cms-color-toolbar-background: #f9fafb;
+  --cms-color-toolbar-text: #374151;
+  --cms-color-toolbar-border: #e5e7eb;
+  --cms-color-selection: #dbeafe;
+  --cms-color-highlight: #fef3c7;
+  --cms-color-focus: #667eea;
+  --cms-typography-font-family:
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    "Helvetica Neue",
+    Arial,
+    sans-serif;
+  --cms-typography-font-family-mono:
+    ui-monospace,
+    SFMono-Regular,
+    "SF Mono",
+    Menlo,
+    Consolas,
+    "Liberation Mono",
+    monospace;
+  --cms-typography-font-size-xs: 0.75rem;
+  --cms-typography-font-size-sm: 0.875rem;
+  --cms-typography-font-size-md: 1rem;
+  --cms-typography-font-size-lg: 1.125rem;
+  --cms-typography-font-size-xl: 1.25rem;
+  --cms-typography-font-weight-normal: 400;
+  --cms-typography-font-weight-medium: 500;
+  --cms-typography-font-weight-bold: 600;
+  --cms-typography-line-height-tight: 1.25;
+  --cms-typography-line-height-normal: 1.5;
+  --cms-typography-line-height-relaxed: 1.75;
+  --cms-spacing-xs: 0.25rem;
+  --cms-spacing-sm: 0.5rem;
+  --cms-spacing-md: 1rem;
+  --cms-spacing-lg: 1.5rem;
+  --cms-spacing-xl: 2rem;
+  --cms-spacing-xxl: 3rem;
+  --cms-radius-none: 0;
+  --cms-radius-sm: 0.25rem;
+  --cms-radius-md: 0.5rem;
+  --cms-radius-lg: 0.75rem;
+  --cms-radius-full: 9999px;
+  --cms-shadow-none: none;
+  --cms-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --cms-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --cms-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  --cms-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+}
+.cms-editor-shell {
+  background: var(--cms-color-editor-background);
+  color: var(--cms-color-editor-text);
+  font-family: var(--cms-typography-font-family);
+  border-radius: var(--cms-radius-md);
+  box-shadow: var(--cms-shadow-md);
+}
+.cms-toolbar {
+  background: var(--cms-color-toolbar-background);
+  color: var(--cms-color-toolbar-text);
+  border-bottom: 1px solid var(--cms-color-toolbar-border);
+}
+.cms-toolbar button {
+  color: var(--cms-color-toolbar-text);
+  border-radius: var(--cms-radius-sm);
+}
+.cms-toolbar button:hover {
+  background: var(--cms-color-surface);
+}
+.cms-toolbar button.active {
+  background: var(--cms-color-primary);
+  color: white;
+}
+.cms-editor-content {
+  color: var(--cms-color-editor-text);
+  font-size: var(--cms-typography-font-size-md);
+  line-height: var(--cms-typography-line-height-normal);
+}
+.cms-editor-placeholder {
+  color: var(--cms-color-editor-placeholder);
+}
+.cms-btn-primary {
+  background: var(--cms-color-primary);
+  color: white;
+  border-radius: var(--cms-radius-md);
+  box-shadow: var(--cms-shadow-sm);
+}
+.cms-btn-primary:hover {
+  background: var(--cms-color-primary-hover);
+}
+.cms-btn-secondary {
+  background: var(--cms-color-surface);
+  color: var(--cms-color-text-primary);
+  border: 1px solid var(--cms-color-border);
+  border-radius: var(--cms-radius-md);
+}
+.cms-btn-secondary:hover {
+  background: var(--cms-color-background);
+}
+.cms-modal-overlay {
+  background: rgba(0, 0, 0, 0.5);
+}
+.cms-modal-content {
+  background: var(--cms-color-background);
+  color: var(--cms-color-text-primary);
+  border-radius: var(--cms-radius-lg);
+  box-shadow: var(--cms-shadow-xl);
+}
+.cms-theme-switcher {
+  display: flex;
+  align-items: center;
+  gap: var(--cms-spacing-sm);
+}
+.cms-theme-mode-toggle {
+  padding: var(--cms-spacing-sm) var(--cms-spacing-md);
+  background: var(--cms-color-surface);
+  border: 1px solid var(--cms-color-border);
+  border-radius: var(--cms-radius-md);
+  cursor: pointer;
+  font-size: var(--cms-typography-font-size-lg);
+  transition: all 0.2s;
+}
+.cms-theme-mode-toggle:hover {
+  background: var(--cms-color-background);
+  transform: scale(1.05);
+}
+.cms-theme-selector {
+  position: relative;
+}
+.cms-theme-selector-button {
+  padding: var(--cms-spacing-sm) var(--cms-spacing-md);
+  background: var(--cms-color-surface);
+  border: 1px solid var(--cms-color-border);
+  border-radius: var(--cms-radius-md);
+  cursor: pointer;
+  font-size: var(--cms-typography-font-size-sm);
+  font-weight: var(--cms-typography-font-weight-medium);
+  color: var(--cms-color-text-primary);
+  transition: all 0.2s;
+  display: flex;
+  align-items: center;
+  gap: var(--cms-spacing-sm);
+}
+.cms-theme-selector-button:hover {
+  background: var(--cms-color-background);
+  border-color: var(--cms-color-primary);
+}
+.cms-theme-selector-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 999;
+}
+.cms-theme-selector-dropdown {
+  position: absolute;
+  top: calc(100% + var(--cms-spacing-sm));
+  right: 0;
+  background: var(--cms-color-background);
+  border: 1px solid var(--cms-color-border);
+  border-radius: var(--cms-radius-lg);
+  box-shadow: var(--cms-shadow-xl);
+  padding: var(--cms-spacing-md);
+  min-width: 320px;
+  max-width: 400px;
+  z-index: 1000;
+}
+.cms-theme-selector-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: var(--cms-spacing-md);
+  padding-bottom: var(--cms-spacing-sm);
+  border-bottom: 1px solid var(--cms-color-border);
+}
+.cms-theme-selector-header h3 {
+  margin: 0;
+  font-size: var(--cms-typography-font-size-md);
+  font-weight: var(--cms-typography-font-weight-bold);
+  color: var(--cms-color-text-primary);
+}
+.cms-theme-selector-header button {
+  background: none;
+  border: none;
+  font-size: 24px;
+  color: var(--cms-color-text-secondary);
+  cursor: pointer;
+  padding: 0;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--cms-radius-sm);
+}
+.cms-theme-selector-header button:hover {
+  background: var(--cms-color-surface);
+  color: var(--cms-color-text-primary);
+}
+.cms-theme-selector-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: var(--cms-spacing-sm);
+  margin-bottom: var(--cms-spacing-md);
+}
+.cms-theme-option {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--cms-spacing-sm);
+  padding: var(--cms-spacing-md);
+  background: var(--cms-color-surface);
+  border: 2px solid var(--cms-color-border);
+  border-radius: var(--cms-radius-md);
+  cursor: pointer;
+  transition: all 0.2s;
+  position: relative;
+}
+.cms-theme-option:hover {
+  border-color: var(--cms-color-primary);
+  transform: translateY(-2px);
+  box-shadow: var(--cms-shadow-md);
+}
+.cms-theme-option.active {
+  border-color: var(--cms-color-primary);
+  background: var(--cms-color-primary-light);
+}
+.cms-theme-preview {
+  width: 100%;
+  height: 40px;
+  border-radius: var(--cms-radius-sm);
+  border: 1px solid;
+  position: relative;
+  overflow: hidden;
+}
+.cms-theme-preview-accent {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 8px;
+}
+.cms-theme-name {
+  font-size: var(--cms-typography-font-size-sm);
+  font-weight: var(--cms-typography-font-weight-medium);
+  color: var(--cms-color-text-primary);
+  text-transform: capitalize;
+}
+.cms-theme-check {
+  position: absolute;
+  top: var(--cms-spacing-xs);
+  right: var(--cms-spacing-xs);
+  color: var(--cms-color-primary);
+  font-weight: var(--cms-typography-font-weight-bold);
+}
+.cms-theme-selector-modes {
+  display: flex;
+  gap: var(--cms-spacing-md);
+  padding-top: var(--cms-spacing-md);
+  border-top: 1px solid var(--cms-color-border);
+}
+.cms-theme-selector-modes label {
+  display: flex;
+  align-items: center;
+  gap: var(--cms-spacing-xs);
+  font-size: var(--cms-typography-font-size-sm);
+  color: var(--cms-color-text-primary);
+  cursor: pointer;
+}
+.cms-theme-selector-modes input[type=radio] {
+  cursor: pointer;
+  accent-color: var(--cms-color-primary);
+}
+@media (max-width: 768px) {
+  .cms-theme-selector-dropdown {
+    right: auto;
+    left: 0;
+    min-width: 280px;
+  }
+  .cms-theme-selector-grid {
+    grid-template-columns: 1fr;
+  }
+}
 /*# sourceMappingURL=index.css.map */