SDC Inline Editor

SDC Inline Editor transforms how content creators build pages in Drupal by providing a visual, drag-and-drop interface powered by Single Directory Components. Instead of writing HTML or learning complex Drupal configuration, content editors can build rich, interactive pages by simply dragging components onto the page and editing them inline. The module stores content as structured SDC components rather than raw HTML, ensuring consistency, reusability, and optimal performance through server-side rendering.

Features

SDC Inline Editor provides a complete visual page building experience:

• Drag-and-Drop Interface: Add, rearrange, and remove components directly on the page
• Inline Editing: Click any editable field to edit content directly where it appears
• Component-Based Architecture: Build pages using reusable Single Directory Components
• Server-Side Rendering: Content is rendered on the server for optimal performance and SEO
• WYSIWYG Editing: Rich text editing powered by CKEditor 5 for text fields
• Media Library Integration: Select images and media directly from Drupal's media library
• Component Toolbar: Quick access to add new components, delete, move, and configure settings
• Sidebar Configuration: Edit component properties like image sizes, alignment, and other settings in a convenient sidebar panel

Post-Installation

1. Install the Module: Enable the SDC Inline Editor module via the Extend page
   (/admin/modules)
2. Build JavaScript Assets: The module requires compiled JavaScript assets. Run the build process:

   npm install
   npm run build

3. Configure Permissions: Navigate to People → Permissions
   (/admin/people/permissions) and grant appropriate permissions:
   • "Use SDC Inline Editor to edit content"
     (sdc_inline_editor.edit_content): Allows users to use the inline editor
   • "Administer SDC Inline Editor"
     (sdc_inline_editor.administer): Allows configuration access
4. Create or Configure Content Types: The inline editor works with any content type
   that has a body field. Ensure your content types have a body field configured. navigate to /admin/config/content/sdc-inline-editor to enable the editor on specific content types.
5. Create SDC Components: Build your component library by creating Single Directory
   Components following Drupal's SDC documentation and our documentation. Components should be placed in your theme or
   module's components/ directory.
6. Configure Component Attributes: In your component Twig templates, add SDC editing attributes:
   • Use {{ sdc_component_attributes(component_name) }} on the root element
   • Use {{ sdc_field_attributes('field_name', editable, {'data-sdc-type': 'text-editor'}) }}
     for editable fields
   • See components/SDC_ATTRIBUTES_USAGE.md for detailed attribute documentation

Additional Requirements

This module requires two additional contributed modules.

• Inline Entity Form (inline_entity_form): ^3.0@RC – Required for entity form integration
• Entity Browser (entity_browser): ^2.15 – Required for media selection functionality