@manuscripts/body-editor 2.7.32-LEAN-4096.0 → 2.7.32

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 (58) hide show
  1. package/dist/cjs/commands.js +2 -2
  2. package/dist/cjs/components/views/FigureDropdown.js +45 -12
  3. package/dist/cjs/configs/editor-plugins.js +0 -2
  4. package/dist/cjs/index.js +0 -1
  5. package/dist/cjs/lib/context-menu.js +4 -71
  6. package/dist/cjs/lib/view.js +1 -3
  7. package/dist/cjs/versions.js +1 -1
  8. package/dist/cjs/views/ReactSubView.js +4 -4
  9. package/dist/cjs/views/affiliations.js +1 -1
  10. package/dist/cjs/views/award.js +3 -3
  11. package/dist/cjs/views/bibliography_element.js +2 -2
  12. package/dist/cjs/views/citation_editable.js +3 -3
  13. package/dist/cjs/views/contributors.js +2 -2
  14. package/dist/cjs/views/cross_reference_editable.js +1 -1
  15. package/dist/cjs/views/embed.js +1 -1
  16. package/dist/cjs/views/figure_editable.js +9 -99
  17. package/dist/cjs/views/figure_element.js +79 -0
  18. package/dist/cjs/views/inline_footnote.js +3 -6
  19. package/dist/cjs/views/keyword.js +1 -1
  20. package/dist/cjs/views/keyword_group.js +1 -1
  21. package/dist/cjs/views/link_editable.js +1 -1
  22. package/dist/cjs/views/table_cell.js +1 -1
  23. package/dist/es/commands.js +2 -2
  24. package/dist/es/components/views/FigureDropdown.js +44 -12
  25. package/dist/es/configs/editor-plugins.js +0 -2
  26. package/dist/es/index.js +0 -1
  27. package/dist/es/lib/context-menu.js +5 -72
  28. package/dist/es/lib/view.js +1 -3
  29. package/dist/es/versions.js +1 -1
  30. package/dist/es/views/ReactSubView.js +4 -4
  31. package/dist/es/views/affiliations.js +1 -1
  32. package/dist/es/views/award.js +3 -3
  33. package/dist/es/views/bibliography_element.js +2 -2
  34. package/dist/es/views/citation_editable.js +3 -3
  35. package/dist/es/views/contributors.js +2 -2
  36. package/dist/es/views/cross_reference_editable.js +1 -1
  37. package/dist/es/views/embed.js +1 -1
  38. package/dist/es/views/figure_editable.js +9 -99
  39. package/dist/es/views/figure_element.js +79 -0
  40. package/dist/es/views/inline_footnote.js +3 -6
  41. package/dist/es/views/keyword.js +1 -1
  42. package/dist/es/views/keyword_group.js +1 -1
  43. package/dist/es/views/link_editable.js +1 -1
  44. package/dist/es/views/table_cell.js +1 -1
  45. package/dist/types/components/views/FigureDropdown.d.ts +1 -0
  46. package/dist/types/index.d.ts +0 -1
  47. package/dist/types/lib/context-menu.d.ts +0 -3
  48. package/dist/types/versions.d.ts +1 -1
  49. package/dist/types/views/ReactSubView.d.ts +1 -1
  50. package/dist/types/views/figure_editable.d.ts +0 -9
  51. package/dist/types/views/figure_element.d.ts +3 -0
  52. package/package.json +2 -2
  53. package/styles/AdvancedEditor.css +5 -17
  54. package/styles/Editor.css +1 -10
  55. package/styles/popper.css +11 -33
  56. package/dist/cjs/plugins/inspector-tabs.js +0 -84
  57. package/dist/es/plugins/inspector-tabs.js +0 -81
  58. package/dist/types/plugins/inspector-tabs.d.ts +0 -35
@@ -456,8 +456,8 @@ const insertInlineFootnote = (state, dispatch) => {
456
456
  const tr = state.tr;
457
457
  const container = (0, footnotes_1.findFootnotesContainerNode)(state.doc, pos);
458
458
  const fn = (0, footnotes_1.getFootnotesElementState)(state, container.node.attrs.id);
459
- const hasUnusedFootnotes = fn && fn.unusedFootnoteIDs.size > 0;
460
- const footnote = !hasUnusedFootnotes && (0, footnotes_1.createFootnote)();
459
+ const hasFootnotes = fn && fn.footnotes.filter((fn) => !(0, track_changes_utils_1.isDeleted)(fn[0])).length > 0;
460
+ const footnote = !hasFootnotes && (0, footnotes_1.createFootnote)();
461
461
  const node = transform_1.schema.nodes.inline_footnote.create({
462
462
  rids: footnote ? [footnote.attrs.id] : [],
463
463
  });
@@ -3,36 +3,50 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
3
3
  return (mod && mod.__esModule) ? mod : { "default": mod };
4
4
  };
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.FigureOptions = void 0;
6
+ exports.FigureOptions = exports.FigureElementOptions = void 0;
7
7
  const style_guide_1 = require("@manuscripts/style-guide");
8
8
  const react_1 = __importDefault(require("react"));
