@manuscripts/body-editor 3.7.26 → 3.7.27

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

@@ -63,7 +63,7 @@ const excludedTypes = [
     transform_1.schema.nodes.trans_abstract,
     transform_1.schema.nodes.subtitles,
     transform_1.schema.nodes.subtitle,
-    transform_1.schema.nodes.supplements,
+    transform_1.schema.nodes.supplement,
 ];
 const childrenExcludedTypes = [
     transform_1.schema.nodes.pullquote_element,
@@ -83,6 +83,17 @@ const isAbstractOrBackmatter = (item) => {
 const isManuscriptNode = (node) => {
     return node?.type === transform_1.schema.nodes.manuscript;
 };
+const isPdfFile = (file) => {
+    if (!file?.name) {
+        return false;
+    }
+    const name = file.name.toLowerCase();
+    return name.endsWith('.pdf');
+};
+const getEditorFiles = (view) => {
+    const props = view?.props;
+    return props?.getFiles?.();
+};
 const buildTree = ({ node, pos, index, parent, }) => {
     const items = [];
     const startPos = pos + 1;
@@ -108,7 +119,7 @@ const buildTree = ({ node, pos, index, parent, }) => {
     return { node, index, items, pos, endPos, parent };
 };
 exports.buildTree = buildTree;
-const DraggableTree = ({ tree, view, depth, can, }) => {
+const DraggableTree = ({ tree, view, depth, can, getFiles, }) => {
     const [dropSide, setDropSide] = (0, react_1.useState)();
     const [isOpen, setOpen] = (0, react_1.useState)(depth === 0);
     const ref = (0, react_1.useRef)(null);
@@ -202,7 +213,35 @@ const DraggableTree = ({ tree, view, depth, can, }) => {
     });
     const isDeletedItem = (0, track_changes_utils_1.isDeleted)(node);
     const isHeroImage = (0, transform_1.isHeroImageNode)(node);
-    const isTop = isManuscriptNode(parent) && !isHeroImage;
+    const isSupplements = (0, transform_1.isSupplementsNode)(node);
+    const isMainDocument = (0, transform_1.isAttachmentsNode)(node);
+    const editorFiles = isMainDocument
+        ? (getFiles?.() ?? getEditorFiles(view))
+        : undefined;
+    const isTop = isManuscriptNode(parent) &&
+        !isHeroImage &&
+        !isSupplements &&
+        !isMainDocument;
+    if (isMainDocument && node.childCount === 0) {
+        return null;
+    }
+    if (isMainDocument) {
+        const attachmentIds = new Set();
+        node.forEach((childNode) => {
+            const href = childNode.attrs?.href;
+            if (href) {
+                attachmentIds.add(href.replace(/^attachment:/, ''));
+            }
+        });
+        const mainDocumentFile = editorFiles?.find((file) => {
+            const fileId = file.id?.replace(/^attachment:/, '');
+            return !!fileId && attachmentIds.has(fileId);
+        }) ?? editorFiles?.find((file) => isPdfFile(file));
+        const isMainDocumentPDF = isPdfFile(mainDocumentFile);
+        if (!isMainDocumentPDF) {
+            return null;
+        }
+    }
     const handleContextMenu = (e) => {
         e.preventDefault();
         e.stopPropagation();
@@ -231,16 +270,23 @@ const DraggableTree = ({ tree, view, depth, can, }) => {
         }
     };
     dragRef(dropRef(ref));
-    const dragClass = isDragging ? 'dragging' : '';
-    const dropClass = isOver && dropSide ? `drop-${dropSide}` : '';
-    const deletedClass = isDeletedItem ? 'deleted' : '';
-    const heroImageClass = isHeroImage ? 'hero-image' : '';
-    return (react_1.default.createElement(Outline_1.Outline, { ref: ref, className: `${dragClass} ${dropClass} ${deletedClass} ${heroImageClass}` },
-        !isTop && node.type.name != 'manuscript' && (react_1.default.createElement(Outline_1.OutlineItem, { depth: isHeroImage ? 1 : depth, onContextMenu: handleContextMenu, onKeyDown: handleKeyDown, tabIndex: -1, "data-outline-item": true },
+    const classNames = [
+        isDragging && 'dragging',
+        isOver && dropSide && `drop-${dropSide}`,
+        isDeletedItem && 'deleted',
+        isHeroImage && 'hero-image',
+        isSupplements && 'supplements',
+        (0, transform_1.isBibliographySectionNode)(node) && 'references',
+        isMainDocument && 'main-document',
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return (react_1.default.createElement(Outline_1.Outline, { ref: ref, className: classNames },
+        !isTop && node.type.name != 'manuscript' && (react_1.default.createElement(Outline_1.OutlineItem, { depth: isHeroImage || isSupplements || isMainDocument ? 1 : depth, onContextMenu: handleContextMenu, onKeyDown: handleKeyDown, tabIndex: -1, "data-outline-item": true },
             items.length ? (react_1.default.createElement(Outline_1.OutlineItemArrow, { "aria-label": `${isOpen ? 'Collapse' : 'Expand'} ${node.type.name}`, onClick: toggleOpen, tabIndex: -1 }, isOpen ? react_1.default.createElement(style_guide_1.TriangleExpandedIcon, null) : react_1.default.createElement(style_guide_1.TriangleCollapsedIcon, null))) : (react_1.default.createElement(Outline_1.OutlineItemNoArrow, null)),
             react_1.default.createElement(Outline_1.OutlineItemLink, { to: `#${node.attrs.id}`, tabIndex: -1 },
                 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}` }, itemText(node))))),
-        items.length ? (react_1.default.createElement("div", { className: `subtree ${isOpen ? '' : 'collapsed'}` }, items.map((subtree, index) => (react_1.default.createElement(exports.DraggableTree, { key: subtree.node.attrs.id || 'subtree-' + index, tree: subtree, view: view, depth: !tree.parent ? depth : depth + 1, can: can }))))) : null));
+        items.length ? (react_1.default.createElement("div", { className: `subtree ${isOpen ? '' : 'collapsed'}` }, items.map((subtree, index) => (react_1.default.createElement(exports.DraggableTree, { key: subtree.node.attrs.id || 'subtree-' + index, tree: subtree, view: view, depth: !tree.parent ? depth : depth + 1, can: can, getFiles: getFiles }))))) : null));
 };
 exports.DraggableTree = DraggableTree;

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

@@ -64,12 +64,12 @@ const ManuscriptOutline = (props) => {
                 pos: 0,
                 index: 0,
             });
-            setValues({ tree, view, can: props.can });
+            setValues({ tree, view, can: props.can, getFiles: props.getFiles });
         }
         else {
             setValues(undefined);
         }
-    }, [debouncedProps, props.can]);
+    }, [debouncedProps, props.can, props.getFiles]);
     const getOutlineItems = (0, react_1.useCallback)(() => {
         if (!containerRef.current)
             return [];

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

@@ -126,10 +126,10 @@ exports.Outline = styled_components_1.default.div `
     display: none;
   }
 
-  & .hero-image {
-    margin-top: 1rem;
-    padding-top: 0.5rem;
-    border-top: 1px dashed #ddd;
+  & div:has(.supplements, .hero-image, .main-document) .references {
+    margin-bottom: 5px;
+    padding-bottom: 5px;
+    border-bottom: 1px dashed #ddd;
   }
 `;
 exports.OutlineItemPlaceholder = styled_components_1.default.span ``;

package/dist/cjs/node-type-icons.js

@@ -24,6 +24,8 @@ const transform_1 = require("@manuscripts/transform");
 const react_1 = __importDefault(require("react"));
 const { nodes } = transform_1.schema;
 const OutlineImageIcon = () => (react_1.default.createElement(style_guide_1.FileImageIcon, { width: "11", height: "14" }));
+const OutlineSupplementsIcon = () => (react_1.default.createElement(style_guide_1.SupplementsIcon, { width: "11", height: "14" }));
+const OutlineMainDocumentIcon = () => (react_1.default.createElement(style_guide_1.FileDocumentIcon, { width: "11", height: "14" }));
 const icons = new Map([
     [nodes.manuscript, style_guide_1.OutlineManuscriptIcon],
     [nodes.bibliography_section, style_guide_1.OutlineSectionIcon],
@@ -39,6 +41,8 @@ const icons = new Map([
     [nodes.footnotes_section, style_guide_1.OutlineSectionIcon],
     [nodes.image_element, OutlineImageIcon],
     [nodes.hero_image, OutlineImageIcon],
+    [nodes.supplements, OutlineSupplementsIcon],
+    [nodes.attachments, OutlineMainDocumentIcon],
 ]);
 const nodeTypeIcon = (nodeType, listType) => {
     if (nodeType === transform_1.schema.nodes.list) {

package/dist/cjs/versions.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MATHJAX_VERSION = exports.VERSION = void 0;
-exports.VERSION = '3.7.26';
+exports.VERSION = '3.7.27';
 exports.MATHJAX_VERSION = '3.2.2';

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

@@ -1,5 +1,5 @@
 import { TriangleCollapsedIcon, TriangleExpandedIcon, } from '@manuscripts/style-guide';
-import { isElementNodeType, isHeroImageNode, nodeTitle, nodeTitlePlaceholder, schema, } from '@manuscripts/transform';
+import { isAttachmentsNode, isBibliographySectionNode, isSupplementsNode, isElementNodeType, isHeroImageNode, nodeTitle, nodeTitlePlaceholder, schema, } from '@manuscripts/transform';
 import { Fragment } from 'prosemirror-model';
 import React, { useRef, useState } from 'react';
 import { useDrag, useDrop } from 'react-dnd';
@@ -27,7 +27,7 @@ const excludedTypes = [
     schema.nodes.trans_abstract,
     schema.nodes.subtitles,
     schema.nodes.subtitle,
-    schema.nodes.supplements,
+    schema.nodes.supplement,
 ];
 const childrenExcludedTypes = [
     schema.nodes.pullquote_element,
@@ -47,6 +47,17 @@ const isAbstractOrBackmatter = (item) => {
 const isManuscriptNode = (node) => {
     return node?.type === schema.nodes.manuscript;
 };
+const isPdfFile = (file) => {
+    if (!file?.name) {
+        return false;
+    }
+    const name = file.name.toLowerCase();
+    return name.endsWith('.pdf');
+};
+const getEditorFiles = (view) => {
+    const props = view?.props;
+    return props?.getFiles?.();
+};
 export const buildTree = ({ node, pos, index, parent, }) => {
     const items = [];
     const startPos = pos + 1;
@@ -71,7 +82,7 @@ export const buildTree = ({ node, pos, index, parent, }) => {
     }
     return { node, index, items, pos, endPos, parent };
 };
-export const DraggableTree = ({ tree, view, depth, can, }) => {
+export const DraggableTree = ({ tree, view, depth, can, getFiles, }) => {
     const [dropSide, setDropSide] = useState();
     const [isOpen, setOpen] = useState(depth === 0);
     const ref = useRef(null);
@@ -165,7 +176,35 @@ export const DraggableTree = ({ tree, view, depth, can, }) => {
     });
     const isDeletedItem = isDeleted(node);
     const isHeroImage = isHeroImageNode(node);
-    const isTop = isManuscriptNode(parent) && !isHeroImage;
+    const isSupplements = isSupplementsNode(node);
+    const isMainDocument = isAttachmentsNode(node);
+    const editorFiles = isMainDocument
+        ? (getFiles?.() ?? getEditorFiles(view))
+        : undefined;
+    const isTop = isManuscriptNode(parent) &&
+        !isHeroImage &&
+        !isSupplements &&
+        !isMainDocument;
+    if (isMainDocument && node.childCount === 0) {
+        return null;
+    }
+    if (isMainDocument) {
+        const attachmentIds = new Set();
+        node.forEach((childNode) => {
+            const href = childNode.attrs?.href;
+            if (href) {
+                attachmentIds.add(href.replace(/^attachment:/, ''));
+            }
+        });
+        const mainDocumentFile = editorFiles?.find((file) => {
+            const fileId = file.id?.replace(/^attachment:/, '');
+            return !!fileId && attachmentIds.has(fileId);
+        }) ?? editorFiles?.find((file) => isPdfFile(file));
+        const isMainDocumentPDF = isPdfFile(mainDocumentFile);
+        if (!isMainDocumentPDF) {
+            return null;
+        }
+    }
     const handleContextMenu = (e) => {
         e.preventDefault();
         e.stopPropagation();
@@ -194,15 +233,22 @@ export const DraggableTree = ({ tree, view, depth, can, }) => {
         }
     };
     dragRef(dropRef(ref));
-    const dragClass = isDragging ? 'dragging' : '';
-    const dropClass = isOver && dropSide ? `drop-${dropSide}` : '';
-    const deletedClass = isDeletedItem ? 'deleted' : '';
-    const heroImageClass = isHeroImage ? 'hero-image' : '';
-    return (React.createElement(Outline, { ref: ref, className: `${dragClass} ${dropClass} ${deletedClass} ${heroImageClass}` },
-        !isTop && node.type.name != 'manuscript' && (React.createElement(OutlineItem, { depth: isHeroImage ? 1 : depth, onContextMenu: handleContextMenu, onKeyDown: handleKeyDown, tabIndex: -1, "data-outline-item": true },
+    const classNames = [
+        isDragging && 'dragging',
+        isOver && dropSide && `drop-${dropSide}`,
+        isDeletedItem && 'deleted',
+        isHeroImage && 'hero-image',
+        isSupplements && 'supplements',
+        isBibliographySectionNode(node) && 'references',
+        isMainDocument && 'main-document',
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return (React.createElement(Outline, { ref: ref, className: classNames },
+        !isTop && node.type.name != 'manuscript' && (React.createElement(OutlineItem, { depth: isHeroImage || isSupplements || isMainDocument ? 1 : depth, onContextMenu: handleContextMenu, onKeyDown: handleKeyDown, tabIndex: -1, "data-outline-item": true },
             items.length ? (React.createElement(OutlineItemArrow, { "aria-label": `${isOpen ? 'Collapse' : 'Expand'} ${node.type.name}`, onClick: toggleOpen, tabIndex: -1 }, isOpen ? React.createElement(TriangleExpandedIcon, null) : React.createElement(TriangleCollapsedIcon, null))) : (React.createElement(OutlineItemNoArrow, null)),
             React.createElement(OutlineItemLink, { to: `#${node.attrs.id}`, tabIndex: -1 },
                 React.createElement(OutlineItemIcon, null, nodeTypeIcon(node.type)),
                 React.createElement(OutlineItemLinkText, { className: `outline-text-${node.type.name}` }, itemText(node))))),
-        items.length ? (React.createElement("div", { className: `subtree ${isOpen ? '' : 'collapsed'}` }, items.map((subtree, index) => (React.createElement(DraggableTree, { key: subtree.node.attrs.id || 'subtree-' + index, tree: subtree, view: view, depth: !tree.parent ? depth : depth + 1, can: can }))))) : null));
+        items.length ? (React.createElement("div", { className: `subtree ${isOpen ? '' : 'collapsed'}` }, items.map((subtree, index) => (React.createElement(DraggableTree, { key: subtree.node.attrs.id || 'subtree-' + index, tree: subtree, view: view, depth: !tree.parent ? depth : depth + 1, can: can, getFiles: getFiles }))))) : null));
 };

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

@@ -28,12 +28,12 @@ export const ManuscriptOutline = (props) => {
                 pos: 0,
                 index: 0,
             });
-            setValues({ tree, view, can: props.can });
+            setValues({ tree, view, can: props.can, getFiles: props.getFiles });
         }
         else {
             setValues(undefined);
         }
-    }, [debouncedProps, props.can]);
+    }, [debouncedProps, props.can, props.getFiles]);
     const getOutlineItems = useCallback(() => {
         if (!containerRef.current)
             return [];

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

@@ -120,10 +120,10 @@ export const Outline = styled.div `
     display: none;
   }
 
-  & .hero-image {
-    margin-top: 1rem;
-    padding-top: 0.5rem;
-    border-top: 1px dashed #ddd;
+  & div:has(.supplements, .hero-image, .main-document) .references {
+    margin-bottom: 5px;
+    padding-bottom: 5px;
+    border-bottom: 1px dashed #ddd;
   }
 `;
 export const OutlineItemPlaceholder = styled.span ``;

package/dist/es/node-type-icons.js

@@ -13,11 +13,13 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { FileImageIcon, OutlineBlockQuoteIcon, OutlineEmbedIcon, OutlineEquationIcon, OutlineFigureIcon, OutlineManuscriptIcon, OutlineOrderedListIcon, OutlineParagraphIcon, OutlinePullQuoteIcon, OutlineSectionIcon, OutlineTableIcon, OutlineUnorderedListIcon, } from '@manuscripts/style-guide';
+import { FileDocumentIcon, SupplementsIcon, FileImageIcon, OutlineBlockQuoteIcon, OutlineEmbedIcon, OutlineEquationIcon, OutlineFigureIcon, OutlineManuscriptIcon, OutlineOrderedListIcon, OutlineParagraphIcon, OutlinePullQuoteIcon, OutlineSectionIcon, OutlineTableIcon, OutlineUnorderedListIcon, } from '@manuscripts/style-guide';
 import { schema } from '@manuscripts/transform';
 import React from 'react';
 const { nodes } = schema;
 const OutlineImageIcon = () => (React.createElement(FileImageIcon, { width: "11", height: "14" }));
+const OutlineSupplementsIcon = () => (React.createElement(SupplementsIcon, { width: "11", height: "14" }));
+const OutlineMainDocumentIcon = () => (React.createElement(FileDocumentIcon, { width: "11", height: "14" }));
 const icons = new Map([
     [nodes.manuscript, OutlineManuscriptIcon],
     [nodes.bibliography_section, OutlineSectionIcon],
@@ -33,6 +35,8 @@ const icons = new Map([
     [nodes.footnotes_section, OutlineSectionIcon],
     [nodes.image_element, OutlineImageIcon],
     [nodes.hero_image, OutlineImageIcon],
+    [nodes.supplements, OutlineSupplementsIcon],
+    [nodes.attachments, OutlineMainDocumentIcon],
 ]);
 export const nodeTypeIcon = (nodeType, listType) => {
     if (nodeType === schema.nodes.list) {

package/dist/es/versions.js

@@ -1,2 +1,2 @@
-export const VERSION = '3.7.26';
+export const VERSION = '3.7.27';
 export const MATHJAX_VERSION = '3.2.2';

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

@@ -1,6 +1,7 @@
 import { ManuscriptEditorView, ManuscriptNode } from '@manuscripts/transform';
 import React from 'react';
 import { Capabilities } from '../../lib/capabilities';
+import { FileAttachment } from '../../lib/files';
 export interface TreeItem {
     index: number;
     items: TreeItem[];
@@ -22,6 +23,7 @@ export interface DraggableTreeProps {
     tree: TreeItem;
     view?: ManuscriptEditorView;
     can?: Capabilities;
+    getFiles?: () => FileAttachment[];
 }
 export declare const DraggableTree: React.FC<DraggableTreeProps>;
 export {};

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

@@ -16,9 +16,11 @@
 import { ManuscriptEditorView, ManuscriptNode } from '@manuscripts/transform';
 import React from 'react';
 import { Capabilities } from '../../lib/capabilities';
+import { FileAttachment } from '../../lib/files';
 export interface ManuscriptOutlineProps {
     doc: ManuscriptNode | null;
     can?: Capabilities;
     view?: ManuscriptEditorView;
+    getFiles?: () => FileAttachment[];
 }
 export declare const ManuscriptOutline: React.FC<ManuscriptOutlineProps>;

package/dist/types/versions.d.ts

@@ -1,2 +1,2 @@
-export declare const VERSION = "3.7.26";
+export declare const VERSION = "3.7.27";
 export declare const MATHJAX_VERSION = "3.2.2";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/body-editor",
   "description": "Prosemirror components for editing and viewing manuscripts",
-  "version": "3.7.26",
+  "version": "3.7.27",
   "repository": "github:Atypon-OpenSource/manuscripts-body-editor",
   "license": "Apache-2.0",
   "main": "dist/cjs",
@@ -38,9 +38,9 @@
     "@citation-js/plugin-ris": "0.7.18",
     "@iarna/word-count": "1.1.2",
     "@manuscripts/json-schema": "2.2.12",
-    "@manuscripts/style-guide": "3.3.14",
+    "@manuscripts/style-guide": "3.3.15",
     "@manuscripts/track-changes-plugin": "2.2.3",
-    "@manuscripts/transform": "4.3.12",
+    "@manuscripts/transform": "4.3.13",
     "@popperjs/core": "2.11.8",
     "citeproc": "2.4.63",
     "codemirror": "5.65.19",