feat: add image field type for Simple Blocks with Media Library integration

Schero94 · Schero94 · commit 61fa7693e37b · 2025-12-22T11:24:07.000+01:00
- Added 'image' field type to Custom Blocks
- Image fields open Strapi Media Library for selection
- Shows image preview with Select/Remove buttons
- Stores url, alt, width, height, id, documentId
- Seamless integration via CustomEvent bridge
diff --git a/admin/src/components/EditorJS/index.jsx b/admin/src/components/EditorJS/index.jsx
@@ -3265,6 +3265,44 @@ const Editor = forwardRef(({
     [mediaLibBlockIndex, mediaLibToggleFunc]
   );
 
+  // Custom Block Image Field - Media Library integration
+  const [customBlockImageCallback, setCustomBlockImageCallback] = useState(null);
+  
+  const handleCustomBlockMediaLibChange = useCallback((data) => {
+    if (customBlockImageCallback && window.__MAGIC_EDITOR_IMAGE_CALLBACKS__) {
+      const callback = window.__MAGIC_EDITOR_IMAGE_CALLBACKS__[customBlockImageCallback];
+      if (callback) {
+        // Format the data for the image field
+        const formattedData = data.map((file) => ({
+          url: file.url,
+          alt: file.alt || file.name || '',
+          width: file.width,
+          height: file.height,
+          id: file.id,
+          documentId: file.documentId,
+          name: file.name,
+        }));
+        callback(formattedData);
+      }
+    }
+    setCustomBlockImageCallback(null);
+    setIsMediaLibOpen(false);
+  }, [customBlockImageCallback]);
+
+  // Listen for custom block image field events
+  useEffect(() => {
+    const handleOpenMediaLib = (event) => {
+      const { callbackId, allowedTypes } = event.detail || {};
+      if (callbackId) {
+        setCustomBlockImageCallback(callbackId);
+        setIsMediaLibOpen(true);
+      }
+    };
+    
+    window.addEventListener('magic-editor-open-media-lib', handleOpenMediaLib);
+    return () => window.removeEventListener('magic-editor-open-media-lib', handleOpenMediaLib);
+  }, []);
+
   // Fullscreen toggle
   const toggleFullscreen = useCallback(() => {
     setIsFullscreen(prev => {
@@ -4077,8 +4115,14 @@ const Editor = forwardRef(({
 
       <MediaLibComponent
         isOpen={isMediaLibOpen}
-        onChange={handleMediaLibChange}
-        onToggle={mediaLibToggleFunc}
+        onChange={customBlockImageCallback ? handleCustomBlockMediaLibChange : handleMediaLibChange}
+        onToggle={() => {
+          if (customBlockImageCallback) {
+            setCustomBlockImageCallback(null);
+          }
+          mediaLibToggleFunc();
+        }}
+        multiple={!customBlockImageCallback}
       />
       
       {/* AI Inline Toolbar - New Smart UI */}
diff --git a/admin/src/pages/CustomBlocksPage.jsx b/admin/src/pages/CustomBlocksPage.jsx
@@ -1758,6 +1758,7 @@ const CustomBlocksPage = () => {
                                 <option value="select">Select</option>
                                 <option value="color">Color</option>
                                 <option value="checkbox">Checkbox</option>
+                                <option value="image">Image</option>
                               </FieldSelect>
                               <IconButton $danger onClick={() => removeField(index)}>
                                 <TrashIcon />
diff --git a/admin/src/utils/blockFactory.js b/admin/src/utils/blockFactory.js
@@ -349,6 +349,10 @@ export function createSimpleBlock(config) {
           });
           break;
           
+        case 'image':
+          input = this._createImageField(field);
+          break;
+          
         default: // text input
           input = document.createElement('input');
           input.type = field.type || 'text';
@@ -374,6 +378,174 @@ export function createSimpleBlock(config) {
       return container;
     }
 
+    /**
+     * Create image field with Media Library integration
+     * @param {object} field - Field configuration
+     * @returns {HTMLElement}
+     */
+    _createImageField(field) {
+      const wrapper = document.createElement('div');
+      wrapper.style.cssText = `
+        border: 2px dashed #e2e8f0;
+        border-radius: 8px;
+        padding: 16px;
+        text-align: center;
+        background: #fafbfc;
+        transition: all 0.2s ease;
+      `;
+      
+      // Image preview
+      const preview = document.createElement('div');
+      preview.className = 'image-preview';
+      preview.style.cssText = `
+        margin-bottom: 12px;
+        min-height: 60px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      `;
+      
+      const img = document.createElement('img');
+      img.style.cssText = `
+        max-width: 100%;
+        max-height: 150px;
+        border-radius: 6px;
+        display: none;
+      `;
+      
+      const placeholder = document.createElement('div');
+      placeholder.innerHTML = `
+        <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#94a3b8" stroke-width="1.5">
+          <rect x="3" y="3" width="18" height="18" rx="2"/>
+          <circle cx="8.5" cy="8.5" r="1.5"/>
+          <path d="M21 15l-5-5L5 21"/>
+        </svg>
+        <p style="margin: 8px 0 0; color: #94a3b8; font-size: 13px;">No image selected</p>
+      `;
+      placeholder.style.cssText = 'text-align: center;';
+      
+      preview.appendChild(img);
+      preview.appendChild(placeholder);
+      
+      // Update preview based on current data
+      const updatePreview = (url) => {
+        if (url) {
+          img.src = url;
+          img.style.display = 'block';
+          placeholder.style.display = 'none';
+          wrapper.style.borderStyle = 'solid';
+          wrapper.style.borderColor = '#c4b5fd';
+        } else {
+          img.style.display = 'none';
+          placeholder.style.display = 'block';
+          wrapper.style.borderStyle = 'dashed';
+          wrapper.style.borderColor = '#e2e8f0';
+        }
+      };
+      
+      // Initial state
+      const currentValue = this.data[field.name];
+      if (currentValue && typeof currentValue === 'object') {
+        updatePreview(currentValue.url);
+      } else if (typeof currentValue === 'string' && currentValue) {
+        updatePreview(currentValue);
+      }
+      
+      // Buttons container
+      const buttons = document.createElement('div');
+      buttons.style.cssText = 'display: flex; gap: 8px; justify-content: center;';
+      
+      // Select button
+      const selectBtn = document.createElement('button');
+      selectBtn.type = 'button';
+      selectBtn.textContent = 'Select Image';
+      selectBtn.style.cssText = `
+        padding: 8px 16px;
+        background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
+        color: white;
+        border: none;
+        border-radius: 6px;
+        font-size: 13px;
+        font-weight: 600;
+        cursor: pointer;
+        transition: all 0.2s ease;
+      `;
+      selectBtn.addEventListener('mouseenter', () => {
+        selectBtn.style.transform = 'translateY(-1px)';
+        selectBtn.style.boxShadow = '0 4px 12px rgba(124, 58, 237, 0.35)';
+      });
+      selectBtn.addEventListener('mouseleave', () => {
+        selectBtn.style.transform = 'translateY(0)';
+        selectBtn.style.boxShadow = 'none';
+      });
+      
+      // Remove button
+      const removeBtn = document.createElement('button');
+      removeBtn.type = 'button';
+      removeBtn.textContent = 'Remove';
+      removeBtn.style.cssText = `
+        padding: 8px 16px;
+        background: transparent;
+        color: #ef4444;
+        border: 1px solid #fecaca;
+        border-radius: 6px;
+        font-size: 13px;
+        font-weight: 600;
+        cursor: pointer;
+        transition: all 0.2s ease;
+        display: ${this.data[field.name] ? 'inline-block' : 'none'};
+      `;
+      removeBtn.addEventListener('click', () => {
+        this.data[field.name] = null;
+        updatePreview(null);
+        removeBtn.style.display = 'none';
+      });
+      
+      // Handle select button click - dispatch custom event
+      selectBtn.addEventListener('click', () => {
+        if (this.readOnly) return;
+        
+        // Create a unique callback ID
+        const callbackId = `image_field_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+        
+        // Store callback globally for Media Library to call
+        window.__MAGIC_EDITOR_IMAGE_CALLBACKS__ = window.__MAGIC_EDITOR_IMAGE_CALLBACKS__ || {};
+        window.__MAGIC_EDITOR_IMAGE_CALLBACKS__[callbackId] = (files) => {
+          if (files && files.length > 0) {
+            const file = files[0];
+            const imageData = {
+              url: file.url,
+              alt: file.alt || file.name || '',
+              width: file.width,
+              height: file.height,
+              id: file.id,
+              documentId: file.documentId,
+            };
+            this.data[field.name] = imageData;
+            updatePreview(imageData.url);
+            removeBtn.style.display = 'inline-block';
+          }
+          // Cleanup
+          delete window.__MAGIC_EDITOR_IMAGE_CALLBACKS__[callbackId];
+        };
+        
+        // Dispatch event to open Media Library
+        window.dispatchEvent(new CustomEvent('magic-editor-open-media-lib', {
+          detail: { callbackId, fieldName: field.name, allowedTypes: ['images'] }
+        }));
+      });
+      
+      buttons.appendChild(selectBtn);
+      buttons.appendChild(removeBtn);
+      
+      wrapper.appendChild(preview);
+      if (!this.readOnly) {
+        wrapper.appendChild(buttons);
+      }
+      
+      return wrapper;
+    }
+
     /**
      * Escape HTML special characters
      * @param {string} text - Text to escape
