@manuscripts/body-editor 2.6.40 → 2.6.41-LEAN-4077.0

package/dist/cjs/views/awards.js

@@ -14,39 +14,40 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AwardsView = void 0;
 const utils_1 = require("../lib/utils");
-const block_view_1 = __importDefault(require("./block_view"));
+const base_node_view_1 = require("./base_node_view");
 const creators_1 = require("./creators");
-class AwardsView extends block_view_1.default {
+class AwardsView extends base_node_view_1.BaseNodeView {
     constructor() {
         super(...arguments);
         this.elementType = 'div';
         this.createElement = () => {
-            this.wrapper = document.createElement(this.elementType);
-            this.wrapper.classList.add('block');
             this.contentDOM = document.createElement(this.elementType);
             this.contentDOM.className = 'block';
-            this.wrapper.appendChild(this.contentDOM);
-            this.dom.appendChild(this.wrapper);
         };
     }
+    initialise() {
+        this.createDOM();
+        this.createElement();
+        this.updateContents();
+    }
+    createDOM() {
+        this.dom = document.createElement(this.elementType);
+        this.dom.classList.add(`block-${this.node.type.name}`);
+    }
     updateContents() {
         super.updateContents();
         if (!this.contentDOM) {
             return;
         }
+        this.dom.innerHTML = '';
         this.dom.setAttribute('contenteditable', 'false');
         this.contentDOM.setAttribute('contenteditable', 'false');
         if (this.node.content.size !== 0) {
-            this.wrapper.innerHTML = '';
-            this.wrapper.setAttribute('contenteditable', 'false');
             const header = (0, utils_1.createHeader)(this.node.type.name, 'Funder Information');
-            this.wrapper.append(header, this.contentDOM);
+            this.dom.append(header, this.contentDOM);
         }
     }
 }

package/dist/es/commands.js

@@ -23,7 +23,7 @@ import { addColSpan, addColumnAfter, addColumnBefore, addRow, CellSelection, sel
 import { findWrapping, liftTarget, ReplaceAroundStep, ReplaceStep, } from 'prosemirror-transform';
 import { findChildrenByType, findParentNodeOfType, findParentNodeOfTypeClosestToPos, flatten, hasParentNodeOfType, } from 'prosemirror-utils';
 import { getCommentKey, getCommentRange } from './lib/comments';
-import { findBackmatter, findBibliographySection, findBody, insertFootnotesSection, insertSupplementsNode, } from './lib/doc';
+import { findBackmatter, findBibliographySection, findBody, insertAwardsNode, insertFootnotesSection, insertSupplementsNode, } from './lib/doc';
 import { createFootnote, findFootnotesContainerNode, getFootnotesElementState, } from './lib/footnotes';
 import { findWordBoundaries, isNodeOfType, nearestAncestor, } from './lib/helpers';
 import { isDeleted } from './lib/track-changes-utils';
@@ -620,6 +620,19 @@ export const insertAffiliation = (state, dispatch, view) => {
     }
     return true;
 };
+export const insertAward = (state, dispatch, view) => {
+    const award = schema.nodes.award.create();
+    const tr = state.tr;
+    const awards = insertAwardsNode(tr);
+    const pos = awards.pos + awards.node.nodeSize - 1;
+    tr.insert(pos, award);
+    const selection = NodeSelection.create(tr.doc, pos);
+    view && view.focus();
+    if (dispatch) {
+        dispatch(tr.setSelection(selection).scrollIntoView());
+    }
+    return true;
+};
 export const insertKeywords = (state, dispatch, view) => {
     if (getChildOfType(state.doc, schema.nodes.keywords, true)) {
         return false;

package/dist/es/components/{authors/ChangeHandlingForm.js → ChangeHandlingForm.js}

@@ -1,10 +1,17 @@
 import { Form, useFormikContext } from 'formik';
 import React, { useEffect } from 'react';
+import styled from 'styled-components';
 export const ChangeHandlingForm = (props) => {
     const { values } = useFormikContext();
     useEffect(() => {
         var _a;
         (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, values);
     }, [props.onChange, values]);
-    return React.createElement(Form, null, props.children);
+    return React.createElement(FlexForm, null, props.children);
 };
+export const FlexForm = styled(Form) `
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+`;

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

@@ -2,7 +2,7 @@ import { TextField } from '@manuscripts/style-guide';
 import { Field, Formik } from 'formik';
 import React from 'react';
 import styled from 'styled-components';
-import { ChangeHandlingForm } from './ChangeHandlingForm';
+import { ChangeHandlingForm } from '../ChangeHandlingForm';
 const Row = styled.div `
   display: flex;
   border-top: 1px solid ${(props) => props.theme.colors.border.field.default};

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

@@ -17,7 +17,7 @@ import { CheckboxField, CheckboxLabel, TextField, TextFieldGroupContainer, TextF
 import { Field, Formik } from 'formik';
 import React, { useRef } from 'react';
 import styled from 'styled-components';
-import { ChangeHandlingForm } from './ChangeHandlingForm';
+import { ChangeHandlingForm } from '../ChangeHandlingForm';
 export const LabelText = styled.div `
   font: ${(props) => props.theme.font.weight.normal}
     ${(props) => props.theme.font.size.normal} / 1

package/dist/es/components/awards/AwardForm.js

@@ -0,0 +1,115 @@
+/*!
+ * © 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.
+ */
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { MultiValueInput, PrimaryButton, SecondaryButton, SelectField, TextField, } from '@manuscripts/style-guide';
+import { Field, Formik } from 'formik';
+import React, { useEffect, useRef, useState } from 'react';
+import styled from 'styled-components';
+import { ChangeHandlingForm } from '../ChangeHandlingForm';
+export const AwardForm = ({ values, onSave, onCancel, onChange, }) => {
+    const [funders, setFunders] = useState([]);
+    const formRef = useRef(null);
+    const primaryButtonText = values.id ? 'Save funder' : 'Add funder';
+    useEffect(() => {
+        const fetchFunders = () => __awaiter(void 0, void 0, void 0, function* () {
+            try {
+                const response = yield fetch('https://api.crossref.org/funders');
+                if (!response.ok) {
+                    throw new Error(`HTTP error! status: ${response.status}`);
+                }
+                const data = yield response.json();
+                const funderOptions = data.message.items.map((funder) => ({
+                    value: funder.name,
+                    label: funder.name,
+                }));
+                funderOptions.sort((a, b) => a.label.localeCompare(b.label));
+                sessionStorage.setItem('funders', JSON.stringify(funderOptions));
+                setFunders(funderOptions);
+            }
+            catch (error) {
+                console.error('Error fetching funders:', error);
+            }
+        });
+        const storedFunders = sessionStorage.getItem('funders');
+        if (storedFunders) {
+            setFunders(JSON.parse(storedFunders));
+        }
+        else {
+            fetchFunders();
+        }
+    }, []);
+    const handleCancel = () => {
+        var _a;
+        (_a = formRef.current) === null || _a === void 0 ? void 0 : _a.resetForm();
+        onCancel();
+    };
+    const validate = (values) => {
+        const errors = {};
+        if (!values.source) {
+            errors.source = 'Funder name is required';
+        }
+        return errors;
+    };
+    return (React.createElement(Formik, { initialValues: values, onSubmit: (values, { setSubmitting }) => {
+            onSave(values);
+            setSubmitting(false);
+        }, enableReinitialize: true, validate: validate, validateOnChange: false, innerRef: formRef }, (formik) => {
+        return (React.createElement(ChangeHandlingForm, { onChange: onChange },
+            React.createElement(Field, { type: "hidden", name: "id" }),
+            React.createElement(LabelContainer, null,
+                React.createElement(Label, { htmlFor: 'source' }, "Funder name")),
+            React.createElement(Field, { name: "source", component: SelectField, options: funders, value: funders.find((funder) => funder.value === formik.values.source) || null }),
+            formik.errors.source && formik.touched.source && (React.createElement("div", { style: { color: 'red' } }, formik.errors.source)),
+            React.createElement(LabelContainer, null,
+                React.createElement(Label, { htmlFor: 'code' }, "Grant number")),
+            React.createElement(MultiValueInput, { inputType: "text", initialValues: values.code ? values.code.split(';') : [], onChange: (newValues) => {
+                    formik.setFieldValue('code', newValues.join(';'));
+                } }),
+            React.createElement(LabelContainer, null,
+                React.createElement(Label, { htmlFor: 'recipient' }, "Recipient name")),
+            React.createElement(Field, { name: "recipient" }, (props) => (React.createElement(TextField, Object.assign({ id: "recipient", placeholder: "Enter full name " }, props.field)))),
+            React.createElement(ButtonContainer, null,
+                React.createElement(SecondaryButton, { onClick: handleCancel }, "Cancel"),
+                React.createElement(PrimaryButton, { type: "submit", disabled: !formik.dirty || formik.isSubmitting }, primaryButtonText))));
+    }));
+};
+const LabelContainer = styled.div `
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: ${(props) => 4 * props.theme.grid.unit}px;
+  margin-bottom: ${(props) => props.theme.grid.unit}px;
+`;
+const Label = styled.label `
+  font-family: ${(props) => props.theme.font.family.sans};
+  font-size: ${(props) => props.theme.font.size.large};
+  display: block;
+  color: ${(props) => props.theme.colors.text.secondary};
+`;
+const ButtonContainer = styled.div `
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 16px;
+  gap: 8px;
+`;

package/dist/es/components/awards/AwardModal.js

@@ -0,0 +1,50 @@
+import { CloseButton, ModalContainer, ModalHeader, StyledModal, } from '@manuscripts/style-guide';
+import React, { useRef, useState } from 'react';
+import styled from 'styled-components';
+import { AwardForm } from './AwardForm';
+const ModalBody = styled.div `
+  box-sizing: border-box;
+  padding: ${(props) => 6 * props.theme.grid.unit}px;
+  background-color: ${(props) => props.theme.colors.background.primary};
+  width: 480px;
+  max-width: 60vw;
+  max-height: 80vh;
+`;
+const ModalTitle = styled.h2 `
+  font-family: ${(props) => props.theme.font.family.sans};
+  font-size: ${(props) => props.theme.font.size.medium};
+  font-weight: ${(props) => props.theme.font.weight.bold};
+  color: ${(props) => props.theme.colors.text.primary};
+  margin: 0;
+`;
+const normalizeData = (award) => ({
+    id: award.id || '',
+    source: award.source || '',
+    code: award.code || '',
+    recipient: award.recipient || '',
+});
+export const AwardModal = ({ initialData, onSaveAward, onCancelAward, }) => {
+    const [isOpen, setOpen] = useState(true);
+    const valuesRef = useRef();
+    const handleSave = () => {
+        const updatedValues = valuesRef.current;
+        if (updatedValues) {
+            onSaveAward(updatedValues);
+            handleClose();
+        }
+    };
+    const handleCancel = () => {
+        onCancelAward && onCancelAward();
+        handleClose();
+    };
+    const handleClose = () => setOpen(false);
+    const handleChange = (values) => (valuesRef.current = values);
+    const normalizedValues = React.useMemo(() => normalizeData(initialData), [initialData]);
+    return (React.createElement(StyledModal, { isOpen: isOpen, onRequestClose: () => handleClose(), shouldCloseOnOverlayClick: true },
+        React.createElement(ModalContainer, { "data-cy": "award-modal" },
+            React.createElement(ModalHeader, null,
+                React.createElement(CloseButton, { onClick: () => handleClose(), "data-cy": "modal-close-button" })),
+            React.createElement(ModalBody, null,
+                React.createElement(ModalTitle, null, "Add Funder information"),
+                React.createElement(AwardForm, { values: normalizedValues, onSave: handleSave, onCancel: handleCancel, onChange: handleChange })))));
+};

package/dist/es/components/awards/DeleteAwardDiaolog.js

@@ -0,0 +1,18 @@
+import { Category, Dialog } from '@manuscripts/style-guide';
+import React, { useState } from 'react';
+export const DeleteAwardDialog = ({ handleDelete, }) => {
+    const [isOpen, setOpen] = useState(true);
+    return (React.createElement(Dialog, { isOpen: isOpen, actions: {
+            primary: {
+                action: () => {
+                    setOpen(false);
+                    handleDelete();
+                },
+                title: 'Delete',
+            },
+            secondary: {
+                action: () => setOpen(false),
+                title: 'Cancel',
+            },
+        }, category: Category.warning, header: 'Delete Funder Info', message: `Do you want to continue?` }));
+};

package/dist/es/components/references/ReferenceForm.js

@@ -15,9 +15,10 @@
  */
 import { buildBibliographicDate, buildBibliographicName, } from '@manuscripts/json-schema';
 import { AddAuthorIcon, ArrowDownIcon, ButtonGroup, Category, DeleteIcon, Dialog, IconButton, LinkIcon, PrimaryButton, SecondaryButton, SelectField, TextArea, TextField, Tooltip, } from '@manuscripts/style-guide';
-import { Field, FieldArray, Form, Formik, useFormikContext, } from 'formik';
-import React, { useEffect, useRef, useState, } from 'react';
+import { Field, FieldArray, Formik } from 'formik';
+import React, { useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
+import { ChangeHandlingForm } from '../ChangeHandlingForm';
 export const LabelContainer = styled.div `
   display: flex;
   justify-content: space-between;
@@ -113,12 +114,6 @@ export const ReferenceTextArea = styled(TextArea) `
   height: ${(props) => props.theme.grid.unit * 20}px;
   resize: none;
 `;
-export const FlexForm = styled(Form) `
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-`;
 export const FormFields = styled.div `
   flex: 1;
   overflow-y: auto;
@@ -183,14 +178,6 @@ const bibliographyItemTypeOptions = bibliographyItemTypes.map((i) => ({
     label: i[1],
     value: i[0],
 }));
-const ChangeHandlingForm = (props) => {
-    const { values } = useFormikContext();
-    useEffect(() => {
-        var _a;
-        (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, values);
-    }, [props.onChange, values]);
-    return React.createElement(FlexForm, null, props.children);
-};
 export const ReferenceForm = ({ values, showDelete, onChange, onDelete, onCancel, onSave, actionsRef, }) => {
     const fieldsRef = useRef(null);
     useEffect(() => {

package/dist/es/icons.js

@@ -1,8 +1,9 @@
-import { AlertIcon, DeleteIcon, ScrollIcon, SectionCategoryIcon, } from '@manuscripts/style-guide';
+import { AlertIcon, DeleteIcon, EditIcon, ScrollIcon, SectionCategoryIcon, } from '@manuscripts/style-guide';
 import { createElement } from 'react';
 import { renderToStaticMarkup } from 'react-dom/server';
 const renderIcon = (c) => renderToStaticMarkup(createElement(c));
 export const alertIcon = renderIcon(AlertIcon);
 export const deleteIcon = renderIcon(DeleteIcon);
+export const editIcon = renderToStaticMarkup(createElement(EditIcon));
 export const sectionCategoryIcon = renderIcon(SectionCategoryIcon);
 export const scrollIcon = renderToStaticMarkup(createElement(ScrollIcon));

package/dist/es/lib/doc.js

@@ -1,5 +1,32 @@
 import { schema, } from '@manuscripts/transform';
 import { findChildren, findChildrenByType } from 'prosemirror-utils';
+export const insertAwardsNode = (tr) => {
+    const doc = tr.doc;
+    const awards = findChildrenByType(doc, schema.nodes.awards)[0];
+    if (awards) {
+        return awards;
+    }
+    const positions = [];
+    const possibleNodesTypes = [
+        'doi',
+        'keywords',
+        'supplements',
+        'abstracts',
+        'body',
+    ];
+    doc.descendants((node, pos) => {
+        if (possibleNodesTypes.includes(node.type.name)) {
+            positions.push(pos);
+        }
+    });
+    const pos = positions.length === 0 ? 0 : Math.min(...positions);
+    const node = schema.nodes.awards.createAndFill();
+    tr.insert(pos, node);
+    return {
+        node,
+        pos,
+    };
+};
 export const insertSupplementsNode = (tr) => {
     const doc = tr.doc;
     const supplements = findChildrenByType(doc, schema.nodes.supplements)[0];

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, insertAffiliation, insertBackmatterSection, insertBlock, insertBoxElement, insertContributors, insertCrossReference, insertGraphicalAbstract, insertInlineCitation, insertInlineEquation, insertInlineFootnote, insertKeywords, insertLink, insertList, insertSection, markActive, } from './commands';
+import { addInlineComment, blockActive, canInsert, insertAbstract, insertAffiliation, insertAward, 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';
@@ -111,6 +111,12 @@ export const getEditorMenus = (editor) => {
                         isEnabled: isCommandValid(insertAffiliation),
                         run: doCommand(insertAffiliation),
                     },
+                    {
+                        id: 'insert-awards',
+                        label: 'Funder Information',
+                        isEnabled: isCommandValid(insertAward),
+                        run: doCommand(insertAward),
+                    },
                     {
                         id: 'insert-keywords',
                         label: 'Keywords',

package/dist/es/versions.js

@@ -1,2 +1,2 @@
-export const VERSION = '2.6.40';
+export const VERSION = '2.6.41-LEAN-4077.0';
 export const MATHJAX_VERSION = '3.2.2';

package/dist/es/views/award.js

@@ -13,39 +13,131 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import { ContextMenu } from '@manuscripts/style-guide';
+import { schema } from '@manuscripts/transform';
+import { AwardModal } from '../components/awards/AwardModal';
+import { DeleteAwardDialog, } from '../components/awards/DeleteAwardDiaolog';
+import { isDeleted } from '../lib/track-changes-utils';
+import { updateNodeAttrs } from '../lib/view';
 import BlockView from './block_view';
 import { createNodeView } from './creators';
+import ReactSubView from './ReactSubView';
 export class AwardView extends BlockView {
     constructor() {
         super(...arguments);
-        this.createAwardElement = (className, textContent) => {
-            const element = document.createElement('div');
-            element.classList.add(className);
-            element.textContent = textContent;
-            return element;
+        this.createAwardFragment = (className, title, content) => {
+            const awardFragment = document.createElement('div');
+            awardFragment.classList.add(className);
+            if (title) {
+                const titleElement = document.createElement('span');
+                titleElement.classList.add('title');
+                titleElement.textContent = title;
+                awardFragment.appendChild(titleElement);
+            }
+            if (content) {
+                const contentElement = document.createElement('span');
+                contentElement.classList.add('content');
+                contentElement.textContent = content;
+                awardFragment.appendChild(contentElement);
+            }
+            return awardFragment;
+        };
+        this.handleClick = () => {
+            if (isDeleted(this.node) || !this.props.getCapabilities().editArticle) {
+                return;
+            }
+            this.showContextMenu();
+        };
+        this.showContextMenu = () => {
+            this.props.popper.destroy();
+            if (!this.contentDOM) {
+                return;
+            }
+            const componentProps = {
+                actions: [
+                    {
+                        label: 'Edit',
+                        action: () => {
+                            this.props.popper.destroy();
+                            this.showAwardModal(this.node);
+                        },
+                        icon: 'Edit',
+                    },
+                    {
+                        label: 'Delete',
+                        action: () => {
+                            this.props.popper.destroy();
+                            this.showDeleteAwardDialog();
+                        },
+                        icon: 'Delete',
+                    },
+                ],
+            };
+            this.props.popper.show(this.contentDOM, ReactSubView(this.props, ContextMenu, componentProps, this.node, this.getPos, this.view, 'context-menu'), 'right-start', false);
+        };
+        this.showAwardModal = (award) => {
+            var _a, _b;
+            (_a = this.dialog) === null || _a === void 0 ? void 0 : _a.remove();
+            (_b = this.popperContainer) === null || _b === void 0 ? void 0 : _b.remove();
+            const componentProps = {
+                initialData: (award === null || award === void 0 ? void 0 : award.attrs) || {},
+                onSaveAward: this.handleSaveAward,
+                onCancelAward: this.handleCancelAward,
+            };
+            this.popperContainer = ReactSubView(this.props, AwardModal, componentProps, this.node, this.getPos, this.view, 'award-editor');
+            this.props.popper.show(this.dom, this.popperContainer, 'auto', false);
+        };
+        this.handleSaveAward = (award) => {
+            updateNodeAttrs(this.view, schema.nodes.award, award);
+        };
+        this.handleCancelAward = () => {
+        };
+        this.showDeleteAwardDialog = () => {
+            var _a;
+            (_a = this.dialog) === null || _a === void 0 ? void 0 : _a.remove();
+            const award = this.node;
+            const pos = this.getPos();
+            const handleDelete = () => {
+                if (award) {
+                    const tr = this.view.state.tr;
+                    const from = pos;
+                    const to = pos + award.nodeSize;
+                    this.view.dispatch(tr.delete(from, to));
+                }
+            };
+            const componentProps = {
+                handleDelete: handleDelete,
+            };
+            this.popperContainer = ReactSubView(this.props, DeleteAwardDialog, componentProps, this.node, this.getPos, this.view, 'award-editor');
+            this.props.popper.show(this.dom, this.popperContainer, 'auto', false);
         };
-    }
-    initialise() {
-        this.createDOM();
-        this.contentDOM = this.dom;
-        this.updateContents();
     }
     updateContents() {
+        super.updateContents();
         if (!this.contentDOM) {
             return;
         }
-        this.contentDOM.innerHTML = '';
-        this.contentDOM.classList.remove('block-container');
-        const notAvailable = 'N/A';
         const { recipient, code, source } = this.node.attrs;
         if (!source) {
             return;
         }
+        this.contentDOM.innerHTML = '';
+        const notAvailable = 'N/A';
         const fragment = document.createDocumentFragment();
-        fragment.appendChild(this.createAwardElement('award-source', source));
-        fragment.appendChild(this.createAwardElement('award-code', `Grant Number(s): ${code ? code.split(';').join(', ') : notAvailable}`));
-        fragment.appendChild(this.createAwardElement('award-recipient', `Recipient: ${recipient ? recipient : notAvailable}`));
+        fragment.appendChild(this.createAwardFragment('award-source', '', source));
+        fragment.appendChild(this.createAwardFragment('award-code', 'Grant Number(s): ', code ? code.split(';').join(', ') : notAvailable));
+        fragment.appendChild(this.createAwardFragment('award-recipient', 'Recipient: ', recipient ? recipient : notAvailable));
+        if (this.props.getCapabilities().editArticle) {
+            this.dom.addEventListener('mouseup', this.handleClick);
+        }
         this.contentDOM.appendChild(fragment);
+        this.updateClasses();
+    }
+    selectNode() {
+        super.selectNode();
+        if (!this.node.attrs.source) {
+            this.showAwardModal(this.node);
+        }
     }
 }
 export default createNodeView(AwardView);

package/dist/es/views/awards.js

@@ -14,33 +14,37 @@
  * limitations under the License.
  */
 import { createHeader } from '../lib/utils';
-import BlockView from './block_view';
+import { BaseNodeView } from './base_node_view';
 import { createNodeView } from './creators';
-export class AwardsView extends BlockView {
+export class AwardsView extends BaseNodeView {
     constructor() {
         super(...arguments);
         this.elementType = 'div';
         this.createElement = () => {
-            this.wrapper = document.createElement(this.elementType);
-            this.wrapper.classList.add('block');
             this.contentDOM = document.createElement(this.elementType);
             this.contentDOM.className = 'block';
-            this.wrapper.appendChild(this.contentDOM);
-            this.dom.appendChild(this.wrapper);
         };
     }
+    initialise() {
+        this.createDOM();
+        this.createElement();
+        this.updateContents();
+    }
+    createDOM() {
+        this.dom = document.createElement(this.elementType);
+        this.dom.classList.add(`block-${this.node.type.name}`);
+    }
     updateContents() {
         super.updateContents();
         if (!this.contentDOM) {
             return;
         }
+        this.dom.innerHTML = '';
         this.dom.setAttribute('contenteditable', 'false');
         this.contentDOM.setAttribute('contenteditable', 'false');
         if (this.node.content.size !== 0) {
-            this.wrapper.innerHTML = '';
-            this.wrapper.setAttribute('contenteditable', 'false');
             const header = createHeader(this.node.type.name, 'Funder Information');
-            this.wrapper.append(header, this.contentDOM);
+            this.dom.append(header, this.contentDOM);
         }
     }
 }

package/dist/types/commands.d.ts

@@ -54,6 +54,7 @@ export declare const insertBackmatterSection: (category: SectionCategory) => (st
 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 insertAward: (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/ChangeHandlingForm.d.ts → ChangeHandlingForm.d.ts}

@@ -3,3 +3,4 @@ export interface ChangeHandlingFormProps<Values> {
     onChange: (values: Values) => void;
 }
 export declare const ChangeHandlingForm: <Values>(props: React.PropsWithChildren<ChangeHandlingFormProps<Values>>) => React.JSX.Element;
+export declare const FlexForm: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "ref"> & React.RefAttributes<HTMLFormElement>>, any, {}, never>;

package/dist/types/components/awards/AwardForm.d.ts

@@ -0,0 +1,24 @@
+/*!
+ * © 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 { AwardAttrs } from '../../views/award';
+export interface AwardFormProps {
+    values: AwardAttrs;
+    onSave: (values: AwardAttrs) => void;
+    onCancel: () => void;
+    onChange: (values: AwardAttrs) => void;
+}
+export declare const AwardForm: ({ values, onSave, onCancel, onChange, }: AwardFormProps) => React.JSX.Element;