feat: Custom Blocks with Tier-based Limits (v1.4.0-alpha.1)

- Add Custom Blocks feature (Simple + Embedded Entry blocks)
- Implement tier-based limits (FREE: 3 Simple, PREMIUM: 10 Total, ADVANCED: Unlimited)
- Add Export/Import for Advanced tier
- Backend validation with 403 Forbidden on limit exceeded
- Modern Admin UI with limits banner, progress bar, upgrade hints
- Contentful-style Inline Entries via Embedded Entry blocks
- Replaces need for Dynamic Zones in many use cases

Author: Schero94

README.md

@@ -7,15 +7,36 @@
 [![Strapi v5](https://img.shields.io/badge/Strapi-v5-7C3AED.svg)](https://strapi.io)
 [![Editor.js](https://img.shields.io/badge/Editor.js-2.31.0-000.svg)](https://editorjs.io)
 
+> **ALPHA RELEASE v1.4.0-alpha.1** - Custom Blocks with Tier-based Limits now available! Create your own editor blocks without writing code.
+
 ---
 
-## 🆕 What's New in v1.2.0
+## What's New in v1.4.0-alpha.1
+
+### Custom Blocks (Contentful-style)
+
+Create custom editor blocks directly from the Admin UI - no code required!
+
+- **Simple Blocks** - Text/HTML blocks with configurable fields (text, textarea, select, color, checkbox)
+- **Embedded Entry Blocks** - Reference other Strapi content types with preview fields (like Contentful Inline Entries)
+- **HTML Templates** - Define custom templates with `{{fieldName}}` placeholders
+- **Replaces Dynamic Zones** - Simpler alternative for structured content within the editor
+
+### Tier-Based Limits
+
+| Feature | FREE | PREMIUM | ADVANCED |
+|---------|------|---------|----------|
+| Simple Blocks | 3 | 10 (combined) | Unlimited |
+| Embedded Entry | - | 10 (combined) | Unlimited |
+| Export/Import | - | - | Yes |
+| API Access | - | - | Yes |
+
+### Previous Updates (v1.2.0)
 
 - **Character-Level Collaboration** - Multiple users can now type in the same paragraph simultaneously without conflicts
 - **Webtools Links Integration** - Optional integration with PluginPal's Webtools Links addon for internal/external link management
 - **Direct Link Editing** - Click on any link to instantly open the link editor modal
 - **Improved Fullscreen Mode** - Blocks now stretch to full width, Media Library modal works correctly
-- **Performance Improvements** - Removed debug logging, optimized Y.js sync
 
 ---
 
@@ -314,6 +335,114 @@ Magic Editor X comes with a comprehensive collection of tools, categorized for e
 | **Undo/Redo** | History management | `editorjs-undo` |
 | **Drag & Drop** | Reorder blocks by dragging | `editorjs-drag-drop` |
 
+### Custom Blocks (User-Defined)
+
+Magic Editor X allows you to create your own custom blocks without writing code! This feature is similar to Contentful's embedded entries and can replace Strapi's Components + Dynamic Zones setup.
+
+#### Creating Custom Blocks via Admin UI
+
+1. Go to **Settings > Magic Editor X > Custom Blocks**
+2. Click **Create Block**
+3. Fill in the form:
+   - **Block Name** - Unique identifier (e.g., `productCard`)
+   - **Display Label** - Shown in the editor toolbox
+   - **Block Type**:
+     - **Simple Block** - Text/HTML content with custom fields
+     - **Embedded Entry** - Links to existing Strapi content
+4. Configure additional options (fields, template, icon)
+5. Click **Create Block**
+
+The new block appears immediately in the editor toolbox!
+
+#### Block Types
+
+**Simple Blocks:**
+Custom text/HTML blocks with configurable fields.
+
+| Option | Description |
+|--------|-------------|
+| Placeholder | Hint text for empty content |
+| Template | Custom HTML with `{{fieldName}}` placeholders |
+| Fields | Add custom fields (text, select, color, checkbox) |
+| Styles | Custom CSS as JSON object |
+
+**Embedded Entry Blocks:**
+Embed existing Strapi content directly in your editor.
+
+| Option | Description |
+|--------|-------------|
+| Content Type | Target content type (e.g., `api::product.product`) |
+| Title Field | Field to display as entry title |
+| Display Fields | Fields shown in preview |
+
+#### Creating Custom Blocks via Config (Developers)
+
+For developers who prefer code-based configuration:
+
+```javascript
+// config/plugins.js
+'magic-editor-x': {
+  enabled: true,
+  config: {
+    customBlocks: [
+      {
+        name: 'productCard',
+        label: 'Product Card',
+        blockType: 'embedded-entry',
+        contentType: 'api::product.product',
+        displayFields: ['title', 'price', 'thumbnail'],
+        titleField: 'title',
+        icon: '<svg>...</svg>',
+      },
+      {
+        name: 'callToAction',
+        label: 'Call to Action',
+        blockType: 'simple',
+        placeholder: 'Enter CTA text...',
+        fields: [
+          { name: 'buttonText', label: 'Button Text', type: 'text' },
+          { name: 'buttonUrl', label: 'Button URL', type: 'text' },
+          { name: 'variant', label: 'Style', type: 'select', options: ['primary', 'secondary'] },
+        ],
+        template: `
+          <div class="cta-block">
+            <p data-field="content">{{content}}</p>
+            <a href="{{buttonUrl}}" class="btn btn-{{variant}}">{{buttonText}}</a>
+          </div>
+        `,
+      },
+    ],
+  },
+},
+```
+
+#### Import/Export Custom Blocks
+
+Custom blocks can be exported and imported between environments:
+
+1. Go to **Settings > Magic Editor X > Custom Blocks**
+2. Click **Export** to download a JSON file
+3. On another instance, click **Import** and select the file
+
+#### Custom Block Output Format
+
+Custom blocks save their data in the standard Editor.js format:
+
+```json
+{
+  "type": "productCard",
+  "data": {
+    "entry": {
+      "id": 42,
+      "documentId": "abc123",
+      "title": "Product Name",
+      "price": 99.99
+    },
+    "contentType": "api::product.product"
+  }
+}
+```
+
 ### 4. Media Library Integration
 
 Seamless integration with Strapi's built-in Media Library:

admin/src/components/EditorJS/index.jsx

@@ -38,6 +38,7 @@ import { useLicense } from '../../hooks/useLicense';
 import { useAIActions } from '../../hooks/useAIActions';
 import { useWebtoolsLinks } from '../../hooks/useWebtoolsLinks';
 import { useVersionHistory } from '../../hooks/useVersionHistory';
+import { useCustomBlocks } from '../../hooks/useCustomBlocks';
 import AIAssistantPopup from '../AIAssistantPopup';
 import VersionHistoryPanel from '../VersionHistoryPanel';
 import AIInlineToolbar from '../AIInlineToolbar';
@@ -213,44 +214,62 @@ const EditorJSGlobalStyles = createGlobalStyle`
     z-index: 99999 !important;
   }
   
+  /* ============================================
+     NESTED POPOVER FIX - Remove min-width constraint
+     ============================================ */
+  .ce-popover--inline .ce-popover--nested .ce-popover__container,
+  .ce-popover--inline .ce-popover--nested.ce-popover--nested-level-1 .ce-popover__container {
+    min-width: 0 !important;
+  }
+  
   /* ============================================
      TOOLBOX POPOVER (Plus Button) - CRITICAL FIX
      Make sure items are visible and properly displayed
      ============================================ */
   
   .ce-popover:not(.ce-popover--inline) {
-    display: block !important;
+    display: flex !important;
+    flex-direction: column !important;
     visibility: visible !important;
     opacity: 1 !important;
     z-index: 99999 !important;
   }
   
   .ce-popover--opened {
-    display: block !important;
+    display: flex !important;
+    flex-direction: column !important;
     visibility: visible !important;
     opacity: 1 !important;
   }
   
   .ce-popover__container {
-    display: block !important;
+    display: flex !important;
+    flex-direction: column !important;
     visibility: visible !important;
     opacity: 1 !important;
+    flex: 1 !important;
+    overflow: hidden !important;
   }
   
   .ce-popover__items {
     display: block !important;
     visibility: visible !important;
     opacity: 1 !important;
-    max-height: 400px !important;
+    flex: 1 !important;
     overflow-y: auto !important;
   }
   
+  /* Popover items - don't force display, let EditorJS control visibility for search */
   .ce-popover-item {
-    display: flex !important;
     visibility: visible !important;
     opacity: 1 !important;
   }
   
+  /* Only show flex when not hidden by search */
+  .ce-popover-item:not([hidden]) {
+    display: flex !important;
+  }
+  
   .ce-popover-item__icon {
     display: flex !important;
     visibility: visible !important;
@@ -263,16 +282,48 @@ const EditorJSGlobalStyles = createGlobalStyle`
     opacity: 1 !important;
   }
   
-  /* Hide empty/nothing-found message for main toolbox */
+  /* Nothing found message - EditorJS controls visibility */
   .ce-popover:not(.ce-popover--inline) .ce-popover__nothing-found-message {
-    display: none !important;
+    padding: 16px !important;
+    text-align: center !important;
+    color: #64748b !important;
+    font-size: 14px !important;
   }
   
-  /* Make sure search is visible */
+  /* Search styling - let EditorJS control visibility */
   .ce-popover__search {
-    display: block !important;
-    visibility: visible !important;
-    opacity: 1 !important;
+    padding: 12px !important;
+    margin: 0 !important;
+    border-bottom: 1px solid #e2e8f0 !important;
+    background: white !important;
+  }
+  
+  /* Hide the search icon */
+  .ce-popover__search-icon {
+    display: none !important;
+  }
+  
+  .ce-popover__search-input {
+    width: 100% !important;
+    padding: 10px 14px !important;
+    border: 1px solid #e2e8f0 !important;
+    border-radius: 10px !important;
+    background: #f8fafc !important;
+    font-size: 14px !important;
+    color: #334155 !important;
+    outline: none !important;
+    transition: all 0.15s ease !important;
+    box-sizing: border-box !important;
+  }
+  
+  .ce-popover__search-input:focus {
+    border-color: #7C3AED !important;
+    background: white !important;
+    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1) !important;
+  }
+  
+  .ce-popover__search-input::placeholder {
+    color: #94a3b8 !important;
   }
   
   /* ============================================
@@ -2082,6 +2133,9 @@ const Editor = forwardRef(({
   // Webtools Link Picker integration (optional)
   const { isAvailable: isWebtoolsAvailable, openLinkPicker: webtoolsOpenLinkPicker } = useWebtoolsLinks();
 
+  // Custom Blocks (user-defined blocks from database)
+  const { customBlocks, isLoading: isLoadingCustomBlocks } = useCustomBlocks();
+  
   // Refs - must be defined before useAIActions
   const editorRef = useRef(null);
   const editorInstanceRef = useRef(null);
@@ -3358,12 +3412,21 @@ const Editor = forwardRef(({
 
   // Initialize Editor.js
   useEffect(() => {
+    // Wait for custom blocks to finish loading before initializing
+    if (isLoadingCustomBlocks) {
+      console.log('[Magic Editor X] Waiting for custom blocks to load...');
+      return;
+    }
+    
     if (editorRef.current && !editorInstanceRef.current) {
       const tools = getTools({ 
         mediaLibToggleFunc, 
         pluginId: PLUGIN_ID,
         openLinkPicker: isWebtoolsAvailable ? webtoolsOpenLinkPicker : null,
+        customBlocks: customBlocks || [],
       });
+      
+      console.log('[Magic Editor X] Custom blocks loaded:', customBlocks?.length || 0);
 
       let initialData = undefined;
       if (value) {
@@ -3610,7 +3673,8 @@ const Editor = forwardRef(({
       }
       document.body.classList.remove('editor-fullscreen');
     };
-  }, []);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isLoadingCustomBlocks, customBlocks]);
 
   // Dynamically toggle readOnly when collaboration role changes (viewer can't edit)
   useEffect(() => {