Edit Media Entity in Modal

The Edit Media Entity in Modal module for Drupal enhances the content editing experience by enabling users to edit media entities directly within a modal dialog. This functionality streamlines workflows, particularly for content creators and editors working with embedded media in rich text editors like CKEditor.
This module is ideal for Drupal sites aiming to provide a more efficient and user-friendly media editing experience.

🛠 Installation

To install the module, run the following commands:

composer require drupal/edit_media_modal
drush en edit_media_modal

Version 2.x

For CKEditor 5 support, ensure you're using version 2.0.0 or higher.

📹 Demonstration

For a visual demonstration of the module in action, refer to the following video:
https://youtu.be/hgTfaZcjzXw

Usage

As default module provides an edit media link for the EditorMediaDialog. But You will be able to use this improvement in the many places where do you need that.

  $form['edit_media_link'] = $media->toLink($this->t('Edit this media'), 'edit-form', [
    'query' => [
      'edit_media_in_modal' => TRUE, // Add that to have ajax actions for the media edit form.
      'destination' => \Drupal\Core\Url::fromRoute('<front>')->toString(), // Add that if you need redirect somewhere after submitting.
    ],
  ])->toRenderable();

  $form['edit_media_link']['#attributes'] = [
    'class' => [
      'js-media-library-edit-modal-link',
      'media-library-edit__modal-link',
      'use-ajax',
      'button',
    ],
    'target' => '_self',
    'data-dialog-options' => json_encode([
      'height' => '75%',
      'width' => '75%',
      'classes' => [
        'ui-dialog-content' => 'media-library-edit__modal-link',
      ],
    ]),
    'data-dialog-type' => 'modal',
  ];