@manuscripts/body-editor 2.7.7 → 2.7.8-LEAN-4213.0

package/dist/cjs/components/{authors/AuthorActions.js → form/ModalFormActions.js}

@@ -3,12 +3,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AuthorActions = void 0;
+exports.ModalFormActions = void 0;
 const style_guide_1 = require("@manuscripts/style-guide");
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const DeleteAuthorConfirmationDialog_1 = require("./DeleteAuthorConfirmationDialog");
-const AuthorActionsContainer = styled_components_1.default.div `
+const ConfirmationDialog_1 = require("../dialog/ConfirmationDialog");
+const ActionsContainer = styled_components_1.default.div `
   display: flex;
 `;
 const StyledButtonGroup = (0, styled_components_1.default)(style_guide_1.ButtonGroup) `
@@ -20,8 +20,9 @@ const StyledIconButton = (0, styled_components_1.default)(style_guide_1.IconButt
   font-size: 14px;
   font-style: normal;
   font-weight: 400;
-  line-height: 24px;
+  line-height: 1;
   width: auto;
+  height: 24px;
   &:disabled {
     color: #c9c9c9 !important;
     background-color: unset !important;
@@ -31,15 +32,15 @@ const StyledIconButton = (0, styled_components_1.default)(style_guide_1.IconButt
     margin-right: 4px;
   }
 `;
-const AuthorActions = ({ onSave, onDelete, showDeleteDialog, handleShowDeleteDialog, newAuthor, isDisableSave, }) => {
-    return (react_1.default.createElement(AuthorActionsContainer, { "data-cy": "author-action" },
-        react_1.default.createElement(DeleteAuthorConfirmationDialog_1.DeleteAuthorConfirmationDialog, { isOpen: showDeleteDialog, onDelete: () => {
-                handleShowDeleteDialog();
+const ModalFormActions = ({ type, onSave, onDelete, showDeleteDialog, handleShowDeleteDialog, newEntity, isDisableSave, }) => {
+    return (react_1.default.createElement(ActionsContainer, { "data-cy": `${type}-action` },
+        react_1.default.createElement(ConfirmationDialog_1.ConfirmationDialog, { isOpen: showDeleteDialog, onPrimary: () => {
                 onDelete();
-            }, onCancel: () => handleShowDeleteDialog() }),
+                handleShowDeleteDialog();
+            }, onSecondary: handleShowDeleteDialog, type: ConfirmationDialog_1.DialogType.DELETE, entityType: type }),
         react_1.default.createElement(StyledButtonGroup, null,
             react_1.default.createElement(StyledIconButton, { onClick: onSave, disabled: isDisableSave, type: "submit" },
                 react_1.default.createElement(style_guide_1.PlusIcon, null),
-                newAuthor ? 'Save Details' : 'Update Details'))));
+                newEntity ? 'Save Details' : 'Update Details'))));
 };
-exports.AuthorActions = AuthorActions;
+exports.ModalFormActions = ModalFormActions;

package/dist/cjs/plugins/affiliations.js

@@ -21,7 +21,6 @@ const lodash_1 = require("lodash");
 const prosemirror_state_1 = require("prosemirror-state");
 const prosemirror_view_1 = require("prosemirror-view");
 const authors_1 = require("../lib/authors");
-const plugins_1 = require("../lib/plugins");
 const track_changes_utils_1 = require("../lib/track-changes-utils");
 exports.affiliationsKey = new prosemirror_state_1.PluginKey('affiliations');
 let id = 1;
@@ -48,9 +47,12 @@ const buildPluginState = (doc, $old) => {
         return $old;
     }
     const iAffiliations = new Set();
-    contributors.sort(authors_1.authorComparator).forEach((attrs) => {
+    contributors
+        .filter((contrib) => !deletedContribId.has(contrib.id))
+        .sort(authors_1.authorComparator)
+        .forEach((attrs) => {
         attrs.affiliations.forEach((aff) => {
-            !deletedContribId.has(attrs.id) && iAffiliations.add(aff);
+            iAffiliations.add(aff);
         });
     });
     const indexedAffiliationIds = new Map([...iAffiliations].map((id, i) => [id, i + 1]));
@@ -87,41 +89,6 @@ exports.default = () => {
                 }
             },
         },
-        appendTransaction(transactions, oldState, newState) {
-            const affs = exports.affiliationsKey.getState(newState);
-            if (!affs || !transactions.find((tr) => tr.docChanged || (0, plugins_1.isInit)(tr))) {
-                return;
-            }
-            const $old = exports.affiliationsKey.getState(oldState);
-            const affiliations = new Map();
-            newState.doc.descendants((node, pos) => {
-                if ((0, transform_1.isAffiliationNode)(node)) {
-                    affiliations.set(node.attrs.id, [node, pos]);
-                }
-            });
-            const deleteIDs = [];
-            for (const [id] of $old.indexedAffiliationIds.entries()) {
-                if (!affs.indexedAffiliationIds.has(id)) {
-                    deleteIDs.push(id);
-                }
-            }
-            if (!deleteIDs.length) {
-                return;
-            }
-            const tr = newState.tr;
-            tr.setMeta('origin', 'affiliations');
-            for (const id of deleteIDs) {
-                const affiliation = affiliations.get(id);
-                if (!affiliation) {
-                    continue;
-                }
-                const [node, pos] = affiliation;
-                if (node && !(0, track_changes_utils_1.isPendingInsert)(node)) {
-                    tr.delete(pos, pos + node.nodeSize);
-                }
-            }
-            return tr;
-        },
         props: {
             decorations: (state) => { var _a; return (_a = exports.affiliationsKey.getState(state)) === null || _a === void 0 ? void 0 : _a.decorations; },
         },

package/dist/cjs/useEditor.js

@@ -45,7 +45,6 @@ const useEditor = (externalProps) => {
                 const localVersion = (0, prosemirror_collab_1.getVersion)(view.current.state);
                 const since = yield collabProvider.stepsSince(localVersion);
                 if (since && since.version <= localVersion) {
-                    console.log('detected run away update of document');
                     return;
                 }
                 if ((since === null || since === void 0 ? void 0 : since.steps.length) && since.clientIDs.length) {

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 = '2.7.7';
+exports.VERSION = '2.7.8-LEAN-4213.0';
 exports.MATHJAX_VERSION = '3.2.2';

package/dist/cjs/views/affiliations.js

@@ -19,7 +19,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AffiliationsView = void 0;
+const style_guide_1 = require("@manuscripts/style-guide");
+const transform_1 = require("@manuscripts/transform");
 const prosemirror_state_1 = require("prosemirror-state");
+const AffiliationsModal_1 = require("../components/affiliations/AffiliationsModal");
 const authors_1 = require("../lib/authors");
 const track_changes_utils_1 = require("../lib/track-changes-utils");
 const view_1 = require("../lib/view");
@@ -27,11 +30,90 @@ const affiliations_1 = require("../plugins/affiliations");
 const selected_suggestion_1 = require("../plugins/selected-suggestion");
 const block_view_1 = __importDefault(require("./block_view"));
 const creators_1 = require("./creators");
+const ReactSubView_1 = __importDefault(require("./ReactSubView"));
 class AffiliationsView extends block_view_1.default {
     constructor() {
         super(...arguments);
         this.ignoreMutation = () => true;
         this.stopEvent = () => true;
+        this.handleClick = (event) => {
+            const element = event.target;
+            const item = element.closest('.affiliation');
+            if (item) {
+                const node = (0, view_1.findChildByID)(this.view, item.id);
+                if (!node) {
+                    return;
+                }
+                const view = this.view;
+                const tr = view.state.tr;
+                tr.setSelection(prosemirror_state_1.NodeSelection.create(view.state.doc, node.pos));
+                view.dispatch(tr);
+            }
+        };
+        this.insertAffiliationNode = (attrs) => {
+            const pos = this.getPos();
+            const tr = this.view.state.tr;
+            const node = transform_1.schema.nodes.affiliation.create(attrs);
+            this.view.dispatch(tr.insert(pos + 1, node));
+        };
+        this.handleSaveAffiliation = (affiliation) => {
+            const update = (0, view_1.updateNodeAttrs)(this.view, transform_1.schema.nodes.affiliation, affiliation);
+            if (!update) {
+                this.insertAffiliationNode(affiliation);
+            }
+        };
+        this.handleDeleteAffiliation = (affiliation) => {
+            (0, view_1.deleteNode)(this.view, affiliation.id);
+        };
+        this.handleEdit = (addNew) => {
+            var _a;
+            this.props.popper.destroy();
+            const contributors = (0, view_1.findChildrenAttrsByType)(this.view, transform_1.schema.nodes.contributor);
+            const affiliations = (0, view_1.findChildrenAttrsByType)(this.view, transform_1.schema.nodes.affiliation);
+            const componentProps = {
+                authors: contributors,
+                affiliations,
+                onSaveAffiliation: this.handleSaveAffiliation,
+                onDeleteAffiliation: this.handleDeleteAffiliation,
+                onUpdateAuthors: this.handleUpdateAuthors,
+                addNewAffiliation: addNew,
+            };
+            (_a = this.popper) === null || _a === void 0 ? void 0 : _a.remove();
+            this.popper = (0, ReactSubView_1.default)(this.props, AffiliationsModal_1.AffiliationsModal, componentProps, this.node, this.getPos, this.view);
+            this.container.appendChild(this.popper);
+        };
+        this.showContextMenu = () => {
+            const can = this.props.getCapabilities();
+            const componentProps = {
+                actions: [],
+            };
+            if (can.editArticle) {
+                componentProps.actions.push({
+                    label: 'New Affiliation',
+                    action: () => this.handleEdit(true),
+                    icon: 'AddOutline',
+                });
+                componentProps.actions.push({
+                    label: 'Edit',
+                    action: () => this.handleEdit(),
+                    icon: 'Edit',
+                });
+            }
+            this.contextMenu = (0, ReactSubView_1.default)(this.props, style_guide_1.ContextMenu, componentProps, this.node, this.getPos, this.view, 'context-menu');
+            return this.contextMenu;
+        };
+        this.selectNode = () => {
+            this.dom.classList.add('ProseMirror-selectednode');
+            if (!(0, track_changes_utils_1.isDeleted)(this.node)) {
+                this.handleEdit(true);
+            }
+        };
+        this.actionGutterButtons = () => [this.showContextMenu()];
+        this.handleUpdateAuthors = (authors) => {
+            authors.forEach((author) => {
+                (0, view_1.updateNodeAttrs)(this.view, transform_1.schema.nodes.contributor, author);
+            });
+        };
     }
     createElement() {
         this.container = document.createElement('div');
@@ -90,20 +172,6 @@ class AffiliationsView extends block_view_1.default {
         const index2 = aff2.index || 10000;
         return index1 - index2;
     }
-    handleClick(event) {
-        const element = event.target;
-        const item = element.closest('.affiliation');
-        if (item) {
-            const node = (0, view_1.findChildByID)(this.view, item.id);
-            if (!node) {
-                return;
-            }
-            const view = this.view;
-            const tr = view.state.tr;
-            tr.setSelection(prosemirror_state_1.NodeSelection.create(view.state.doc, node.pos));
-            view.dispatch(tr);
-        }
-    }
     updateSelection() {
         var _a;
         const state = this.view.state;

package/dist/cjs/views/contributors.js

@@ -205,11 +205,11 @@ class ContributorsView extends block_view_1.default {
                 affiliations,
                 onSaveAuthor: this.handleSaveAuthor,
                 onDeleteAuthor: this.handleDeleteAuthor,
-                onSaveAffiliation: this.handleSaveAffiliation,
                 addNewAuthor: addNew,
             };
             (_a = this.popper) === null || _a === void 0 ? void 0 : _a.remove();
             this.popper = (0, ReactSubView_1.default)(this.props, AuthorsModal_1.AuthorsModal, componentProps, this.node, this.getPos, this.view);
+            console.dir(this.popper);
             this.container.appendChild(this.popper);
         };
         this.handleSaveAuthor = (author) => {
@@ -221,14 +221,6 @@ class ContributorsView extends block_view_1.default {
         this.handleDeleteAuthor = (author) => {
             (0, view_1.deleteNode)(this.view, author.id);
         };
-        this.handleSaveAffiliation = (affiliation) => {
-            if (!(0, view_1.findChildByID)(this.view, affiliation.id)) {
-                this.insertAffiliationNode(affiliation);
-            }
-            else {
-                (0, view_1.updateNodeAttrs)(this.view, transform_1.schema.nodes.affiliation, affiliation);
-            }
-        };
         this.insertAuthorNode = (attrs) => {
             const parent = (0, view_1.findChildByType)(this.view, transform_1.schema.nodes.contributors);
             const tr = this.view.state.tr;

package/dist/es/components/affiliations/AffiliationForm.js

@@ -0,0 +1,76 @@
+import { TextArea, TextField } from '@manuscripts/style-guide';
+import { Field, Formik } from 'formik';
+import React, { useRef } from 'react';
+import styled from 'styled-components';
+import { ChangeHandlingForm } from '../ChangeHandlingForm';
+const Row = styled.div `
+  display: flex;
+`;
+const AffiliationsTextField = styled(TextField) `
+  border-radius: 0;
+  background: transparent;
+  margin-bottom: 4px;
+  border-radius: ${(props) => props.theme.grid.radius.default};
+  &[aria-invalid] {
+    background: ${(props) => props.theme.colors.background.warning};
+  }
+
+  &[aria-invalid]:focus {
+    background: transparent;
+  }
+`;
+const DepartmentTextField = styled(TextArea) `
+  border-radius: 0;
+  background: transparent;
+  margin-bottom: 4px;
+  min-height: 60px;
+  border-radius: ${(props) => props.theme.grid.radius.default};
+  &[aria-invalid] {
+    background: ${(props) => props.theme.colors.background.warning};
+  }
+
+  &[aria-invalid]:focus {
+    background: transparent;
+  }
+`;
+const FormLabel = styled.legend `
+  &:not(:first-child) {
+    margin-top: 24px;
+  }
+  margin-bottom: 12px;
+  font: ${(props) => props.theme.font.weight.normal}
+    ${(props) => props.theme.font.size.xlarge} /
+    ${(props) => props.theme.font.lineHeight.large}
+    ${(props) => props.theme.font.family.sans};
+  letter-spacing: -0.4px;
+  color: ${(props) => props.theme.colors.text.secondary};
+`;
+const MarginRightTextField = styled(AffiliationsTextField) `
+  margin-right: 4px;
+`;
+export const AffiliationForm = ({ values, onSave, onChange, actionsRef, }) => {
+    if (actionsRef && !actionsRef.current) {
+        actionsRef.current = {
+            reset: () => {
+                var _a;
+                (_a = formRef.current) === null || _a === void 0 ? void 0 : _a.resetForm();
+            },
+        };
+    }
+    const formRef = useRef(null);
+    return (React.createElement(Formik, { initialValues: values, onSubmit: onSave, innerRef: formRef, enableReinitialize: true }, () => (React.createElement(ChangeHandlingForm, { onChange: onChange },
+        React.createElement(FormLabel, null, "Institution*"),
+        React.createElement(Row, null,
+            React.createElement(Field, { name: "institution" }, (props) => (React.createElement(AffiliationsTextField, Object.assign({ id: "institution", placeholder: "Institution Name" }, props.field))))),
+        React.createElement(FormLabel, null, "Details"),
+        React.createElement(Row, null,
+            React.createElement(Field, { name: "department" }, (props) => (React.createElement(DepartmentTextField, Object.assign({ id: "department", placeholder: "Department" }, props.field))))),
+        React.createElement(Row, null,
+            React.createElement(Field, { name: "addressLine1" }, (props) => (React.createElement(AffiliationsTextField, Object.assign({ id: "addressLine1", placeholder: "Street Address" }, props.field))))),
+        React.createElement(Row, null,
+            React.createElement(Field, { name: "city" }, (props) => (React.createElement(MarginRightTextField, Object.assign({ id: "city", placeholder: "City" }, props.field)))),
+            React.createElement(Field, { name: "county" }, (props) => (React.createElement(AffiliationsTextField, Object.assign({ id: "county", placeholder: "State / Province" }, props.field))))),
+        React.createElement(Row, null,
+            React.createElement(Field, { name: "postCode" }, (props) => (React.createElement(MarginRightTextField, Object.assign({ id: "postCode", placeholder: "Postal Code" }, props.field)))),
+            React.createElement(Field, { name: "country" }, ({ field }) => (React.createElement(AffiliationsTextField, Object.assign({ id: "country", placeholder: "Country" }, field)))))))));
+};

package/dist/es/components/affiliations/AffiliationItem.js

@@ -0,0 +1,82 @@
+import { AffiliationIcon, CrclTickAnimation, DeleteIcon, Tooltip, } from '@manuscripts/style-guide';
+import React, { useRef } from 'react';
+import styled from 'styled-components';
+const AffiliationContainer = styled.div `
+  padding: ${(props) => props.theme.grid.unit * 2}px 0
+    ${(props) => props.theme.grid.unit * 2}px;
+  display: flex;
+  align-items: center;
+  transition: background-color 0.25s;
+  border: 1px solid transparent;
+  border-left: 0;
+  border-right: 0;
+  cursor: pointer;
+  &:hover,
+  &.active {
+    background: ${(props) => props.theme.colors.background.fifth};
+  }
+
+  &.active {
+    border-color: ${(props) => props.theme.colors.border.primary};
+  }
+`;
+const AffiliationName = styled.div `
+  margin-left: 12px;
+  flex: 1;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  width: 250px;
+`;
+const AffiliationDetails = styled.div `
+  margin-left: 12px;
+  flex: 1;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 16px;
+  margin-top: 2px;
+  color: ${(props) => props.theme.colors.text.secondary};
+`;
+const AffiliationBox = styled.div `
+  display: flex;
+  flex-direction: column;
+  margin-left: 4px;
+`;
+const RemoveButton = styled.div `
+  display: flex;
+  align-items: center;
+  margin-right: 8px;
+  svg {
+    cursor: pointer;
+  }
+  .icon_element {
+    fill: #6e6e6e;
+  }
+`;
+export const AffiliationItem = ({ affiliation, isSelected, onClick, onDelete, showSuccessIcon, }) => {
+    var _a;
+    const ref = useRef(null);
+    if (isSelected) {
+        (_a = ref.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
+            behavior: 'smooth',
+            block: 'nearest',
+        });
+    }
+    return (React.createElement(AffiliationContainer, { onClick: onClick, className: isSelected ? 'active' : '', ref: ref },
+        React.createElement(AffiliationIcon, { opacity: showSuccessIcon ? 0.05 : 1, style: { minWidth: 24, minHeight: 24 } }),
+        React.createElement(AffiliationBox, null,
+            React.createElement(AffiliationName, null, affiliation.institution),
+            React.createElement(AffiliationDetails, null,
+                affiliation.city && (React.createElement(React.Fragment, null,
+                    affiliation.city,
+                    affiliation.county || affiliation.country ? ', ' : '')),
+                affiliation.county && (React.createElement(React.Fragment, null,
+                    affiliation.county,
+                    affiliation.country ? ', ' : '')),
+                affiliation.country && React.createElement(React.Fragment, null, affiliation.country))),
+        showSuccessIcon && (React.createElement(CrclTickAnimation, { size: 36, style: { position: 'absolute', left: '10px' } })),
+        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/affiliations/AffiliationList.js

@@ -0,0 +1,40 @@
+/*!
+ * © 2019 Atypon Systems LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React from 'react';
+import styled from 'styled-components';
+import { AffiliationItem } from './AffiliationItem';
+const AffiliationListContainer = styled.div `
+  flex: 1;
+  overflow-y: visible;
+  margin-left: 16px;
+`;
+const AffiliationListTitle = styled.h2 `
+  color: #6e6e6e;
+  font-size: 18px;
+  font-weight: 400;
+  line-height: 24px;
+  margin-left: 14px;
+  margin-top: 20px;
+`;
+export const AffiliationList = ({ affiliation, affiliations, onSelect, onDelete, lastSavedAffiliationId, }) => {
+    return (React.createElement(React.Fragment, null,
+        React.createElement(AffiliationListTitle, null, "Existing Affiliations"),
+        React.createElement(AffiliationListContainer, { "data-cy": "affiliation-list" }, affiliations.map((a) => {
+            return (React.createElement(AffiliationItem, { key: a.id, affiliation: a, isSelected: a.id === (affiliation === null || affiliation === void 0 ? void 0 : affiliation.id), onClick: () => {
+                    return onSelect(a);
+                }, onDelete: () => onDelete(), showSuccessIcon: lastSavedAffiliationId === a.id }));
+        }))));
+};