Issue #3302358: Support mutiple widgets on a single page

modules/cloudinary_media_library_widget/js/cloudinary_media_library.widget.js

 (function ($, Drupal, once, drupalSettings, cloudinary) {
   Drupal.behaviors.CloudinaryMediaLibraryWidget = {
     attach: function (context) {
-      const settings = drupalSettings.cloudinary_media_library_widget || false;
+      const widgetSettings = drupalSettings.cloudinary_media_library_widget || false;
 
-      if (!settings) {
+      if (!widgetSettings) {
         console.error('No settings available for the widget.');
         return;
       }
 
-      const cloudinary_settings = {
-        cloud_name: settings.cloud_name,
-        api_key: settings.api_key,
-        button_caption: Drupal.t('Open media library', {}, {context: 'Cloudinary media'}),
-        button_class: 'button cloudinary-media-library-button',
-        insert_caption: Drupal.t('Insert', {}, {context: 'Cloudinary media'}),
-        multiple: settings.multiple,
-        use_saml: settings.use_saml || false,
-        folder: {
-          resource_type: settings.resource_type
-        }
-      };
-
-      if (settings.max_files) {
-        cloudinary_settings.max_files = settings.max_files;
-      }
-
-      if (settings.starting_folder) {
-        cloudinary_settings.folder.path = settings.starting_folder;
-      }
-
-      const media_creation_url = 'cloudinary_media_library_widget/' + settings.bundle;
       const $progress_element = $(Drupal.theme('ajaxProgressThrobber'));
 
       let mediaInsertHandler = function (data) {
+        const settings = widgetSettings[this.fieldName];
+        const media_creation_url = 'cloudinary_media_library_widget/' + settings.bundle;
         const $fieldElement = $('#' + this.fieldWrapperId);
 
         $fieldElement.find('.js-media-library-selection').after($progress_element);
@@ -50,6 +30,28 @@
       }
 
       once('cloudinaryMediaLibraryWidget', '.js-cloudinary-library-widget', context).forEach(function (element) {
+        const settings = widgetSettings[element.dataset.fieldName];
+        const cloudinary_settings = {
+          cloud_name: settings.cloud_name,
+          api_key: settings.api_key,
+          button_caption: Drupal.t('Open media library', {}, {context: 'Cloudinary media'}),
+          button_class: 'button cloudinary-media-library-button',
+          insert_caption: Drupal.t('Insert', {}, {context: 'Cloudinary media'}),
+          multiple: settings.multiple,
+          use_saml: settings.use_saml || false,
+          folder: {
+            resource_type: settings.resource_type
+          }
+        };
+
+        if (settings.max_files) {
+          cloudinary_settings.max_files = settings.max_files;
+        }
+
+        if (settings.starting_folder) {
+          cloudinary_settings.folder.path = settings.starting_folder;
+        }
+
         const widget = cloudinary.createMediaLibrary(
           cloudinary_settings,
           {
@@ -59,6 +61,7 @@
         )
 
         widget.fieldWrapperId = element.id;
+        widget.fieldName = element.dataset.fieldName;
       });
     }
   };

modules/cloudinary_media_library_widget/src/Plugin/Field/FieldWidget/CloudinaryMediaLibraryWidget.php

@@ -58,8 +58,8 @@ class CloudinaryMediaLibraryWidget extends MediaLibraryWidget {
    */
   public static function defaultSettings() {
     return [
-      'resource_type' => 'image',
-    ] + parent::defaultSettings();
+        'resource_type' => 'image',
+      ] + parent::defaultSettings();
   }
 
   /**
@@ -126,6 +126,7 @@ class CloudinaryMediaLibraryWidget extends MediaLibraryWidget {
 
     $element = parent::formElement($items, $delta, $element, $form, $form_state);
     $element['#attributes']['class'][] = 'js-cloudinary-library-widget';
+    $element['#attributes']['data-field-name'] = $this->fieldDefinition->getName();
     $element['media_library_selection']['#attributes']['class'][] = 'js-cloudinary-library-selection';
     $element['media_library_update_widget']['#attributes']['class'][] = 'js-cloudinary-library-update-widget';
 
@@ -176,7 +177,9 @@ class CloudinaryMediaLibraryWidget extends MediaLibraryWidget {
     }
 
     return [
-      'cloudinary_media_library_widget' => $settings,
+      'cloudinary_media_library_widget' => [
+        $this->fieldDefinition->getName() => $settings,
+      ],
     ];
   }