fix: restore Authors autocomplete after react-select v5 migration

PR #714 migrated to React 18 and @wordpress/scripts, which upgraded
react-select from v1 to v5. This introduced breaking API changes that
broke the Authors field in the entry editor, preventing autocomplete
functionality and causing 500 errors when creating entries with multiple
authors.

The react-select v5 upgrade changed several prop names and component
APIs that required corresponding updates throughout the codebase. The
Authors autocomplete was making API requests without authentication
headers, resulting in 401 errors. Additionally, the PHP backend wasn't
properly handling arrays of contributor IDs from the multi-select field,
and RxJS operators needed updating to use the modern pipe syntax.

Changes:
- Migrate react-select props: multi→isMulti, valueKey/labelKey→getter
  functions, optionComponent→components, clearable→isClearable,
  cache→cacheOptions
- Update AuthorSelectOption to handle v5's data prop instead of option,
  and selectOption callback instead of onSelect
- Convert getUsers to return Promise for react-select-async-paginate
  compatibility instead of using callback pattern
- Add X-WP-Nonce authentication headers to getAuthors and getHashtags
  API requests to fix 401 errors
- Update PHP get_json_param to properly handle arrays using array_map
  for HTML entity decoding of contributor_ids
- Fix RxJS operators to use pipe syntax (timeout, map)
- Enable webpack source maps for debugging

Fixes #700

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

Author: GaryJones

assets/920.bundle.js

@@ -1 +1 @@
-<?php return array('dependencies' => array('lodash', 'moment', 'react', 'react-dom', 'react-jsx-runtime'), 'version' => 'ef3c3690771551fc2b10');
+<?php return array('dependencies' => array('lodash', 'moment', 'react', 'react-dom', 'react-jsx-runtime'), 'version' => 'b06081e9495dadca9d93');

assets/920.bundle.js.map

@@ -660,6 +660,10 @@ public static function sanitize_numeric( $param, $request, $key ) {
 	 */
 	public static function get_json_param( $param, $json ) {
 		if ( isset( $json[ $param ] ) ) {
+			// Handle arrays (e.g., contributor_ids from multi-select)
+			if ( is_array( $json[ $param ] ) ) {
+				return array_map( 'html_entity_decode', $json[ $param ] );
+			}
 			return html_entity_decode( $json[ $param ] );
 		}
 		return false;

assets/985.bundle.js

@@ -3,33 +3,44 @@ import PropTypes from 'prop-types';
 
 class AuthorSelectOption extends Component {
   handleMouseDown(event) {
-    const { onSelect, option } = this.props;
+    const { onSelect, option, data, selectOption } = this.props;
+    const item = data || option;
     event.preventDefault();
     event.stopPropagation();
-    onSelect(option, event);
+    // react-select v5 uses selectOption instead of onSelect
+    if (selectOption) {
+      selectOption(item);
+    } else if (onSelect) {
+      onSelect(item, event);
+    }
   }
 
   handleMouseEnter(event) {
-    this.props.onFocus(this.props.option, event);
+    const { onFocus, option, data } = this.props;
+    const item = data || option;
+    if (onFocus) onFocus(item, event);
   }
 
   handleMouseMove(event) {
-    const { isFocused, onFocus, option } = this.props;
+    const { isFocused, onFocus, option, data } = this.props;
     if (isFocused) return;
-    onFocus(option, event);
+    const item = data || option;
+    if (onFocus) onFocus(item, event);
   }
 
   render() {
-    const { className, option } = this.props;
+    const { className, option, data } = this.props;
+    // react-select v5 uses 'data' prop instead of 'option'
+    const item = data || option || {};
     return (
       <div
         className={`${className} liveblog-popover-item`}
         onMouseDown={this.handleMouseDown.bind(this)}
         onMouseEnter={this.handleMouseEnter.bind(this)}
         onMouseMove={this.handleMouseMove.bind(this)}
       >
-        { option.avatar && <div dangerouslySetInnerHTML={{ __html: option.avatar }} /> }
-        {option.name}
+        { item.avatar && <div dangerouslySetInnerHTML={{ __html: item.avatar }} /> }
+        {item.name}
       </div>
     );
   }

assets/985.bundle.js.map

@@ -8,6 +8,7 @@ import { connect } from 'react-redux';
 import { AsyncPaginate as Async } from 'react-select-async-paginate';
 import { html } from 'js-beautify';
 import { debounce } from 'lodash-es';
+import { timeout, map } from 'rxjs/operators';
 
 import { EditorState, ContentState } from 'draft-js';
 
@@ -60,7 +61,8 @@ class EditorContainer extends Component {
       rawText: html(convertToHTML(editorState.getCurrentContent())),
     });
 
-    this.getUsers = debounce(this.getUsers.bind(this), props.config.author_list_debounce_time);
+    // Note: getUsers must return a Promise for react-select-async-paginate
+    // Debouncing is handled by the library itself, so we don't debounce here
   }
 
   setReadOnly(state) {
@@ -139,22 +141,38 @@ class EditorContainer extends Component {
     });
   }
 
-  getUsers(text, callback) {
+  getUsers(text) {
     const { config } = this.props;
-    getAuthors(text, config)
-      .timeout(10000)
-      .map(res => res.response)
-      .subscribe(res => callback(null, {
-        options: res,
-        complete: false,
-      }));
+
+    // Handle empty text - return empty options immediately
+    if (!text || text.trim() === '') {
+      return Promise.resolve({ options: [] });
+    }
+
+    return new Promise((resolve) => {
+      getAuthors(text, config)
+        .pipe(
+          timeout(10000),
+          map(res => res.response),
+        )
+        .subscribe({
+          next: res => resolve({ options: res || [] }),
+          error: err => {
+            // Fail gracefully with empty options on error (e.g., 401)
+            console.warn('Authors API error:', err);
+            resolve({ options: [] });
+          },
+        });
+    });
   }
 
   getAuthors(text) {
     const { config } = this.props;
     getAuthors(text, config)
-      .timeout(10000)
-      .map(res => res.response)
+      .pipe(
+        timeout(10000),
+        map(res => res.response),
+      )
       .subscribe(res => this.setState({
         suggestions: res.map(author => author),
       }));
@@ -163,8 +181,10 @@ class EditorContainer extends Component {
   getHashtags(text) {
     const { config } = this.props;
     getHashtags(text, config)
-      .timeout(10000)
-      .map(res => res.response)
+      .pipe(
+        timeout(10000),
+        map(res => res.response),
+      )
       .subscribe(res => this.setState({
         suggestions: res.map(hashtag => hashtag),
       }));
@@ -299,15 +319,15 @@ class EditorContainer extends Component {
         }
         <h2 className="liveblog-editor-subTitle">Authors:</h2>
         <Async
-          multi={true}
+          isMulti={true}
           value={authors}
-          valueKey="key"
-          labelKey="name"
+          getOptionValue={(option) => option.key}
+          getOptionLabel={(option) => option.name}
           onChange={this.onSelectAuthorChange.bind(this)}
-          optionComponent={AuthorSelectOption}
-          loadOptions={this.getUsers}
-          clearable={false}
-          cache={false}
+          components={{ Option: AuthorSelectOption }}
+          loadOptions={this.getUsers.bind(this)}
+          isClearable={false}
+          cacheOptions={false}
         />
         <button className="liveblog-btn liveblog-publish-btn" onClick={this.publish.bind(this)}>
           {isEditing ? 'Publish Update' : 'Publish New Entry'}