@manuscripts/style-guide 0.31.30 → 0.32.31-1620-2

package/dist/cjs/components/FileManager/FileManager.js

@@ -47,7 +47,7 @@ const InlineFilesSection_1 = require("./InlineFilesSection");
 const TooltipDiv_1 = require("./TooltipDiv");
 const util_1 = require("./util");
 exports.PermissionsContext = (0, react_1.createContext)(null);
-const FileManager = ({ modelMap, saveModel, enableDragAndDrop, can, fileManagement: { getAttachments, changeDesignation, replace, upload }, }) => {
+const FileManager = ({ modelMap, saveModel, enableDragAndDrop, can, fileManagement: { getAttachments, changeDesignation, replace, upload }, addAttachmentToState, }) => {
     const [state, dispatch] = (0, react_1.useReducer)(FileSectionState_1.reducer, (0, FileSectionState_1.getInitialState)());
     const handleReplaceFile = (0, react_1.useCallback)((attachmentId, name, file, typeId) => __awaiter(void 0, void 0, void 0, function* () {
         dispatch(FileSectionState_1.actions.HANDLE_UPLOAD_ACTION());
@@ -86,18 +86,23 @@ const FileManager = ({ modelMap, saveModel, enableDragAndDrop, can, fileManageme
         window.location.assign(url);
     }, []);
     const handleUpdateInline = (0, react_1.useCallback)((modelId, attachment) => __awaiter(void 0, void 0, void 0, function* () {
-        var _a;
         const figureModel = modelMap.get(modelId);
-        const imageExternalFileIndex = (_a = figureModel === null || figureModel === void 0 ? void 0 : figureModel.externalFileReferences) === null || _a === void 0 ? void 0 : _a.findIndex((file) => file && file.kind === 'imageRepresentation');
-        if (figureModel.externalFileReferences &&
-            typeof imageExternalFileIndex !== 'undefined' &&
-            imageExternalFileIndex > -1) {
-            figureModel.externalFileReferences[imageExternalFileIndex].url = `attachment:${attachment.id}`;
-            yield saveModel(figureModel);
+        figureModel.src = `attachment:${attachment.id}`;
+        if (addAttachmentToState) {
+            addAttachmentToState(Object.assign({}, attachment));
         }
-    }), [modelMap, saveModel]);
+        yield saveModel(figureModel);
+    }), [modelMap, saveModel, addAttachmentToState]);
     const attachments = getAttachments();
     const { otherFiles, supplementFiles, inlineFiles } = (0, index_1.useFiles)(modelMap, attachments);
+    const handleDetachFile = (attachmentId, modelId) => {
+        var _a;
+        const model = modelMap.get(modelId);
+        if (model) {
+            const externalFileReferences = (_a = model.externalFileReferences) === null || _a === void 0 ? void 0 : _a.filter((ref) => ref.url.replace('attachment:', '') !== attachmentId);
+            saveModel(Object.assign(Object.assign({}, model), { externalFileReferences: externalFileReferences || [], src: '' }));
+        }
+    };
     const getFileSectionExternalFile = (fileSection) => {
         const isSupplementOrOtherFilesTab = fileSection === util_1.FileSectionType.Supplements ||
             fileSection === util_1.FileSectionType.OtherFile;
@@ -149,7 +154,7 @@ const FileManager = ({ modelMap, saveModel, enableDragAndDrop, can, fileManageme
                                 react_1.default.createElement("div", null, "Files excluded from the final submission.")))),
                     react_1.default.createElement(Inspector_1.InspectorTabPanels, { style: { overflowY: 'visible', position: 'relative' } },
                         react_1.default.createElement(Inspector_1.InspectorTabPanel, null,
-                            react_1.default.createElement(InlineFilesSection_1.InlineFilesSection, { inlineFiles: inlineFiles, handleReplace: replace, handleDownload: handleDownload, handleUpdateInline: handleUpdateInline, isEditor: enableDragAndDrop, dispatch: dispatch })),
+                            react_1.default.createElement(InlineFilesSection_1.InlineFilesSection, { inlineFiles: inlineFiles, handleReplace: replace, handleDownload: handleDownload, handleUpdateInline: handleUpdateInline, handleDetachFile: handleDetachFile, isEditor: enableDragAndDrop, dispatch: dispatch })),
                         react_1.default.createElement(Inspector_1.InspectorTabPanel, null,
                             react_1.default.createElement(FilesSection_1.FilesSection, { enableDragAndDrop: enableDragAndDrop, handleUpload: handleUploadFileWithSupplement, fileSection: util_1.FileSectionType.Supplements, filesItem: getFileSectionExternalFile(util_1.FileSectionType.Supplements), state: state, dispatch: dispatch })),
                         react_1.default.createElement(Inspector_1.InspectorTabPanel, null,

package/dist/cjs/components/FileManager/FileSectionItem/ItemActions.js

@@ -35,7 +35,7 @@ const FileManager_1 = require("../FileManager");
 const FileSectionState_1 = require("../FileSectionState");
 const ItemsAction_1 = require("../ItemsAction");
 const util_1 = require("../util");
-const ItemActions = ({ downloadAttachmentHandler, replaceAttachmentHandler, handleUpdateInline, attachmentId, fileName, designation, publicUrl, hideActionList, dispatch, dropDownClassName, showReplaceAction, }) => {
+const ItemActions = ({ downloadAttachmentHandler, replaceAttachmentHandler, detachAttachmnetHandler, handleUpdateInline, attachmentId, fileName, designation, publicUrl, hideActionList, dispatch, dropDownClassName, showReplaceAction, }) => {
     const attachmentDesignation = designation == undefined ? 'undefined' : designation;
     const attachmentDesignationName = attachmentDesignation !== 'undefined'
         ? util_1.namesWithDesignationMap.get(attachmentDesignation)
@@ -73,12 +73,13 @@ const ItemActions = ({ downloadAttachmentHandler, replaceAttachmentHandler, hand
             fileInputRef.current.click();
         }
     };
-    return (react_1.default.createElement(Dropdown_1.DropdownList, { direction: 'right', className: dropDownClassName, width: 125, height: 96, top: 5, onClick: hideActionList },
+    return (react_1.default.createElement(Dropdown_1.DropdownList, { direction: 'right', className: dropDownClassName, width: 125, height: 120, top: 5, onClick: hideActionList },
         react_1.default.createElement(ItemsAction_1.ActionsItem, { onClick: () => {
                 publicUrl !== undefined ? downloadAttachmentHandler(publicUrl) : {};
             } }, "Download"),
         (can === null || can === void 0 ? void 0 : can.replaceFile) && canBeReplaced && (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(ItemsAction_1.ActionsItem, { onClick: openFileDialog }, "Replace"),
-            react_1.default.createElement("input", { ref: fileInputRef, type: "file", style: { display: 'none' }, onChange: (e) => handleChange(e), value: '' })))));
+            react_1.default.createElement("input", { ref: fileInputRef, type: "file", style: { display: 'none' }, onChange: (e) => handleChange(e), value: '' }))),
+        (can === null || can === void 0 ? void 0 : can.editArticle) && detachAttachmnetHandler && (react_1.default.createElement(ItemsAction_1.ActionsItem, { onClick: () => detachAttachmnetHandler() }, "Detach"))));
 };
 exports.ItemActions = ItemActions;

package/dist/cjs/components/FileManager/InlineFilesSection.js

@@ -31,7 +31,7 @@ const FileInfo_1 = require("./FileSectionItem/FileInfo");
 const FileSectionItem_1 = require("./FileSectionItem/FileSectionItem");
 const ItemActions_1 = require("./FileSectionItem/ItemActions");
 const util_1 = require("./util");
-const InlineFilesSection = ({ handleReplace, handleDownload, handleUpdateInline, inlineFiles, isEditor, dispatch, }) => {
+const InlineFilesSection = ({ handleReplace, handleDownload, handleUpdateInline, handleDetachFile, inlineFiles, isEditor, dispatch, }) => {
     const onElementClick = (0, react_1.useCallback)((e) => {
         if (!isEditor) {
             return;
@@ -46,7 +46,7 @@ const InlineFilesSection = ({ handleReplace, handleDownload, handleUpdateInline,
     return (react_1.default.createElement("div", null, inlineFiles.map((file, index) => {
         var _a;
         return (react_1.default.createElement(ElementItem, { className: 'item', key: index, id: file.id, onClick: onElementClick },
-            react_1.default.createElement(FileReferences, { className: 'refItems' }, (_a = file.attachments) === null || _a === void 0 ? void 0 : _a.map((attachment) => (react_1.default.createElement(FileReference, { key: attachment.id, attachment: attachment, handleReplace: handleReplace, handleUpdateInline: handleUpdateInline, handleDownload: handleDownload, dispatch: dispatch })))),
+            react_1.default.createElement(FileReferences, { className: 'refItems' }, (_a = file.attachments) === null || _a === void 0 ? void 0 : _a.map((attachment) => (react_1.default.createElement(FileReference, { key: attachment.id, attachment: attachment, handleReplace: handleReplace, handleUpdateInline: handleUpdateInline, handleDetachFile: handleDetachFile, handleDownload: handleDownload, dispatch: dispatch })))),
             react_1.default.createElement(Element, { className: 'element' },
                 util_1.fileTypesWithIconMap.get(file.type),
                 react_1.default.createElement(FileInfo_1.FileInfoContainer, null,
@@ -55,7 +55,7 @@ const InlineFilesSection = ({ handleReplace, handleDownload, handleUpdateInline,
     })));
 };
 exports.InlineFilesSection = InlineFilesSection;
-const FileReference = ({ attachment, handleReplace, handleDownload, handleUpdateInline, dispatch, }) => {
+const FileReference = ({ attachment, handleReplace, handleDownload, handleUpdateInline, handleDetachFile, dispatch, }) => {
     const { isOpen, toggleOpen, wrapperRef } = (0, use_dropdown_1.useDropdown)();
     if (!attachment || !attachment.name) {
         return null;
@@ -66,11 +66,13 @@ const FileReference = ({ attachment, handleReplace, handleDownload, handleUpdate
             util_1.fileTypesWithIconMap.get(util_1.extensionsWithFileTypesMap.get(fileExtension)),
             react_1.default.createElement(FileReferenceName, null, attachment.name)),
         handleDownload && handleReplace && (react_1.default.createElement(DropdownContainer, { ref: wrapperRef },
-            react_1.default.createElement(FileSectionItem_1.ActionsIcon, { onClick: toggleOpen, type: "button", className: 'external_file_dropdown', "aria-label": "Download or Replace", "aria-pressed": isOpen },
+            react_1.default.createElement(FileSectionItem_1.ActionsIcon, { onClick: toggleOpen, type: "button", className: 'external_file_dropdown', "aria-label": "Download or Replace or Detach", "aria-pressed": isOpen },
                 react_1.default.createElement(dots_icon_1.default, null)),
             isOpen && (react_1.default.createElement(ItemActions_1.ItemActions, { replaceAttachmentHandler: handleReplace, showReplaceAction: true, handleUpdateInline: (uploadAttachment) => handleUpdateInline &&
                     (attachment === null || attachment === void 0 ? void 0 : attachment.modelId) &&
-                    handleUpdateInline(attachment.modelId, uploadAttachment), downloadAttachmentHandler: handleDownload, attachmentId: attachment.id, fileName: attachment.name, designation: attachment.type.label, publicUrl: attachment.link, hideActionList: toggleOpen, dispatch: dispatch, dropDownClassName: 'ref_item_dropdown' }))))));
+                    handleUpdateInline(attachment.modelId, uploadAttachment), detachAttachmnetHandler: () => handleDetachFile &&
+                    attachment.modelId &&
+                    handleDetachFile(attachment.id, attachment.modelId), downloadAttachmentHandler: handleDownload, attachmentId: attachment.id, fileName: attachment.name, designation: attachment.type.label, publicUrl: attachment.link, hideActionList: toggleOpen, dispatch: dispatch, dropDownClassName: 'ref_item_dropdown' }))))));
 };
 const ElementItem = (0, styled_components_1.default)(FileSectionItem_1.Item) `
   display: flex;

package/dist/cjs/lib/inlineFiles.js

@@ -3,26 +3,18 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const manuscript_transform_1 = require("@manuscripts/manuscript-transform");
 const manuscripts_json_schema_1 = require("@manuscripts/manuscripts-json-schema");
 const util_1 = require("../components/FileManager/util");
-const getAttachment = (externalFileRef, attachmentsMap) => {
-    if (!(externalFileRef === null || externalFileRef === void 0 ? void 0 : externalFileRef.url.includes('https://'))) {
-        const attachmentId = externalFileRef === null || externalFileRef === void 0 ? void 0 : externalFileRef.url.replace('attachment:', '');
-        return attachmentId ? attachmentsMap.get(attachmentId) : undefined;
-    }
-    else {
-        return [...attachmentsMap.values()].find((attachment) => attachment.link === externalFileRef.url);
-    }
-};
 const getFigureData = (element, modelMap, attachmentsMap) => {
     const attachments = [];
     element.containedObjectIDs.map((id) => {
-        var _a;
         const object = modelMap.get(id);
         if (object && object.objectType === manuscripts_json_schema_1.ObjectTypes.Figure) {
-            const externalFileRef = (_a = object.externalFileReferences) === null || _a === void 0 ? void 0 : _a.find((figure) => figure.kind === 'imageRepresentation');
-            const attachment = getAttachment(externalFileRef, attachmentsMap);
-            if (attachment) {
-                attachment.modelId = id;
-                attachments.push(attachment);
+            const figure = object;
+            if (figure.src) {
+                const attachment = attachmentsMap.get(figure.src.replace('attachment:', ''));
+                if (attachment) {
+                    attachment.modelId = id;
+                    attachments.push(attachment);
+                }
             }
         }
     });
@@ -34,7 +26,7 @@ const getFigureData = (element, modelMap, attachmentsMap) => {
 exports.default = (modelMap, attachments) => {
     const files = [];
     const attachmentsMap = new Map(attachments.map((attachment) => [attachment.id, attachment]));
-    const { graphicalAbstractFigureId, figureElement, tableElement } = getAuxiliaryObjects(modelMap);
+    const { graphicalAbstractFigureId, figureElement } = getAuxiliaryObjects(modelMap);
     if (graphicalAbstractFigureId) {
         const element = modelMap.get(graphicalAbstractFigureId);
         files.unshift(Object.assign(Object.assign({}, getFigureData(element, modelMap, attachmentsMap)), { label: `Graphical Abstract`, type: util_1.FileType.GraphicalAbstract }));
@@ -43,21 +35,6 @@ exports.default = (modelMap, attachments) => {
         const element = modelMap.get(id);
         files.push(Object.assign(Object.assign({}, getFigureData(element, modelMap, attachmentsMap)), { label: `Figure ${index + 1}`, type: util_1.FileType.Figure }));
     });
-    tableElement.map((id) => {
-        var _a;
-        const tableElement = modelMap.get(id);
-        const table = modelMap.get(tableElement.containedObjectID);
-        const externalFileReference = (_a = table === null || table === void 0 ? void 0 : table.externalFileReferences) === null || _a === void 0 ? void 0 : _a.find((file) => file.kind === 'dataset' && file.ref);
-        const attachment = getAttachment(externalFileReference, attachmentsMap);
-        if (attachment) {
-            files.push({
-                id: tableElement._id,
-                label: `Table`,
-                type: util_1.FileType.SheetsWorkbooks,
-                attachments: [attachment],
-            });
-        }
-    });
     return files;
 };
 const getAuxiliaryObjects = (modelMap) => {

package/dist/es/components/FileManager/FileManager.js

@@ -22,7 +22,7 @@ import { InlineFilesSection } from './InlineFilesSection';
 import { TooltipDiv } from './TooltipDiv';
 import { Designation, FileSectionType, generateAttachmentsTitles, namesWithDesignationMap, } from './util';
 export const PermissionsContext = createContext(null);
-export const FileManager = ({ modelMap, saveModel, enableDragAndDrop, can, fileManagement: { getAttachments, changeDesignation, replace, upload }, }) => {
+export const FileManager = ({ modelMap, saveModel, enableDragAndDrop, can, fileManagement: { getAttachments, changeDesignation, replace, upload }, addAttachmentToState, }) => {
     const [state, dispatch] = useReducer(reducer, getInitialState());
     const handleReplaceFile = useCallback((attachmentId, name, file, typeId) => __awaiter(void 0, void 0, void 0, function* () {
         dispatch(actions.HANDLE_UPLOAD_ACTION());
@@ -61,18 +61,23 @@ export const FileManager = ({ modelMap, saveModel, enableDragAndDrop, can, fileM
         window.location.assign(url);
     }, []);
     const handleUpdateInline = useCallback((modelId, attachment) => __awaiter(void 0, void 0, void 0, function* () {
-        var _a;
         const figureModel = modelMap.get(modelId);
-        const imageExternalFileIndex = (_a = figureModel === null || figureModel === void 0 ? void 0 : figureModel.externalFileReferences) === null || _a === void 0 ? void 0 : _a.findIndex((file) => file && file.kind === 'imageRepresentation');
-        if (figureModel.externalFileReferences &&
-            typeof imageExternalFileIndex !== 'undefined' &&
-            imageExternalFileIndex > -1) {
-            figureModel.externalFileReferences[imageExternalFileIndex].url = `attachment:${attachment.id}`;
-            yield saveModel(figureModel);
+        figureModel.src = `attachment:${attachment.id}`;
+        if (addAttachmentToState) {
+            addAttachmentToState(Object.assign({}, attachment));
         }
-    }), [modelMap, saveModel]);
+        yield saveModel(figureModel);
+    }), [modelMap, saveModel, addAttachmentToState]);
     const attachments = getAttachments();
     const { otherFiles, supplementFiles, inlineFiles } = useFiles(modelMap, attachments);
+    const handleDetachFile = (attachmentId, modelId) => {
+        var _a;
+        const model = modelMap.get(modelId);
+        if (model) {
+            const externalFileReferences = (_a = model.externalFileReferences) === null || _a === void 0 ? void 0 : _a.filter((ref) => ref.url.replace('attachment:', '') !== attachmentId);
+            saveModel(Object.assign(Object.assign({}, model), { externalFileReferences: externalFileReferences || [], src: '' }));
+        }
+    };
     const getFileSectionExternalFile = (fileSection) => {
         const isSupplementOrOtherFilesTab = fileSection === FileSectionType.Supplements ||
             fileSection === FileSectionType.OtherFile;
@@ -124,7 +129,7 @@ export const FileManager = ({ modelMap, saveModel, enableDragAndDrop, can, fileM
                                 React.createElement("div", null, "Files excluded from the final submission.")))),
                     React.createElement(InspectorTabPanels, { style: { overflowY: 'visible', position: 'relative' } },
                         React.createElement(InspectorTabPanel, null,
-                            React.createElement(InlineFilesSection, { inlineFiles: inlineFiles, handleReplace: replace, handleDownload: handleDownload, handleUpdateInline: handleUpdateInline, isEditor: enableDragAndDrop, dispatch: dispatch })),
+                            React.createElement(InlineFilesSection, { inlineFiles: inlineFiles, handleReplace: replace, handleDownload: handleDownload, handleUpdateInline: handleUpdateInline, handleDetachFile: handleDetachFile, isEditor: enableDragAndDrop, dispatch: dispatch })),
                         React.createElement(InspectorTabPanel, null,
                             React.createElement(FilesSection, { enableDragAndDrop: enableDragAndDrop, handleUpload: handleUploadFileWithSupplement, fileSection: FileSectionType.Supplements, filesItem: getFileSectionExternalFile(FileSectionType.Supplements), state: state, dispatch: dispatch })),
                         React.createElement(InspectorTabPanel, null,

package/dist/es/components/FileManager/FileSectionItem/ItemActions.js

@@ -13,7 +13,7 @@ import { PermissionsContext } from '../FileManager';
 import { actions } from '../FileSectionState';
 import { ActionsItem } from '../ItemsAction';
 import { Designation, namesWithDesignationMap } from '../util';
-export const ItemActions = ({ downloadAttachmentHandler, replaceAttachmentHandler, handleUpdateInline, attachmentId, fileName, designation, publicUrl, hideActionList, dispatch, dropDownClassName, showReplaceAction, }) => {
+export const ItemActions = ({ downloadAttachmentHandler, replaceAttachmentHandler, detachAttachmnetHandler, handleUpdateInline, attachmentId, fileName, designation, publicUrl, hideActionList, dispatch, dropDownClassName, showReplaceAction, }) => {
     const attachmentDesignation = designation == undefined ? 'undefined' : designation;
     const attachmentDesignationName = attachmentDesignation !== 'undefined'
         ? namesWithDesignationMap.get(attachmentDesignation)
@@ -51,11 +51,12 @@ export const ItemActions = ({ downloadAttachmentHandler, replaceAttachmentHandle
             fileInputRef.current.click();
         }
     };
-    return (React.createElement(DropdownList, { direction: 'right', className: dropDownClassName, width: 125, height: 96, top: 5, onClick: hideActionList },
+    return (React.createElement(DropdownList, { direction: 'right', className: dropDownClassName, width: 125, height: 120, top: 5, onClick: hideActionList },
         React.createElement(ActionsItem, { onClick: () => {
                 publicUrl !== undefined ? downloadAttachmentHandler(publicUrl) : {};
             } }, "Download"),
         (can === null || can === void 0 ? void 0 : can.replaceFile) && canBeReplaced && (React.createElement(React.Fragment, null,
             React.createElement(ActionsItem, { onClick: openFileDialog }, "Replace"),
-            React.createElement("input", { ref: fileInputRef, type: "file", style: { display: 'none' }, onChange: (e) => handleChange(e), value: '' })))));
+            React.createElement("input", { ref: fileInputRef, type: "file", style: { display: 'none' }, onChange: (e) => handleChange(e), value: '' }))),
+        (can === null || can === void 0 ? void 0 : can.editArticle) && detachAttachmnetHandler && (React.createElement(ActionsItem, { onClick: () => detachAttachmnetHandler() }, "Detach"))));
 };

package/dist/es/components/FileManager/InlineFilesSection.js

@@ -6,7 +6,7 @@ import { FileInfoContainer, FileNameTitleContainer, FileTitle, } from './FileSec
 import { ActionsIcon, Item, } from './FileSectionItem/FileSectionItem';
 import { ItemActions } from './FileSectionItem/ItemActions';
 import { extensionsWithFileTypesMap, fileTypesWithIconMap, } from './util';
-export const InlineFilesSection = ({ handleReplace, handleDownload, handleUpdateInline, inlineFiles, isEditor, dispatch, }) => {
+export const InlineFilesSection = ({ handleReplace, handleDownload, handleUpdateInline, handleDetachFile, inlineFiles, isEditor, dispatch, }) => {
     const onElementClick = useCallback((e) => {
         if (!isEditor) {
             return;
@@ -21,7 +21,7 @@ export const InlineFilesSection = ({ handleReplace, handleDownload, handleUpdate
     return (React.createElement("div", null, inlineFiles.map((file, index) => {
         var _a;
         return (React.createElement(ElementItem, { className: 'item', key: index, id: file.id, onClick: onElementClick },
-            React.createElement(FileReferences, { className: 'refItems' }, (_a = file.attachments) === null || _a === void 0 ? void 0 : _a.map((attachment) => (React.createElement(FileReference, { key: attachment.id, attachment: attachment, handleReplace: handleReplace, handleUpdateInline: handleUpdateInline, handleDownload: handleDownload, dispatch: dispatch })))),
+            React.createElement(FileReferences, { className: 'refItems' }, (_a = file.attachments) === null || _a === void 0 ? void 0 : _a.map((attachment) => (React.createElement(FileReference, { key: attachment.id, attachment: attachment, handleReplace: handleReplace, handleUpdateInline: handleUpdateInline, handleDetachFile: handleDetachFile, handleDownload: handleDownload, dispatch: dispatch })))),
             React.createElement(Element, { className: 'element' },
                 fileTypesWithIconMap.get(file.type),
                 React.createElement(FileInfoContainer, null,
@@ -29,7 +29,7 @@ export const InlineFilesSection = ({ handleReplace, handleDownload, handleUpdate
                         React.createElement(FileTitle, null, file.label))))));
     })));
 };
-const FileReference = ({ attachment, handleReplace, handleDownload, handleUpdateInline, dispatch, }) => {
+const FileReference = ({ attachment, handleReplace, handleDownload, handleUpdateInline, handleDetachFile, dispatch, }) => {
     const { isOpen, toggleOpen, wrapperRef } = useDropdown();
     if (!attachment || !attachment.name) {
         return null;
@@ -40,11 +40,13 @@ const FileReference = ({ attachment, handleReplace, handleDownload, handleUpdate
             fileTypesWithIconMap.get(extensionsWithFileTypesMap.get(fileExtension)),
             React.createElement(FileReferenceName, null, attachment.name)),
         handleDownload && handleReplace && (React.createElement(DropdownContainer, { ref: wrapperRef },
-            React.createElement(ActionsIcon, { onClick: toggleOpen, type: "button", className: 'external_file_dropdown', "aria-label": "Download or Replace", "aria-pressed": isOpen },
+            React.createElement(ActionsIcon, { onClick: toggleOpen, type: "button", className: 'external_file_dropdown', "aria-label": "Download or Replace or Detach", "aria-pressed": isOpen },
                 React.createElement(DotsIcon, null)),
             isOpen && (React.createElement(ItemActions, { replaceAttachmentHandler: handleReplace, showReplaceAction: true, handleUpdateInline: (uploadAttachment) => handleUpdateInline &&
                     (attachment === null || attachment === void 0 ? void 0 : attachment.modelId) &&
-                    handleUpdateInline(attachment.modelId, uploadAttachment), downloadAttachmentHandler: handleDownload, attachmentId: attachment.id, fileName: attachment.name, designation: attachment.type.label, publicUrl: attachment.link, hideActionList: toggleOpen, dispatch: dispatch, dropDownClassName: 'ref_item_dropdown' }))))));
+                    handleUpdateInline(attachment.modelId, uploadAttachment), detachAttachmnetHandler: () => handleDetachFile &&
+                    attachment.modelId &&
+                    handleDetachFile(attachment.id, attachment.modelId), downloadAttachmentHandler: handleDownload, attachmentId: attachment.id, fileName: attachment.name, designation: attachment.type.label, publicUrl: attachment.link, hideActionList: toggleOpen, dispatch: dispatch, dropDownClassName: 'ref_item_dropdown' }))))));
 };
 const ElementItem = styled(Item) `
   display: flex;

package/dist/es/lib/inlineFiles.js

@@ -1,26 +1,18 @@
 import { hasObjectType } from '@manuscripts/manuscript-transform';
 import { ObjectTypes, } from '@manuscripts/manuscripts-json-schema';
 import { FileType } from '../components/FileManager/util';
-const getAttachment = (externalFileRef, attachmentsMap) => {
-    if (!(externalFileRef === null || externalFileRef === void 0 ? void 0 : externalFileRef.url.includes('https://'))) {
-        const attachmentId = externalFileRef === null || externalFileRef === void 0 ? void 0 : externalFileRef.url.replace('attachment:', '');
-        return attachmentId ? attachmentsMap.get(attachmentId) : undefined;
-    }
-    else {
-        return [...attachmentsMap.values()].find((attachment) => attachment.link === externalFileRef.url);
-    }
-};
 const getFigureData = (element, modelMap, attachmentsMap) => {
     const attachments = [];
     element.containedObjectIDs.map((id) => {
-        var _a;
         const object = modelMap.get(id);
         if (object && object.objectType === ObjectTypes.Figure) {
-            const externalFileRef = (_a = object.externalFileReferences) === null || _a === void 0 ? void 0 : _a.find((figure) => figure.kind === 'imageRepresentation');
-            const attachment = getAttachment(externalFileRef, attachmentsMap);
-            if (attachment) {
-                attachment.modelId = id;
-                attachments.push(attachment);
+            const figure = object;
+            if (figure.src) {
+                const attachment = attachmentsMap.get(figure.src.replace('attachment:', ''));
+                if (attachment) {
+                    attachment.modelId = id;
+                    attachments.push(attachment);
+                }
             }
         }
     });
@@ -32,7 +24,7 @@ const getFigureData = (element, modelMap, attachmentsMap) => {
 export default (modelMap, attachments) => {
     const files = [];
     const attachmentsMap = new Map(attachments.map((attachment) => [attachment.id, attachment]));
-    const { graphicalAbstractFigureId, figureElement, tableElement } = getAuxiliaryObjects(modelMap);
+    const { graphicalAbstractFigureId, figureElement } = getAuxiliaryObjects(modelMap);
     if (graphicalAbstractFigureId) {
         const element = modelMap.get(graphicalAbstractFigureId);
         files.unshift(Object.assign(Object.assign({}, getFigureData(element, modelMap, attachmentsMap)), { label: `Graphical Abstract`, type: FileType.GraphicalAbstract }));
@@ -41,21 +33,6 @@ export default (modelMap, attachments) => {
         const element = modelMap.get(id);
         files.push(Object.assign(Object.assign({}, getFigureData(element, modelMap, attachmentsMap)), { label: `Figure ${index + 1}`, type: FileType.Figure }));
     });
-    tableElement.map((id) => {
-        var _a;
-        const tableElement = modelMap.get(id);
-        const table = modelMap.get(tableElement.containedObjectID);
-        const externalFileReference = (_a = table === null || table === void 0 ? void 0 : table.externalFileReferences) === null || _a === void 0 ? void 0 : _a.find((file) => file.kind === 'dataset' && file.ref);
-        const attachment = getAttachment(externalFileReference, attachmentsMap);
-        if (attachment) {
-            files.push({
-                id: tableElement._id,
-                label: `Table`,
-                type: FileType.SheetsWorkbooks,
-                attachments: [attachment],
-            });
-        }
-    });
     return files;
 };
 const getAuxiliaryObjects = (modelMap) => {

package/dist/types/components/FileManager/FileManager.d.ts

@@ -1,5 +1,5 @@
 import { Build } from '@manuscripts/manuscript-transform';
-import { Model, Supplement } from '@manuscripts/manuscripts-json-schema';
+import { Model } from '@manuscripts/manuscripts-json-schema';
 import React from 'react';
 import { Capabilities } from '../../lib/capabilities';
 import { SubmissionAttachment } from './FileSectionItem/FileSectionItem';
@@ -16,7 +16,8 @@ export declare const PermissionsContext: React.Context<Capabilities | null>;
 export declare const FileManager: React.FC<{
     fileManagement: FileManagement;
     modelMap: Map<string, Model>;
-    saveModel: (model: Build<Supplement>) => Promise<Build<Supplement>>;
+    saveModel: <T extends Model>(model: T | Build<T> | Partial<T>) => Promise<T>;
     enableDragAndDrop: boolean;
     can: Capabilities;
+    addAttachmentToState?: (a: SubmissionAttachment) => void;
 }>;

package/dist/types/components/FileManager/FileSectionItem/ItemActions.d.ts

@@ -6,6 +6,7 @@ import { SubmissionAttachment } from './FileSectionItem';
 export declare const ItemActions: React.FC<{
     downloadAttachmentHandler: (url: string) => void;
     replaceAttachmentHandler: Replace;
+    detachAttachmnetHandler?: () => void;
     handleUpdateInline?: (attachment: SubmissionAttachment) => void;
     attachmentId: string;
     fileName: string;

package/dist/types/components/FileManager/InlineFilesSection.d.ts

@@ -3,11 +3,6 @@ import { Replace } from './FileManager';
 import { SubmissionAttachment } from './FileSectionItem/FileSectionItem';
 import { Action } from './FileSectionState';
 import { FileType } from './util';
-export interface ExternalFileRef {
-    url: string;
-    kind?: string;
-    ref?: SubmissionAttachment;
-}
 export declare const InlineFilesSection: React.FC<{
     inlineFiles: {
         id: string;
@@ -19,6 +14,7 @@ export declare const InlineFilesSection: React.FC<{
     handleReplace: Replace;
     handleDownload: (url: string) => void;
     handleUpdateInline?: (modelId: string, attachment: SubmissionAttachment) => void;
+    handleDetachFile?: (attachmentLink: string, modelId: string) => void;
     isEditor: boolean;
     dispatch: Dispatch<Action>;
 }>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/style-guide",
   "description": "Shared components for Manuscripts applications",
-  "version": "0.31.30",
+  "version": "0.32.31-1620-2",
   "repository": "gitlab:atypon-opensource/manuscripts-style-guide",
   "license": "Apache-2.0",
   "main": "dist/cjs",