From: Dan Brown <redacted>
Date: Tue, 23 Jan 2024 15:39:09 +0000 (+0000)
Subject: Entity selector: Fixed initial load overwriting initial search
X-Git-Tag: v23.12.2~1^2~3
X-Git-Url: http://source.bookstackapp.com/bookstack/commitdiff_plain/69c8ff5c2d491d8674e2671a912a025cf16f86d3

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 6fb461968..29c06e909 100644
--- 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 5ad991437..561370d7a 100644
--- 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 39af67229..5ab511595 100644
--- 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 511f1ebda..73040a57b 100644
--- 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 963e2970d..6c96e47e9 100644
--- 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 da9e02270..dbc725b1d 100644
--- 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',