@manuscripts/body-editor 1.7.28 → 1.7.29-LEAN-3321-1

package/dist/cjs/assets.js

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.alertIcon = exports.editAttrsTrackingIcon = exports.commentIcon = exports.editIcon = void 0;
+exports.deleteIcon = exports.alertIcon = exports.editAttrsTrackingIcon = exports.commentIcon = exports.editIcon = void 0;
 exports.editIcon = `
   <svg
     width="14"
@@ -118,3 +118,49 @@ exports.alertIcon = `
     />
   </svg>
 `;
+exports.deleteIcon = `
+  <svg 
+    width="13" 
+    height="15" 
+    viewBox="0 0 13 15" 
+    fill="none" 
+    xmlns="http://www.w3.org/2000/svg"
+  >
+  <path 
+    fill-rule="evenodd" 
+    clip-rule="evenodd" 
+    d="M2.00001 3C2 3.00135 2 3.00269 2 3.00404V13.004C2 13.5563 2.44772 14.004 3 14.004H10C10.5523 14.004 11 13.5563 11 13.004V3.00404C11 3.00269 11 3.00135 11 3C11.5978 3.34581 12 3.99215 12 4.73244V13.004C12 14.1086 11.1046 15.004 10 15.004H3C1.89543 15.004 1 14.1086 1 13.004V4.73244C1 3.99215 1.4022 3.34581 2.00001 3Z" 
+    fill="#C9C9C9"
+  />
+  <path 
+    fill-rule="evenodd" 
+    clip-rule="evenodd" 
+    d="M4.5 0C3.67157 0 3 0.671573 3 1.5V3.5C3 4.32843 3.67157 5 4.5 5H8.5C9.32843 5 10 4.32843 10 3.5V1.5C10 0.671573 9.32843 0 8.5 0H4.5ZM9 1.5C9 1.22386 8.77614 1 8.5 1H4.5C4.22386 1 4 1.22386 4 1.5C4 1.77614 4.22386 2 4.5 2H8.5C8.77614 2 9 1.77614 9 1.5Z" 
+    fill="#C9C9C9"
+  />
+  <rect 
+    y="2" 
+    width="13" 
+    height="3" 
+    rx="1.5" 
+    fill="#C9C9C9"
+  />
+  <path 
+    fill-rule="evenodd" 
+    clip-rule="evenodd" 
+    d="M8 7.5C8 7.22386 8.22386 7 8.5 7C8.77614 7 9 7.22386 9 7.5V11.5C9 11.7761 8.77614 12 8.5 12C8.22386 12 8 11.7761 8 11.5V7.5Z" 
+    fill="#C9C9C9"
+  />
+  <path 
+    fill-rule="evenodd" 
+    clip-rule="evenodd" 
+    d="M4 7.5C4 7.22386 4.22386 7 4.5 7C4.77614 7 5 7.22386 5 7.5V11.5C5 11.7761 4.77614 12 4.5 12C4.22386 12 4 11.7761 4 11.5V7.5Z" 
+    fill="#C9C9C9"
+  />
+  <path 
+    fill-rule="evenodd" 
+    clip-rule="evenodd" 
+    d="M11.5 3C11.7761 3 12 3.22386 12 3.5C12 3.77614 11.7761 4 11.5 4L1.5 4C1.22386 4 1 3.77614 1 3.5C1 3.22386 1.22386 3 1.5 3L11.5 3Z" 
+    fill="white"
+  />
+</svg>`;

package/dist/cjs/components/authors/AuthorList.js

@@ -19,7 +19,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AuthorList = void 0;
-const style_guide_1 = require("@manuscripts/style-guide");
 const react_1 = __importDefault(require("react"));
 const react_dnd_1 = require("react-dnd");
 const react_dnd_html5_backend_1 = require("react-dnd-html5-backend");
@@ -31,10 +30,8 @@ const AuthorListContainer = styled_components_1.default.div `
 `;
 const AuthorList = ({ author, authors, onSelect, moveAuthor, }) => {
     return (react_1.default.createElement(react_dnd_1.DndProvider, { backend: react_dnd_html5_backend_1.HTML5Backend },
-        react_1.default.createElement(AuthorListContainer, null,
-            react_1.default.createElement(style_guide_1.DragLayer, null),
-            authors.map((a) => {
-                return (react_1.default.createElement(DraggableAuthor_1.DraggableAuthor, { key: a.id, author: a, isSelected: a.id === (author === null || author === void 0 ? void 0 : author.id), onClick: () => onSelect(a), moveAuthor: moveAuthor }));
-            }))));
+        react_1.default.createElement(AuthorListContainer, null, authors.map((a) => {
+            return (react_1.default.createElement(DraggableAuthor_1.DraggableAuthor, { key: a.id, author: a, isSelected: a.id === (author === null || author === void 0 ? void 0 : author.id), onClick: () => onSelect(a), moveAuthor: moveAuthor }));
+        }))));
 };
 exports.AuthorList = AuthorList;

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

@@ -49,6 +49,7 @@ const react_1 = __importStar(require("react"));
 const react_dnd_1 = require("react-dnd");
 const styled_components_1 = __importDefault(require("styled-components"));
 const authors_1 = require("../../lib/authors");
+const dnd_1 = require("../../lib/dnd");
 const AuthorContainer = styled_components_1.default.div `
   padding: ${(props) => props.theme.grid.unit * 2}px;
   display: flex;
