@manuscripts/body-editor 3.12.54 → 3.12.56

package/dist/cjs/plugins/translations.js

@@ -60,6 +60,10 @@ const createLanguageMenu = (props, selectedCode, onSelect) => {
     });
     return { menu, destroy };
 };
+const getInsertionPos = (doc, nodePos) => {
+    const node = doc.nodeAt(nodePos);
+    return node ? nodePos + node.nodeSize : null;
+};
 exports.default = (props) => new prosemirror_state_1.Plugin({
     props: {
         decorations: (state) => {
@@ -83,7 +87,7 @@ exports.default = (props) => new prosemirror_state_1.Plugin({
                             (0, commands_1.insertTransGraphicalAbstract)(category)(state)
                         : canEditTransAbstract;
                     if (canEdit) {
-                        widgets.push(prosemirror_view_1.Decoration.widget(pos + 2, (view) => {
+                        widgets.push(prosemirror_view_1.Decoration.widget(pos + 1, (view) => {
                             const $span = document.createElement('span');
                             $span.tabIndex = 0;
                             $span.className = 'add-trans-abstract';
@@ -92,17 +96,21 @@ exports.default = (props) => new prosemirror_state_1.Plugin({
                             const handleActivate = (event) => {
                                 event.preventDefault();
                                 event.stopPropagation();
+                                const insertPos = getInsertionPos(view.state.doc, pos);
+                                if (insertPos == null) {
+                                    return;
+                                }
                                 if (isGraphical && category) {
-                                    (0, commands_1.insertTransGraphicalAbstract)(category, pos + node.nodeSize)(view.state, view.dispatch, view);
+                                    (0, commands_1.insertTransGraphicalAbstract)(category, insertPos)(view.state, view.dispatch, view);
                                 }
                                 else {
-                                    (0, commands_1.insertTransAbstract)(view.state, view.dispatch, node.attrs.category, pos + node.nodeSize);
+                                    (0, commands_1.insertTransAbstract)(view.state, view.dispatch, node.attrs.category, insertPos);
                                 }
                             };
                             $span.addEventListener('mousedown', handleActivate);
                             $span.addEventListener('keydown', (0, navigation_utils_1.handleEnterKey)(handleActivate));
                             return $span;
-                        }, { key: `add-trans-${node.attrs.id || pos}`, side: -1 }));
+                        }, { key: `add-trans-${node.attrs.id}-${pos}` }));
                     }
                 }
                 const isTransNode = node.type === transform_1.schema.nodes.trans_abstract ||
@@ -111,7 +119,7 @@ exports.default = (props) => new prosemirror_state_1.Plugin({
                     const canEdit = node.type === transform_1.schema.nodes.trans_abstract
                         ? canEditTransAbstract
                         : canEditTransGraphicalAbstract;
-                    widgets.push(prosemirror_view_1.Decoration.widget(pos + 2, (view) => {
+                    widgets.push(prosemirror_view_1.Decoration.widget(pos + 1, (view) => {
                         const $btn = document.createElement('span');
                         $btn.className = 'language-selector-btn';
                         $btn.setAttribute('data-cy', 'language-selector-btn');
@@ -148,7 +156,9 @@ exports.default = (props) => new prosemirror_state_1.Plugin({
                             $btn.addEventListener('mousedown', handleOpenMenu);
                         }
                         return $btn;
-                    }, { key: `lang-selector-${node.attrs.id}`, side: -1 }));
+                    }, {
+                        key: `lang-selector-${node.attrs.id}-${pos}-${node.attrs.lang}`,
+                    }));
                 }
             });
             return prosemirror_view_1.DecorationSet.create(state.doc, widgets);

package/dist/cjs/versions.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MATHJAX_VERSION = exports.VERSION = void 0;
-exports.VERSION = '3.12.54';
+exports.VERSION = '3.12.56';
 exports.MATHJAX_VERSION = '3.2.2';

package/dist/es/plugins/translations.js

@@ -58,6 +58,10 @@ const createLanguageMenu = (props, selectedCode, onSelect) => {
     });
     return { menu, destroy };
 };
+const getInsertionPos = (doc, nodePos) => {
+    const node = doc.nodeAt(nodePos);
+    return node ? nodePos + node.nodeSize : null;
+};
 export default (props) => new Plugin({
     props: {
         decorations: (state) => {
@@ -81,7 +85,7 @@ export default (props) => new Plugin({
                             insertTransGraphicalAbstract(category)(state)
                         : canEditTransAbstract;
                     if (canEdit) {
-                        widgets.push(Decoration.widget(pos + 2, (view) => {
+                        widgets.push(Decoration.widget(pos + 1, (view) => {
                             const $span = document.createElement('span');
                             $span.tabIndex = 0;
                             $span.className = 'add-trans-abstract';
@@ -90,17 +94,21 @@ export default (props) => new Plugin({
                             const handleActivate = (event) => {
                                 event.preventDefault();
                                 event.stopPropagation();
+                                const insertPos = getInsertionPos(view.state.doc, pos);
+                                if (insertPos == null) {
+                                    return;
+                                }
                                 if (isGraphical && category) {
-                                    insertTransGraphicalAbstract(category, pos + node.nodeSize)(view.state, view.dispatch, view);
+                                    insertTransGraphicalAbstract(category, insertPos)(view.state, view.dispatch, view);
                                 }
                                 else {
-                                    insertTransAbstract(view.state, view.dispatch, node.attrs.category, pos + node.nodeSize);
+                                    insertTransAbstract(view.state, view.dispatch, node.attrs.category, insertPos);
                                 }
                             };
                             $span.addEventListener('mousedown', handleActivate);
                             $span.addEventListener('keydown', handleEnterKey(handleActivate));
                             return $span;
-                        }, { key: `add-trans-${node.attrs.id || pos}`, side: -1 }));
+                        }, { key: `add-trans-${node.attrs.id}-${pos}` }));
                     }
                 }
                 const isTransNode = node.type === schema.nodes.trans_abstract ||
@@ -109,7 +117,7 @@ export default (props) => new Plugin({
                     const canEdit = node.type === schema.nodes.trans_abstract
                         ? canEditTransAbstract
                         : canEditTransGraphicalAbstract;
-                    widgets.push(Decoration.widget(pos + 2, (view) => {
+                    widgets.push(Decoration.widget(pos + 1, (view) => {
                         const $btn = document.createElement('span');
                         $btn.className = 'language-selector-btn';
                         $btn.setAttribute('data-cy', 'language-selector-btn');
@@ -146,7 +154,9 @@ export default (props) => new Plugin({
                             $btn.addEventListener('mousedown', handleOpenMenu);
                         }
                         return $btn;
-                    }, { key: `lang-selector-${node.attrs.id}`, side: -1 }));
+                    }, {
+                        key: `lang-selector-${node.attrs.id}-${pos}-${node.attrs.lang}`,
+                    }));
                 }
             });
             return DecorationSet.create(state.doc, widgets);

package/dist/es/versions.js

@@ -1,2 +1,2 @@
-export const VERSION = '3.12.54';
+export const VERSION = '3.12.56';
 export const MATHJAX_VERSION = '3.2.2';

package/dist/types/versions.d.ts

@@ -1,2 +1,2 @@
-export declare const VERSION = "3.12.54";
+export declare const VERSION = "3.12.56";
 export declare const MATHJAX_VERSION = "3.2.2";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/body-editor",
   "description": "Prosemirror components for editing and viewing manuscripts",
-  "version": "3.12.54",
+  "version": "3.12.56",
   "repository": "github:Atypon-OpenSource/manuscripts-body-editor",
   "license": "Apache-2.0",
   "main": "dist/cjs",
@@ -40,7 +40,7 @@
     "@citation-js/plugin-pubmed": "0.3.0",
     "@citation-js/plugin-ris": "0.7.18",
     "@iarna/word-count": "1.1.2",
-    "@manuscripts/style-guide": "3.5.25",
+    "@manuscripts/style-guide": "3.5.26",
     "@manuscripts/track-changes-plugin": "2.3.13",
     "@manuscripts/transform": "4.3.51",
     "@popperjs/core": "2.11.8",

package/styles/AdvancedEditor.css

@@ -1880,11 +1880,23 @@ th:hover > .table-context-menu-button,
   position: relative;
 }
 
+/* Right padding so abstract titles do not run under translation widgets. 
+ * If we later block editing these titles, this padding can go away. 
+ */
+.ProseMirror .abstracts .block-section .block-section_title h1,
+.ProseMirror .abstracts .block-trans_abstract .block-section_title h1{
+  padding-right:  150px;
+}
+
 .ProseMirror .add-trans-abstract {
-  display: inline-flex;
+  display: flex;
   align-items: center;
-  float: right;
   gap: 8px;
+  margin: 8px 0;
+  padding: 6px 12px;
+  position: absolute;
+  right: 50px;
+  top: 0;
   z-index: 5;
   cursor: pointer;
   background: unset;
@@ -1920,13 +1932,18 @@ th:hover > .table-context-menu-button,
 }
 .ProseMirror .block-trans_abstract .language-selector-btn,
 .ProseMirror .block-trans_graphical_abstract .language-selector-btn {
-  display: inline-flex;
-  float: right;
+  display: flex;
+  position: absolute;
+  top: 14px;
+  right: 50px;
   line-height: 1.6;
   background: unset;
   border: none;
+  padding: 0;
+  margin: 0 6px;
   cursor: pointer;
   z-index: 10;
+  align-items: end;
   gap: 8px;
   font-size: 14px;
   color: #6e6e6e;