Merge branch 'master' into settings-bundle

assets/controllers/elements/attachment_autocomplete_controller.js

@@ -23,6 +23,12 @@ import "tom-select/dist/css/tom-select.bootstrap5.css";
 import '../../css/components/tom-select_extensions.css';
 import TomSelect from "tom-select";
 
+import TomSelect_click_to_edit from '../../tomselect/click_to_edit/click_to_edit'
+import TomSelect_autoselect_typed from '../../tomselect/autoselect_typed/autoselect_typed'
+
+TomSelect.define('click_to_edit', TomSelect_click_to_edit)
+TomSelect.define('autoselect_typed', TomSelect_autoselect_typed)
+
 export default class extends Controller {
     _tomSelect;
 
@@ -46,6 +52,12 @@ export default class extends Controller {
                     }
                     return '<div>' + escape(data.label) + '</div>';
                 }
+            },
+            plugins: {
+                'autoselect_typed': {},
+                'click_to_edit': {},
+                'clear_button': {},
+                "restore_on_backspace": {}
             }
         };
 

assets/controllers/elements/static_file_autocomplete_controller.js

@@ -23,6 +23,12 @@ import "tom-select/dist/css/tom-select.bootstrap5.css";
 import '../../css/components/tom-select_extensions.css';
 import TomSelect from "tom-select";
 
+import TomSelect_click_to_edit from '../../tomselect/click_to_edit/click_to_edit'
+import TomSelect_autoselect_typed from '../../tomselect/autoselect_typed/autoselect_typed'
+
+TomSelect.define('click_to_edit', TomSelect_click_to_edit)
+TomSelect.define('autoselect_typed', TomSelect_autoselect_typed)
+
 /**
  * This is the frontend controller for StaticFileAutocompleteType form element.
  * Basically it loads a text file from the given url (via data-url) and uses it as a source for the autocomplete.
@@ -46,7 +52,13 @@ export default class extends Controller {
             orderField: 'text',
 
             //This a an ugly solution to disable the delimiter parsing of the TomSelect plugin
-            delimiter: 'VERY_L0NG_D€LIMITER_WHICH_WILL_NEVER_BE_ENCOUNTERED_IN_A_STRING'
+            delimiter: 'VERY_L0NG_D€LIMITER_WHICH_WILL_NEVER_BE_ENCOUNTERED_IN_A_STRING',
+            plugins: {
+                'autoselect_typed': {},
+                'click_to_edit': {},
+                'clear_button': {},
+                'restore_on_backspace': {}
+            }
         };
 
         if (this.element.dataset.url) {

assets/controllers/elements/structural_entity_select_controller.js

@@ -24,6 +24,9 @@ import {Controller} from "@hotwired/stimulus";
 
 import {trans, ENTITY_SELECT_GROUP_NEW_NOT_ADDED_TO_DB} from '../../translator.js'
 
+import TomSelect_autoselect_typed from '../../tomselect/autoselect_typed/autoselect_typed'
+TomSelect.define('autoselect_typed', TomSelect_autoselect_typed)
+
 export default class extends Controller {
     _tomSelect;
 
@@ -37,11 +40,15 @@ export default class extends Controller {
         const allowAdd = this.element.getAttribute("data-allow-add") === "true";
         const addHint = this.element.getAttribute("data-add-hint") ?? "";
 
+
+
+
         let settings = {
             allowEmptyOption: true,
             selectOnTab: true,
             maxOptions: null,
             create: allowAdd ? this.createItem.bind(this) : false,
+            createFilter: this.createFilter.bind(this),
 
             // This three options allow us to paste element names with commas: (see issue #538)
             maxItems: 1,
@@ -81,8 +88,17 @@ export default class extends Controller {
             //Add callbacks to update validity
             onInitialize: this.updateValidity.bind(this),
             onChange: this.updateValidity.bind(this),
+
+            plugins: {
+                "autoselect_typed": {},
+            }
         };
 
+        //Add clear button plugin, if an empty option is present
+        if (this.element.querySelector("option[value='']") !== null) {
+            settings.plugins["clear_button"] = {};
+        }
+
         this._tomSelect = new TomSelect(this.element, settings);
         //Do not do a sync here as this breaks the initial rendering of the empty option
         //this._tomSelect.sync();
@@ -113,6 +129,31 @@ export default class extends Controller {
         });
     }
 
+    createFilter(input) {
+
+        //Normalize the input (replace spacing around arrows)
+        if (input.includes("->")) {
+            const inputs = input.split("->");
+            inputs.forEach((value, index) => {
+                inputs[index] = value.trim();
+            });
+            input = inputs.join("->");
+        } else {
+            input = input.trim();
+        }
+
+        const options = this._tomSelect.options;
+        //Iterate over all options and check if the input is already present
+        for (let index in options) {
+            const option = options[index];
+            if (option.path === input) {
+                return false;
+            }
+        }
+
+        return true;
+    }
+
 
     updateValidity() {
         //Mark this input as invalid, if the selected option is disabled

assets/controllers/elements/tagsinput_controller.js

@@ -23,14 +23,21 @@ import "tom-select/dist/css/tom-select.bootstrap5.css";
 import '../../css/components/tom-select_extensions.css';
 import TomSelect from "tom-select";
 
+import TomSelect_click_to_edit from '../../tomselect/click_to_edit/click_to_edit'
+import TomSelect_autoselect_typed from '../../tomselect/autoselect_typed/autoselect_typed'
+
+TomSelect.define('click_to_edit', TomSelect_click_to_edit)
+TomSelect.define('autoselect_typed', TomSelect_autoselect_typed)
+
 export default class extends Controller {
     _tomSelect;
 
     connect() {
         let settings = {
             plugins: {
-                remove_button:{
-                }
+                remove_button:{},
+                'autoselect_typed': {},
+                'click_to_edit': {},
             },
             persistent: false,
             selectOnTab: true,