bitbag-media-autocomplete.js only support type image and multiple values is false

[sonbui00]

I have issue when I tried to reuse MediaAutocompleteChoiceType for media_type is null and multiple is true. I see that bitbag-media-autocomplete.js only support media_type is Image and multiple is false (used for Image on Page entity) I make a patch to fix this.

diff --git a/src/Resources/public/js/bitbag-media-autocomplete.js b/src/Resources/public/js/bitbag-media-autocomplete.js
index dd202a01..1bba956c 100644
--- a/src/Resources/public/js/bitbag-media-autocomplete.js
+++ b/src/Resources/public/js/bitbag-media-autocomplete.js
@@ -21,6 +21,14 @@ var trimValue = function trimValue(item) {
 };
 
 var optionNameTmpl = function optionNameTmpl(item, nameField, defaultName) {
+  if (!['png', 'jpeg', 'jpg'].filter(i => item.path.endsWith(i)).length) {
+    return '\n    <strong> '
+    .concat(
+      !item[nameField] ? defaultName : trimValue(htmlToString(item[nameField])),
+      " </strong>\n    ("
+    )
+    .concat(trimValue(item.code), ")\n");
+  }
   return '\n    <img src="'
     .concat(item.path, ' " alt="media-img" />\n    <strong> ')
     .concat(
@@ -69,7 +77,7 @@ var optionNameTmpl = function optionNameTmpl(item, nameField, defaultName) {
                     type: "contains",
                     value: settings.urlData.query
                   },
-                  type: "image"
+                  type: this.dataset.mediaType
                 };
                 return settings;
               },
@@ -100,12 +108,13 @@ var optionNameTmpl = function optionNameTmpl(item, nameField, defaultName) {
               return settings;
             },
             onSuccess: function onSuccess(response) {
+              var items = [];
               response.forEach(function (item) {
-                createDropdownFromElement(element, [{
+                items.push({
                   name: optionNameTmpl(item, choiceName, nameMessage),
                   value: item.code,
                   selected: true
-                }]);
+                });
                 menuElement.append(
                   $(
                     '<div class="item" data-value="'.concat(
@@ -115,6 +124,7 @@ var optionNameTmpl = function optionNameTmpl(item, nameField, defaultName) {
                   )
                 );
               });
+              createDropdownFromElement(element, items);
             }
           });
         } else {
diff --git a/src/Resources/views/Form/theme.html.twig b/src/Resources/views/Form/theme.html.twig
index 69e4b9c5..410575c4 100755
--- a/src/Resources/views/Form/theme.html.twig
+++ b/src/Resources/views/Form/theme.html.twig
@@ -14,6 +14,7 @@
         })}}"
             data-choice-name="{{ choice_name }}"
             data-choice-value="{{ choice_value }}"
+            data-media-type="{{ media_type }}"
             data-criteria-type="{{ remote_criteria_type }}"
             data-criteria-name="{{ remote_criteria_name }}"
             data-load-edit-url="{{ path('bitbag_sylius_cms_plugin_admin_ajax_media_by_code') }}"