@manuscripts/body-editor 1.7.28 → 1.7.29

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

@@ -20,6 +20,7 @@ import React, { useRef, useState } from 'react';
 import { useDrag, useDrop } from 'react-dnd';
 import styled from 'styled-components';
 import { authorLabel } from '../../lib/authors';
+import { getDropSide } from '../../lib/dnd';
 const AuthorContainer = styled.div `
   padding: ${(props) => props.theme.grid.unit * 2}px;
   display: flex;
@@ -78,26 +79,12 @@ const AuthorName = styled.div `
 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 [dropSide, setDropSide] = useState();
     const ref = useRef(null);
     const [{ isDragging }, dragRef] = useDrag({
+        type: 'author',
         item: {
-            type: 'author',
             author,
         },
         collect: (monitor) => ({
@@ -106,29 +93,30 @@ export const DraggableAuthor = ({ author, isSelected, onClick, moveAuthor, }) =>
     });
     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);
+            const side = getDropSide(ref.current, monitor);
+            setDropSide(side);
         },
         drop: (item, monitor) => {
             if (!ref.current) {
                 return;
             }
-            const position = getDropPosition(ref.current, monitor);
+            const side = 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.createElement(AuthorContainer, { ref: ref, className: `${dragClass} ${dropClass} ${activeClass}`, onClick: onClick },
         React.createElement(AvatarContainer, null,

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

@@ -1,12 +1,12 @@
 import { isElementNodeType, nodeTitle, nodeTitlePlaceholder, schema, } from '@manuscripts/transform';
 import { Fragment } from 'prosemirror-model';
-import * as React from 'react';
-import { DragSource, DropTarget, } from 'react-dnd';
-import { findDOMNode } from 'react-dom';
+import React, { useRef, useState } from 'react';
+import { useDrag, useDrop } from 'react-dnd';
 import { ContextMenu } from '../../lib/context-menu';
+import { getDropSide } from '../../lib/dnd';
 import { isDeleted, isRejectedInsert } from '../../lib/track-changes-utils';
 import { nodeTypeIcon } from '../../node-type-icons';
-import { Outline, OutlineDropPreview, OutlineItem, OutlineItemArrow, OutlineItemIcon, OutlineItemLink, OutlineItemLinkText, OutlineItemNoArrow, OutlineItemPlaceholder, StyledTriangleCollapsed, StyledTriangleExpanded, } from './Outline';
+import { Outline, OutlineItem, OutlineItemArrow, OutlineItemIcon, OutlineItemLink, OutlineItemLinkText, OutlineItemNoArrow, OutlineItemPlaceholder, StyledTriangleCollapsed, StyledTriangleExpanded, } from './Outline';
 const excludedTypes = [
     schema.nodes.table,
     schema.nodes.figure,
@@ -30,11 +30,10 @@ const isChildrenExcluded = (nodeType) => {
 const isManuscriptNode = (node) => {
     return (node === null || node === void 0 ? void 0 : node.type) === schema.nodes.manuscript;
 };
-export const buildTree = ({ node, pos, index, selected, parent, }) => {
+export 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)) {
@@ -47,171 +46,108 @@ export 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 };
 };
-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 = nodeTitle(node);
-            if (text) {
-                return text.trim();
+export const DraggableTree = ({ tree, view, depth, can, }) => {
+    const [dropSide, setDropSide] = useState();
+    const [isOpen, setOpen] = useState(depth === 0);
+    const ref = useRef(null);
+    const { node, items, parent } = tree;
+    const itemText = (node) => {
+        const text = nodeTitle(node);
+        if (text) {
+            return text.trim();
+        }
+        const placeholder = nodeTitlePlaceholder(node.type);
+        return React.createElement(OutlineItemPlaceholder, null, placeholder);
+    };
+    const toggleOpen = () => {
+        setOpen(!isOpen);
+    };
+    const [{ isDragging }, dragRef] = useDrag({
+        type: 'outline',
+        item: tree,
+        canDrag: () => {
+            return depth !== 0;
+        },
+        collect: (monitor) => ({
+            isDragging: monitor.isDragging(),
+        }),
+    });
+    const [{ isOver }, dropRef] = useDrop({
+        accept: 'outline',
+        canDrop(item, monitor) {
+            if (!ref.current) {
+                return false;
             }
-            const placeholder = nodeTitlePlaceholder(node.type);
-            return React.createElement(OutlineItemPlaceholder, null, placeholder);
-        };
-        this.handleContextMenu = (event) => {
-            event.preventDefault();
-            event.stopPropagation();
-            if (!this.props.editArticle) {
+            if (!tree.parent) {
                 return false;
             }
-            const menu = this.createMenu();
-            if (!menu) {
+            if (item.node.attrs.id === tree.node.attrs.id) {
                 return false;
             }
-            menu.showEditMenu(event.currentTarget);
-        };
-        this.createMenu = () => {
-            const { tree, view } = this.props;
-            if (!view) {
-                return null;
+            if (item.pos <= tree.pos && item.endPos >= tree.endPos) {
+                return false;
             }
-            return new 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 = isDeleted(node);
-        const isRejectedItem = isRejectedInsert(node);
-        const mightDrop = item && isOverCurrent && canDrop;
-        const isTop = isManuscriptNode(parent);
-        if (isRejectedItem) {
-            return null;
-        }
-        return connectDropTarget(React.createElement("div", null,
-            React.createElement(Outline, { style: this.outlineStyles(isDragging) },
-                React.createElement(OutlineDropPreview, { depth: depth, style: this.topPreviewStyles(mightDrop, dragPosition) }),
-                !isTop &&
-                    connectDragSource(React.createElement("div", null,
-                        React.createElement(OutlineItem, { isSelected: isSelected, depth: depth, onContextMenu: this.handleContextMenu },
-                            items.length ? (React.createElement(OutlineItemArrow, { onClick: this.toggle }, open ? (React.createElement(StyledTriangleExpanded, null)) : (React.createElement(StyledTriangleCollapsed, null)))) : (React.createElement(OutlineItemNoArrow, null)),
-                            React.createElement(OutlineItemLink, { to: `#${node.attrs.id || ''}` },
-                                connectDragPreview(React.createElement("span", { style: {
-                                        display: 'inline-flex',
-                                        alignItems: 'center',
-                                    } },
-                                    React.createElement(OutlineItemIcon, null, nodeTypeIcon(node.type)))),
-                                React.createElement(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(OutlineDropPreview, { depth: depth, style: this.bottomPreviewStyles(mightDrop, dragPosition) }))));
+            const side = getDropSide(ref.current, monitor);
+            const index = side === 'before' ? tree.index : tree.index + 1;
+            return tree.parent.canReplace(index, index, Fragment.from(item.node));
+        },
+        hover(item, monitor) {
+            if (!ref.current || !monitor.canDrop()) {
+                return;
+            }
+            const side = getDropSide(ref.current, monitor);
+            setDropSide(side);
+        },
+        drop(item, monitor) {
+            if (!ref.current || !view) {
+                return;
+            }
+            const side = 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 = isDeleted(node);
+    const isRejectedItem = isRejectedInsert(node);
+    const isTop = isManuscriptNode(parent);
+    if (isRejectedItem) {
+        return null;
     }
-}
-const dragSource = 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 = 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, 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 = 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));
-export default DraggableTree;
+        const menu = new 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.createElement(Outline, { ref: ref, className: `${dragClass} ${dropClass}` },
+        !isTop && (React.createElement(OutlineItem, { depth: depth, onContextMenu: handleContextMenu },
+            items.length ? (React.createElement(OutlineItemArrow, { onClick: toggleOpen }, isOpen ? (React.createElement(StyledTriangleExpanded, null)) : (React.createElement(StyledTriangleCollapsed, null)))) : (React.createElement(OutlineItemNoArrow, null)),
+            React.createElement(OutlineItemLink, { to: `#${node.attrs.id}` },
+                React.createElement(OutlineItemIcon, null, nodeTypeIcon(node.type)),
+                React.createElement(OutlineItemLinkText, { className: `outline-text-${node.type.name} ${isDeletedItem && 'deleted'}` }, itemText(node))))),
+        items.length ? (React.createElement("div", { className: `subtree ${isOpen ? '' : 'collapsed'}` }, items.map((subtree) => (React.createElement(DraggableTree, { key: subtree.node.attrs.id, tree: subtree, view: view, depth: !tree.parent ? depth : depth + 1, can: can }))))) : null));
+};

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

@@ -15,26 +15,23 @@
  */
 import React, { useEffect, useState } from 'react';
 import { useDebounce } from '../hooks/use-debounce';
-import DraggableTree, { buildTree } from './DraggableTree';
+import { buildTree, DraggableTree } from './DraggableTree';
 export const ManuscriptOutline = (props) => {
-    var _a;
     const [values, setValues] = useState();
     const debouncedProps = useDebounce(props, 500);
     useEffect(() => {
-        var _a;
-        const { doc, view, selected } = debouncedProps;
+        const { doc, view } = debouncedProps;
         if (doc) {
             const tree = 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.createElement(DraggableTree, Object.assign({}, values)) : null;
+    }, [debouncedProps, props.can]);
+    return values ? React.createElement(DraggableTree, Object.assign({}, values, { depth: 0 })) : null;
 };

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

@@ -28,12 +28,6 @@ export const OutlineItemIcon = styled.span `
 `;
 export const OutlineItem = styled.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;
@@ -53,14 +47,6 @@ export const OutlineItem = styled.div `
     background: ${(props) => props.theme.colors.background.fifth};
   }
 `;
-export const Outline = styled.div `
-  font-size: ${(props) => props.theme.font.size.medium};
-  position: relative;
-
-  & .outline-text-title {
-    font-size: ${(props) => props.theme.font.size.large};
-  }
-`;
 export const StyledTriangleCollapsed = styled(TriangleCollapsed) ``;
 export const StyledTriangleExpanded = styled(TriangleExpanded) ``;
 export const OutlineItemArrow = styled.button `
@@ -86,26 +72,6 @@ export const OutlineItemNoArrow = styled.span `
   width: ${(props) => props.theme.grid.unit * 5}px;
   flex-shrink: 0;
 `;
-export const OutlineDropPreview = styled.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;
-  }
-`;
 export const OutlineItemLink = styled(Link) `
   flex: 1;
   display: inline-flex;
@@ -114,6 +80,8 @@ export const OutlineItemLink = styled(Link) `
   color: inherit;
   text-decoration: none;
   height: 100%;
+  border-bottom: 1px solid transparent;
+  border-top: 1px solid transparent;
 
   &:focus,
   &:active {
@@ -131,4 +99,28 @@ export const OutlineItemLinkText = styled.span `
     text-decoration: line-through;
   }
 `;
+export const Outline = styled.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 > ${OutlineItem} > ${OutlineItemLink} {
+    border-top-color: ${(props) => props.theme.colors.brand.dark};
+  }
+
+  &.drop-after > ${OutlineItem} > ${OutlineItemLink} {
+    border-bottom-color: ${(props) => props.theme.colors.brand.dark};
+  }
+
+  & .subtree.collapsed {
+    display: none;
+  }
+`;
 export const OutlineItemPlaceholder = styled.span ``;

package/dist/es/index.js

@@ -17,7 +17,6 @@ export * from './citation-sources';
 export * from './commands';
 export { ManuscriptOutline } from './components/outline/ManuscriptOutline';
 export { OutlineItemIcon } from './components/outline/Outline';
-export { OutlineManuscript } from './components/outline/OutlineManuscript';
 export { LevelSelector } from './components/toolbar/LevelSelector';
 export * from './menus';
 export { CollabProvider } from './classes/collabProvider';

package/dist/es/lib/dnd.js

@@ -0,0 +1,6 @@
+export const getDropSide = (element, monitor) => {
+    const rect = element.getBoundingClientRect();
+    const middle = (rect.bottom - rect.top) / 2;
+    const offset = monitor.getClientOffset();
+    return offset.y > middle + rect.top ? 'after' : 'before';
+};

package/dist/types/components/outline/DraggableTree.d.ts

@@ -1,63 +1,27 @@
-import { ManuscriptEditorView, ManuscriptNode, Selected } from '@manuscripts/transform';
-import * as React from 'react';
-import { ConnectDragPreview, ConnectDragSource, ConnectDropTarget } from 'react-dnd';
-export type DropSide = 'before' | 'after' | null;
-interface DragSourceProps {
-    tree: TreeItem;
-    position: DropSide;
-}
-interface ConnectedDragSourceProps {
-    connectDragSource: ConnectDragSource;
-    connectDragPreview: ConnectDragPreview;
-    isDragging: boolean;
-    canDrag: boolean;
-    item: DragSourceProps;
-}
-interface ConnectedDropTargetProps {
-    connectDropTarget: ConnectDropTarget;
-    isOverCurrent: boolean;
-    canDrop: boolean;
-    itemType: string | symbol | null;
-}
-type ConnectedProps = ConnectedDragSourceProps & ConnectedDropTargetProps;
+import { Capabilities } from '@manuscripts/style-guide';
+import { ManuscriptEditorView, ManuscriptNode } from '@manuscripts/transform';
+import React from 'react';
 export interface TreeItem {
     index: number;
-    isSelected: boolean;
     items: TreeItem[];
     node: ManuscriptNode;
     pos: number;
     endPos: number;
     parent?: ManuscriptNode;
 }
-interface Props {
-    depth?: number;
-    tree: TreeItem;
-    view?: ManuscriptEditorView;
-    editArticle: boolean;
-}
-interface State {
-    open: boolean;
-    dragPosition: DropSide;
-}
 interface TreeBuilderOptions {
     node: ManuscriptNode;
     pos: number;
     index: number;
-    selected: Selected | null;
     parent?: ManuscriptNode;
 }
 type TreeBuilder = (options: TreeBuilderOptions) => TreeItem;
 export declare const buildTree: TreeBuilder;
-declare class Tree extends React.Component<Props & ConnectedProps, State> {
-    constructor(props: Props & ConnectedProps);
-    render(): React.ReactNode;
-    private outlineStyles;
-    private bottomPreviewStyles;
-    private topPreviewStyles;
-    private toggle;
-    private itemText;
-    private handleContextMenu;
-    private createMenu;
+export interface DraggableTreeProps {
+    depth: number;
+    tree: TreeItem;
+    view?: ManuscriptEditorView;
+    can?: Capabilities;
 }
-declare const DraggableTree: import("react-dnd").DndComponentClass<import("react-dnd").DndComponentClass<typeof Tree, import("react-dnd").Omit<Props & ConnectedDragSourceProps & ConnectedDropTargetProps, "itemType" | "connectDropTarget" | "isOverCurrent" | "canDrop">>, import("react-dnd").Omit<import("react-dnd").Omit<Props & ConnectedDragSourceProps & ConnectedDropTargetProps, "itemType" | "connectDropTarget" | "isOverCurrent" | "canDrop">, "item" | "isDragging" | "connectDragSource" | "connectDragPreview" | "canDrag">>;
-export default DraggableTree;
+export declare const DraggableTree: React.FC<DraggableTreeProps>;
+export {};

package/dist/types/components/outline/ManuscriptOutline.d.ts

@@ -15,14 +15,12 @@
  */
 import { Manuscript } from '@manuscripts/json-schema';
 import { Capabilities } from '@manuscripts/style-guide';
-import { ManuscriptEditorView, ManuscriptNode, Selected } from '@manuscripts/transform';
+import { ManuscriptEditorView, ManuscriptNode } from '@manuscripts/transform';
 import React from 'react';
-interface Props {
+export interface ManuscriptOutlineProps {
     manuscript: Manuscript;
-    selected: Selected | null;
     doc: ManuscriptNode | null;
-    capabilities?: Capabilities;
+    can?: Capabilities;
     view?: ManuscriptEditorView;
 }
-export declare const ManuscriptOutline: React.FunctionComponent<Props>;
-export {};
+export declare const ManuscriptOutline: React.FC<ManuscriptOutlineProps>;

package/dist/types/components/outline/Outline.d.ts

@@ -17,17 +17,13 @@
 import { Link } from 'react-router-dom';
 export declare const OutlineItemIcon: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const OutlineItem: import("styled-components").StyledComponent<"div", any, {
-    isSelected: boolean;
     depth: number;
 }, never>;
-export declare const Outline: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledTriangleCollapsed: import("styled-components").StyledComponent<import("react").SFC<import("react").SVGAttributes<SVGElement>>, any, {}, never>;
 export declare const StyledTriangleExpanded: import("styled-components").StyledComponent<import("react").SFC<import("react").SVGAttributes<SVGElement>>, any, {}, never>;
 export declare const OutlineItemArrow: import("styled-components").StyledComponent<"button", any, {}, never>;
 export declare const OutlineItemNoArrow: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const OutlineDropPreview: import("styled-components").StyledComponent<"div", any, {
-    depth: number;
-}, never>;
 export declare const OutlineItemLink: import("styled-components").StyledComponent<typeof Link, any, {}, never>;
 export declare const OutlineItemLinkText: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const Outline: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const OutlineItemPlaceholder: import("styled-components").StyledComponent<"span", any, {}, never>;

package/dist/types/index.d.ts

@@ -17,7 +17,6 @@ export * from './citation-sources';
 export * from './commands';
 export { ManuscriptOutline } from './components/outline/ManuscriptOutline';
 export { OutlineItemIcon } from './components/outline/Outline';
-export { OutlineManuscript } from './components/outline/OutlineManuscript';
 export { LevelSelector } from './components/toolbar/LevelSelector';
 export * from './menus';
 export { ChangeReceiver } from './types';

package/dist/types/lib/dnd.d.ts

@@ -0,0 +1,3 @@
+import { DropTargetMonitor } from 'react-dnd';
+export type DropSide = 'before' | 'after';
+export declare const getDropSide: (element: Element, monitor: DropTargetMonitor) => "after" | "before";