Simplify adding Entity Browser form element to custom form

#21 works for me in custom form only if we had #tree = TRUE

  /**
   * {@inheritDoc}
   */
  public function buildForm(array $form, FormStateInterface $form_state) {
    $form['background_image'] = $this->getEntityBrowserForm(
      'paragraphs_library_items', // Entity Browser config entity ID
      $this->configuration['background_image'], // Default value as a string
      1, // Cardinality
      'preview' // The view mode to use when displaying the entity in the selected entities table
    );
    
    // Convert the wrapping container to a details element.
    $form['background_image']['#type'] = 'details';
    $form['background_image']['#title'] = $this->t('Background image');
    $form['background_image']['#open'] = TRUE;
    $form['background_image']['#tree'] = TRUE;
    return $form;
  }

Thank you all for your work! #21 and the info in #22 helped me a lot!

I added a JS behavior to make the selected elements sortable. To do that I had to add my library and a class in the base element:

    $element = [
      '#type' => 'details', // I added this directly here
      '#open' => $default_open, // I added this as a parameter
      '#title' => $title, // I added this as a parameter
      '#attributes' => [
        'id' => Html::getUniqueId('entity-browser-' . $entity_browser_id . '-wrapper'),
        'class' => [
          'entity-browser-form-trait-element', // NEW CLASS for JS behavior
        ]
      ],
      '#attached' => [
        'library' => [
          'my_module/entity-browser-trait' // ATTACH new library
        ]
      ]
    ];

Be sure to add the dependency to core/sortable in your libraries.yml.

(function ($) {

  Drupal.behaviors.entityBrowserTraitSortable = {
    attach: function (context, settings) {
      $(once('sortable-entity-browser-images', '.entity-browser-form-trait-element table.responsive-enabled tbody')).each(function() {
        let $tbody = $(this);
        let $parent = $tbody.closest('.entity-browser-form-trait-element');
        $tbody.find('>tr').css('cursor', 'move'); // This is a convenience thing and could be moved to CSS
        Sortable.create($tbody[0], {
          onEnd: function (e) {
            let $to = $(e.to);
            let list = [];
            $to.children('tr').each(function() {
              list.push($(this).attr('data-entity-id'));
            });
            $parent.find('input[type="hidden"].eb-target').val(list.join(' '));
          }
        });

      })
    },
  };

})(jQuery);

#21 worked for me too.

Thanks!!!

I've been using the code in #21 for a while on my site and it has worked great! I had a custom ckeditor plugin that opened up a modal that contained a few form fields, one of which needed to open our custom entity browser. However, I've been attempting to upgrade to ckeditor5, and I can not get this functionality to work any longer.

Clicking the button on the ckeditor5 toolbar opens up my modal successfully, and my other fields work...but I can't get the custom entity browser field to work correctly. Once I make a selection, I still see a 'No items selected yet' message. I would expect the image that I selected to appear there. Even if I hardcode media:123 for example as the default value, I still see the 'no items selected yet' message.

Just wondering if anyone has seen a similar issue? I really don't know what could be causing this to happen.

I am seeing the same issue that @tlo405 mentioned. I think something is off with the code in #28 for making this sortable.

I have this working now. I think what was happening was the #attributes stuff that sets an ID and Class above were overriding the ID being set by the entity browser.

So, instead of:

'#attributes' => [
        'id' => Html::getUniqueId('entity-browser-' . $entity_browser_id . '-wrapper'),
        'class' => [
          'entity-browser-form-trait-element', // NEW CLASS for JS behavior
        ]
      ],

This worked better for me:

$form['component']['#attributes']['class'] = 'entity-browser-form-trait-element';

Because it already gets an ID set in the $this->getEntityBrowserForm() call for the entity browser element.

Hope this helps someone.