cms-block-editor 1.0.5 → 1.0.9

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

@@ -14,6 +14,7 @@ A powerful, feature-rich block editor for CMS applications built with Lexical an
 🖼️ **Images** - Upload, resize, and drag-and-drop images  
 🎥 **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  
 📱 **Responsive** - Mobile-first design with automatic responsive behavior  
 💾 **Export/Import** - HTML and Markdown support  
@@ -70,6 +71,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
 
@@ -91,9 +94,10 @@ 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
 - **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
 
 ### Sections
 10 pre-designed templates:
@@ -128,6 +132,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
@@ -250,6 +295,7 @@ Comprehensive guides available:
 - [Section Editing Guide](./SECTION-EDITING-GUIDE.md)
 - [Background Image Guide](./BACKGROUND-IMAGE-GUIDE.md)
 - [Embed Guide](./EMBED-GUIDE.md)
+- [Table Guide](./TABLE-GUIDE.md)
 - [Responsive Rendering Guide](./RESPONSIVE-RENDERING-GUIDE.md)
 
 ## Contributing

package/dist/index.css

@@ -2058,6 +2058,247 @@
     width: 100%;
   }
 }
+.cms-table-plugin {
+  position: relative;
+  display: inline-block;
+}
+.cms-table-modal {
+  position: fixed;
+  background: white;
+  border: 1px solid #e0e0e0;
+  border-radius: 12px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
+  width: 450px;
+  max-width: 90vw;
+  max-height: 85vh;
+  overflow-y: auto;
+  z-index: 10002;
+  animation: slideDown 0.2s ease-out;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.cms-table-modal-header {
+  padding: 16px 20px;
+  border-bottom: 1px solid #e0e0e0;
+  background:
+    linear-gradient(
+      135deg,
+      #667eea 0%,
+      #764ba2 100%);
+  color: white;
+  border-radius: 12px 12px 0 0;
+  font-weight: 600;
+  font-size: 14px;
+}
+.cms-table-modal-content {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+.cms-table-preview {
+  background: #f8f9fa;
+  padding: 20px;
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+}
+.cms-table-preview-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  background: #dee2e6;
+  border: 2px solid #dee2e6;
+  border-radius: 4px;
+  overflow: hidden;
+}
+.cms-table-preview-row {
+  display: flex;
+  gap: 2px;
+}
+.cms-table-preview-cell {
+  width: 40px;
+  height: 32px;
+  background: white;
+  transition: background 0.2s;
+}
+.cms-table-preview-cell.header {
+  background: #667eea;
+}
+.cms-table-preview-label {
+  font-size: 13px;
+  font-weight: 600;
+  color: #495057;
+}
+.cms-number-input-group {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+.cms-number-button {
+  width: 36px;
+  height: 36px;
+  background: #f8f9fa;
+  border: 2px solid #e0e0e0;
+  border-radius: 6px;
+  font-size: 18px;
+  font-weight: 600;
+  color: #495057;
+  cursor: pointer;
+  transition: all 0.2s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.cms-number-button:hover {
+  background: #667eea;
+  border-color: #667eea;
+  color: white;
+}
+.cms-number-input {
+  flex: 1;
+  padding: 10px 12px;
+  border: 2px solid #e0e0e0;
+  border-radius: 8px;
+  font-size: 14px;
+  color: #2c3e50;
+  text-align: center;
+  font-weight: 600;
+  transition: border-color 0.2s;
+}
+.cms-number-input:hover {
+  border-color: #667eea;
+}
+.cms-number-input:focus {
+  outline: none;
+  border-color: #667eea;
+  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+}
+.cms-checkbox-label {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  cursor: pointer;
+  user-select: none;
+}
+.cms-checkbox {
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+  accent-color: #667eea;
+}
+.cms-checkbox-label span {
+  font-size: 14px;
+  color: #2c3e50;
+  font-weight: 500;
+}
+.cms-table-presets {
+  background: #f8f9fa;
+  padding: 15px;
+  border-radius: 8px;
+}
+.cms-table-presets-title {
+  margin: 0 0 10px 0;
+  font-size: 12px;
+  font-weight: 600;
+  color: #6c757d;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+.cms-table-preset-buttons {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 8px;
+}
+.cms-preset-button {
+  padding: 8px 12px;
+  background: white;
+  border: 2px solid #e0e0e0;
+  border-radius: 6px;
+  font-size: 13px;
+  font-weight: 600;
+  color: #495057;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+.cms-preset-button:hover {
+  background: #667eea;
+  border-color: #667eea;
+  color: white;
+  transform: translateY(-1px);
+}
+.cms-editor-content table {
+  border-collapse: collapse;
+  width: 100%;
+  margin: 20px 0;
+  border: 1px solid #dee2e6;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+.cms-editor-content th,
+.cms-editor-content td {
+  border: 1px solid #dee2e6;
+  padding: 12px 16px;
+  text-align: left;
+  min-width: 100px;
+  position: relative;
+}
+.cms-editor-content th {
+  background: #667eea;
+  color: white;
+  font-weight: 600;
+  font-size: 14px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+.cms-editor-content td {
+  background: white;
+  font-size: 14px;
+  color: #2c3e50;
+}
+.cms-editor-content tr:nth-child(even) td {
+  background: #f8f9fa;
+}
+.cms-editor-content tr:hover td {
+  background: #e9ecef;
+}
+.cms-editor-content td:focus,
+.cms-editor-content th:focus {
+  outline: 2px solid #667eea;
+  outline-offset: -2px;
+  background: #fff;
+}
+.cms-editor-content .TableNode__cell--selected {
+  background: rgba(102, 126, 234, 0.1) !important;
+  outline: 2px solid #667eea;
+  outline-offset: -2px;
+}
+@media (max-width: 768px) {
+  .cms-table-modal {
+    width: 90vw;
+    max-width: 400px;
+  }
+  .cms-table-preview-cell {
+    width: 32px;
+    height: 28px;
+  }
+  .cms-table-preset-buttons {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+@media (max-width: 480px) {
+  .cms-table-modal {
+    width: 95vw;
+  }
+  .cms-table-preview-cell {
+    width: 28px;
+    height: 24px;
+  }
+}
 
 /* src/styles/renderer.css */
 .cms-renderer {
@@ -2630,4 +2871,80 @@
     height: 250px;
   }
 }
+.cms-renderer-content table {
+  border-collapse: collapse;
+  width: 100%;
+  margin: 20px 0;
+  border: 1px solid #dee2e6;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+  background: white;
+}
+.cms-renderer-content th,
+.cms-renderer-content td {
+  border: 1px solid #dee2e6;
+  padding: 12px 16px;
+  text-align: left;
+}
+.cms-renderer-content th {
+  background: #667eea;
+  color: white;
+  font-weight: 600;
+  font-size: 14px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+.cms-renderer-content td {
+  background: white;
+  font-size: 14px;
+  color: #2c3e50;
+}
+.cms-renderer-content tr:nth-child(even) td {
+  background: #f8f9fa;
+}
+.cms-renderer-content tr:hover td {
+  background: #e9ecef;
+  transition: background 0.2s;
+}
+@media (max-width: 768px) {
+  .cms-renderer-content table {
+    display: block;
+    overflow-x: auto;
+    white-space: nowrap;
+    -webkit-overflow-scrolling: touch;
+  }
+  .cms-renderer-content th,
+  .cms-renderer-content td {
+    padding: 10px 12px;
+    font-size: 13px;
+  }
+}
+@media (max-width: 480px) {
+  .cms-renderer-content th,
+  .cms-renderer-content td {
+    padding: 8px 10px;
+    font-size: 12px;
+  }
+}
+@media (prefers-color-scheme: dark) {
+  .cms-renderer-content table {
+    border-color: #3e3e3e;
+    background: #2a2a2a;
+  }
+  .cms-renderer-content th {
+    background: #667eea;
+  }
+  .cms-renderer-content td {
+    background: #2a2a2a;
+    color: #e0e0e0;
+    border-color: #3e3e3e;
+  }
+  .cms-renderer-content tr:nth-child(even) td {
+    background: #333;
+  }
+  .cms-renderer-content tr:hover td {
+    background: #3a3a3a;
+  }
+}
 /*# sourceMappingURL=index.css.map */