Entity selector: Fixed initial load overwriting initial search

This changes how initial searches can be handled via config rather than
specific action so they can be considered in how the initial data load
is done, to prevent the default empty state loading and overwriting the
search data if it lands later (which was commonly likely).

For #4778

diff --git a/resources/js/components/entity-selector-popup.js b/resources/js/components/entity-selector-popup.js
index 6fb461968859ece0ad0f8934743c42e4f97c13d0..29c06e9095113420b1d744d2fa73cd607635ea69 100644 (file)
--- a/resources/js/components/entity-selector-popup.js
+++ b/resources/js/components/entity-selector-popup.js
@@ -18,18 +18,13 @@ export class EntitySelectorPopup extends Component {
     /**
      * Show the selector popup.
      * @param {Function} callback
-     * @param {String} searchText
      * @param {EntitySelectorSearchOptions} searchOptions
      */
-    show(callback, searchText = '', searchOptions = {}) {
+    show(callback, searchOptions = {}) {
         this.callback = callback;
         this.getSelector().configureSearchOptions(searchOptions);
         this.getPopup().show();
 
-        if (searchText) {
-            this.getSelector().searchText(searchText);
-        }
-
         this.getSelector().focusSearch();
     }
 

diff --git a/resources/js/components/entity-selector.js b/resources/js/components/entity-selector.js
index 5ad9914378e2632e446ffbcaff7728a5bc42fdc1..561370d7a342004dacc592e81d5366a07e1d00a9 100644 (file)
--- a/resources/js/components/entity-selector.js
+++ b/resources/js/components/entity-selector.js
@@ -6,6 +6,7 @@ import {Component} from './component';
  * @property entityTypes string
  * @property entityPermission string
  * @property searchEndpoint string
+ * @property initialValue string
  */
 
 /**
@@ -25,6 +26,7 @@ export class EntitySelector extends Component {
             entityTypes: this.$opts.entityTypes || 'page,book,chapter',
             entityPermission: this.$opts.entityPermission || 'view',
             searchEndpoint: this.$opts.searchEndpoint || '',
+            initialValue: this.searchInput.value || '',
         };
 
         this.search = '';
@@ -44,6 +46,7 @@ export class EntitySelector extends Component {
     configureSearchOptions(options) {
         Object.assign(this.searchOptions, options);
         this.reset();
+        this.searchInput.value = this.searchOptions.initialValue;
     }
 
     setupListeners() {
@@ -108,11 +111,6 @@ export class EntitySelector extends Component {
         this.searchInput.focus();
     }
 
-    searchText(queryText) {
-        this.searchInput.value = queryText;
-        this.searchEntities(queryText);
-    }
-
     showLoading() {
         this.loading.style.display = 'block';
         this.resultsContainer.style.display = 'none';
@@ -128,6 +126,11 @@ export class EntitySelector extends Component {
             throw new Error('Search endpoint not set for entity-selector load');
         }
 
+        if (this.searchOptions.initialValue) {
+            this.searchEntities(this.searchOptions.initialValue);
+            return;
+        }
+
         window.$http.get(this.searchUrl()).then(resp => {
             this.resultsContainer.innerHTML = resp.data;
             this.hideLoading();

diff --git a/resources/js/components/page-picker.js b/resources/js/components/page-picker.js
index 39af67229932910b3e283ed6859a53ffc67ef937..5ab51159570350f00a31abdf5fb581923a1a42cd 100644 (file)
--- a/resources/js/components/page-picker.js
+++ b/resources/js/components/page-picker.js
@@ -35,7 +35,8 @@ export class PagePicker extends Component {
         const selectorPopup = window.$components.first('entity-selector-popup');
         selectorPopup.show(entity => {
             this.setValue(entity.id, entity.name);
-        }, '', {
+        }, {
+            initialValue: '',
             searchEndpoint: this.selectorEndpoint,
             entityTypes: 'page',
             entityPermission: 'view',

diff --git a/resources/js/markdown/actions.js b/resources/js/markdown/actions.js
index 511f1ebdae6a38caa7fa31b3d965cc9890e4694e..73040a57b1eb016e51abe2e80176561815befa89 100644 (file)
--- a/resources/js/markdown/actions.js
+++ b/resources/js/markdown/actions.js
@@ -73,7 +73,8 @@ export class Actions {
             const selectedText = selectionText || entity.name;
             const newText = `[${selectedText}](${entity.link})`;
             this.#replaceSelection(newText, newText.length, selectionRange);
-        }, selectionText, {
+        }, {
+            initialValue: selectionText,
             searchEndpoint: '/search/entity-selector',
             entityTypes: 'page,book,chapter,bookshelf',
             entityPermission: 'view',

diff --git a/resources/js/wysiwyg/config.js b/resources/js/wysiwyg/config.js
index 963e2970d341356d83f685994026ab9091790c8c..6c96e47e9c350d33768118d1b1b6a8ec9b5daa55 100644 (file)
--- a/resources/js/wysiwyg/config.js
+++ b/resources/js/wysiwyg/config.js
@@ -85,7 +85,8 @@ function filePickerCallback(callback, value, meta) {
                 text: entity.name,
                 title: entity.name,
             });
-        }, selectionText, {
+        }, {
+            initialValue: selectionText,
             searchEndpoint: '/search/entity-selector',
             entityTypes: 'page,book,chapter,bookshelf',
             entityPermission: 'view',

diff --git a/resources/js/wysiwyg/shortcuts.js b/resources/js/wysiwyg/shortcuts.js
index da9e0227099aaa9e6adad45398884987c1c9435a..dbc725b1dcd64d55533978e862867fecffda5177 100644 (file)
--- a/resources/js/wysiwyg/shortcuts.js
+++ b/resources/js/wysiwyg/shortcuts.js
@@ -58,7 +58,8 @@ export function register(editor) {
 
             editor.selection.collapse(false);
             editor.focus();
-        }, selectionText, {
+        }, {
+            initialValue: selectionText,
             searchEndpoint: '/search/entity-selector',
             entityTypes: 'page,book,chapter,bookshelf',
             entityPermission: 'view',