@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.
- package/dist/cjs/commands.js +2 -2
- package/dist/cjs/components/views/FigureDropdown.js +45 -12
- package/dist/cjs/configs/editor-plugins.js +0 -2
- package/dist/cjs/index.js +0 -1
- package/dist/cjs/lib/context-menu.js +4 -71
- package/dist/cjs/lib/view.js +1 -3
- package/dist/cjs/versions.js +1 -1
- package/dist/cjs/views/ReactSubView.js +4 -4
- package/dist/cjs/views/affiliations.js +1 -1
- package/dist/cjs/views/award.js +3 -3
- package/dist/cjs/views/bibliography_element.js +2 -2
- package/dist/cjs/views/citation_editable.js +3 -3
- package/dist/cjs/views/contributors.js +2 -2
- package/dist/cjs/views/cross_reference_editable.js +1 -1
- package/dist/cjs/views/embed.js +1 -1
- package/dist/cjs/views/figure_editable.js +9 -99
- package/dist/cjs/views/figure_element.js +79 -0
- package/dist/cjs/views/inline_footnote.js +3 -6
- package/dist/cjs/views/keyword.js +1 -1
- package/dist/cjs/views/keyword_group.js +1 -1
- package/dist/cjs/views/link_editable.js +1 -1
- package/dist/cjs/views/table_cell.js +1 -1
- package/dist/es/commands.js +2 -2
- package/dist/es/components/views/FigureDropdown.js +44 -12
- package/dist/es/configs/editor-plugins.js +0 -2
- package/dist/es/index.js +0 -1
- package/dist/es/lib/context-menu.js +5 -72
- package/dist/es/lib/view.js +1 -3
- package/dist/es/versions.js +1 -1
- package/dist/es/views/ReactSubView.js +4 -4
- package/dist/es/views/affiliations.js +1 -1
- package/dist/es/views/award.js +3 -3
- package/dist/es/views/bibliography_element.js +2 -2
- package/dist/es/views/citation_editable.js +3 -3
- package/dist/es/views/contributors.js +2 -2
- package/dist/es/views/cross_reference_editable.js +1 -1
- package/dist/es/views/embed.js +1 -1
- package/dist/es/views/figure_editable.js +9 -99
- package/dist/es/views/figure_element.js +79 -0
- package/dist/es/views/inline_footnote.js +3 -6
- package/dist/es/views/keyword.js +1 -1
- package/dist/es/views/keyword_group.js +1 -1
- package/dist/es/views/link_editable.js +1 -1
- package/dist/es/views/table_cell.js +1 -1
- package/dist/types/components/views/FigureDropdown.d.ts +1 -0
- package/dist/types/index.d.ts +0 -1
- package/dist/types/lib/context-menu.d.ts +0 -3
- package/dist/types/versions.d.ts +1 -1
- package/dist/types/views/ReactSubView.d.ts +1 -1
- package/dist/types/views/figure_editable.d.ts +0 -9
- package/dist/types/views/figure_element.d.ts +3 -0
- package/package.json +2 -2
- package/styles/AdvancedEditor.css +5 -17
- package/styles/Editor.css +1 -10
- package/styles/popper.css +11 -33
- package/dist/cjs/plugins/inspector-tabs.js +0 -84
- package/dist/es/plugins/inspector-tabs.js +0 -81
- package/dist/types/plugins/inspector-tabs.d.ts +0 -35
package/dist/cjs/commands.js
CHANGED
|
@@ -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
|
|
460
|
-
const footnote = !
|
|
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
|
|
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(
|
|
26
|
-
|
|
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
|
-
|
|
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.
|
|
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
|
-
|
|
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
|
|
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;
|
package/dist/cjs/lib/view.js
CHANGED
|
@@ -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
|
}
|
package/dist/cjs/versions.js
CHANGED
|
@@ -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
|
|
28
|
-
container.classList.add(
|
|
29
|
-
container.setAttribute('data-cy', classNames
|
|
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,
|
|
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;
|
package/dist/cjs/views/award.js
CHANGED
|
@@ -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,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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 = () => {
|
package/dist/cjs/views/embed.js
CHANGED
|
@@ -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,
|
|
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 =
|
|
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
|
-
|
|
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.
|
|
99
|
-
|
|
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
|
-
|
|
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;
|