Single directory component Embed
8 sites
Security covered
This module provides a CKEditor button that allows content editors to embed Single Directory Components (SDCs) from your theme directly into rich text fields. It dynamically generates forms for SDC properties based on their schema, embeds them as placeholders, and renders the actual component with validation when the content is displayed.
A Drupal module that adds a CKEditor 5 toolbar button for embedding Single Directory Components (SDC) from the active theme directly into rich-text content.
Features
Out of the box, Drupal SDCs are something themers reach for from inside Twig templates. This module bridges that gap for content editors:
- Discovers every SDC the active theme provides via the core plugin.manager.sdc service.
- Adds an "Embed component" button to CKEditor 5.
- Opens a modal where the editor picks a component and fills in its props (form fields are generated dynamically from the component's *.component.yml schema).
- Stores the embed as a clean placeholder in the saved HTML.
- A text filter renders the placeholder back into the real component (with full SDC schema validation, library attachment, cache metadata) on display.
Post-Installation
- Edit a text format at Configuration → Content authoring → Text formats and editors (e.g. Full HTML).
- Add the toolbar button: drag Embed component from "Available buttons" into the active toolbar.
- Enable the filter: tick Embed Single Directory Components in the Enabled filters list. Place it after any filter that touches HTML (e.g. Limit allowed HTML tags).
- Whitelist the placeholder element in the Limit Allowed HTML filter (the CKEditor plugin already declares this via the elements key in sdc_embed.ckeditor5.yml, so Drupal will offer to add it for you):
- Grant the Use SDC Embed in CKEditor permission to roles that should see the button.
- Optional — visit Configuration → Content authoring → SDC Embed settings to:
- Restrict the editor to a subset of components.
- Also expose components defined in modules (default: theme only).
Additional Requirements
There are no additional requirements.