@manuscripts/body-editor 2.6.37 → 2.6.38-LEAN-4186.2

package/dist/es/components/authors/DraggableAuthor.js

@@ -13,23 +13,22 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Avatar, CorrespondingAuthorIcon, VerticalEllipsisIcon, } from '@manuscripts/style-guide';
-import React, { useRef, useState } from 'react';
+import { Avatar, CorrespondingAuthorIcon, CrclTickAnimation, DeleteIcon, DraggableIcon, Tooltip, } from '@manuscripts/style-guide';
+import React, { useEffect, useRef, useState } from 'react';
 import { useDrag, useDrop } from 'react-dnd';
 import styled from 'styled-components';
 import { authorLabel } from '../../lib/authors';
 import { getDropSide } from '../../lib/dnd';
 const AuthorContainer = styled.div `
-  padding: ${(props) => props.theme.grid.unit * 2}px;
+  padding: ${(props) => props.theme.grid.unit * 2}px 0
+    ${(props) => props.theme.grid.unit * 2}px;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  cursor: pointer;
   transition: background-color 0.25s;
   border: 1px solid transparent;
   border-left: 0;
   border-right: 0;
-
   &:hover,
   &.active {
     background: ${(props) => props.theme.colors.background.fifth};
@@ -40,20 +39,31 @@ const AuthorContainer = styled.div `
   }
 
   &.dragging {
-    visibility: hidden;
+    opacity: 1;
+    cursor: grabbing;
+  }
+
+  &.dragging * {
+    opacity: 0;
   }
 
   &.drop-before {
+    cursor: grabbing;
     border-top-color: ${(props) => props.theme.colors.brand.dark};
   }
 
   &.drop-after {
+    cursor: grabbing;
     border-bottom-color: ${(props) => props.theme.colors.brand.dark};
   }
 `;
 const AvatarContainer = styled.div `
   display: inline-flex;
   position: relative;
+  align-items: center;
+`;
+const Box = styled.div `
+  margin-left: 14px;
 `;
 const AuthorBadge = styled.div `
   display: inline-flex;
@@ -74,21 +84,40 @@ const AuthorName = styled.div `
   margin-left: 12px;
   flex: 1;
 `;
-const DragHandle = styled(VerticalEllipsisIcon) `
+const DragHandle = styled(DraggableIcon) `
   cursor: move;
