@manuscripts/body-editor 1.7.19 → 1.7.20

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

@@ -0,0 +1,196 @@
+/*!
+ * © 2024 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 AddIcon from '@manuscripts/assets/react/AddIcon';
+import { buildBibliographicName, generateID, ObjectTypes, } from '@manuscripts/json-schema';
+import { CloseButton, ModalBody, ModalContainer, ModalHeader, ModalSidebar, ModalSidebarHeader, ModalSidebarTitle, ScrollableModalContent, SidebarContent, StyledModal, } from '@manuscripts/style-guide';
+import { isEqual } from 'lodash';
+import React, { useReducer, useRef, useState } from 'react';
+import styled from 'styled-components';
+import { arrayReducer } from '../../lib/array-reducer';
+import { authorComparator, } from '../../lib/authors';
+import { AuthorActions } from './AuthorActions';
+import { AuthorAffiliations } from './AuthorAffiliations';
+import { AuthorDetailsForm } from './AuthorDetailsForm';
+import { AuthorFormPlaceholder } from './AuthorFormPlaceholder';
+import { AuthorList } from './AuthorList';
+import { SaveAuthorConfirmationDialog } from './SaveAuthorConfirmationDialog';
+const AddAuthorButton = styled.div `
+  display: flex;
+  align-items: center;
+  margin-bottom: ${(props) => props.theme.grid.unit * 4}px;
+  margin-left: ${(props) => props.theme.grid.unit * 2}px;
+  cursor: pointer;
+`;
+const ActionTitle = styled.div `
+  padding-left: ${(props) => props.theme.grid.unit * 2}px;
+`;
+const FormLabel = styled.legend `
+  margin-top: 12px;
+  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 AuthorForms = styled.div `
+  padding-left: ${(props) => props.theme.grid.unit * 3}px;
+  padding-right: ${(props) => props.theme.grid.unit * 3}px;
+`;
+const authorsReducer = arrayReducer((a, b) => a.id === b.id);
+const affiliationsReducer = arrayReducer((a, b) => a.id === b.id);
+const normalize = (author) => {
+    return {
+        id: author.id,
+        role: author.role,
+        affiliations: author.affiliations || [],
+        bibliographicName: author.bibliographicName,
+        email: author.email || '',
+        isCorresponding: author.isCorresponding || false,
+        ORCIDIdentifier: author.ORCIDIdentifier || '',
+        priority: author.priority,
+        isJointContributor: author.isJointContributor || false,
+    };
+};
+export const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, author, onSaveAuthor, onDeleteAuthor, onSaveAffiliation, }) => {
+    const [isOpen, setOpen] = useState(true);
+    const [showConfirmationDialog, setShowConfirmationDialog] = useState(false);
+    const valuesRef = useRef();
+    const actionsRef = useRef();
+    const [authors, dispatchAuthors] = useReducer(authorsReducer, $authors.sort(authorComparator));
+    const [affiliations, dispatchAffiliations] = useReducer(affiliationsReducer, $affiliations);
+    const [selection, setSelection] = useState(author);
+    const handleSelect = (author) => {
+        const values = valuesRef.current;
+        if (values && selection && !isEqual(values, normalize(selection))) {
+            setShowConfirmationDialog(true);
+        }
+        else {
+            setSelection(author);
+        }
+    };
+    const handleSaveAuthor = (values) => {
+        if (!values || !selection) {
+            return;
+        }
+        const author = Object.assign(Object.assign({}, selection), values);
+        onSaveAuthor(author);
+        setSelection(author);
+        setShowConfirmationDialog(false);
+        dispatchAuthors({
+            type: 'update',
+            items: [author],
+        });
+    };
+    const handleMoveAuthor = (from, to) => {
+        const copy = [...authors];
+        const order = copy.map((_, i) => (i === from ? to : i));
+        copy.sort((a, b) => order[authors.indexOf(a)] - order[authors.indexOf(b)]);
+        copy.forEach((a, i) => {
+            if (a.priority !== i) {
+                a.priority = i;
+                onSaveAuthor(a);
+            }
+        });
+        dispatchAuthors({
+            type: 'set',
+            state: copy,
+        });
+    };
+    const handleAddAuthor = () => {
+        const name = buildBibliographicName({ given: '', family: '' });
+        const author = {
+            id: generateID(ObjectTypes.Contributor),
+            role: 'author',
+            affiliations: [],
+            bibliographicName: name,
+            email: '',
+            isCorresponding: false,
+            ORCIDIdentifier: '',
+            priority: authors.length,
+            isJointContributor: false,
+        };
+        onSaveAuthor(author);
+        setSelection(author);
+        dispatchAuthors({
+            type: 'update',
+            items: [author],
+        });
+    };
+    const handleDeleteAuthor = () => {
+        if (!selection) {
+            return;
+        }
+        onDeleteAuthor(selection);
+        setSelection(undefined);
+        dispatchAuthors({
+            type: 'delete',
+            item: selection,
+        });
+    };
+    const handleSaveAffiliation = (affiliation) => {
+        onSaveAffiliation(affiliation);
+        dispatchAffiliations({
+            type: 'update',
+            items: [affiliation],
+        });
+    };
+    const handleAddAffiliation = (affiliation) => {
+        if (!valuesRef.current) {
+            return;
+        }
+        const values = valuesRef.current;
+        const affiliations = values.affiliations || [];
+        handleSaveAuthor(Object.assign(Object.assign({}, values), { affiliations: [...affiliations, affiliation.id] }));
+    };
+    const handleRemoveAffiliation = (affiliation) => {
+        var _a;
+        if (!valuesRef.current) {
+            return;
+        }
+        const values = valuesRef.current;
+        handleSaveAuthor(Object.assign(Object.assign({}, values), { affiliations: (_a = values.affiliations) === null || _a === void 0 ? void 0 : _a.filter((i) => i !== affiliation.id) }));
+    };
+    const handleResetAuthor = () => {
+        var _a;
+        (_a = actionsRef.current) === null || _a === void 0 ? void 0 : _a.reset();
+        setShowConfirmationDialog(false);
+    };
+    const handleChangeAuthor = (values) => {
+        valuesRef.current = values;
+    };
+    return (React.createElement(StyledModal, { isOpen: isOpen, onRequestClose: () => setOpen(false), shouldCloseOnOverlayClick: true },
+        React.createElement(ModalContainer, null,
+            React.createElement(ModalHeader, null,
+                React.createElement(CloseButton, { onClick: () => setOpen(false), "data-cy": 'modal-close-button' })),
+            React.createElement(ModalBody, null,
+                React.createElement(ModalSidebar, { "data-cy": 'authors-sidebar' },
+                    React.createElement(ModalSidebarHeader, null,
+                        React.createElement(ModalSidebarTitle, null, "Authors")),
+                    React.createElement(SidebarContent, null,
+                        React.createElement(AddAuthorButton, { onClick: handleAddAuthor },
+                            React.createElement(AddIcon, { width: 40, height: 40 }),
+                            React.createElement(ActionTitle, null, "Add Author")),
+                        React.createElement(AuthorList, { author: selection, authors: authors, onSelect: handleSelect, moveAuthor: handleMoveAuthor }))),
+                React.createElement(ScrollableModalContent, null, selection ? (React.createElement(AuthorForms, null,
+                    React.createElement(SaveAuthorConfirmationDialog, { isOpen: showConfirmationDialog, onSave: () => handleSaveAuthor(valuesRef.current), onCancel: handleResetAuthor }),
+                    React.createElement(AuthorActions, { author: selection, onSave: () => handleSaveAuthor(valuesRef.current), onDelete: handleDeleteAuthor, onCancel: () => setOpen(false) }),
+                    React.createElement(FormLabel, null, "Details"),
+                    React.createElement(AuthorDetailsForm, { values: normalize(selection), onChange: handleChangeAuthor, onSave: handleSaveAuthor, actionsRef: actionsRef }),
+                    React.createElement(FormLabel, null, "Affiliations"),
+                    React.createElement(AuthorAffiliations, { author: selection, affiliations: affiliations, onSave: handleSaveAffiliation, onAdd: handleAddAffiliation, onRemove: handleRemoveAffiliation }))) : (React.createElement(AuthorFormPlaceholder, null)))))));
+};

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

@@ -0,0 +1,10 @@
+import { Form, useFormikContext } from 'formik';
+import React, { useEffect } from 'react';
+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);
+};

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

@@ -0,0 +1,16 @@
+import { Category, Dialog } from '@manuscripts/style-guide';
+import React from 'react';
+import { authorLabel } from '../../lib/authors';
+export const DeleteAuthorConfirmationDialog = ({ isOpen, author, onDelete, onCancel }) => {
+    const label = authorLabel(author);
+    return (React.createElement(Dialog, { isOpen: isOpen, category: Category.confirmation, header: 'Remove author', message: `Are you sure you want to remove ${label} from the authors list?`, actions: {
+            secondary: {
+                action: onDelete,
+                title: 'Delete',
+            },
+            primary: {
+                action: onCancel,
+                title: 'Cancel',
+            },
+        } }));
+};

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

@@ -0,0 +1,140 @@
+/*!
+ * © 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 CorrespondingAuthorBadge from '@manuscripts/assets/react/CorrespondingAuthorBadge';
+import VerticalEllipsis from '@manuscripts/assets/react/VerticalEllipsis';
+import { Avatar } from '@manuscripts/style-guide';
+import React, { useRef, useState } from 'react';
+import { useDrag, useDrop } from 'react-dnd';
+import styled from 'styled-components';
+import { authorLabel } from '../../lib/authors';
+const AuthorContainer = styled.div `
+  padding: ${(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};
+  }
+
+  &.active {
+    border-color: ${(props) => props.theme.colors.border.primary};
+  }
+
+  &.dragging {
+    visibility: hidden;
+  }
+
+  &.drop-before {
+    border-top-color: ${(props) => props.theme.colors.brand.dark};
+  }
+
+  &.drop-after {
+    border-bottom-color: ${(props) => props.theme.colors.brand.dark};
+  }
+`;
+const AvatarContainer = styled.div `
+  display: inline-flex;
+  position: relative;
+`;
+const AuthorBadge = styled.div `
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+`;
+const AuthorNotes = styled.div `
+  position: absolute;
+  top: 0;
+  right: 0;
+
+  & ${AuthorBadge}:not(:last-child) {
+    right: -20%;
+  }
+`;
+const AuthorName = styled.div `
+  margin-left: 12px;
+  flex: 1;
+`;
+const DragHandle = styled(VerticalEllipsis) `
+  cursor: move;
+`;
+const BEFORE = {
+    id: 'before',
+    diff: -0.5,
+};
+const AFTER = {
+    id: 'after',
+    diff: 0.5,
+};
+const getDropPosition = (element, monitor) => {
+    const rect = element.getBoundingClientRect();
+    const middle = (rect.bottom - rect.top) / 2;
+    const cursor = monitor.getClientOffset();
+    return cursor.y > middle + rect.top ? AFTER : BEFORE;
+};
+export const DraggableAuthor = ({ author, isSelected, onClick, moveAuthor, }) => {
+    const [dropPosition, setDropPosition] = useState();
+    const ref = useRef(null);
+    const [{ isDragging }, dragRef] = useDrag({
+        item: {
+            type: 'author',
+            author,
+        },
+        collect: (monitor) => ({
+            isDragging: monitor.isDragging(),
+        }),
+    });
+    const [{ isOver }, dropRef] = useDrop({
+        accept: 'author',
+        collect: (monitor) => ({
+            isOver: monitor.isOver(),
+        }),
+        hover: (item, monitor) => {
+            if (!ref.current) {
+                return;
+            }
+            const position = getDropPosition(ref.current, monitor);
+            setDropPosition(position);
+        },
+        drop: (item, monitor) => {
+            if (!ref.current) {
+                return;
+            }
+            const position = getDropPosition(ref.current, monitor);
+            const from = item.author.priority;
+            const to = author.priority;
+            moveAuthor(from, to + position.diff);
+        },
+    });
+    dragRef(dropRef(ref));
+    const dragClass = isDragging ? 'dragging' : '';
+    const dropClass = isOver && dropPosition ? `drop-${dropPosition.id}` : '';
+    const activeClass = isSelected ? 'active' : '';
+    return (React.createElement(AuthorContainer, { ref: ref, className: `${dragClass} ${dropClass} ${activeClass}`, onClick: onClick },
+        React.createElement(AvatarContainer, null,
+            React.createElement(Avatar, { size: 36, color: '#6e6e6e' }),
+            React.createElement(AuthorNotes, null, author.isCorresponding && (React.createElement(AuthorBadge, null,
+                React.createElement(CorrespondingAuthorBadge, null))))),
+        React.createElement(AuthorName, null, authorLabel(author)),
+        isSelected && React.createElement(DragHandle, null)));
+};

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

@@ -0,0 +1,14 @@
+import { Category, Dialog } from '@manuscripts/style-guide';
+import React from 'react';
+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: {
+            secondary: {
+                action: onCancel,
+                title: 'Discard',
+            },
+            primary: {
+                action: onSave,
+                title: 'Save',
+            },
+        } }));
+};

package/dist/es/configs/editor-views.js

@@ -19,7 +19,7 @@ import bibliographyElement from '../views/bibliography_element_editable';
 import blockquoteElement from '../views/blockquote_element_editable';
 import bulletList from '../views/bullet_list_editable';
 import citation from '../views/citation_editable';
-import contributorsSection from '../views/contributors';
+import contributors from '../views/contributors';
 import crossReference from '../views/cross_reference_editable';
 import empty from '../views/empty';
 import equation from '../views/equation_editable';
@@ -54,7 +54,7 @@ export default (props, dispatch) => {
         bullet_list: bulletList(props),
         citation: citation(props, dispatch),
         cross_reference: crossReference(props, dispatch),
-        contributors: contributorsSection(props, dispatch),
+        contributors: contributors(props, dispatch),
         affiliations: affiliationsSection(props, dispatch),
         affiliation: affiliation(props, dispatch),
         equation: equation(props),

package/dist/es/lib/array-reducer.js

@@ -36,6 +36,8 @@ export const arrayReducer = (isEqual = (a, b) => a === b) => {
                 return handleUpdate(state, action.items);
             case 'delete':
                 return handleDelete(state, action.item);
+            case 'set':
+                return action.state;
         }
     };
 };

package/dist/es/lib/authors.js

@@ -0,0 +1,36 @@
+/*!
+ * © 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.
+ */
+export const affiliationLabel = (affiliation) => {
+    const institution = affiliation.institution;
+    if (!institution) {
+        return '(unknown institution)';
+    }
+    const department = affiliation.department;
+    return department ? `${institution} (${department})`.trim() : institution;
+};
+export const authorLabel = (author) => {
+    const name = author.bibliographicName;
+    const parts = [initials(name), name.family, name.suffix].filter(Boolean);
+    return parts.length ? parts.join(' ') : 'Unknown Author';
+};
+export const initials = (name) => name.given
+    ? name.given
+        .trim()
+        .split(' ')
+        .map((part) => part.substring(0, 1).toUpperCase() + '.')
+        .join('')
+    : '';
+export const authorComparator = (a, b) => a.priority - b.priority;

