FIX Always include unsaved anchors from the current WYSIWYG field

client/src/components/AnchorSelectorField/AnchorSelectorField.js

@@ -49,6 +49,12 @@ class AnchorSelectorField extends SilverStripeComponent {
       return Promise.resolve();
     }
 
+    // Get anchors that belong to the current field
+    let fieldAnchors = [];
+    if (props.loadingState === anchorSelectorStates.FIELD_ONLY) {
+      fieldAnchors = this.props.anchors;
+    }
+
     // Mark page updating
     props.actions.anchorSelector.beginUpdating(props.pageId);
 
@@ -57,9 +63,11 @@ class AnchorSelectorField extends SilverStripeComponent {
     return fetch(fetchURL, { credentials: 'same-origin' })
       .then(response => response.json())
       .then((anchors) => {
+        // Fold in field anchors and ensure array has only unique values
+        const allAnchors = [...new Set([...anchors, ...fieldAnchors])];
         // Update anchors
-        props.actions.anchorSelector.updated(props.pageId, anchors);
-        return anchors;
+        props.actions.anchorSelector.updated(props.pageId, allAnchors);
+        return allAnchors;
       })
       .catch((error) => {
         props.actions.anchorSelector.updateFailed(props.pageId);
@@ -174,6 +182,7 @@ function mapStateToProps(state, ownProps) {
     && (
       page.loadingState === anchorSelectorStates.SUCCESS
       || page.loadingState === anchorSelectorStates.DIRTY
+      || page.loadingState === anchorSelectorStates.FIELD_ONLY
     )
   ) {
     // eslint-disable-next-line prefer-destructuring

client/src/legacy/TinyMCE_sslink-anchor.js

@@ -9,7 +9,7 @@ import jQuery from 'jquery';
 import ShortcodeSerialiser from 'lib/ShortcodeSerialiser';
 import { createInsertLinkModal } from 'containers/InsertLinkModal/InsertLinkModal';
 import { provideInjector } from 'lib/Injector';
-import { updated } from '../state/anchorSelector/AnchorSelectorActions';
+import { updatedCurrentField } from '../state/anchorSelector/AnchorSelectorActions';
 
 const commandName = 'sslinkanchor';
 
@@ -30,6 +30,14 @@ const plugin = {
   init(editor) {
     editor.addCommand(commandName, () => {
       const field = jQuery(`#${editor.id}`).entwine('ss');
+      // Get the anchors in the current field and save them as props for AnchorSelectorField
+      const currentPageID = Number(jQuery('#Form_EditForm_ID').val() || 0);
+      const validTargets = editor
+        .$('[id],[name]', editor.getBody())
+        .toArray()
+        .map((element) => element.id || element.name);
+      ss.store.dispatch(updatedCurrentField(currentPageID, validTargets, editor.id));
+      // Open the anchor link form
       field.openLinkAnchorDialog();
     });
   },

client/src/state/anchorSelector/AnchorSelectorActionTypes.js

@@ -1,4 +1,5 @@
 export default {
+  ANCHORSELECTOR_CURRENT_FIELD: 'ANCHORSELECTOR_CURRENT_FIELD',
   ANCHORSELECTOR_UPDATED: 'ANCHORSELECTOR_UPDATED',
   ANCHORSELECTOR_UPDATING: 'ANCHORSELECTOR_UPDATING',
   ANCHORSELECTOR_UPDATE_FAILED: 'ANCHORSELECTOR_UPDATE_FAILED',

client/src/state/anchorSelector/AnchorSelectorActions.js

@@ -30,6 +30,23 @@ export function updated(pageId, anchors, cacheResult = false) {
   };
 }
 
+/**
+ * Get the anchors that belong in a specific field.
+ * The server doesn't know about anchors that haven't been saved yet, so this allows
+ * a WYSIWYG field to register its own anchors.
+ *
+ * @param {Number} pageId - ID of page to query for
+ * @param {Array} anchors - List of anchor strings
+ * @param {String} fieldID - ID of the field these anchors belong to
+ * @returns {Object}
+ */
+export function updatedCurrentField(pageId, anchors, fieldID) {
+  return {
+    type: ACTION_TYPES.ANCHORSELECTOR_CURRENT_FIELD,
+    payload: { pageId, anchors, fieldID },
+  };
+}
+
 /**
  * Mark a tree as failed
  *

client/src/state/anchorSelector/AnchorSelectorReducer.js

@@ -42,6 +42,11 @@ export default function anchorSelectorReducer(state = initialState, action = nul
       return updatePage(newSelectorLoadingState, anchors);
     }
 
+    case ACTION_TYPES.ANCHORSELECTOR_CURRENT_FIELD: {
+      const { anchors } = action.payload;
+      return updatePage(anchorSelectorStates.FIELD_ONLY, anchors);
+    }
+
     case ACTION_TYPES.ANCHORSELECTOR_UPDATE_FAILED: {
       return updatePage(anchorSelectorStates.FAILED, []);
     }

client/src/state/anchorSelector/AnchorSelectorStates.js

@@ -1,6 +1,7 @@
 export default {
   SUCCESS: 'SUCCESS', // Done, or nothing selected
   DIRTY: 'DIRTY', // Needs updating
+  FIELD_ONLY: 'FIELD_ONLY', // Has anchors from the field but needs to fetch the rest from server
   UPDATING: 'UPDATING',
   FAILED: 'FAILED',
 };