@manuscripts/body-editor 2.8.83 → 2.8.84

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/dist/cjs/components/affiliations/AffiliationsModal.js +106 -61
  2. package/dist/cjs/versions.js +1 -1
  3. package/dist/cjs/views/affiliations.js +39 -16
  4. package/dist/es/components/affiliations/AffiliationsModal.js +107 -62
  5. package/dist/es/versions.js +1 -1
  6. package/dist/es/views/affiliations.js +39 -16
  7. package/dist/types/components/affiliations/AffiliationsModal.d.ts +1 -0
  8. package/dist/types/versions.d.ts +1 -1
  9. package/dist/types/views/affiliations.d.ts +3 -2
  10. package/package.json +1 -1
  11. package/styles/AdvancedEditor.css +1 -10
package/dist/cjs/components/affiliations/AffiliationsModal.js CHANGED
@@ -109,7 +109,7 @@ const StyledModalSidebarHeader = (0, styled_components_1.default)(style_guide_1.
109
109
  margin-bottom: 16px;
110
110
  `;
111
111
  const normalize = (affiliation) => ({
112
- id: affiliation.id,
112
+ id: affiliation.id || (0, json_schema_1.generateID)(json_schema_1.ObjectTypes.Affiliation),
113
113
  institution: affiliation.institution,
114
114
  department: affiliation.department,
115
115
  addressLine1: affiliation.addressLine1,
@@ -122,9 +122,9 @@ const normalize = (affiliation) => ({
122
122
  email: affiliation.email,
123
123
  priority: affiliation.priority,
124
124
  });
125
- const AffiliationsModal = ({ authors: $authors, affiliations: $affiliations, onSaveAffiliation, onDeleteAffiliation, onUpdateAuthors, addNewAffiliation = false, }) => {
125
+ const AffiliationsModal = ({ authors: $authors, affiliations: $affiliations, affiliation, onSaveAffiliation, onDeleteAffiliation, onUpdateAuthors, addNewAffiliation = false, }) => {
126
126
  const [isOpen, setIsOpen] = (0, react_1.useState)(true);
127
- const [selection, setSelection] = (0, react_1.useState)(undefined);
127
+ const [selection, setSelection] = (0, react_1.useState)(affiliation);
128
128
  const [showDeleteDialog, setShowDeleteDialog] = (0, react_1.useState)(false);
129
129
  const valuesRef = (0, react_1.useRef)();
130
130
  const actionsRef = (0, react_1.useRef)();
@@ -134,37 +134,37 @@ const AffiliationsModal = ({ authors: $authors, affiliations: $affiliations, onS
134
134
  const [newAffiliation, setNewAffiliation] = (0, react_1.useState)(false);
135
135
  const [showRequiredFieldConfirmationDialog, setShowRequiredFieldConfirmationDialog,] = (0, react_1.useState)(false);
136
136
  const [showConfirmationDialog, setShowConfirmationDialog] = (0, react_1.useState)(false);
137
- const affiliation = {
138
- id: (0, json_schema_1.generateID)(json_schema_1.ObjectTypes.Affiliation),
139
- institution: '',
140
- department: '',
141
- addressLine1: '',
142
- addressLine2: '',
143
- addressLine3: '',
144
- postCode: '',
145
- country: '',
146
- county: '',
147
- city: '',
148
- email: {
149
- href: '',
150
- text: '',
151
- },
152
- priority: affiliations.length,
153
- };
154
137
  const [showAuthorDrawer, setShowAuthorDrawer] = (0, react_1.useState)(false);
155
- const [selectedIds, setSelectedIds] = (0, react_1.useState)([]);
138
+ const [selectedAuthorIds, setSelectedAuthorIds] = (0, react_1.useState)([]);
156
139
  const [pendingSelection, setPendingSelection] = (0, react_1.useState)(null);
157
140
  const [pendingAction, setPendingAction] = (0, react_1.useState)(null);
158
141
  const [savedAffiliationId, setSavedAffiliationId] = (0, react_1.useState)(undefined);
159
- const [affiliationAuthorMap, setAffiliationAuthorMap] = (0, react_1.useState)({});
142
+ const [affiliationAuthorMap, setAffiliationAuthorMap] = (0, react_1.useState)(new Map());
143
+ (0, react_1.useEffect)(() => {
144
+ if (!selection) {
145
+ return;
146
+ }
147
+ const currentAffiliation = selection;
148
+ const affiliatedAuthorIds = authors
149
+ .filter((author) => { var _a; return (_a = author.affiliations) === null || _a === void 0 ? void 0 : _a.includes(currentAffiliation.id); })
150
+ .map((author) => author.id);
151
+ setSelectedAuthorIds(affiliatedAuthorIds);
152
+ setAffiliationAuthorMap((prevMap) => {
153
+ const newMap = new Map(prevMap);
154
+ newMap.set(currentAffiliation.id, affiliatedAuthorIds);
155
+ return newMap;
156
+ });
157
+ }, []);
160
158
  const handleClose = () => {
161
- var _a;
159
+ var _a, _b;
162
160
  const values = valuesRef.current;
163
161
  const hasAffiliationChanges = selection && !(0, lodash_1.isEqual)(values, normalize(selection));
164
- const originalAuthors = affiliationAuthorMap[(selection === null || selection === void 0 ? void 0 : selection.id) || ''] || [];
165
- const hasAuthorChanges = !(0, lodash_1.isEqual)(originalAuthors.sort(), selectedIds.sort());
162
+ const originalAuthors = selection
163
+ ? (_a = affiliationAuthorMap.get(selection.id)) !== null && _a !== void 0 ? _a : []
164
+ : [];
165
+ const hasAuthorChanges = !(0, lodash_1.isEqual)(originalAuthors.sort(), selectedAuthorIds.sort());
166
166
  const hasChanges = hasAffiliationChanges || (selection && hasAuthorChanges);
167
- const isInstitutionEmpty = ((_a = values === null || values === void 0 ? void 0 : values.institution) === null || _a === void 0 ? void 0 : _a.trim()) === '';
167
+ const isInstitutionEmpty = ((_b = values === null || values === void 0 ? void 0 : values.institution) === null || _b === void 0 ? void 0 : _b.trim()) === '';
168
168
  if (hasChanges) {
169
169
  if (isInstitutionEmpty && hasAffiliationChanges) {
170
170
  setShowRequiredFieldConfirmationDialog(true);
@@ -179,13 +179,15 @@ const AffiliationsModal = ({ authors: $authors, affiliations: $affiliations, onS
179
179
  }
180
180
  };
181
181
  const handleSelect = (affiliation) => {
182
- var _a;
182
+ var _a, _b;
183
183
  const values = valuesRef.current;
184
184
  const hasAffiliationChanges = selection && !(0, lodash_1.isEqual)(values, normalize(selection));
185
- const originalAuthors = affiliationAuthorMap[(selection === null || selection === void 0 ? void 0 : selection.id) || ''] || [];
186
- const hasAuthorChanges = !(0, lodash_1.isEqual)(originalAuthors.sort(), selectedIds.sort());
185
+ const originalAuthors = selection
186
+ ? (_a = affiliationAuthorMap.get(selection.id)) !== null && _a !== void 0 ? _a : []
187
+ : [];
188
+ const hasAuthorChanges = !(0, lodash_1.isEqual)(originalAuthors.sort(), selectedAuthorIds.sort());
187
189
  const hasChanges = hasAffiliationChanges || hasAuthorChanges;
188
- const isInstitutionEmpty = ((_a = values === null || values === void 0 ? void 0 : values.institution) === null || _a === void 0 ? void 0 : _a.trim()) === '';
190
+ const isInstitutionEmpty = ((_b = values === null || values === void 0 ? void 0 : values.institution) === null || _b === void 0 ? void 0 : _b.trim()) === '';
189
191
  if (hasChanges) {
190
192
  setPendingSelection(affiliation);
191
193
  setPendingAction('select');
@@ -202,12 +204,16 @@ const AffiliationsModal = ({ authors: $authors, affiliations: $affiliations, onS
202
204
  .map((author) => author.id);
203
205
  setNewAffiliation(false);
204
206
  setSelection(affiliation);
205
- setSelectedIds(affiliatedAuthorIds);
207
+ setSelectedAuthorIds(affiliatedAuthorIds);
206
208
  setShowAuthorDrawer(false);
207
- setAffiliationAuthorMap((prevMap) => (Object.assign(Object.assign({}, prevMap), { [affiliation.id]: affiliatedAuthorIds })));
209
+ setAffiliationAuthorMap((prevMap) => {
210
+ const newMap = new Map(prevMap);
211
+ newMap.set(affiliation.id, affiliatedAuthorIds);
212
+ return newMap;
213
+ });
208
214
  }
209
215
  };
210
- const handleSaveAffiliation = (values) => {
216
+ const handleSaveAffiliation = (0, react_1.useCallback)((values) => {
211
217
  if (!values || !selection) {
212
218
  return;
213
219
  }
@@ -219,7 +225,7 @@ const AffiliationsModal = ({ authors: $authors, affiliations: $affiliations, onS
219
225
  items: [affiliation],
220
226
  });
221
227
  setSelection(affiliation);
222
- const updatedAuthors = authors.map((author) => (Object.assign(Object.assign({}, author), { affiliations: selectedIds.includes(author.id)
228
+ const updatedAuthors = authors.map((author) => (Object.assign(Object.assign({}, author), { affiliations: selectedAuthorIds.includes(author.id)
223
229
  ? [...new Set([...(author.affiliations || []), affiliation.id])]
224
230
  : (author.affiliations || []).filter((id) => id !== affiliation.id) })));
225
231
  dispatchAuthors({
@@ -228,15 +234,27 @@ const AffiliationsModal = ({ authors: $authors, affiliations: $affiliations, onS
228
234
  });
229
235
  onUpdateAuthors(updatedAuthors);
230
236
  setNewAffiliation(false);
231
- setAffiliationAuthorMap((prevMap) => (Object.assign(Object.assign({}, prevMap), { [affiliation.id]: selectedIds })));
237
+ setAffiliationAuthorMap((prevMap) => {
238
+ const newMap = new Map(prevMap);
239
+ newMap.set(affiliation.id, selectedAuthorIds);
240
+ return newMap;
241
+ });
232
242
  setShowAuthorDrawer(false);
233
243
  setSavedAffiliationId(affiliation.id);
234
244
  setTimeout(() => {
235
245
  setSavedAffiliationId(undefined);
236
246
  }, 3200);
237
- };
247
+ }, [
248
+ authors,
249
+ dispatchAffiliations,
250
+ dispatchAuthors,
251
+ onSaveAffiliation,
252
+ onUpdateAuthors,
253
+ selectedAuthorIds,
254
+ selection,
255
+ ]);
238
256
  const handleAffiliationChange = (values) => {
239
- var _a;
257
+ var _a, _b;
240
258
  valuesRef.current = values;
241
259
  if (!selection || selection.id !== values.id) {
242
260
  setIsDisableSave(true);
@@ -244,8 +262,8 @@ const AffiliationsModal = ({ authors: $authors, affiliations: $affiliations, onS
244
262
  }
245
263
  const isInstitutionEmpty = !((_a = values.institution) === null || _a === void 0 ? void 0 : _a.trim());
246
264
  const hasAffiliationChanges = selection && !(0, lodash_1.isEqual)(normalize(values), normalize(selection));
247
- const originalAuthors = affiliationAuthorMap[(selection === null || selection === void 0 ? void 0 : selection.id) || ''] || [];
248
- const hasAuthorChanges = selection && !(0, lodash_1.isEqual)(originalAuthors.sort(), selectedIds.sort());
265
+ const originalAuthors = (_b = affiliationAuthorMap.get(selection.id)) !== null && _b !== void 0 ? _b : [];
266
+ const hasAuthorChanges = selection && !(0, lodash_1.isEqual)(originalAuthors.sort(), selectedAuthorIds.sort());
249
267
  const shouldEnableSave = !isInstitutionEmpty && (hasAffiliationChanges || hasAuthorChanges);
250
268
  setIsDisableSave(!shouldEnableSave);
251
269
  };
@@ -267,22 +285,22 @@ const AffiliationsModal = ({ authors: $authors, affiliations: $affiliations, onS
267
285
  type: 'delete',
268
286
  item: selection,
269
287
  });
270
- setSelectedIds([]);
288
+ setSelectedAuthorIds([]);
271
289
  setSelection(undefined);
272
290
  };
273
291
  const handleAuthorSelect = (authorId) => {
274
- var _a, _b;
292
+ var _a, _b, _c;
275
293
  if (!selection) {
276
294
  return;
277
295
  }
278
- const newSelectedAuthorIds = selectedIds.includes(authorId)
279
- ? selectedIds.filter((id) => id !== authorId)
280
- : [...selectedIds, authorId];
281
- setSelectedIds(newSelectedAuthorIds);
296
+ const newSelectedAuthorIds = selectedAuthorIds.includes(authorId)
297
+ ? selectedAuthorIds.filter((id) => id !== authorId)
298
+ : [...selectedAuthorIds, authorId];
299
+ setSelectedAuthorIds(newSelectedAuthorIds);
282
300
  const hasAffiliationChanges = !(0, lodash_1.isEqual)(valuesRef.current, normalize(selection));
283
- const originalAuthors = affiliationAuthorMap[selection.id] || [];
301
+ const originalAuthors = (_a = affiliationAuthorMap.get(selection.id)) !== null && _a !== void 0 ? _a : [];
284
302
  const hasAuthorChanges = !(0, lodash_1.isEqual)(originalAuthors.sort(), newSelectedAuthorIds.sort());
285
- const isInstitutionEmpty = !((_b = (_a = valuesRef.current) === null || _a === void 0 ? void 0 : _a.institution) === null || _b === void 0 ? void 0 : _b.trim());
303
+ const isInstitutionEmpty = !((_c = (_b = valuesRef.current) === null || _b === void 0 ? void 0 : _b.institution) === null || _c === void 0 ? void 0 : _c.trim());
286
304
  const shouldEnableSave = !isInstitutionEmpty && (hasAffiliationChanges || hasAuthorChanges);
287
305
  setIsDisableSave(!shouldEnableSave);
288
306
  };
@@ -290,7 +308,7 @@ const AffiliationsModal = ({ authors: $authors, affiliations: $affiliations, onS
290
308
  id: author.id,
291
309
  label: `${author.bibliographicName.given} ${author.bibliographicName.family}`,
292
310
  }));
293
- const selectedAuthors = selectedIds
311
+ const selectedAuthors = selectedAuthorIds
294
312
  .map((authorId) => {
295
313
  const author = authors.find((a) => a.id === authorId);
296
314
  return {
@@ -306,6 +324,23 @@ const AffiliationsModal = ({ authors: $authors, affiliations: $affiliations, onS
306
324
  const values = valuesRef.current;
307
325
  const hasChanges = !isDisableSave;
308
326
  const isInstitutionEmpty = ((_a = values === null || values === void 0 ? void 0 : values.institution) === null || _a === void 0 ? void 0 : _a.trim()) === '';
327
+ const emptyAffiliation = {
328
+ id: (0, json_schema_1.generateID)(json_schema_1.ObjectTypes.Affiliation),
329
+ institution: '',
330
+ department: '',
331
+ addressLine1: '',
332
+ addressLine2: '',
333
+ addressLine3: '',
334
+ postCode: '',
335
+ country: '',
336
+ county: '',
337
+ city: '',
338
+ email: {
339
+ href: '',
340
+ text: '',
341
+ },
342
+ priority: affiliations.length,
343
+ };
309
344
  if (hasChanges) {
310
345
  setPendingAction('new');
311
346
  if (isInstitutionEmpty) {
@@ -317,8 +352,8 @@ const AffiliationsModal = ({ authors: $authors, affiliations: $affiliations, onS
317
352
  return;
318
353
  }
319
354
  setNewAffiliation(true);
320
- setSelection(affiliation);
321
- setSelectedIds([]);
355
+ setSelection(emptyAffiliation);
356
+ setSelectedAuthorIds([]);
322
357
  setShowAuthorDrawer(false);
323
358
  };
324
359
  (0, react_1.useEffect)(() => {
@@ -327,14 +362,14 @@ const AffiliationsModal = ({ authors: $authors, affiliations: $affiliations, onS
327
362
  setNewAffiliation(true);
328
363
  }
329
364
  }, [addNewAffiliation]);
330
- const handleConfirmationSave = () => {
365
+ const handleConfirmationSave = (0, react_1.useCallback)(() => {
331
366
  handleSaveAffiliation(valuesRef.current);
332
367
  setShowConfirmationDialog(false);
333
368
  setShowRequiredFieldConfirmationDialog(false);
334
369
  if (pendingAction === 'new') {
335
370
  setNewAffiliation(true);
336
371
  setSelection(affiliation);
337
- setSelectedIds([]);
372
+ setSelectedAuthorIds([]);
338
373
  setIsDisableSave(true);
339
374
  }
340
375
  else if (pendingAction === 'select' && pendingSelection) {
@@ -343,17 +378,27 @@ const AffiliationsModal = ({ authors: $authors, affiliations: $affiliations, onS
343
378
  const affiliatedAuthorIds = authors
344
379
  .filter((author) => { var _a; return (_a = author.affiliations) === null || _a === void 0 ? void 0 : _a.some((aff) => aff === pendingSelection.id); })
345
380
  .map((author) => author.id);
346
- setSelectedIds(affiliatedAuthorIds);
381
+ setSelectedAuthorIds(affiliatedAuthorIds);
347
382
  valuesRef.current = normalize(pendingSelection);
348
383
  setIsDisableSave(true);
349
- setAffiliationAuthorMap((prevMap) => (Object.assign(Object.assign({}, prevMap), { [pendingSelection.id]: affiliatedAuthorIds })));
384
+ setAffiliationAuthorMap((prevMap) => {
385
+ const newMap = new Map(prevMap);
386
+ newMap.set(pendingSelection.id, affiliatedAuthorIds);
387
+ return newMap;
388
+ });
350
389
  }
351
- setPendingSelection(null);
352
- setPendingAction(null);
353
390
  if (pendingAction === 'close') {
354
391
  setIsOpen(false);
355
392
  }
356
- };
393
+ setPendingSelection(null);
394
+ setPendingAction(null);
395
+ }, [
396
+ authors,
397
+ affiliation,
398
+ pendingAction,
399
+ pendingSelection,
400
+ handleSaveAffiliation,
401
+ ]);
357
402
  const handleConfirmationCancel = () => {
358
403
  setShowConfirmationDialog(false);
359
404
  setShowRequiredFieldConfirmationDialog(false);
@@ -364,12 +409,12 @@ const AffiliationsModal = ({ authors: $authors, affiliations: $affiliations, onS
364
409
  const affiliatedAuthorIds = authors
365
410
  .filter((author) => { var _a; return (_a = author.affiliations) === null || _a === void 0 ? void 0 : _a.some((aff) => aff === pendingSelection.id); })
366
411
  .map((author) => author.id);
367
- setSelectedIds(affiliatedAuthorIds);
412
+ setSelectedAuthorIds(affiliatedAuthorIds);
368
413
  }
369
414
  else if (pendingAction === 'new') {
370
415
  setNewAffiliation(true);
371
416
  setSelection(affiliation);
372
- setSelectedIds([]);
417
+ setSelectedAuthorIds([]);
373
418
  }
374
419
  if (pendingSelection) {
375
420
  valuesRef.current = normalize(pendingSelection);
@@ -408,9 +453,9 @@ const AffiliationsModal = ({ authors: $authors, affiliations: $affiliations, onS
408
453
  react_1.default.createElement(style_guide_1.AddUserIcon, { width: 16, height: 16 }),
409
454
  "Affiliate Authors")),
410
455
  react_1.default.createElement(style_guide_1.SelectedItemsBox, { "data-cy": "affiliation-authors", items: selectedAuthors, onRemove: (id) => {
411
- setSelectedIds((prev) => prev.filter((authorId) => authorId !== id));
456
+ setSelectedAuthorIds((prev) => prev.filter((authorId) => authorId !== id));
412
457
  }, placeholder: "No authors assigned" })),
413
- showAuthorDrawer && (react_1.default.createElement(style_guide_1.Drawer, { items: authorItems, selectedIds: selectedIds, title: "Authors", onSelect: handleAuthorSelect, onBack: () => setShowAuthorDrawer(false), width: "100%" })))) : (react_1.default.createElement(FormPlaceholder_1.FormPlaceholder, { type: "affiliation", title: "Affiliation Details", message: "Select an affiliation from the list to display it's details here.", placeholderIcon: react_1.default.createElement(style_guide_1.AffiliationPlaceholderIcon, null) })))),
458
+ showAuthorDrawer && (react_1.default.createElement(style_guide_1.Drawer, { items: authorItems, selectedIds: selectedAuthorIds, title: "Authors", onSelect: handleAuthorSelect, onBack: () => setShowAuthorDrawer(false), width: "100%" })))) : (react_1.default.createElement(FormPlaceholder_1.FormPlaceholder, { type: "affiliation", title: "Affiliation Details", message: "Select an affiliation from the list to display it's details here.", placeholderIcon: react_1.default.createElement(style_guide_1.AffiliationPlaceholderIcon, null) })))),
414
459
  react_1.default.createElement(FormFooter_1.default, { onCancel: handleClose }))));
415
460
  };
416
461
  exports.AffiliationsModal = AffiliationsModal;
package/dist/cjs/versions.js CHANGED
@@ -1,5 +1,5 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.MATHJAX_VERSION = exports.VERSION = void 0;
4
- exports.VERSION = '2.8.83';
4
+ exports.VERSION = '2.8.84';
5
5
  exports.MATHJAX_VERSION = '3.2.2';
package/dist/cjs/views/affiliations.js CHANGED
@@ -39,17 +39,21 @@ class AffiliationsView extends block_view_1.default {
39
39
  this.stopEvent = () => true;
40
40
  this.handleClick = (event) => {
41
41
  const element = event.target;
42
- const item = element.closest('.affiliation');
43
- if (item) {
44
- const node = (0, view_1.findChildByID)(this.view, item.id);
45
- if (!node) {
46
- return;
47
- }
48
- const view = this.view;
49
- const tr = view.state.tr;
50
- tr.setSelection(prosemirror_state_1.NodeSelection.create(view.state.doc, node.pos));
51
- view.dispatch(tr);
42
+ const affiliation = element.closest('.affiliation');
43
+ if (!affiliation) {
44
+ return;
52
45
  }
46
+ const { node, pos } = (0, view_1.findChildByID)(this.view, affiliation.id) || {};
47
+ if (!node || !pos) {
48
+ return;
49
+ }
50
+ if (!(0, track_changes_utils_1.isDeleted)(node)) {
51
+ this.showContextMenu(affiliation);
52
+ }
53
+ const view = this.view;
54
+ const tr = view.state.tr;
55
+ tr.setSelection(prosemirror_state_1.NodeSelection.create(view.state.doc, pos));
56
+ view.dispatch(tr);
53
57
  };
54
58
  this.insertAffiliationNode = (attrs) => {
55
59
  const pos = this.getPos();
@@ -66,12 +70,16 @@ class AffiliationsView extends block_view_1.default {
66
70
  this.handleDeleteAffiliation = (affiliation) => {
67
71
  (0, view_1.deleteNode)(this.view, affiliation.id);
68
72
  };
69
- this.handleEdit = (addNew) => {
73
+ this.handleEdit = (id, addNew) => {
70
74
  var _a;
71
75
  this.props.popper.destroy();
72
76
  const contributors = (0, view_1.findChildrenAttrsByType)(this.view, transform_1.schema.nodes.contributor);
73
77
  const affiliations = (0, view_1.findChildrenAttrsByType)(this.view, transform_1.schema.nodes.affiliation);
78
+ const affiliation = id
79
+ ? affiliations.filter((a) => a.id === id)[0]
80
+ : undefined;
74
81
  const componentProps = {
82
+ affiliation,
75
83
  authors: contributors,
76
84
  affiliations,
77
85
  onSaveAffiliation: this.handleSaveAffiliation,
@@ -83,7 +91,7 @@ class AffiliationsView extends block_view_1.default {
83
91
  this.popper = (0, ReactSubView_1.default)(this.props, AffiliationsModal_1.AffiliationsModal, componentProps, this.node, this.getPos, this.view);
84
92
  this.container.appendChild(this.popper);
85
93
  };
86
- this.showContextMenu = () => {
94
+ this.showGroupContextMenu = () => {
87
95
  const can = this.props.getCapabilities();
88
96
  const componentProps = {
89
97
  actions: [],
@@ -96,12 +104,12 @@ class AffiliationsView extends block_view_1.default {
96
104
  });
97
105
  componentProps.actions.push({
98
106
  label: 'New Affiliation',
99
- action: () => this.handleEdit(true),
107
+ action: () => this.handleEdit('', true),
100
108
  icon: 'AddOutline',
101
109
  });
102
110
  componentProps.actions.push({
103
111
  label: 'Edit',
104
- action: () => this.handleEdit(),
112
+ action: () => this.handleEdit(''),
105
113
  icon: 'Edit',
106
114
  });
107
115
  this.contextMenu = (0, ReactSubView_1.default)(this.props, style_guide_1.ContextMenu, componentProps, this.node, this.getPos, this.view, ['context-menu']);
@@ -109,15 +117,30 @@ class AffiliationsView extends block_view_1.default {
109
117
  }
110
118
  return undefined;
111
119
  };
120
+ this.showContextMenu = (element) => {
121
+ const affiliationNameBlock = element.querySelector('.affiliation-name');
122
+ this.props.popper.destroy();
123
+ const componentProps = {
124
+ actions: [
125
+ {
126
+ label: 'Edit',
127
+ action: () => this.handleEdit(element.id),
128
+ icon: 'Edit',
129
+ },
130
+ ],
131
+ };
132
+ this.contextMenu = (0, ReactSubView_1.default)(this.props, style_guide_1.ContextMenu, componentProps, this.node, this.getPos, this.view, ['context-menu']);
133
+ this.props.popper.show(affiliationNameBlock || element, this.contextMenu, 'right-start');
134
+ };
112
135
  this.actionGutterButtons = () => {
113
- const contextMenu = this.showContextMenu();
136
+ const contextMenu = this.showGroupContextMenu();
114
137
  return contextMenu ? [contextMenu] : [];
115
138
  };
116
139
  this.selectNode = () => {
117
140
  const selectedMarker = document.querySelector('.comment-marker.selected-comment');
118
141
  this.dom.classList.add('ProseMirror-selectednode');
119
142
  if (!(0, track_changes_utils_1.isDeleted)(this.node) && !selectedMarker) {
120
- this.handleEdit(true);
143
+ this.handleEdit('', true);
121
144
  }
122
145
  };
123
146
  this.handleUpdateAuthors = (authors) => {
package/dist/es/components/affiliations/AffiliationsModal.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { generateID, ObjectTypes } from '@manuscripts/json-schema';
2
2
  import { AddIcon, AddUserIcon, AffiliationPlaceholderIcon, CloseButton, Drawer, ModalBody, ModalContainer, ModalHeader, ModalSidebar, ModalSidebarHeader, ModalSidebarTitle, ScrollableModalContent, SelectedItemsBox, SidebarContent, StyledModal, } from '@manuscripts/style-guide';
3
3
  import { isEqual } from 'lodash';
4
- import React, { useEffect, useReducer, useRef, useState } from 'react';
4
+ import React, { useCallback, useEffect, useReducer, useRef, useState, } from 'react';
5
5
  import styled from 'styled-components';
6
6
  import { authorComparator, } from '../../lib/authors';
7
7
  import { affiliationsReducer, authorsReducer } from '../authors/AuthorsModal';
@@ -80,7 +80,7 @@ const StyledModalSidebarHeader = styled(ModalSidebarHeader) `
80
80
  margin-bottom: 16px;
81
81
  `;
82
82
  const normalize = (affiliation) => ({
83
- id: affiliation.id,
83
+ id: affiliation.id || generateID(ObjectTypes.Affiliation),
84
84
  institution: affiliation.institution,
85
85
  department: affiliation.department,
86
86
  addressLine1: affiliation.addressLine1,
@@ -93,9 +93,9 @@ const normalize = (affiliation) => ({
93
93
  email: affiliation.email,
94
94
  priority: affiliation.priority,
95
95
  });
96
- export const AffiliationsModal = ({ authors: $authors, affiliations: $affiliations, onSaveAffiliation, onDeleteAffiliation, onUpdateAuthors, addNewAffiliation = false, }) => {
96
+ export const AffiliationsModal = ({ authors: $authors, affiliations: $affiliations, affiliation, onSaveAffiliation, onDeleteAffiliation, onUpdateAuthors, addNewAffiliation = false, }) => {
97
97
  const [isOpen, setIsOpen] = useState(true);
98
- const [selection, setSelection] = useState(undefined);
98
+ const [selection, setSelection] = useState(affiliation);
99
99
  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
100
100
  const valuesRef = useRef();
101
101
  const actionsRef = useRef();
@@ -105,37 +105,37 @@ export const AffiliationsModal = ({ authors: $authors, affiliations: $affiliatio
105
105
  const [newAffiliation, setNewAffiliation] = useState(false);
106
106
  const [showRequiredFieldConfirmationDialog, setShowRequiredFieldConfirmationDialog,] = useState(false);
107
107
  const [showConfirmationDialog, setShowConfirmationDialog] = useState(false);
108
- const affiliation = {
109
- id: generateID(ObjectTypes.Affiliation),
110
- institution: '',
111
- department: '',
112
- addressLine1: '',
113
- addressLine2: '',
114
- addressLine3: '',
115
- postCode: '',
116
- country: '',
117
- county: '',
118
- city: '',
119
- email: {
120
- href: '',
121
- text: '',
122
- },
123
- priority: affiliations.length,
124
- };
125
108
  const [showAuthorDrawer, setShowAuthorDrawer] = useState(false);
126
- const [selectedIds, setSelectedIds] = useState([]);
109
+ const [selectedAuthorIds, setSelectedAuthorIds] = useState([]);
127
110
  const [pendingSelection, setPendingSelection] = useState(null);
128
111
  const [pendingAction, setPendingAction] = useState(null);
129
112
  const [savedAffiliationId, setSavedAffiliationId] = useState(undefined);
130
- const [affiliationAuthorMap, setAffiliationAuthorMap] = useState({});
113
+ const [affiliationAuthorMap, setAffiliationAuthorMap] = useState(new Map());
114
+ useEffect(() => {
115
+ if (!selection) {
116
+ return;
117
+ }
118
+ const currentAffiliation = selection;
119
+ const affiliatedAuthorIds = authors
120
+ .filter((author) => { var _a; return (_a = author.affiliations) === null || _a === void 0 ? void 0 : _a.includes(currentAffiliation.id); })
121
+ .map((author) => author.id);
122
+ setSelectedAuthorIds(affiliatedAuthorIds);
123
+ setAffiliationAuthorMap((prevMap) => {
124
+ const newMap = new Map(prevMap);
125
+ newMap.set(currentAffiliation.id, affiliatedAuthorIds);
126
+ return newMap;
127
+ });
128
+ }, []);
131
129
  const handleClose = () => {
132
- var _a;
130
+ var _a, _b;
133
131
  const values = valuesRef.current;
134
132
  const hasAffiliationChanges = selection && !isEqual(values, normalize(selection));
135
- const originalAuthors = affiliationAuthorMap[(selection === null || selection === void 0 ? void 0 : selection.id) || ''] || [];
136
- const hasAuthorChanges = !isEqual(originalAuthors.sort(), selectedIds.sort());
133
+ const originalAuthors = selection
134
+ ? (_a = affiliationAuthorMap.get(selection.id)) !== null && _a !== void 0 ? _a : []
135
+ : [];
136
+ const hasAuthorChanges = !isEqual(originalAuthors.sort(), selectedAuthorIds.sort());
137
137
  const hasChanges = hasAffiliationChanges || (selection && hasAuthorChanges);
138
- const isInstitutionEmpty = ((_a = values === null || values === void 0 ? void 0 : values.institution) === null || _a === void 0 ? void 0 : _a.trim()) === '';
138
+ const isInstitutionEmpty = ((_b = values === null || values === void 0 ? void 0 : values.institution) === null || _b === void 0 ? void 0 : _b.trim()) === '';
139
139
  if (hasChanges) {
140
140
  if (isInstitutionEmpty && hasAffiliationChanges) {
141
141
  setShowRequiredFieldConfirmationDialog(true);
@@ -150,13 +150,15 @@ export const AffiliationsModal = ({ authors: $authors, affiliations: $affiliatio
150
150
  }
151
151
  };
152
152
  const handleSelect = (affiliation) => {
153
- var _a;
153
+ var _a, _b;
154
154
  const values = valuesRef.current;
155
155
  const hasAffiliationChanges = selection && !isEqual(values, normalize(selection));
156
- const originalAuthors = affiliationAuthorMap[(selection === null || selection === void 0 ? void 0 : selection.id) || ''] || [];
157
- const hasAuthorChanges = !isEqual(originalAuthors.sort(), selectedIds.sort());
156
+ const originalAuthors = selection
157
+ ? (_a = affiliationAuthorMap.get(selection.id)) !== null && _a !== void 0 ? _a : []
158
+ : [];
159
+ const hasAuthorChanges = !isEqual(originalAuthors.sort(), selectedAuthorIds.sort());
158
160
  const hasChanges = hasAffiliationChanges || hasAuthorChanges;
159
- const isInstitutionEmpty = ((_a = values === null || values === void 0 ? void 0 : values.institution) === null || _a === void 0 ? void 0 : _a.trim()) === '';
161
+ const isInstitutionEmpty = ((_b = values === null || values === void 0 ? void 0 : values.institution) === null || _b === void 0 ? void 0 : _b.trim()) === '';
160
162
  if (hasChanges) {
161
163
  setPendingSelection(affiliation);
162
164
  setPendingAction('select');
@@ -173,12 +175,16 @@ export const AffiliationsModal = ({ authors: $authors, affiliations: $affiliatio
173
175
  .map((author) => author.id);
174
176
  setNewAffiliation(false);
175
177
  setSelection(affiliation);
176
- setSelectedIds(affiliatedAuthorIds);
178
+ setSelectedAuthorIds(affiliatedAuthorIds);
177
179
  setShowAuthorDrawer(false);
178
- setAffiliationAuthorMap((prevMap) => (Object.assign(Object.assign({}, prevMap), { [affiliation.id]: affiliatedAuthorIds })));
180
+ setAffiliationAuthorMap((prevMap) => {
181
+ const newMap = new Map(prevMap);
182
+ newMap.set(affiliation.id, affiliatedAuthorIds);
183
+ return newMap;
184
+ });
179
185
  }
180
186
  };
181
- const handleSaveAffiliation = (values) => {
187
+ const handleSaveAffiliation = useCallback((values) => {
182
188
  if (!values || !selection) {
183
189
  return;
184
190
  }
@@ -190,7 +196,7 @@ export const AffiliationsModal = ({ authors: $authors, affiliations: $affiliatio
190
196
  items: [affiliation],
191
197
  });
192
198
  setSelection(affiliation);
193
- const updatedAuthors = authors.map((author) => (Object.assign(Object.assign({}, author), { affiliations: selectedIds.includes(author.id)
199
+ const updatedAuthors = authors.map((author) => (Object.assign(Object.assign({}, author), { affiliations: selectedAuthorIds.includes(author.id)
194
200
  ? [...new Set([...(author.affiliations || []), affiliation.id])]
195
201
  : (author.affiliations || []).filter((id) => id !== affiliation.id) })));
196
202
  dispatchAuthors({
@@ -199,15 +205,27 @@ export const AffiliationsModal = ({ authors: $authors, affiliations: $affiliatio
199
205
  });
200
206
  onUpdateAuthors(updatedAuthors);
201
207
  setNewAffiliation(false);
202
- setAffiliationAuthorMap((prevMap) => (Object.assign(Object.assign({}, prevMap), { [affiliation.id]: selectedIds })));
208
+ setAffiliationAuthorMap((prevMap) => {
209
+ const newMap = new Map(prevMap);
210
+ newMap.set(affiliation.id, selectedAuthorIds);
211
+ return newMap;
212
+ });
203
213
  setShowAuthorDrawer(false);
204
214
  setSavedAffiliationId(affiliation.id);
205
215
  setTimeout(() => {
206
216
  setSavedAffiliationId(undefined);
207
217
  }, 3200);
208
- };
218
+ }, [
219
+ authors,
220
+ dispatchAffiliations,
221
+ dispatchAuthors,
222
+ onSaveAffiliation,
223
+ onUpdateAuthors,
224
+ selectedAuthorIds,
225
+ selection,
226
+ ]);
209
227
  const handleAffiliationChange = (values) => {
210
- var _a;
228
+ var _a, _b;
211
229
  valuesRef.current = values;
212
230
  if (!selection || selection.id !== values.id) {
213
231
  setIsDisableSave(true);
@@ -215,8 +233,8 @@ export const AffiliationsModal = ({ authors: $authors, affiliations: $affiliatio
215
233
  }
216
234
  const isInstitutionEmpty = !((_a = values.institution) === null || _a === void 0 ? void 0 : _a.trim());
217
235
  const hasAffiliationChanges = selection && !isEqual(normalize(values), normalize(selection));
218
- const originalAuthors = affiliationAuthorMap[(selection === null || selection === void 0 ? void 0 : selection.id) || ''] || [];
219
- const hasAuthorChanges = selection && !isEqual(originalAuthors.sort(), selectedIds.sort());
236
+ const originalAuthors = (_b = affiliationAuthorMap.get(selection.id)) !== null && _b !== void 0 ? _b : [];
237
+ const hasAuthorChanges = selection && !isEqual(originalAuthors.sort(), selectedAuthorIds.sort());
220
238
  const shouldEnableSave = !isInstitutionEmpty && (hasAffiliationChanges || hasAuthorChanges);
221
239
  setIsDisableSave(!shouldEnableSave);
222
240
  };
@@ -238,22 +256,22 @@ export const AffiliationsModal = ({ authors: $authors, affiliations: $affiliatio
238
256
  type: 'delete',
239
257
  item: selection,
240
258
  });
241
- setSelectedIds([]);
259
+ setSelectedAuthorIds([]);
242
260
  setSelection(undefined);
243
261
  };
244
262
  const handleAuthorSelect = (authorId) => {
245
- var _a, _b;
263
+ var _a, _b, _c;
246
264
  if (!selection) {
247
265
  return;
248
266
  }
249
- const newSelectedAuthorIds = selectedIds.includes(authorId)
250
- ? selectedIds.filter((id) => id !== authorId)
251
- : [...selectedIds, authorId];
252
- setSelectedIds(newSelectedAuthorIds);
267
+ const newSelectedAuthorIds = selectedAuthorIds.includes(authorId)
268
+ ? selectedAuthorIds.filter((id) => id !== authorId)
269
+ : [...selectedAuthorIds, authorId];
270
+ setSelectedAuthorIds(newSelectedAuthorIds);
253
271
  const hasAffiliationChanges = !isEqual(valuesRef.current, normalize(selection));
254
- const originalAuthors = affiliationAuthorMap[selection.id] || [];
272
+ const originalAuthors = (_a = affiliationAuthorMap.get(selection.id)) !== null && _a !== void 0 ? _a : [];
255
273
  const hasAuthorChanges = !isEqual(originalAuthors.sort(), newSelectedAuthorIds.sort());
256
- const isInstitutionEmpty = !((_b = (_a = valuesRef.current) === null || _a === void 0 ? void 0 : _a.institution) === null || _b === void 0 ? void 0 : _b.trim());
274
+ const isInstitutionEmpty = !((_c = (_b = valuesRef.current) === null || _b === void 0 ? void 0 : _b.institution) === null || _c === void 0 ? void 0 : _c.trim());
257
275
  const shouldEnableSave = !isInstitutionEmpty && (hasAffiliationChanges || hasAuthorChanges);
258
276
  setIsDisableSave(!shouldEnableSave);
259
277
  };
@@ -261,7 +279,7 @@ export const AffiliationsModal = ({ authors: $authors, affiliations: $affiliatio
261
279
  id: author.id,
262
280
  label: `${author.bibliographicName.given} ${author.bibliographicName.family}`,
263
281
  }));
264
- const selectedAuthors = selectedIds
282
+ const selectedAuthors = selectedAuthorIds
265
283
  .map((authorId) => {
266
284
  const author = authors.find((a) => a.id === authorId);
267
285
  return {
@@ -277,6 +295,23 @@ export const AffiliationsModal = ({ authors: $authors, affiliations: $affiliatio
277
295
  const values = valuesRef.current;
278
296
  const hasChanges = !isDisableSave;
279
297
  const isInstitutionEmpty = ((_a = values === null || values === void 0 ? void 0 : values.institution) === null || _a === void 0 ? void 0 : _a.trim()) === '';
298
+ const emptyAffiliation = {
299
+ id: generateID(ObjectTypes.Affiliation),
300
+ institution: '',
301
+ department: '',
302
+ addressLine1: '',
303
+ addressLine2: '',
304
+ addressLine3: '',
305
+ postCode: '',
306
+ country: '',
307
+ county: '',
308
+ city: '',
309
+ email: {
310
+ href: '',
311
+ text: '',
312
+ },
313
+ priority: affiliations.length,
314
+ };
280
315
  if (hasChanges) {
281
316
  setPendingAction('new');
282
317
  if (isInstitutionEmpty) {
@@ -288,8 +323,8 @@ export const AffiliationsModal = ({ authors: $authors, affiliations: $affiliatio
288
323
  return;
289
324
  }
290
325
  setNewAffiliation(true);
291
- setSelection(affiliation);
292
- setSelectedIds([]);
326
+ setSelection(emptyAffiliation);
327
+ setSelectedAuthorIds([]);
293
328
  setShowAuthorDrawer(false);
294
329
  };
295
330
  useEffect(() => {
@@ -298,14 +333,14 @@ export const AffiliationsModal = ({ authors: $authors, affiliations: $affiliatio
298
333
  setNewAffiliation(true);
299
334
  }
300
335
  }, [addNewAffiliation]);
301
- const handleConfirmationSave = () => {
336
+ const handleConfirmationSave = useCallback(() => {
302
337
  handleSaveAffiliation(valuesRef.current);
303
338
  setShowConfirmationDialog(false);
304
339
  setShowRequiredFieldConfirmationDialog(false);
305
340
  if (pendingAction === 'new') {
306
341
  setNewAffiliation(true);
307
342
  setSelection(affiliation);
308
- setSelectedIds([]);
343
+ setSelectedAuthorIds([]);
309
344
  setIsDisableSave(true);
310
345
  }
311
346
  else if (pendingAction === 'select' && pendingSelection) {
@@ -314,17 +349,27 @@ export const AffiliationsModal = ({ authors: $authors, affiliations: $affiliatio
314
349
  const affiliatedAuthorIds = authors
315
350
  .filter((author) => { var _a; return (_a = author.affiliations) === null || _a === void 0 ? void 0 : _a.some((aff) => aff === pendingSelection.id); })
316
351
  .map((author) => author.id);
317
- setSelectedIds(affiliatedAuthorIds);
352
+ setSelectedAuthorIds(affiliatedAuthorIds);
318
353
  valuesRef.current = normalize(pendingSelection);
319
354
  setIsDisableSave(true);
320
- setAffiliationAuthorMap((prevMap) => (Object.assign(Object.assign({}, prevMap), { [pendingSelection.id]: affiliatedAuthorIds })));
355
+ setAffiliationAuthorMap((prevMap) => {
356
+ const newMap = new Map(prevMap);
357
+ newMap.set(pendingSelection.id, affiliatedAuthorIds);
358
+ return newMap;
359
+ });
321
360
  }
322
- setPendingSelection(null);
323
- setPendingAction(null);
324
361
  if (pendingAction === 'close') {
325
362
  setIsOpen(false);
326
363
  }
327
- };
364
+ setPendingSelection(null);
365
+ setPendingAction(null);
366
+ }, [
367
+ authors,
368
+ affiliation,
369
+ pendingAction,
370
+ pendingSelection,
371
+ handleSaveAffiliation,
372
+ ]);
328
373
  const handleConfirmationCancel = () => {
329
374
  setShowConfirmationDialog(false);
330
375
  setShowRequiredFieldConfirmationDialog(false);
@@ -335,12 +380,12 @@ export const AffiliationsModal = ({ authors: $authors, affiliations: $affiliatio
335
380
  const affiliatedAuthorIds = authors
336
381
  .filter((author) => { var _a; return (_a = author.affiliations) === null || _a === void 0 ? void 0 : _a.some((aff) => aff === pendingSelection.id); })
337
382
  .map((author) => author.id);
338
- setSelectedIds(affiliatedAuthorIds);
383
+ setSelectedAuthorIds(affiliatedAuthorIds);
339
384
  }
340
385
  else if (pendingAction === 'new') {
341
386
  setNewAffiliation(true);
342
387
  setSelection(affiliation);
343
- setSelectedIds([]);
388
+ setSelectedAuthorIds([]);
344
389
  }
345
390
  if (pendingSelection) {
346
391
  valuesRef.current = normalize(pendingSelection);
@@ -379,8 +424,8 @@ export const AffiliationsModal = ({ authors: $authors, affiliations: $affiliatio
379
424
  React.createElement(AddUserIcon, { width: 16, height: 16 }),
380
425
  "Affiliate Authors")),
381
426
  React.createElement(SelectedItemsBox, { "data-cy": "affiliation-authors", items: selectedAuthors, onRemove: (id) => {
382
- setSelectedIds((prev) => prev.filter((authorId) => authorId !== id));
427
+ setSelectedAuthorIds((prev) => prev.filter((authorId) => authorId !== id));
383
428
  }, placeholder: "No authors assigned" })),
384
- showAuthorDrawer && (React.createElement(Drawer, { items: authorItems, selectedIds: selectedIds, title: "Authors", onSelect: handleAuthorSelect, onBack: () => setShowAuthorDrawer(false), width: "100%" })))) : (React.createElement(FormPlaceholder, { type: "affiliation", title: "Affiliation Details", message: "Select an affiliation from the list to display it's details here.", placeholderIcon: React.createElement(AffiliationPlaceholderIcon, null) })))),
429
+ showAuthorDrawer && (React.createElement(Drawer, { items: authorItems, selectedIds: selectedAuthorIds, title: "Authors", onSelect: handleAuthorSelect, onBack: () => setShowAuthorDrawer(false), width: "100%" })))) : (React.createElement(FormPlaceholder, { type: "affiliation", title: "Affiliation Details", message: "Select an affiliation from the list to display it's details here.", placeholderIcon: React.createElement(AffiliationPlaceholderIcon, null) })))),
385
430
  React.createElement(FormFooter, { onCancel: handleClose }))));
386
431
  };
package/dist/es/versions.js CHANGED
@@ -1,2 +1,2 @@
1
- export const VERSION = '2.8.83';
1
+ export const VERSION = '2.8.84';
2
2
  export const MATHJAX_VERSION = '3.2.2';
package/dist/es/views/affiliations.js CHANGED
@@ -33,17 +33,21 @@ export class AffiliationsView extends BlockView {
33
33
  this.stopEvent = () => true;
34
34
  this.handleClick = (event) => {
35
35
  const element = event.target;
36
- const item = element.closest('.affiliation');
37
- if (item) {
38
- const node = findChildByID(this.view, item.id);
39
- if (!node) {
40
- return;
41
- }
42
- const view = this.view;
43
- const tr = view.state.tr;
44
- tr.setSelection(NodeSelection.create(view.state.doc, node.pos));
45
- view.dispatch(tr);
36
+ const affiliation = element.closest('.affiliation');
37
+ if (!affiliation) {
38
+ return;
46
39
  }
40
+ const { node, pos } = findChildByID(this.view, affiliation.id) || {};
41
+ if (!node || !pos) {
42
+ return;
43
+ }
44
+ if (!isDeleted(node)) {
45
+ this.showContextMenu(affiliation);
46
+ }
47
+ const view = this.view;
48
+ const tr = view.state.tr;
49
+ tr.setSelection(NodeSelection.create(view.state.doc, pos));
50
+ view.dispatch(tr);
47
51
  };
48
52
  this.insertAffiliationNode = (attrs) => {
49
53
  const pos = this.getPos();
@@ -60,12 +64,16 @@ export class AffiliationsView extends BlockView {
60
64
  this.handleDeleteAffiliation = (affiliation) => {
61
65
  deleteNode(this.view, affiliation.id);
62
66
  };
63
- this.handleEdit = (addNew) => {
67
+ this.handleEdit = (id, addNew) => {
64
68
  var _a;
65
69
  this.props.popper.destroy();
66
70
  const contributors = findChildrenAttrsByType(this.view, schema.nodes.contributor);
67
71
  const affiliations = findChildrenAttrsByType(this.view, schema.nodes.affiliation);
72
+ const affiliation = id
73
+ ? affiliations.filter((a) => a.id === id)[0]
74
+ : undefined;
68
75
  const componentProps = {
76
+ affiliation,
69
77
  authors: contributors,
70
78
  affiliations,
71
79
  onSaveAffiliation: this.handleSaveAffiliation,
@@ -77,7 +85,7 @@ export class AffiliationsView extends BlockView {
77
85
  this.popper = ReactSubView(this.props, AffiliationsModal, componentProps, this.node, this.getPos, this.view);
78
86
  this.container.appendChild(this.popper);
79
87
  };
80
- this.showContextMenu = () => {
88
+ this.showGroupContextMenu = () => {
81
89
  const can = this.props.getCapabilities();
82
90
  const componentProps = {
83
91
  actions: [],
@@ -90,12 +98,12 @@ export class AffiliationsView extends BlockView {
90
98
  });
91
99
  componentProps.actions.push({
92
100
  label: 'New Affiliation',
93
- action: () => this.handleEdit(true),
101
+ action: () => this.handleEdit('', true),
94
102
  icon: 'AddOutline',
95
103
  });
96
104
  componentProps.actions.push({
97
105
  label: 'Edit',
98
- action: () => this.handleEdit(),
106
+ action: () => this.handleEdit(''),
99
107
  icon: 'Edit',
100
108
  });
101
109
  this.contextMenu = ReactSubView(this.props, ContextMenu, componentProps, this.node, this.getPos, this.view, ['context-menu']);
@@ -103,15 +111,30 @@ export class AffiliationsView extends BlockView {
103
111
  }
104
112
  return undefined;
105
113
  };
114
+ this.showContextMenu = (element) => {
115
+ const affiliationNameBlock = element.querySelector('.affiliation-name');
116
+ this.props.popper.destroy();
117
+ const componentProps = {
118
+ actions: [
119
+ {
120
+ label: 'Edit',
121
+ action: () => this.handleEdit(element.id),
122
+ icon: 'Edit',
123
+ },
124
+ ],
125
+ };
126
+ this.contextMenu = ReactSubView(this.props, ContextMenu, componentProps, this.node, this.getPos, this.view, ['context-menu']);
127
+ this.props.popper.show(affiliationNameBlock || element, this.contextMenu, 'right-start');
128
+ };
106
129
  this.actionGutterButtons = () => {
107
- const contextMenu = this.showContextMenu();
130
+ const contextMenu = this.showGroupContextMenu();
108
131
  return contextMenu ? [contextMenu] : [];
109
132
  };
110
133
  this.selectNode = () => {
111
134
  const selectedMarker = document.querySelector('.comment-marker.selected-comment');
112
135
  this.dom.classList.add('ProseMirror-selectednode');
113
136
  if (!isDeleted(this.node) && !selectedMarker) {
114
- this.handleEdit(true);
137
+ this.handleEdit('', true);
115
138
  }
116
139
  };
117
140
  this.handleUpdateAuthors = (authors) => {
package/dist/types/components/affiliations/AffiliationsModal.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import React from 'react';
2
2
  import { AffiliationAttrs, ContributorAttrs } from '../../lib/authors';
3
3
  export interface AffiliationsModalProps {
4
+ affiliation?: AffiliationAttrs;
4
5
  authors: ContributorAttrs[];
5
6
  affiliations: AffiliationAttrs[];
6
7
  onSaveAffiliation: (affiliation: AffiliationAttrs) => void;
package/dist/types/versions.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- export declare const VERSION = "2.8.83";
1
+ export declare const VERSION = "2.8.84";
2
2
  export declare const MATHJAX_VERSION = "3.2.2";
package/dist/types/views/affiliations.d.ts CHANGED
@@ -34,8 +34,9 @@ export declare class AffiliationsView extends BlockView<Trackable<AffiliationNod
34
34
  insertAffiliationNode: (attrs: AffiliationAttrs) => void;
35
35
  handleSaveAffiliation: (affiliation: AffiliationAttrs) => void;
36
36
  handleDeleteAffiliation: (affiliation: AffiliationAttrs) => void;
37
- handleEdit: (addNew?: boolean) => void;
38
- showContextMenu: () => HTMLElement | undefined;
37
+ handleEdit: (id: string, addNew?: boolean) => void;
38
+ showGroupContextMenu: () => HTMLElement | undefined;
39
+ showContextMenu: (element: Element) => void;
39
40
  actionGutterButtons: () => HTMLElement[];
40
41
  selectNode: () => void;
41
42
  handleUpdateAuthors: (authors: ContributorAttrs[]) => void;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@manuscripts/body-editor",
3
3
  "description": "Prosemirror components for editing and viewing manuscripts",
4
- "version": "2.8.83",
4
+ "version": "2.8.84",
5
5
  "repository": "github:Atypon-OpenSource/manuscripts-body-editor",
6
6
  "license": "Apache-2.0",
7
7
  "main": "dist/cjs",
package/styles/AdvancedEditor.css CHANGED
@@ -937,9 +937,7 @@ figure.block:has(.equation.selected-suggestion) {
937
937
  position: initial;
938
938
  display: flex;
939
939
  flex: 1;
940
- align-items: center;
941
- margin-top: 33px;
942
- left: -10px;
940
+ align-items: flex-start;
943
941
  }
944
942
  .contributor .contributor-comment {
945
943
  left: 0;
@@ -1007,13 +1005,6 @@ figure.block:has(.equation.selected-suggestion) {
1007
1005
  margin-right: 4px;
1008
1006
  }
1009
1007
 
1010
- .block-affiliations .block {
1011
- display: flex;
1012
- width: 100%;
1013
- flex-direction: column;
1014
- align-items: flex-start;
1015
- }
1016
-
1017
1008
  .ProseMirror .doi-container {
1018
1009
  margin: 1rem 64px 0;
1019
1010
  font-size: 12px;