package/dist/es/lib/track-changes-utils.js

@@ -87,3 +87,6 @@ export const getAttrsTrackingButton = (changeID) => {
     el.innerHTML = editAttrsTrackingIcon;
     return el;
 };
+export function isHidden(node) {
+    return isDeleted(node) || isRejectedInsert(node);
+}

package/dist/es/lib/utils.js

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { isElementNodeType, isSectionNodeType, schema, } from '@manuscripts/transform';
+import { isElementNodeType, isSectionNodeType, } from '@manuscripts/transform';
 import { findParentNode } from 'prosemirror-utils';
 export function* iterateChildren(node, recurse = false) {
     for (let i = 0; i < node.childCount; i++) {
@@ -50,6 +50,3 @@ export const findParentElement = (selection, validIds) => findParentNode((node)
     }
     return isElementNodeType(node.type) && node.attrs.id;
 })(selection);
-export const isMetaNode = (nodeType) => nodeType === schema.nodes.bibliography_item.name ||
-    nodeType === schema.nodes.affiliation.name ||
-    nodeType === schema.nodes.contributor.name;

package/dist/es/lib/view.js

@@ -0,0 +1,64 @@
+/*!
+ * © 2024 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 { schema, } from '@manuscripts/transform';
+import * as utils from 'prosemirror-utils';
+import { getActualAttrs, isHidden } from './track-changes-utils';
+const metaNodeTypes = [
+    schema.nodes.bibliography_item,
+    schema.nodes.affiliation,
+    schema.nodes.contributor,
+];
+const updateMetaNode = 'track-changes-update-meta-node';
+export const findChildByID = (view, id) => {
+    const doc = view.state.doc;
+    const children = utils.findChildren(doc, (n) => n.attrs.id === id);
+    return children.length ? children[0] : undefined;
+};
+export const findChildByType = (view, type) => {
+    const children = findChildrenByType(view, type);
+    return children.length ? children[0] : undefined;
+};
+export const findChildrenByType = (view, type) => {
+    const doc = view.state.doc;
+    return utils.findChildrenByType(doc, type).filter((n) => !isHidden(n.node));
+};
+export const findChildrenAttrsByType = (view, type) => {
+    return findChildrenByType(view, type).map((n) => getActualAttrs(n.node));
+};
+export const updateNode = (view, node) => {
+    updateNodeAttrs(view, node.type, node.attrs);
+};
+export const updateNodeAttrs = (view, type, attrs) => {
+    const copy = Object.assign({}, attrs);
+    delete copy.dataTracked;
+    const child = findChildByID(view, attrs.id);
+    if (child) {
+        const pos = child.pos;
+        const tr = view.state.tr.setNodeMarkup(pos, undefined, attrs);
+        if (metaNodeTypes.includes(type)) {
+            tr.setMeta(updateMetaNode, true);
+        }
+        view.dispatch(tr);
+    }
+};
+export const deleteNode = (view, id) => {
+    const child = findChildByID(view, id);
+    if (child) {
+        const pos = child.pos;
+        const node = child.node;
+        view.dispatch(view.state.tr.delete(pos, pos + node.nodeSize));
+    }
+};

package/dist/es/views/base_node_view.js

@@ -13,7 +13,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { isMetaNode } from '../lib/utils';
 export class BaseNodeView {
     constructor(props, node, view, getPos, decorations) {
         this.props = props;
@@ -59,24 +58,6 @@ export class BaseNodeView {
                 this.dom.classList.toggle('has-sync-error', this.syncErrors.length > 0);
             }
         };
-        this.updateNodeAttrs = (attrs) => {
-            this.view.state.doc.descendants((node, pos) => {
-                if (node.attrs.id === attrs.id) {
-                    const tr = this.view.state.tr.setNodeMarkup(pos, undefined, attrs);
-                    if (isMetaNode(node.type.name)) {
-                        tr.setMeta('track-changes-update-meta-node', true);
-                    }
-                    this.view.dispatch(tr);
-                }
-            });
-        };
-        this.deleteNode = (id) => {
-            this.view.state.doc.descendants((node, pos) => {
-                if (node.attrs.id === id) {
-                    this.view.dispatch(this.view.state.tr.delete(pos, pos + node.nodeSize));
-                }
-            });
-        };
     }
     setDomAttrs(node, element, omit = []) {
         Object.keys(node.attrs || {}).forEach((attr) => {

package/dist/es/views/bibliography_element.js

@@ -27,6 +27,7 @@ import { buildComment, Decoder, } from '@manuscripts/transform';
 import { commentIcon, editIcon } from '../assets';
 import { sanitize } from '../lib/dompurify';
 import { getAttrsTrackingButton, getChangeClasses, } from '../lib/track-changes-utils';
+import { deleteNode, updateNode } from '../lib/view';
 import { getBibliographyPluginState } from '../plugins/bibliography';
 import { commentAnnotation } from '../plugins/comment_annotation';
 import { selectedSuggestionKey, SET_SUGGESTION_ID, } from '../plugins/selected-suggestion-ui';
@@ -145,10 +146,10 @@ export class BibliographyElementBlockView extends BlockView {
         };
         this.handleSave = (item) => {
             const node = this.decoder.decode(item);
-            this.updateNodeAttrs(node.attrs);
+            updateNode(this.view, node);
         };
         this.handleDelete = (item) => {
-            return this.deleteNode(item._id);
+            deleteNode(this.view, item._id);
         };
         this.addClickListenerToBibItem = (element, dataTracked) => {
             if (dataTracked.status !== CHANGE_STATUS.rejected) {

package/dist/es/views/citation_editable.js

@@ -21,6 +21,7 @@ import { TextSelection } from 'prosemirror-state';
 import { findChildren, findChildrenByType } from 'prosemirror-utils';
 import { crossref } from '../citation-sources';
 import { isDeleted } from '../lib/track-changes-utils';
+import { deleteNode, updateNodeAttrs } from '../lib/view';
 import { getBibliographyPluginState } from '../plugins/bibliography';
 import { CitationView } from './citation';
 import { CitationEditorWrapper } from './CitationEditorWrapper';
@@ -95,7 +96,7 @@ export class CitationEditableView extends CitationView {
             }
             else {
                 const node = this.decoder.decode(item);
-                this.updateNodeAttrs(node.attrs);
+                updateNodeAttrs(this.view, node.type, node.attrs);
             }
         };
         this.handleUncite = (id) => {
@@ -139,7 +140,7 @@ export class CitationEditableView extends CitationView {
             this.handleCancel();
         };
         this.handleDelete = (item) => {
-            return this.deleteNode(item._id);
+            return deleteNode(this.view, item._id);
         };
         this.handleComment = () => {
             const comment = buildComment(this.node.attrs.id);