9
9
  const styled_components_1 = __importDefault(require("styled-components"));
10
- const FigureOptions = ({ can, files, onDownload, onUpload, onDetach, onReplace, }) => {
10
+ const FigureElementOptions = ({ can, files, onAdd, onUpload, hasUploadedImage, }) => {
11
11
  const { isOpen, toggleOpen, wrapperRef } = (0, style_guide_1.useDropdown)();
12
12
  const supplements = files.supplements
13
13
  .map((s) => s.file)
14
14
  .filter((f) => (0, style_guide_1.isImageFile)(f.name));
15
+ const others = files.others.filter((f) => (0, style_guide_1.isImageFile)(f.name));
16
+ return (react_1.default.createElement(FilesDropdownWrapper, { onClick: toggleOpen, ref: wrapperRef },
17
+ react_1.default.createElement(FilesButton, { disabled: hasUploadedImage },
18
+ react_1.default.createElement(style_guide_1.AttachIcon, null)),
19
+ isOpen && (react_1.default.createElement(style_guide_1.DropdownList, { direction: 'left', width: 208, height: 187, onClick: toggleOpen, top: 7 },
20
+ react_1.default.createElement(NestedDropdown, { disabled: !can.replaceFile || supplements.length < 1, parentToggleOpen: toggleOpen, buttonText: 'Supplements', list: react_1.default.createElement(react_1.default.Fragment, null, supplements.map((file) => (react_1.default.createElement(ListItemButton, { key: file.id, onClick: () => onAdd(file) },
21
+ (0, style_guide_1.getFileIcon)(file.name),
22
+ react_1.default.createElement(ListItemText, null, file.name))))) }),
23
+ react_1.default.createElement(NestedDropdown, { disabled: !can.replaceFile || others.length < 1, parentToggleOpen: toggleOpen, buttonText: 'Other files', list: react_1.default.createElement(react_1.default.Fragment, null, others.map((file) => (react_1.default.createElement(ListItemButton, { key: file.id, onClick: () => onAdd(file) },
24
+ (0, style_guide_1.getFileIcon)(file.name),
25
+ react_1.default.createElement(ListItemText, null, file.name))))) }),
26
+ react_1.default.createElement(UploadButton, { onClick: onUpload, disabled: !can.uploadFile },
27
+ react_1.default.createElement(style_guide_1.AddIcon, null),
28
+ " New file...")))));
29
+ };
30
+ exports.FigureElementOptions = FigureElementOptions;
31
+ const FigureOptions = ({ can, files, onDownload, onUpload, onDetach, onReplace, }) => {
32
+ const { isOpen, toggleOpen, wrapperRef } = (0, style_guide_1.useDropdown)();
15
33
  const otherFiles = files.others.filter((f) => (0, style_guide_1.isImageFile)(f.name));
16
34
  const showDownload = onDownload && can.downloadFiles;
17
35
  const showUpload = onUpload && can.uploadFile;
18
36
  const showDetach = onDetach && can.detachFile;
19
37
  const showReplace = onReplace && can.replaceFile;
20
- const replaceBtnText = onDownload ? 'Replace' : 'Choose file';
21
38
  return (react_1.default.createElement(DropdownWrapper, { ref: wrapperRef },
22
39
  react_1.default.createElement(OptionsButton, { className: 'options-button', onClick: toggleOpen },
23
40
  react_1.default.createElement(style_guide_1.DotsIcon, null)),
24
41
  isOpen && (react_1.default.createElement(OptionsDropdownList, { direction: 'right', width: 128, top: 5 },
25
- react_1.default.createElement(NestedDropdown, { disabled: !showReplace, parentToggleOpen: toggleOpen, buttonText: replaceBtnText, moveLeft: true, list: react_1.default.createElement(react_1.default.Fragment, null,
26
- supplements.map((file, index) => (react_1.default.createElement(ListItemButton, { key: file.id, id: index.toString(), onClick: () => onReplace && onReplace(file) },
27
- (0, style_guide_1.getFileIcon)(file.name),
28
- react_1.default.createElement(ListItemText, null, file.name)))),
42
+ react_1.default.createElement(ListItemButton, { onClick: onDownload, disabled: !showDownload }, "Download"),
43
+ react_1.default.createElement(NestedDropdown, { disabled: !showReplace, parentToggleOpen: toggleOpen, buttonText: 'Replace', moveLeft: true, list: react_1.default.createElement(react_1.default.Fragment, null,
29
44
  otherFiles.map((file, index) => (react_1.default.createElement(ListItemButton, { key: file.id, id: index.toString(), onClick: () => onReplace && onReplace(file) },
30
45
  (0, style_guide_1.getFileIcon)(file.name),
31
46
  react_1.default.createElement(ListItemText, null, file.name)))),
32
47
  react_1.default.createElement(UploadButton, { onClick: onUpload, disabled: !showUpload },
33
48
  react_1.default.createElement(style_guide_1.UploadIcon, null),
34
49
  " Upload new...")) }),
35
- react_1.default.createElement(ListItemButton, { onClick: onDownload, disabled: !showDownload }, "Download"),
36
50
  react_1.default.createElement(ListItemButton, { onClick: onDetach, disabled: !showDetach }, "Detach")))));
37
51
  };
38
52
  exports.FigureOptions = FigureOptions;
@@ -40,7 +54,8 @@ const NestedDropdown = ({ parentToggleOpen, buttonText, disabled, list, moveLeft
40
54
  const { isOpen, toggleOpen, wrapperRef } = (0, style_guide_1.useDropdown)();
41
55
  return (react_1.default.createElement(DropdownWrapper, { ref: wrapperRef },
42
56
  react_1.default.createElement(NestedListButton, { onClick: toggleOpen, disabled: disabled },
43
- react_1.default.createElement("div", null, buttonText),
57
+ buttonText,
58
+ " ",
44
59
  react_1.default.createElement(style_guide_1.TriangleCollapsedIcon, null)),
45
60
  isOpen && (react_1.default.createElement(NestedListDropdownList, { direction: 'right', moveLeft: moveLeft, width: 192, onClick: (e) => {
46
61
  toggleOpen();
@@ -60,6 +75,9 @@ const OptionsButton = (0, styled_components_1.default)(style_guide_1.IconButton)
60
75
  margin: ${(props) => props.theme.grid.unit}px;
61
76
  visibility: hidden;
62
77
  background: white;
78
+ position: absolute;
79
+ top: -4px;
80
+ right: 4%;
63
81
 
64
82
  &:hover {
65
83
  background: #f2fbfc !important;
@@ -101,15 +119,30 @@ const ListItemText = styled_components_1.default.div `
101
119
  text-overflow: ellipsis;
102
120
  text-align: start;
103
121
  `;
122
+ const FilesButton = (0, styled_components_1.default)(style_guide_1.RoundIconButton) `
123
+ path {
124
+ stroke: #6e6e6e;
125
+ }
126
+
127
+ &:active,
128
+ &:focus {
129
+ path {
130
+ stroke: #1a9bc7;
131
+ }
132
+ }
133
+ `;
134
+ const FilesDropdownWrapper = styled_components_1.default.div `
135
+ position: absolute;
136
+ top: 8px;
137
+ left: 70px;
138
+ z-index: 1;
139
+ `;
104
140
  const NestedListButton = (0, styled_components_1.default)(ListItemButton) `
105
141
  width: 100%;
106
142
  &:active,
107
143
  &:focus {
108
144
  background: #f2fbfc;
109
145
  }
110
- svg {
111
- margin-right: 0;
112
- }
113
146
  `;
114
147
  const NestedListDropdownList = (0, styled_components_1.default)(style_guide_1.DropdownList) `
115
148
  top: 0;
@@ -34,7 +34,6 @@ const doi_1 = __importDefault(require("../plugins/doi"));
34
34
  const editor_props_1 = __importDefault(require("../plugins/editor-props"));
35
35
  const elements_1 = __importDefault(require("../plugins/elements"));
36
36
  const footnotes_1 = __importDefault(require("../plugins/footnotes"));
37
- const inspector_tabs_1 = __importDefault(require("../plugins/inspector-tabs"));
38
37
  const objects_1 = __importDefault(require("../plugins/objects"));
39
38
  const paragraphs_1 = __importDefault(require("../plugins/paragraphs"));
40
39
  const persist_1 = __importDefault(require("../plugins/persist"));
@@ -76,7 +75,6 @@ exports.default = (props) => {
76
75
  (0, doi_1.default)(),
77
76
  (0, section_category_1.default)(props),
78
77
  (0, cross_references_1.default)(),
79
- (0, inspector_tabs_1.default)(),
80
78
  ];
81
79
  if (props.collabProvider) {
82
80
  allPlugins.push((0, prosemirror_collab_1.collab)({ version: props.collabProvider.currentVersion }));
package/dist/cjs/index.js CHANGED
@@ -68,4 +68,3 @@ Object.defineProperty(exports, "metadata", { enumerable: true, get: function ()
68
68
  var authors_1 = require("./lib/authors");
69
69
  Object.defineProperty(exports, "authorLabel", { enumerable: true, get: function () { return authors_1.authorLabel; } });
70
70
  Object.defineProperty(exports, "affiliationLabel", { enumerable: true, get: function () { return authors_1.affiliationLabel; } });
71
- __exportStar(require("./plugins/inspector-tabs"), exports);
@@ -16,16 +16,11 @@
16
16
  */
17
17
  Object.defineProperty(exports, "__esModule", { value: true });
18
18
  exports.ContextMenu = exports.contextMenuBtnClass = exports.sectionLevel = void 0;
19
- const style_guide_1 = require("@manuscripts/style-guide");
20
19
  const transform_1 = require("@manuscripts/transform");
21
20
  const prosemirror_utils_1 = require("prosemirror-utils");
22
- const react_1 = require("react");
23
- const server_1 = require("react-dom/server");
24
21
  const commands_1 = require("../commands");
25
- const figure_editable_1 = require("../views/figure_editable");
26
22
  const popper_1 = require("./popper");
27
23
  const utils_1 = require("./utils");
28
- const view_1 = require("./view");
29
24
  const popper = new popper_1.PopperManager();
30
25
  const readonlyTypes = [
31
26
  transform_1.schema.nodes.keywords,
@@ -47,7 +42,6 @@ const hasAny = (set, ...items) => {
47
42
  return items.some((i) => set.has(i));
48
43
  };
49
44
  exports.contextMenuBtnClass = 'btn-context-menu';
50
- const contextSubmenuBtnClass = 'context-submenu-trigger';
51
45
  class ContextMenu {
52
46
  constructor(node, view, getPos) {
53
47
  this.showAddMenu = (target, after) => {
@@ -156,36 +150,6 @@ class ContextMenu {
156
150
  const $pos = this.resolvePos();
157
151
  const isBox = isBoxElementSectionTitle($pos, this.node);
158
152
  const type = isBox ? transform_1.schema.nodes.box_element : this.node.type;
159
- if (type === transform_1.schema.nodes.figure_element ||
160
- type === transform_1.schema.nodes.image_element) {
161
- const figure = (0, utils_1.getMatchingChild)(this.node, (node) => node.type === transform_1.schema.nodes.figure);
162
- if (figure) {
163
- const attrType = figure.attrs.type;
164
- const submenuOptions = [
165
- {
166
- title: 'Left',
167
- action: () => (0, view_1.updateNodeAttrs)(this.view, transform_1.schema.nodes.figure, Object.assign(Object.assign({}, figure.attrs), { type: figure_editable_1.figurePositions.left })),
168
- Icon: style_guide_1.ImageLeftIcon,
169
- selected: attrType === figure_editable_1.figurePositions.left,
170
- },
171
- {
172
- title: 'Default',
173
- action: () => (0, view_1.updateNodeAttrs)(this.view, transform_1.schema.nodes.figure, Object.assign(Object.assign({}, figure.attrs), { type: figure_editable_1.figurePositions.default })),
174
- Icon: style_guide_1.ImageDefaultIcon,
175
- selected: !attrType,
176
- },
177
- {
178
- title: 'Right',
179
- action: () => (0, view_1.updateNodeAttrs)(this.view, transform_1.schema.nodes.figure, Object.assign(Object.assign({}, figure.attrs), { type: figure_editable_1.figurePositions.right })),
180
- Icon: style_guide_1.ImageRightIcon,
181
- selected: attrType === figure_editable_1.figurePositions.right,
182
- },
183
- ];
184
- const submenuLabel = 'Position';
185
- const submenu = this.createSubmenu(submenuLabel, submenuOptions);
186
- menu.appendChild(submenu);
187
- }
188
- }
189
153
  if (type === transform_1.schema.nodes.list) {
190
154
  menu.appendChild(this.createMenuSection((section) => {
191
155
  const attrs = this.node.attrs;
@@ -249,48 +213,22 @@ class ContextMenu {
249
213
  popper.show(target, menu, 'right', true);
250
214
  this.addPopperEventListeners();
251
215
  };
252
- this.createSubmenuTrigger = (contents) => {
253
- const item = document.createElement('div');
254
- item.className = 'menu-item';
255
- const textNode = document.createTextNode(contents);
256
- item.innerHTML = (0, server_1.renderToStaticMarkup)((0, react_1.createElement)(style_guide_1.TriangleCollapsedIcon));
257
- item.prepend(textNode);
258
- item.classList.add(contextSubmenuBtnClass);
259
- item.addEventListener('mousedown', this.toggleSubmenu);
260
- return item;
261
- };
262
- this.createMenuItem = (contents, handler, Icon = null, selected = false) => {
216
+ this.createMenuItem = (contents, handler) => {
263
217
  const item = document.createElement('div');
264
218
  item.className = 'menu-item';
265
- selected && item.classList.add('selected');
266
- if (Icon) {
267
- item.innerHTML = (0, server_1.renderToStaticMarkup)((0, react_1.createElement)(Icon));
268
- }
269
- const textNode = document.createTextNode(contents);
270
- item.appendChild(textNode);
219
+ item.textContent = contents;
271
220
  item.addEventListener('mousedown', (event) => {
272
221
  event.preventDefault();
273
222
  handler(event);
274
223
  });
275
224
  return item;
276
225
  };
277
- this.createMenuSection = (createMenuItems, isSubmenu = false) => {
226
+ this.createMenuSection = (createMenuItems) => {
278
227
  const section = document.createElement('div');
279
228
  section.className = 'menu-section';
280
- isSubmenu && section.classList.add('menu');
281
229
  createMenuItems(section);
282
230
  return section;
283
231
  };
284
- this.createSubmenu = (submenuLabel, items) => {
285
- const submenu = document.createElement('div');
286
- submenu.classList.add('menu-section', 'context-submenu');
287
- submenu.append(this.createSubmenuTrigger(submenuLabel), this.createMenuSection((section) => {
288
- items.forEach(({ title, action, Icon, selected }) => {
289
- section.appendChild(this.createMenuItem(title, action, Icon, selected));
290
- });
291
- }, true));
292
- return submenu;
293
- };
294
232
  this.insertableTypes = (after, insertPos, endPos) => {
295
233
  const { nodes } = transform_1.schema;
296
234
  const insertable = new Set();
@@ -352,8 +290,7 @@ class ContextMenu {
352
290
  this.addPopperEventListeners = () => {
353
291
  const mouseListener = (event) => {
354
292
  const target = event.target;
355
- if (target.classList.contains(exports.contextMenuBtnClass) ||
356
- target.classList.contains(contextSubmenuBtnClass)) {
293
+ if (target.classList.contains(exports.contextMenuBtnClass)) {
357
294
  return;
358
295
  }
359
296
  window.requestAnimationFrame(() => {
@@ -385,10 +322,6 @@ class ContextMenu {
385
322
  }
386
323
  return this.node;
387
324
  };
388
- this.toggleSubmenu = (ev) => {
389
- const submenu = ev.target.nextElementSibling;
390
- submenu === null || submenu === void 0 ? void 0 : submenu.classList.toggle('show');
391
- };
392
325
  this.node = node;
393
326
  this.view = view;
394
327
  this.getPos = getPos;
@@ -40,7 +40,6 @@ var __importStar = (this && this.__importStar) || function (mod) {
40
40
  Object.defineProperty(exports, "__esModule", { value: true });
41
41
  exports.deleteNode = exports.updateNodeAttrs = exports.findChildrenAttrsByType = exports.findChildrenByType = exports.findChildByType = exports.findChildByID = void 0;
42
42
  const transform_1 = require("@manuscripts/transform");
43
- const prosemirror_state_1 = require("prosemirror-state");
44
43
  const utils = __importStar(require("prosemirror-utils"));
45
44
  const track_changes_utils_1 = require("./track-changes-utils");
46
45
  const metaNodeTypes = [
@@ -75,8 +74,7 @@ const updateNodeAttrs = (view, type, attrs) => {
75
74
  const copy = (0, track_changes_utils_1.sanitizeAttrsChange)(attrs, child.node.attrs);
76
75
  delete copy.dataTracked;
77
76
  const pos = child.pos;
78
- const tr = view.state.tr;
79
- tr.setNodeMarkup(pos, undefined, copy).setSelection(prosemirror_state_1.NodeSelection.create(tr.doc, pos));
77
+ const tr = view.state.tr.setNodeMarkup(pos, undefined, copy);
80
78
  if (metaNodeTypes.includes(type)) {
81
79
  tr.setMeta(updateMetaNode, true);
82
80
  }
@@ -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.7.32-LEAN-4096.0';
4
+ exports.VERSION = '2.7.32';
5
5
  exports.MATHJAX_VERSION = '3.2.2';
@@ -21,12 +21,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
21
21
  const react_1 = __importDefault(require("react"));
22
22
  const client_1 = require("react-dom/client");
23
23
  const styled_components_1 = require("styled-components");
24
- function createSubView(props, Component, componentProps, node, getPos, view, classNames = []) {
24
+ function createSubView(props, Component, componentProps, node, getPos, view, classNames = '') {
25
25
  const container = document.createElement('div');
26
26
  container.classList.add('tools-panel');
27
- if (classNames.length) {
28
- container.classList.add(...classNames);
29
- container.setAttribute('data-cy', classNames[0]);
27
+ if (classNames) {
28
+ container.classList.add(classNames);
29
+ container.setAttribute('data-cy', classNames);
30
30
  }
31
31
  container.setAttribute('contenteditable', 'false');
32
32
  const Wrapped = () => {
@@ -104,7 +104,7 @@ class AffiliationsView extends block_view_1.default {
104
104
  action: () => this.handleEdit(),
105
105
  icon: 'Edit',
106
106
  });
107
- this.contextMenu = (0, ReactSubView_1.default)(this.props, style_guide_1.ContextMenu, componentProps, this.node, this.getPos, this.view, ['context-menu']);
107
+ this.contextMenu = (0, ReactSubView_1.default)(this.props, style_guide_1.ContextMenu, componentProps, this.node, this.getPos, this.view, 'context-menu');
108
108
  return this.contextMenu;
109
109
  }
110
110
  return undefined;
@@ -80,7 +80,7 @@ class AwardView extends block_view_1.default {
80
80
  },
81
81
  ],
82
82
  };
83
- this.props.popper.show(this.contentDOM, (0, ReactSubView_1.default)(this.props, style_guide_1.ContextMenu, componentProps, this.node, this.getPos, this.view, ['context-menu']), 'right-start', false);
83
+ this.props.popper.show(this.contentDOM, (0, ReactSubView_1.default)(this.props, style_guide_1.ContextMenu, componentProps, this.node, this.getPos, this.view, 'context-menu'), 'right-start', false);
84
84
  };
85
85
  this.showAwardModal = (award) => {
86
86
  var _a, _b;
@@ -91,7 +91,7 @@ class AwardView extends block_view_1.default {
91
91
  onSaveAward: this.handleSaveAward,
92
92
  onCancelAward: this.handleCancelAward,
93
93
  };
94
- this.popperContainer = (0, ReactSubView_1.default)(this.props, AwardModal_1.AwardModal, componentProps, this.node, this.getPos, this.view, ['award-editor']);
94
+ this.popperContainer = (0, ReactSubView_1.default)(this.props, AwardModal_1.AwardModal, componentProps, this.node, this.getPos, this.view, 'award-editor');
95
95
  this.props.popper.show(this.dom, this.popperContainer, 'auto', false);
96
96
  };
97
97
  this.showDeleteAwardDialog = () => {
@@ -100,7 +100,7 @@ class AwardView extends block_view_1.default {
100
100
  const componentProps = {
101
101
  handleDelete: this.handleDeleteAward,
102
102
  };
103
- this.popperContainer = (0, ReactSubView_1.default)(this.props, DeleteAwardDiaolog_1.DeleteAwardDialog, componentProps, this.node, this.getPos, this.view, ['award-editor']);
103
+ this.popperContainer = (0, ReactSubView_1.default)(this.props, DeleteAwardDiaolog_1.DeleteAwardDialog, componentProps, this.node, this.getPos, this.view, 'award-editor');
104
104
  this.props.popper.show(this.dom, this.popperContainer, 'auto', false);
105
105
  };
106
106
  this.handleSaveAward = (award) => {
@@ -125,7 +125,7 @@ class BibliographyElementBlockView extends block_view_1.default {
125
125
  onSave: this.handleSave,
126
126
  onDelete: this.handleDelete,
127
127
  };
128
- this.editor = (0, ReactSubView_1.default)(this.props, ReferencesEditor_1.ReferencesEditor, componentProps, this.node, this.getPos, this.view, ['references-editor']);
128
+ this.editor = (0, ReactSubView_1.default)(this.props, ReferencesEditor_1.ReferencesEditor, componentProps, this.node, this.getPos, this.view, 'references-editor');
129
129
  this.props.popper.show(this.dom, this.editor, 'right');
130
130
  }
131
131
  handleEdit(citationID) {
@@ -151,7 +151,7 @@ class BibliographyElementBlockView extends block_view_1.default {
151
151
  action: () => (0, comments_1.handleComment)(item, this.view),
152
152
  icon: 'AddComment',
153
153
  });
154
- this.contextMenu = (0, ReactSubView_1.default)(this.props, style_guide_1.ContextMenu, componentProps, this.node, this.getPos, this.view, ['context-menu']);
154
+ this.contextMenu = (0, ReactSubView_1.default)(this.props, style_guide_1.ContextMenu, componentProps, this.node, this.getPos, this.view, 'context-menu');
155
155
  this.props.popper.show(element, this.contextMenu, 'right-start');
156
156
  }
157
157
  updateContents() {
@@ -93,7 +93,7 @@ class CitationEditableView extends citation_1.CitationView {
93
93
  const componentProps = {
94
94
  actions,
95
95
  };
96
- this.contextMenu = (0, ReactSubView_1.default)(this.props, style_guide_1.ContextMenu, componentProps, this.node, this.getPos, this.view, ['context-menu']);
96
+ this.contextMenu = (0, ReactSubView_1.default)(this.props, style_guide_1.ContextMenu, componentProps, this.node, this.getPos, this.view, 'context-menu');
97
97
  this.props.popper.show(this.dom, this.contextMenu, 'right-start', false);
98
98
  };
99
99
  this.showPopper = () => {
@@ -121,14 +121,14 @@ class CitationEditableView extends citation_1.CitationView {
121
121
  onCancel: this.handleCancel,
122
122
  canEdit: can.editCitationsAndRefs,
123
123
  };
124
- this.editor = (0, ReactSubView_1.default)(this.props, CitationEditor_1.CitationEditor, componentProps, this.node, this.getPos, this.view, ['citation-editor']);
124
+ this.editor = (0, ReactSubView_1.default)(this.props, CitationEditor_1.CitationEditor, componentProps, this.node, this.getPos, this.view, 'citation-editor');
125
125
  }
126
126
  else {
127
127
  const componentProps = {
128
128
  rids,
129
129
  items,
130
130
  };
131
- this.editor = (0, ReactSubView_1.default)(this.props, CitationViewer_1.CitationViewer, componentProps, this.node, this.getPos, this.view, ['citation-editor']);
131
+ this.editor = (0, ReactSubView_1.default)(this.props, CitationViewer_1.CitationViewer, componentProps, this.node, this.getPos, this.view, 'citation-editor');
132
132
  }
133
133
  this.props.popper.show(this.dom, this.editor, 'auto');
134
134
  };
@@ -138,7 +138,7 @@ class ContributorsView extends block_view_1.default {
138
138
  action: () => this.handleEdit(''),
139
139
  icon: 'Edit',
140
140
  });
141
- this.contextMenu = (0, ReactSubView_1.default)(this.props, style_guide_1.ContextMenu, componentProps, this.node, this.getPos, this.view, ['context-menu']);
141
+ this.contextMenu = (0, ReactSubView_1.default)(this.props, style_guide_1.ContextMenu, componentProps, this.node, this.getPos, this.view, 'context-menu');
142
142
  return this.contextMenu;
143
143
  }
144
144
  return undefined;
@@ -202,7 +202,7 @@ class ContributorsView extends block_view_1.default {
202
202
  },
203
203
  ],
204
204
  };
205
- this.contextMenu = (0, ReactSubView_1.default)(this.props, style_guide_1.ContextMenu, componentProps, this.node, this.getPos, this.view, ['context-menu']);
205
+ this.contextMenu = (0, ReactSubView_1.default)(this.props, style_guide_1.ContextMenu, componentProps, this.node, this.getPos, this.view, 'context-menu');
206
206
  this.props.popper.show(element, this.contextMenu, 'right-start');
207
207
  };
208
208
  this.handleEdit = (id, addNew) => {
@@ -52,7 +52,7 @@ class CrossReferenceEditableView extends cross_reference_1.CrossReferenceView {
52
52
  currentTargetId: rids[0],
53
53
  currentCustomLabel: this.node.attrs.label,
54
54
  };
55
- this.popperContainer = (0, ReactSubView_1.default)(this.props, CrossReferenceItems_1.CrossReferenceItems, componentProps, this.node, this.getPos, this.view, ['cross-reference-editor']);
55
+ this.popperContainer = (0, ReactSubView_1.default)(this.props, CrossReferenceItems_1.CrossReferenceItems, componentProps, this.node, this.getPos, this.view, 'cross-reference-editor');
56
56
  this.props.popper.show(this.dom, this.popperContainer, 'auto');
57
57
  };
58
58
  this.destroy = () => {
@@ -74,7 +74,7 @@ class EmbedMediaView extends block_view_1.default {
74
74
  },
75
75
  ],
76
76
  };
77
- preview.appendChild((0, ReactSubView_1.default)(this.props, style_guide_1.ContextMenu, componentProps, this.node, this.getPos, this.view, ['embed-context-menu']));
77
+ preview.appendChild((0, ReactSubView_1.default)(this.props, style_guide_1.ContextMenu, componentProps, this.node, this.getPos, this.view, 'embed-context-menu'));
78
78
  };
79
79
  }
80
80
  updateContents() {
@@ -27,25 +27,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
27
27
  return (mod && mod.__esModule) ? mod : { "default": mod };
28
28
  };
29
29
  Object.defineProperty(exports, "__esModule", { value: true });
30
- exports.FigureEditableView = exports.figurePositions = void 0;
30
+ exports.FigureEditableView = void 0;
31
31
  const style_guide_1 = require("@manuscripts/style-guide");
32
- const transform_1 = require("@manuscripts/transform");
33
- const prosemirror_state_1 = require("prosemirror-state");
34
32
  const react_1 = require("react");
35
33
  const server_1 = require("react-dom/server");
36
34
  const FigureDropdown_1 = require("../components/views/FigureDropdown");
37
35
  const files_1 = require("../lib/files");
38
- const view_1 = require("../lib/view");
39
36
  const creators_1 = require("./creators");
40
37
  const figure_1 = require("./figure");
41
38
  const figure_uploader_1 = require("./figure_uploader");
42
39
  const ReactSubView_1 = __importDefault(require("./ReactSubView"));
43
- var figurePositions;
44
- (function (figurePositions) {
45
- figurePositions["left"] = "half-left";
46
- figurePositions["right"] = "half-right";
47
- figurePositions["default"] = "";
48
- })(figurePositions = exports.figurePositions || (exports.figurePositions = {}));
49
40
  class FigureEditableView extends figure_1.FigureView {
50
41
  constructor() {
51
42
  super(...arguments);
@@ -54,10 +45,8 @@ class FigureEditableView extends figure_1.FigureView {
54
45
  this.updateContents();
55
46
  };
56
47
  this.setSrc = (src) => {
57
- const { tr } = this.view.state;
58
- const pos = this.getPos();
59
- tr.setNodeMarkup(pos, undefined, Object.assign(Object.assign({}, this.node.attrs), { src: src }));
60
- tr.setSelection(prosemirror_state_1.NodeSelection.create(tr.doc, pos));
48
+ const { selection, tr } = this.view.state;
49
+ tr.setNodeMarkup(this.getPos(), undefined, Object.assign(Object.assign({}, this.node.attrs), { src: src })).setSelection(selection.map(tr.doc, tr.mapping));
61
50
  this.view.dispatch(tr);
62
51
  };
63
52
  this.createUnsupportedFormat = (name) => {
@@ -95,78 +84,11 @@ class FigureEditableView extends figure_1.FigureView {
95
84
  element.classList.add('figure', 'placeholder');
96
85
  const instructions = document.createElement('div');
97
86
  instructions.classList.add('instructions');
98
- instructions.innerHTML = `
99
- <p>Drag or click here to upload image <br>
100
- or drag items here from the file inspector tabs <br>
101
- <a data-action='open-other-files'>'Other files'</a> |
102
- <a data-action='open-supplement-files'>'Supplements'</a></p>
103
- `;
87
+ instructions.textContent = 'Click to select an image file';
88
+ instructions.style.pointerEvents = 'none';
104
89
  element.appendChild(instructions);
105
90
  return element;
106
91
  };
107
- this.createPositionMenuWrapper = () => {
108
- const can = this.props.getCapabilities();
109
- this.positionMenuWrapper = document.createElement('div');
110
- this.positionMenuWrapper.classList.add('position-menu');
111
- const positionMenuButton = document.createElement('div');
112
- positionMenuButton.classList.add('position-menu-button');
113
- let icon;
114
- switch (this.figurePosition) {
115
- case figurePositions.left:
116
- icon = style_guide_1.ImageLeftIcon;
117
- break;
118
- case figurePositions.right:
119
- icon = style_guide_1.ImageRightIcon;
120
- break;
121
- default:
122
- icon = style_guide_1.ImageDefaultIcon;
123
- break;
124
- }
125
- if (icon) {
126
- positionMenuButton.innerHTML = (0, server_1.renderToStaticMarkup)((0, react_1.createElement)(icon));
127
- }
128
- if (can.editArticle) {
129
- positionMenuButton.addEventListener('click', this.showPositionMenu);
130
- }
131
- this.positionMenuWrapper.appendChild(positionMenuButton);
132
- return this.positionMenuWrapper;
133
- };
134
- this.showPositionMenu = () => {
135
- this.props.popper.destroy();
136
- const figure = this.node;
137
- const componentProps = {
138
- actions: [
139
- {
140
- label: 'Left',
141
- action: () => {
142
- this.props.popper.destroy();
143
- (0, view_1.updateNodeAttrs)(this.view, transform_1.schema.nodes.figure, Object.assign(Object.assign({}, figure.attrs), { type: figurePositions.left }));
144
- },
145
- icon: 'ImageLeft',
146
- selected: this.figurePosition === figurePositions.left,
147
- },
148
- {
149
- label: 'Default',
150
- action: () => {
151
- this.props.popper.destroy();
152
- (0, view_1.updateNodeAttrs)(this.view, transform_1.schema.nodes.figure, Object.assign(Object.assign({}, figure.attrs), { type: figurePositions.default }));
153
- },
154
- icon: 'ImageDefault',
155
- selected: !this.figurePosition,
156
- },
157
- {
158
- label: 'Right',
159
- action: () => {
160
- this.props.popper.destroy();
161
- (0, view_1.updateNodeAttrs)(this.view, transform_1.schema.nodes.figure, Object.assign(Object.assign({}, figure.attrs), { type: figurePositions.right }));
162
- },
163
- icon: 'ImageRight',
164
- selected: this.figurePosition === figurePositions.right,
165
- },
166
- ],
167
- };
168
- this.props.popper.show(this.positionMenuWrapper, (0, ReactSubView_1.default)(this.props, style_guide_1.ContextMenu, componentProps, this.node, this.getPos, this.view, ['context-menu', 'position-menu']), 'left', false);
169
- };
170
92
  }
171
93
  updateContents() {
172
94
  var _a;
@@ -175,7 +97,6 @@ class FigureEditableView extends figure_1.FigureView {
175
97
  const src = attrs.src;
176
98
  const files = this.props.getFiles();
177
99
  const file = src && files.filter((f) => f.id === src)[0];
178
- this.figurePosition = attrs.type;
179
100
  this.container.innerHTML = '';
180
101
  const can = this.props.getCapabilities();
181
102
  const link = file && this.props.fileManagement.previewLink(file);
@@ -194,14 +115,12 @@ class FigureEditableView extends figure_1.FigureView {
194
115
  this.props.fileManagement.download(file);
195
116
  };
196
117
  }
197
- handleDetach = () => {
198
- this.setSrc('');
199
- };
200
- }
201
- if (can.replaceFile) {
202
118
  handleReplace = (file) => {
203
119
  this.setSrc(file.id);
204
120
  };
121
+ handleDetach = () => {
122
+ this.setSrc('');
123
+ };
205
124
  }
206
125
  if (can.uploadFile) {
207
126
  const upload = (file) => __awaiter(this, void 0, void 0, function* () {
@@ -209,15 +128,7 @@ class FigureEditableView extends figure_1.FigureView {
209
128
  this.setSrc(result.id);
210
129
  });
211
130
  handleUpload = (0, figure_uploader_1.figureUploader)(upload);
212
- const handlePlaceholderClick = (event) => {
213
- const target = event.target;
214
- if (target.dataset && target.dataset.action) {
215
- return;
216
- }
217
- const triggerUpload = (0, figure_uploader_1.figureUploader)(upload);
218
- triggerUpload();
219
- };
220
- img.addEventListener('click', handlePlaceholderClick);
131
+ img.addEventListener('click', handleUpload);
221
132
  img.addEventListener('mouseenter', () => {
222
133
  img.classList.toggle('over', true);
223
134
  });
@@ -265,7 +176,6 @@ class FigureEditableView extends figure_1.FigureView {
265
176
  this.reactTools = (0, ReactSubView_1.default)(this.props, FigureDropdown_1.FigureOptions, componentProps, this.node, this.getPos, this.view);
266
177
  this.dom.insertBefore(this.reactTools, this.dom.firstChild);
267
178
  }
268
- this.container.appendChild(this.createPositionMenuWrapper());
269
179
  }
270
180
  }
271
181
  exports.FigureEditableView = FigureEditableView;