@@ -107,26 +108,12 @@ const AuthorName = styled_components_1.default.div `
 const DragHandle = (0, styled_components_1.default)(VerticalEllipsis_1.default) `
   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;
-};
 const DraggableAuthor = ({ author, isSelected, onClick, moveAuthor, }) => {
-    const [dropPosition, setDropPosition] = (0, react_1.useState)();
+    const [dropSide, setDropSide] = (0, react_1.useState)();
     const ref = (0, react_1.useRef)(null);
     const [{ isDragging }, dragRef] = (0, react_dnd_1.useDrag)({
+        type: 'author',
         item: {
-            type: 'author',
             author,
         },
         collect: (monitor) => ({
@@ -135,29 +122,30 @@ const DraggableAuthor = ({ author, isSelected, onClick, moveAuthor, }) => {
     });
     const [{ isOver }, dropRef] = (0, react_dnd_1.useDrop)({
         accept: 'author',
-        collect: (monitor) => ({
-            isOver: monitor.isOver(),
-        }),
         hover: (item, monitor) => {
             if (!ref.current) {
                 return;
             }
-            const position = getDropPosition(ref.current, monitor);
-            setDropPosition(position);
+            const side = (0, dnd_1.getDropSide)(ref.current, monitor);
+            setDropSide(side);
         },
         drop: (item, monitor) => {
             if (!ref.current) {
                 return;
             }
-            const position = getDropPosition(ref.current, monitor);
+            const side = (0, dnd_1.getDropSide)(ref.current, monitor);
             const from = item.author.priority;
             const to = author.priority;
-            moveAuthor(from, to + position.diff);
+            const diff = side === 'before' ? -0.5 : 0.5;
+            moveAuthor(from, to + diff);
         },
+        collect: (monitor) => ({
+            isOver: monitor.isOver(),
+        }),
     });
     dragRef(dropRef(ref));
     const dragClass = isDragging ? 'dragging' : '';
-    const dropClass = isOver && dropPosition ? `drop-${dropPosition.id}` : '';
+    const dropClass = isOver && dropSide ? `drop-${dropSide}` : '';
     const activeClass = isSelected ? 'active' : '';
     return (react_1.default.createElement(AuthorContainer, { ref: ref, className: `${dragClass} ${dropClass} ${activeClass}`, onClick: onClick },
         react_1.default.createElement(AvatarContainer, null,

package/dist/cjs/components/outline/DraggableTree.js

@@ -23,13 +23,13 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.buildTree = void 0;
+exports.DraggableTree = exports.buildTree = void 0;
 const transform_1 = require("@manuscripts/transform");
 const prosemirror_model_1 = require("prosemirror-model");
-const React = __importStar(require("react"));
+const react_1 = __importStar(require("react"));
 const react_dnd_1 = require("react-dnd");
-const react_dom_1 = require("react-dom");
 const context_menu_1 = require("../../lib/context-menu");
+const dnd_1 = require("../../lib/dnd");
 const track_changes_utils_1 = require("../../lib/track-changes-utils");
 const node_type_icons_1 = require("../../node-type-icons");
 const Outline_1 = require("./Outline");
@@ -56,11 +56,10 @@ const isChildrenExcluded = (nodeType) => {
 const isManuscriptNode = (node) => {
     return (node === null || node === void 0 ? void 0 : node.type) === transform_1.schema.nodes.manuscript;
 };
-const buildTree = ({ node, pos, index, selected, parent, }) => {
+const buildTree = ({ node, pos, index, parent, }) => {
     const items = [];
     const startPos = pos + 1;
     const endPos = pos + node.nodeSize;
-    const isSelected = selected ? node.attrs.id === selected.node.attrs.id : false;
     if (!isChildrenExcluded(node.type)) {
         node.forEach((childNode, offset, childIndex) => {
             if (isExcluded(childNode.type)) {
@@ -73,172 +72,110 @@ const buildTree = ({ node, pos, index, selected, parent, }) => {
                     node: childNode,
                     pos: startPos + offset,
                     index: childIndex,
-                    selected,
                     parent: node,
                 }));
             }
         });
     }
-    return { node, index, items, pos, endPos, parent, isSelected };
+    return { node, index, items, pos, endPos, parent };
 };
 exports.buildTree = buildTree;
-class Tree extends React.Component {
-    constructor(props) {
-        super(props);
-        this.outlineStyles = (isDragging) => ({
-            opacity: isDragging ? 0.5 : 1,
-        });
-        this.bottomPreviewStyles = (mightDrop, dragPosition) => ({
-            bottom: '-1px',
-            visibility: mightDrop && dragPosition === 'after' ? 'visible' : 'hidden',
-        });
-        this.topPreviewStyles = (mightDrop, dragPosition) => ({
-            top: '0px',
-            visibility: mightDrop && dragPosition === 'before' ? 'visible' : 'hidden',
-        });
-        this.toggle = () => {
-            this.setState({
-                open: !this.state.open,
-            });
-        };
-        this.itemText = (node) => {
-            const text = (0, transform_1.nodeTitle)(node);
-            if (text) {
-                return text.trim();
+const DraggableTree = ({ tree, view, depth, can, }) => {
+    const [dropSide, setDropSide] = (0, react_1.useState)();
+    const [isOpen, setOpen] = (0, react_1.useState)(depth === 0);
+    const ref = (0, react_1.useRef)(null);
+    const { node, items, parent } = tree;
+    const itemText = (node) => {
+        const text = (0, transform_1.nodeTitle)(node);
+        if (text) {
+            return text.trim();
+        }
+        const placeholder = (0, transform_1.nodeTitlePlaceholder)(node.type);
+        return react_1.default.createElement(Outline_1.OutlineItemPlaceholder, null, placeholder);
+    };
+    const toggleOpen = () => {
+        setOpen(!isOpen);
+    };
+    const [{ isDragging }, dragRef] = (0, react_dnd_1.useDrag)({
+        type: 'outline',
+        item: tree,
+        canDrag: () => {
+            return depth !== 0;
+        },
+        collect: (monitor) => ({
+            isDragging: monitor.isDragging(),
+        }),
+    });
+    const [{ isOver }, dropRef] = (0, react_dnd_1.useDrop)({
+        accept: 'outline',
+        canDrop(item, monitor) {
+            if (!ref.current) {
+                return false;
+            }
+            if (!tree.parent) {
+                return false;
             }
-            const placeholder = (0, transform_1.nodeTitlePlaceholder)(node.type);
-            return React.createElement(Outline_1.OutlineItemPlaceholder, null, placeholder);
-        };
-        this.handleContextMenu = (event) => {
-            event.preventDefault();
-            event.stopPropagation();
-            if (!this.props.editArticle) {
+            if (item.node.attrs.id === tree.node.attrs.id) {
                 return false;
             }
-            const menu = this.createMenu();
-            if (!menu) {
+            if (item.pos <= tree.pos && item.endPos >= tree.endPos) {
                 return false;
             }
-            menu.showEditMenu(event.currentTarget);
-        };
-        this.createMenu = () => {
-            const { tree, view } = this.props;
-            if (!view) {
-                return null;
+            const side = (0, dnd_1.getDropSide)(ref.current, monitor);
+            const index = side === 'before' ? tree.index : tree.index + 1;
+            return tree.parent.canReplace(index, index, prosemirror_model_1.Fragment.from(item.node));
+        },
+        hover(item, monitor) {
+            if (!ref.current || !monitor.canDrop()) {
+                return;
             }
-            return new context_menu_1.ContextMenu(tree.node, view, () => tree.pos - 1);
-        };
-        this.state = {
-            open: !props.depth,
-            dragPosition: null,
-        };
-    }
-    render() {
-        const { depth = 0, tree, canDrop, connectDragSource, connectDragPreview, connectDropTarget, isDragging, isOverCurrent, item, view, } = this.props;
-        const { open, dragPosition } = this.state;
-        const { node, items, isSelected, parent } = tree;
-        const isDeletedItem = (0, track_changes_utils_1.isDeleted)(node);
-        const isRejectedItem = (0, track_changes_utils_1.isRejectedInsert)(node);
-        const mightDrop = item && isOverCurrent && canDrop;
-        const isTop = isManuscriptNode(parent);
-        if (isRejectedItem) {
-            return null;
-        }
-        return connectDropTarget(React.createElement("div", null,
-            React.createElement(Outline_1.Outline, { style: this.outlineStyles(isDragging) },
-                React.createElement(Outline_1.OutlineDropPreview, { depth: depth, style: this.topPreviewStyles(mightDrop, dragPosition) }),
-                !isTop &&
-                    connectDragSource(React.createElement("div", null,
-                        React.createElement(Outline_1.OutlineItem, { isSelected: isSelected, depth: depth, onContextMenu: this.handleContextMenu },
-                            items.length ? (React.createElement(Outline_1.OutlineItemArrow, { onClick: this.toggle }, open ? (React.createElement(Outline_1.StyledTriangleExpanded, null)) : (React.createElement(Outline_1.StyledTriangleCollapsed, null)))) : (React.createElement(Outline_1.OutlineItemNoArrow, null)),
-                            React.createElement(Outline_1.OutlineItemLink, { to: `#${node.attrs.id || ''}` },
-                                connectDragPreview(React.createElement("span", { style: {
-                                        display: 'inline-flex',
-                                        alignItems: 'center',
-                                    } },
-                                    React.createElement(Outline_1.OutlineItemIcon, null, (0, node_type_icons_1.nodeTypeIcon)(node.type)))),
-                                React.createElement(Outline_1.OutlineItemLinkText, { className: `outline-text-${node.type.name} ${isDeletedItem && 'deleted'}` }, this.itemText(node)))))),
-                items.length ? (React.createElement("div", { style: {
-                        display: open || isTop ? '' : 'none',
-                    } }, items.map((subtree) => (React.createElement(DraggableTree, Object.assign({}, this.props, { key: subtree.node.attrs.id, tree: subtree, view: view, depth: isTop ? depth : depth + 1 })))))) : (''),
-                React.createElement(Outline_1.OutlineDropPreview, { depth: depth, style: this.bottomPreviewStyles(mightDrop, dragPosition) }))));
+            const side = (0, dnd_1.getDropSide)(ref.current, monitor);
+            setDropSide(side);
+        },
+        drop(item, monitor) {
+            if (!ref.current || !view) {
+                return;
+            }
+            const side = (0, dnd_1.getDropSide)(ref.current, monitor);
+            const pos = side === 'before' ? tree.pos - 1 : tree.endPos - 1;
+            let sourcePos = item.pos - 1;
+            const node = item.node.type.schema.nodes[item.node.type.name].create(Object.assign(Object.assign({}, item.node.attrs), { id: '' }), item.node.content);
+            const tr = view.state.tr.insert(pos, node);
+            sourcePos = tr.mapping.map(sourcePos);
+            tr.delete(sourcePos, sourcePos + item.node.nodeSize);
+            view.dispatch(tr);
+        },
+        collect: (monitor) => ({
+            isOver: monitor.isOver({ shallow: true }),
+        }),
+    });
+    const isDeletedItem = (0, track_changes_utils_1.isDeleted)(node);
+    const isRejectedItem = (0, track_changes_utils_1.isRejectedInsert)(node);
+    const isTop = isManuscriptNode(parent);
+    if (isRejectedItem) {
+        return null;
     }
-}
-const dragSource = (0, react_dnd_1.DragSource)('outline', {
-    beginDrag(props) {
-        return {
-            tree: props.tree,
-        };
-    },
-    canDrag(props) {
-        return props.editArticle && !!props.tree.parent;
-    },
-}, (connect, monitor) => ({
-    connectDragSource: connect.dragSource(),
-    connectDragPreview: connect.dragPreview(),
-    isDragging: monitor.isDragging(),
-    canDrag: monitor.canDrag(),
-    item: monitor.getItem(),
-}));
-const dropTarget = (0, react_dnd_1.DropTarget)('outline', {
-    canDrop(props, monitor) {
-        const item = monitor.getItem();
-        if (!props.tree.parent) {
-            return false;
-        }
-        if (item.tree.node.attrs.id === props.tree.node.attrs.id) {
-            return false;
-        }
-        if (item.tree.pos <= props.tree.pos &&
-            item.tree.endPos >= props.tree.endPos) {
+    const handleContextMenu = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (!(can === null || can === void 0 ? void 0 : can.editArticle)) {
             return false;
         }
-        const index = item.position === 'before' ? props.tree.index : props.tree.index + 1;
-        return props.tree.parent.canReplace(index, index, prosemirror_model_1.Fragment.from(item.tree.node));
-    },
-    hover(props, monitor, component) {
-        if (monitor.isOver({ shallow: true })) {
-            const offset = monitor.getClientOffset();
-            if (offset) {
-                const item = monitor.getItem();
-                const node = (0, react_dom_1.findDOMNode)(component);
-                const { bottom, top } = node.getBoundingClientRect();
-                const verticalMiddle = (bottom - top) / 2;
-                const verticalHover = offset.y - top;
-                item.position = verticalHover < verticalMiddle ? 'before' : 'after';
-                component.setState({
-                    dragPosition: item.position,
-                });
-            }
-        }
-    },
-    drop(props, monitor) {
-        var _a;
-        if (monitor.didDrop()) {
-            return;
-        }
-        if (!props.view) {
-            return;
+        if (!view) {
+            return null;
         }
-        const item = monitor.getItem();
-        const source = item.tree;
-        const target = props.tree;
-        const side = item.position;
-        const insertPos = side === 'before'
-            ? target.pos - 1
-            : target.pos + target.node.nodeSize - 1;
-        let sourcePos = source.pos - 1;
-        const newNode = source.node.type.schema.nodes[source.node.type.name].create(Object.assign(Object.assign({}, source.node.attrs), { id: '' }), (_a = source.node) === null || _a === void 0 ? void 0 : _a.content);
-        const tr = props.view.state.tr.insert(insertPos, newNode);
-        sourcePos = tr.mapping.map(sourcePos);
-        tr.delete(sourcePos, sourcePos + source.node.nodeSize);
-        props.view.dispatch(tr);
-    },
-}, (connect, monitor) => ({
-    connectDropTarget: connect.dropTarget(),
-    isOverCurrent: monitor.isOver({ shallow: true }),
-    canDrop: monitor.canDrop(),
-    itemType: monitor.getItemType(),
-}));
-const DraggableTree = dragSource(dropTarget(Tree));
-exports.default = DraggableTree;
+        const menu = new context_menu_1.ContextMenu(tree.node, view, () => tree.pos - 1);
+        menu.showEditMenu(e.currentTarget);
+    };
+    dragRef(dropRef(ref));
+    const dragClass = isDragging ? 'dragging' : '';
+    const dropClass = isOver && dropSide ? `drop-${dropSide}` : '';
+    return (react_1.default.createElement(Outline_1.Outline, { ref: ref, className: `${dragClass} ${dropClass}` },
+        !isTop && (react_1.default.createElement(Outline_1.OutlineItem, { depth: depth, onContextMenu: handleContextMenu },
+            items.length ? (react_1.default.createElement(Outline_1.OutlineItemArrow, { onClick: toggleOpen }, isOpen ? (react_1.default.createElement(Outline_1.StyledTriangleExpanded, null)) : (react_1.default.createElement(Outline_1.StyledTriangleCollapsed, null)))) : (react_1.default.createElement(Outline_1.OutlineItemNoArrow, null)),
+            react_1.default.createElement(Outline_1.OutlineItemLink, { to: `#${node.attrs.id}` },
+                react_1.default.createElement(Outline_1.OutlineItemIcon, null, (0, node_type_icons_1.nodeTypeIcon)(node.type)),
+                react_1.default.createElement(Outline_1.OutlineItemLinkText, { className: `outline-text-${node.type.name} ${isDeletedItem && 'deleted'}` }, itemText(node))))),
+        items.length ? (react_1.default.createElement("div", { className: `subtree ${isOpen ? '' : 'collapsed'}` }, items.map((subtree) => (react_1.default.createElement(exports.DraggableTree, { key: subtree.node.attrs.id, tree: subtree, view: view, depth: !tree.parent ? depth : depth + 1, can: can }))))) : null));
+};
+exports.DraggableTree = DraggableTree;

package/dist/cjs/components/outline/ManuscriptOutline.js

@@ -41,27 +41,24 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ManuscriptOutline = void 0;
 const react_1 = __importStar(require("react"));
 const use_debounce_1 = require("../hooks/use-debounce");
-const DraggableTree_1 = __importStar(require("./DraggableTree"));
+const DraggableTree_1 = require("./DraggableTree");
 const ManuscriptOutline = (props) => {
-    var _a;
     const [values, setValues] = (0, react_1.useState)();
     const debouncedProps = (0, use_debounce_1.useDebounce)(props, 500);
     (0, react_1.useEffect)(() => {
-        var _a;
-        const { doc, view, selected } = debouncedProps;
+        const { doc, view } = debouncedProps;
         if (doc) {
             const tree = (0, DraggableTree_1.buildTree)({
                 node: doc,
                 pos: 0,
                 index: 0,
-                selected,
             });
-            setValues({ tree, view, editArticle: !!((_a = props.capabilities) === null || _a === void 0 ? void 0 : _a.editArticle) });
+            setValues({ tree, view, can: props.can });
         }
         else {
             setValues(undefined);
         }
-    }, [debouncedProps, (_a = props.capabilities) === null || _a === void 0 ? void 0 : _a.editArticle]);
-    return values ? react_1.default.createElement(DraggableTree_1.default, Object.assign({}, values)) : null;
+    }, [debouncedProps, props.can]);
+    return values ? react_1.default.createElement(DraggableTree_1.DraggableTree, Object.assign({}, values, { depth: 0 })) : null;
 };
 exports.ManuscriptOutline = ManuscriptOutline;

package/dist/cjs/components/outline/Outline.js

@@ -18,7 +18,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.OutlineItemPlaceholder = exports.OutlineItemLinkText = exports.OutlineItemLink = exports.OutlineDropPreview = exports.OutlineItemNoArrow = exports.OutlineItemArrow = exports.StyledTriangleExpanded = exports.StyledTriangleCollapsed = exports.Outline = exports.OutlineItem = exports.OutlineItemIcon = void 0;
+exports.OutlineItemPlaceholder = exports.Outline = exports.OutlineItemLinkText = exports.OutlineItemLink = exports.OutlineItemNoArrow = exports.OutlineItemArrow = exports.StyledTriangleExpanded = exports.StyledTriangleCollapsed = exports.OutlineItem = exports.OutlineItemIcon = void 0;
 const TriangleCollapsed_1 = __importDefault(require("@manuscripts/assets/react/TriangleCollapsed"));
 const TriangleExpanded_1 = __importDefault(require("@manuscripts/assets/react/TriangleExpanded"));
 const react_router_dom_1 = require("react-router-dom");
@@ -34,12 +34,6 @@ exports.OutlineItemIcon = styled_components_1.default.span `
 `;
 exports.OutlineItem = styled_components_1.default.div `
   align-items: center;
-  border-bottom: 1px solid transparent;
-  border-top: 1px solid transparent;
-  background: ${(props) => props.isSelected ? props.theme.colors.background.fifth : 'transparent'};
-  border-color: ${(props) => props.isSelected
-    ? props.theme.colors.border.primary
-    : props.theme.colors.background.fifth};
   color: ${(props) => props.theme.colors.text.primary};
   box-sizing: border-box;
   cursor: pointer;
@@ -59,14 +53,6 @@ exports.OutlineItem = styled_components_1.default.div `
     background: ${(props) => props.theme.colors.background.fifth};
   }
 `;
-exports.Outline = styled_components_1.default.div `
-  font-size: ${(props) => props.theme.font.size.medium};
-  position: relative;
-
-  & .outline-text-title {
-    font-size: ${(props) => props.theme.font.size.large};
-  }
-`;
 exports.StyledTriangleCollapsed = (0, styled_components_1.default)(TriangleCollapsed_1.default) ``;
 exports.StyledTriangleExpanded = (0, styled_components_1.default)(TriangleExpanded_1.default) ``;
 exports.OutlineItemArrow = styled_components_1.default.button `
@@ -92,26 +78,6 @@ exports.OutlineItemNoArrow = styled_components_1.default.span `
   width: ${(props) => props.theme.grid.unit * 5}px;
   flex-shrink: 0;
 `;
-exports.OutlineDropPreview = styled_components_1.default.div `
-  width: 100%;
-  background: #65a3ff;
-  height: 1px;
-  position: absolute;
-  margin-left: ${(props) => 30 + props.depth * 20}px;
-  z-index: 2;
-
-  &:before {
-    content: '';
-    display: inline-block;
-    width: ${(props) => props.theme.grid.unit}px;
-    height: ${(props) => props.theme.grid.unit}px;
-    border: 1px solid ${(props) => props.theme.colors.brand.default}
-    border-radius: ${(props) => props.theme.grid.radius.small};
-    position: absolute;
-    top: -${(props) => props.theme.grid.unit}px;
-    left: -6px;
-  }
-`;
 exports.OutlineItemLink = (0, styled_components_1.default)(react_router_dom_1.Link) `
   flex: 1;
   display: inline-flex;
@@ -120,6 +86,8 @@ exports.OutlineItemLink = (0, styled_components_1.default)(react_router_dom_1.Li
   color: inherit;
   text-decoration: none;
   height: 100%;
+  border-bottom: 1px solid transparent;
+  border-top: 1px solid transparent;
 
   &:focus,
   &:active {
@@ -137,4 +105,28 @@ exports.OutlineItemLinkText = styled_components_1.default.span `
     text-decoration: line-through;
   }
 `;
+exports.Outline = styled_components_1.default.div `
+  font-size: ${(props) => props.theme.font.size.medium};
+  position: relative;
+
+  & .outline-text-title {
+    font-size: ${(props) => props.theme.font.size.large};
+  }
+
+  &.dragging {
+    opacity: 0.5;
+  }
+
+  &.drop-before > ${exports.OutlineItem} > ${exports.OutlineItemLink} {
+    border-top-color: ${(props) => props.theme.colors.brand.dark};
+  }
+
+  &.drop-after > ${exports.OutlineItem} > ${exports.OutlineItemLink} {
+    border-bottom-color: ${(props) => props.theme.colors.brand.dark};
+  }
+
+  & .subtree.collapsed {
+    display: none;
+  }
+`;
 exports.OutlineItemPlaceholder = styled_components_1.default.span ``;

package/dist/cjs/components/views/DeleteFootnoteDialog.js

@@ -0,0 +1,45 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DeleteFootnoteDialog = void 0;
+const style_guide_1 = require("@manuscripts/style-guide");
+const react_1 = __importStar(require("react"));
+const DeleteFootnoteDialog = ({ footnoteType, footnoteMessage, handleDelete, }) => {
+    const [isOpen, setOpen] = (0, react_1.useState)(true);
+    return (react_1.default.createElement(style_guide_1.Dialog, { className: "delete-footnote-dialog", isOpen: isOpen, actions: {
+            primary: {
+                action: () => {
+                    setOpen(false);
+                    handleDelete();
+                },
+                title: 'Delete',
+            },
+            secondary: {
+                action: () => setOpen(false),
+                title: 'Cancel',
+            },
+        }, category: style_guide_1.Category.confirmation, header: `Delete ${footnoteType}`, message: `${footnoteMessage}` }));
+};
+exports.DeleteFootnoteDialog = DeleteFootnoteDialog;

package/dist/cjs/configs/editor-plugins.js

@@ -69,7 +69,7 @@ exports.default = (props) => {
         (0, prosemirror_tables_1.tableEditing)(),
         (0, highlight_1.default)(props),
         (0, selected_suggestion_ui_1.default)(props),
-        (0, footnotes_1.default)(),
+        (0, footnotes_1.default)(props),
         (0, table_footnote_1.default)(),
     ];
     if (props.collabProvider) {