+  margin-left: -4px;
+  margin-right: -12px;
 `;
-export const DraggableAuthor = ({ author, isSelected, onClick, moveAuthor, }) => {
+const RemoveButton = styled.div `
+  display: flex;
+  align-items: center;
+  margin-right: 8px;
+  svg {
+    cursor: pointer;
+  }
+  .icon_element {
+    fill: #6e6e6e;
+  }
+`;
+const StyledCrclTickAnimation = styled(CrclTickAnimation) `
+  margin-left: 12px;
+`;
+export const DraggableAuthor = React.memo(({ author, isSelected, onClick, onDelete, moveAuthor, showSuccessIcon }) => {
     const [dropSide, setDropSide] = useState();
     const ref = useRef(null);
-    const [{ isDragging }, dragRef] = useDrag({
+    const [{ isDragging }, dragRef, preview] = useDrag({
         type: 'author',
         item: {
             author,
         },
-        collect: (monitor) => ({
-            isDragging: monitor.isDragging(),
-        }),
+        collect: (monitor) => {
+            return {
+                isDragging: monitor.isDragging(),
+            };
+        },
     });
+    preview(ref);
     const [{ isOver }, dropRef] = useDrop({
         accept: 'author',
         hover: (item, monitor) => {
@@ -122,12 +151,31 @@ export const DraggableAuthor = ({ author, isSelected, onClick, moveAuthor, }) =>
     }
     if (isSelected) {
         classes.push('active');
+        if (ref.current) {
+            ref.current.scrollIntoView({
+                behavior: 'smooth',
+                block: 'center',
+            });
+        }
     }
-    return (React.createElement(AuthorContainer, { ref: ref, className: classes.join(' '), onClick: onClick, "data-cy": "author-item" },
+    useEffect(() => {
+        if (isDragging || isOver) {
+            document.body.style.cursor = 'grabbing';
+        }
+        return () => {
+            document.body.style.cursor = 'default';
+        };
+    }, [isDragging, isOver]);
+    return (React.createElement(AuthorContainer, { ref: ref, className: classes.join(' '), onClick: onClick, "data-cy": "author-item", style: { cursor: isDragging ? 'grabbing' : 'default' } },
         React.createElement(AvatarContainer, { "data-cy": "author-avatar" },
-            React.createElement(Avatar, { size: 36, color: '#6e6e6e' }),
+            isSelected && React.createElement(DragHandle, null),
+            React.createElement(Box, null,
+                showSuccessIcon && React.createElement(StyledCrclTickAnimation, { size: 36 }),
+                React.createElement(Avatar, { size: 36, color: '#6e6e6e', opacity: showSuccessIcon ? 0.05 : 1 })),
             React.createElement(AuthorNotes, { "data-cy": "author-notes" }, author.isCorresponding && (React.createElement(AuthorBadge, null,
                 React.createElement(CorrespondingAuthorIcon, null))))),
         React.createElement(AuthorName, { "data-cy": "author-name" }, authorLabel(author)),
-        isSelected && React.createElement(DragHandle, null)));
-};
+        isSelected && (React.createElement(RemoveButton, { onClick: () => onDelete(), "data-tooltip-id": 'delete-button-tooltip' },
+            React.createElement(DeleteIcon, { fill: '#6E6E6E' }),
+            React.createElement(Tooltip, { id: 'delete-button-tooltip', place: "bottom" }, 'Delete')))));
+});

package/dist/es/components/authors/RequiredFieldConfirmationDialog.js

@@ -0,0 +1,32 @@
+import { AttentionOrangeIcon, Category, Dialog } from '@manuscripts/style-guide';
+import React from 'react';
+import styled from 'styled-components';
+const StyledIcon = styled(AttentionOrangeIcon) `
+  margin-right: 8px;
+`;
+const MessageBox = styled.div `
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  min-height: 90px;
+`;
+const Header = () => (React.createElement(React.Fragment, null,
+    React.createElement(StyledIcon, null),
+    " Empty required field"));
+const Message = () => {
+    return (React.createElement(MessageBox, null,
+        React.createElement("div", null, "A required filed has been left empty. If you discard, any updates will not be saved!"),
+        React.createElement("div", null, "Would you like to discard or continue editing?")));
+};
+export const RequiredFieldConfirmationDialog = ({ isOpen, onSave, onCancel }) => {
+    return (React.createElement(Dialog, { isOpen: isOpen, category: Category.confirmation, header: React.createElement(Header, null), message: React.createElement(Message, null), actions: {
+            secondary: {
+                action: onCancel,
+                title: 'Discard',
+            },
+            primary: {
+                action: onSave,
+                title: 'Continue editing',
+            },
+        } }));
+};

package/dist/es/components/authors/SaveAuthorConfirmationDialog.js

@@ -1,7 +1,25 @@
-import { Category, Dialog } from '@manuscripts/style-guide';
+import { AttentionOrangeIcon, Category, Dialog } from '@manuscripts/style-guide';
 import React from 'react';
+import styled from 'styled-components';
+const StyledIcon = styled(AttentionOrangeIcon) `
+  margin-right: 8px;
+`;
+const MessageBox = styled.div `
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  min-height: 72px;
+`;
+const Header = () => (React.createElement(React.Fragment, null,
+    React.createElement(StyledIcon, null),
+    " Unsaved changes"));
+const Message = () => {
+    return (React.createElement(MessageBox, null,
+        React.createElement("div", null, "You've made changes but not saved them!"),
+        React.createElement("div", null, "Would you like to save or discard your changes?")));
+};
 export const SaveAuthorConfirmationDialog = ({ isOpen, onSave, onCancel }) => {
-    return (React.createElement(Dialog, { isOpen: isOpen, category: Category.confirmation, header: "You've made changes to this option", message: "Would you like to save or discard your changes?", actions: {
+    return (React.createElement(Dialog, { isOpen: isOpen, category: Category.confirmation, header: React.createElement(Header, null), message: React.createElement(Message, null), actions: {
             secondary: {
                 action: onCancel,
                 title: 'Discard',

package/dist/es/menus.js

@@ -16,7 +16,7 @@
 import { getGroupCateogries, schema, } from '@manuscripts/transform';
 import { toggleMark } from 'prosemirror-commands';
 import { redo, undo } from 'prosemirror-history';
-import { addInlineComment, blockActive, canInsert, insertAbstract, insertBackmatterSection, insertBlock, insertBoxElement, insertContributors, insertCrossReference, insertGraphicalAbstract, insertInlineCitation, insertInlineEquation, insertInlineFootnote, insertKeywords, insertLink, insertList, insertSection, markActive, } from './commands';
+import { addInlineComment, blockActive, canInsert, insertAbstract, insertAffiliation, insertBackmatterSection, insertBlock, insertBoxElement, insertContributors, insertCrossReference, insertGraphicalAbstract, insertInlineCitation, insertInlineEquation, insertInlineFootnote, insertKeywords, insertLink, insertList, insertSection, markActive, } from './commands';
 import { openInsertTableDialog } from './components/toolbar/InsertTableDialog';
 import { ListMenuItem } from './components/toolbar/ListMenuItem';
 import { deleteClosestParentElement, findClosestParentElementNodeName, } from './lib/hierarchy';
@@ -101,10 +101,16 @@ export const getEditorMenus = (editor) => {
                     },
                     {
                         id: 'insert-contributors',
-                        label: 'Authors & Affiliations',
+                        label: 'Authors',
                         isEnabled: isCommandValid(insertContributors),
                         run: doCommand(insertContributors),
                     },
+                    {
+                        id: 'insert-contributors',
+                        label: 'Affiliations',
+                        isEnabled: isCommandValid(insertAffiliation),
+                        run: doCommand(insertAffiliation),
+                    },
                     {
                         id: 'insert-keywords',
                         label: 'Keywords',

package/dist/es/plugins/cross-references.js

@@ -21,7 +21,7 @@ import { objectsKey } from './objects';
 export default () => {
     return new Plugin({
         state: {
-            init(_, state) {
+            init() {
                 return DecorationSet.empty;
             },
             apply(tr, oldDecorationSet, oldState, newState) {

package/dist/es/versions.js

@@ -1,2 +1,2 @@
-export const VERSION = '2.6.37';
+export const VERSION = '2.6.38-LEAN-4186.2';
 export const MATHJAX_VERSION = '3.2.2';

package/dist/es/views/contributors.js

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { ContextMenu, SecondaryButton, } from '@manuscripts/style-guide';
+import { ContextMenu } from '@manuscripts/style-guide';
 import { schema } from '@manuscripts/transform';
 import { NodeSelection } from 'prosemirror-state';
 import { AuthorsModal, } from '../components/authors/AuthorsModal';
@@ -109,16 +109,25 @@ export class ContributorsView extends BlockView {
             this.dom = document.createElement('div');
             this.dom.classList.add('block-container', `block-${this.node.type.name}`);
         };
-        this.createEditButton = () => {
+        this.authorContextMenu = () => {
             const can = this.props.getCapabilities();
-            const button = ReactSubView(this.props, SecondaryButton, {
-                mini: true,
-                onClick: () => this.handleEdit(''),
-                className: 'edit-authors-button',
-                disabled: !can.editMetadata,
-                children: 'Edit Authors',
-            }, this.node, this.getPos, this.view);
-            this.container.appendChild(button);
+            const componentProps = {
+                actions: [],
+            };
+            if (can.editArticle) {
+                componentProps.actions.push({
+                    label: 'New Author',
+                    action: () => this.handleEdit('', true),
+                    icon: 'AddOutline',
+                });
+                componentProps.actions.push({
+                    label: 'Edit',
+                    action: () => this.handleEdit(''),
+                    icon: 'Edit',
+                });
+            }
+            this.contextMenu = ReactSubView(this.props, ContextMenu, componentProps, this.node, this.getPos, this.view, 'context-menu');
+            return this.contextMenu;
         };
         this.createLegend = () => {
             const state = affiliationsKey.getState(this.view.state);
@@ -178,7 +187,7 @@ export class ContributorsView extends BlockView {
             this.contextMenu = ReactSubView(this.props, ContextMenu, componentProps, this.node, this.getPos, this.view, 'context-menu');
             this.props.popper.show(element, this.contextMenu, 'right-start');
         };
-        this.handleEdit = (id) => {
+        this.handleEdit = (id, addNew) => {
             var _a;
             this.props.popper.destroy();
             const contributors = findChildrenAttrsByType(this.view, schema.nodes.contributor);
@@ -191,6 +200,7 @@ export class ContributorsView extends BlockView {
                 onSaveAuthor: this.handleSaveAuthor,
                 onDeleteAuthor: this.handleDeleteAuthor,
                 onSaveAffiliation: this.handleSaveAffiliation,
+                addNewAuthor: addNew,
             };
             (_a = this.popper) === null || _a === void 0 ? void 0 : _a.remove();
             this.popper = ReactSubView(this.props, AuthorsModal, componentProps, this.node, this.getPos, this.view);
@@ -220,11 +230,29 @@ export class ContributorsView extends BlockView {
             this.view.dispatch(tr.insert(parent.pos + 1, node));
         };
         this.insertAffiliationNode = (attrs) => {
-            const parent = findChildByType(this.view, schema.nodes.affiliations);
-            const tr = this.view.state.tr;
-            const node = schema.nodes.affiliation.create(attrs);
-            this.view.dispatch(tr.insert(parent.pos + 1, node));
+            const { view } = this;
+            const { dispatch } = view;
+            const affiliationsNodeType = schema.nodes.affiliations;
+            const contributorsNodeType = schema.nodes.contributors;
+            const affiliationNodeType = schema.nodes.affiliation;
+            let affiliations = findChildByType(view, affiliationsNodeType);
+            if (!affiliations) {
+                const contributors = findChildByType(view, contributorsNodeType);
+                if (contributors) {
+                    const { tr } = this.view.state;
+                    const affiliationsNode = affiliationsNodeType.create();
+                    const insertPos = contributors.pos + contributors.node.nodeSize;
+                    dispatch(tr.insert(insertPos, affiliationsNode));
+                    affiliations = findChildByType(view, affiliationsNodeType);
+                }
+            }
+            if (affiliations) {
+                const { tr } = this.view.state;
+                const affiliationNode = affiliationNodeType.create(attrs);
+                dispatch(tr.insert(affiliations.pos + 1, affiliationNode));
+            }
         };
+        this.actionGutterButtons = () => [this.authorContextMenu()];
     }
     updateContents() {
         const affs = affiliationsKey.getState(this.view.state);
@@ -238,7 +266,6 @@ export class ContributorsView extends BlockView {
         this.version = affs.version;
         this.container.innerHTML = '';
         this.buildAuthors(affs);
-        this.createEditButton();
         this.createLegend();
         this.updateSelection();
     }

package/dist/types/commands.d.ts

@@ -53,6 +53,7 @@ export declare const insertSection: (subsection?: boolean) => (state: Manuscript
 export declare const insertBackmatterSection: (category: SectionCategory) => (state: ManuscriptEditorState, dispatch?: Dispatch, view?: EditorView) => boolean;
 export declare const insertAbstract: (state: ManuscriptEditorState, dispatch?: Dispatch, view?: EditorView) => boolean;
 export declare const insertContributors: (state: ManuscriptEditorState, dispatch?: Dispatch, view?: EditorView) => boolean;
+export declare const insertAffiliation: (state: ManuscriptEditorState, dispatch?: Dispatch, view?: EditorView) => boolean;
 export declare const insertKeywords: (state: ManuscriptEditorState, dispatch?: Dispatch, view?: EditorView) => boolean;
 export declare const insertList: (type: ManuscriptNodeType, style?: string) => (state: ManuscriptEditorState, dispatch?: Dispatch, view?: EditorView) => boolean;
 export declare const insertBibliographySection: () => boolean;

package/dist/types/components/authors/AuthorActions.d.ts

@@ -1,9 +1,10 @@
 import React from 'react';
-import { ContributorAttrs } from '../../lib/authors';
 export interface AuthorActionsProps {
-    author: ContributorAttrs;
     onSave: () => void;
     onDelete: () => void;
-    onCancel: () => void;
+    showDeleteDialog: boolean;
+    handleShowDeleteDialog: () => void;
+    newAuthor: boolean;
+    isDisableSave: boolean;
 }
 export declare const AuthorActions: React.FC<AuthorActionsProps>;

package/dist/types/components/authors/AuthorDetailsForm.d.ts

@@ -25,6 +25,7 @@ interface AuthorDetailsFormProps {
     onChange: (values: ContributorAttrs) => void;
     onSave: (values: ContributorAttrs) => void;
     actionsRef?: MutableRefObject<FormActions | undefined>;
+    isEmailRequired?: boolean;
 }
 export declare const AuthorDetailsForm: React.FC<AuthorDetailsFormProps>;
 export {};

package/dist/types/components/authors/AuthorList.d.ts

@@ -19,7 +19,9 @@ interface AuthorListProps {
     author?: ContributorAttrs;
     authors: ContributorAttrs[];
     onSelect: (item: ContributorAttrs) => void;
+    onDelete: () => void;
     moveAuthor: (index: number, target: number) => void;
+    lastSavedAuthor: string | null;
 }
 export declare const AuthorList: React.FC<AuthorListProps>;
 export {};

package/dist/types/components/authors/AuthorsModal.d.ts

@@ -22,5 +22,6 @@ export interface AuthorsModalProps {
     onSaveAuthor: (author: ContributorAttrs) => void;
     onDeleteAuthor: (author: ContributorAttrs) => void;
     onSaveAffiliation: (affiliation: AffiliationAttrs) => void;
+    addNewAuthor?: boolean;
 }
 export declare const AuthorsModal: React.FC<AuthorsModalProps>;

package/dist/types/components/authors/DeleteAuthorConfirmationDialog.d.ts

@@ -1,7 +1,5 @@
 import React from 'react';
-import { ContributorAttrs } from '../../lib/authors';
 export interface DeleteAuthorConfirmationDialogProps {
-    author: ContributorAttrs;
     isOpen: boolean;
     onDelete: () => void;
     onCancel: () => void;

package/dist/types/components/authors/DraggableAuthor.d.ts

@@ -19,7 +19,9 @@ interface DraggableAuthorProps {
     author: ContributorAttrs;
     isSelected: boolean;
     onClick: () => void;
+    onDelete: () => void;
     moveAuthor: (from: number, to: number) => void;
+    showSuccessIcon?: boolean;
 }
 export declare const DraggableAuthor: React.FC<DraggableAuthorProps>;
 export {};

package/dist/types/components/authors/RequiredFieldConfirmationDialog.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface SaveAuthorConfirmationDialogProps {
+    isOpen: boolean;
+    onSave: () => void;
+    onCancel: () => void;
+}
+export declare const RequiredFieldConfirmationDialog: React.FC<SaveAuthorConfirmationDialogProps>;

package/dist/types/versions.d.ts

@@ -1,2 +1,2 @@
-export declare const VERSION = "2.6.37";
+export declare const VERSION = "2.6.38-LEAN-4186.2";
 export declare const MATHJAX_VERSION = "3.2.2";

package/dist/types/views/contributors.d.ts

@@ -34,17 +34,18 @@ export declare class ContributorsView extends BlockView<Trackable<ContributorsNo
     private isJointFirstAuthor;
     createElement: () => void;
     createDOM: () => void;
-    createEditButton: () => void;
+    authorContextMenu: () => HTMLElement;
     createLegend: () => void;
     private handleClick;
     private updateSelection;
     showContextMenu: (element: Element) => void;
-    handleEdit: (id: string) => void;
+    handleEdit: (id: string, addNew?: boolean) => void;
     handleSaveAuthor: (author: ContributorAttrs) => void;
     handleDeleteAuthor: (author: ContributorAttrs) => void;
     handleSaveAffiliation: (affiliation: AffiliationAttrs) => void;
     insertAuthorNode: (attrs: ContributorAttrs) => void;
     insertAffiliationNode: (attrs: AffiliationAttrs) => void;
+    actionGutterButtons: () => HTMLElement[];
 }
 declare const _default: (props: import("../configs/ManuscriptsEditor").EditorProps, dispatch?: import("..").Dispatch | undefined) => import("../types").NodeViewCreator<ContributorsView>;
 export default _default;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/body-editor",
   "description": "Prosemirror components for editing and viewing manuscripts",
-  "version": "2.6.37",
+  "version": "2.6.38-LEAN-4186.2",
   "repository": "github:Atypon-OpenSource/manuscripts-body-editor",
   "license": "Apache-2.0",
   "main": "dist/cjs",
@@ -32,7 +32,7 @@
     "@iarna/word-count": "^1.1.2",
     "@manuscripts/json-schema": "2.2.11",
     "@manuscripts/library": "1.3.11",
-    "@manuscripts/style-guide": "2.0.27",
+    "@manuscripts/style-guide": "2.0.28-LEAN-4186.2",
     "@manuscripts/track-changes-plugin": "1.8.6",
     "@manuscripts/transform": "3.0.27",
     "@popperjs/core": "^2.11.8",

package/styles/AdvancedEditor.css

@@ -217,7 +217,6 @@
   width: 100%;
   position: absolute;
   top: 0;
-  left: 0;
   z-index: 3;
 }
 
@@ -525,6 +524,9 @@ span.comment-marker {
 .ProseMirror {
   --inserted-pending-bg-color: #e6ffdb;
   --inserted-pending-color: #01872e;
+  --updated-pending-bg-color: #E6F7FC;
+  --updated-pending-color: #0284B0;
+  --accepted-bg-color: #e2e2e2;
   --deleted-color: #f35143;
   --deleted-pending-bg-color: #fff1f0;
   --updated-bg-color: #d9f6ff;
@@ -575,6 +577,20 @@ span.comment-marker {
   text-decoration: underline;
 }
 
+.ProseMirror .selected-suggestion .inserted,
+.ProseMirror .selected-suggestion [data-track-op='insert'] .block,
+.ProseMirror .selected-suggestion .deleted {
+  background-color: var(--selected-pending-background-color) !important;
+  color: var(--common-color) !important;
+}
+
+.tracking-visible .ProseMirror .set_attrs,
+.tracking-visible .ProseMirror [data-track-op='set_attrs'] {
+  background: var(--updated-pending-bg-color);
+  color: var(--updated-pending-color);
+  text-decoration: none;
+}
+
 .inserted:has(.selected-suggestion),
 .inserted.selected-suggestion,
 .selected-suggestion:has(.inserted) {
@@ -806,12 +822,13 @@ figure.block:has(.equation.set_attrs.selected-suggestion) {
 .contributors-list .separator {
   margin-right: 4px;
 }
-.contributors .tools-panel {
+.block-contributors .tools-panel {
   position: initial;
   display: flex;
   flex: 1;
   align-items: center;
   margin-top: 4px;
+  left: -10px;
 }
 .contributor .contributor-comment {
   left: 0;
@@ -1042,3 +1059,15 @@ th:hover > .table-context-menu-button,
   top: 6px;
   pointer-events: none;
 }
+
+
+.ProseMirror .block-contributors .context-menu > div {
+  border-radius: 4px;
+  border: 1px solid #c9c9c9;
+  background: #fff;
+  box-shadow: 0px 4px 9px 0px rgba(0, 0, 0, 0.3);
+}
+
+.ProseMirror .block-contributors .action-gutter {
+  right: 15px;
+}

package/styles/Editor.css

@@ -662,6 +662,13 @@
   transition: 0.2s all;
 }
 
+.ProseMirror .action-gutter {
+  position: relative;
+  cursor: ns-resize;
+  opacity: 0;
+  transition: 0.2s all;
+}
+
 .ProseMirror .block-section_title .block-gutter,
 .ProseMirror .block-paragraph .block-gutter {
   margin-top: 16px;
@@ -674,6 +681,14 @@
   z-index: 2;
 }
 
+.ProseMirror:not(.ProseMirror-focused.popper-open)
+  .block-container:not(.block-section, .block-box_element):hover
+  .authors-container +
+  .action-gutter {
+  opacity: 1;
+  z-index: 2;
+}
+
 .ProseMirror .block-box_element:hover > .block-gutter {
   opacity: 1;
   z-index: 2;