@manuscripts/style-guide 1.1.11 → 1.1.13

package/dist/cjs/components/Comments/CommentBody.js

@@ -35,7 +35,7 @@ const react_tooltip_1 = __importDefault(require("react-tooltip"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Button_1 = require("../Button");
 const Form_1 = require("../Form");
-exports.CommentBody = react_1.default.memo(({ createKeyword, comment, getCollaborator, getKeyword, listCollaborators, listKeywords, saveComment, deleteComment, isReply, isNew, handleCreateReply, setIsEditing, scrollIntoHighlight, isEditing, isProdNote, }) => {
+exports.CommentBody = react_1.default.memo(({ createKeyword, comment, getCollaborator, getKeyword, listCollaborators, listKeywords, saveComment, deleteComment, isReply, isNew, handleCreateReply, setIsEditing, scrollIntoHighlight, onFocusOut, isEditing, isProdNote, }) => {
     (0, react_1.useEffect)(() => {
         if (isNew) {
             setIsEditing(true);
@@ -54,11 +54,14 @@ exports.CommentBody = react_1.default.memo(({ createKeyword, comment, getCollabo
         } }, ({ errors, values, setFieldValue }) => (react_1.default.createElement(formik_1.Form, null,
         errors.contents && react_1.default.createElement(Form_1.FormError, null, errors.contents),
         react_1.default.createElement(formik_1.Field, { name: 'contents' }, (props) => (react_1.default.createElement(CommentContent, null,
-            react_1.default.createElement(StyledCommentField, { autoFocus: isEditing, value: values.contents, handleChange: (data) => setFieldValue(props.field.name, data), createKeyword: createKeyword, listCollaborators: listCollaborators, listKeywords: listKeywords, notePlaceholder: !isReply ? 'Comment or @mention...' : 'Reply...' })))),
+            react_1.default.createElement(StyledCommentField, { id: comment._id, autoFocus: isEditing, value: values.contents, handleChange: (data) => setFieldValue(props.field.name, data), handleBlur: onFocusOut, createKeyword: createKeyword, listCollaborators: listCollaborators, listKeywords: listKeywords, notePlaceholder: !isReply ? 'Comment or @mention...' : 'Reply...' })))),
         react_1.default.createElement(EditingCommentFooter, null,
             react_1.default.createElement(Actions, null,
                 react_1.default.createElement(Button_1.SecondaryButton, { onClick: cancelEditing }, "Cancel"),
-                react_1.default.createElement(Button_1.PrimaryButton, { type: "submit" }, "Save"))))))) : (react_1.default.createElement("div", null,
+                react_1.default.createElement(Button_1.PrimaryButton, { disabled: !values.contents.replace(/<[^>]+>/g, '').length ||
+                        (!isNew &&
+                            (comment.contents === values.contents ||
+                                !values.contents.replace(/<[^>]+>/g, '').length)), type: "submit" }, "Save"))))))) : (react_1.default.createElement("div", null,
         react_1.default.createElement(CommentContent, { onClick: () => scrollIntoHighlight && scrollIntoHighlight(comment) },
             react_1.default.createElement(StyledCommentViewer, { value: comment.contents, getCollaborator: getCollaborator, getKeyword: getKeyword })),
         !isReply && (react_1.default.createElement(CommentFooter, null,

package/dist/cjs/components/Comments/CommentWrapper.js

@@ -54,7 +54,7 @@ const isOwn = (comment, userId) => {
         ? (_a = comment.contributions) === null || _a === void 0 ? void 0 : _a.some((c) => c.profileID === userId)
         : false;
 };
-const CommentWrapper = ({ createKeyword, comment, can, currentUserId, getCollaborator, getKeyword, listCollaborators, listKeywords, saveComment, deleteComment, isReply, isNew, handleCreateReply, handleSetResolved, isProdNote, isSelected, handleRequestSelect, scrollIntoHighlight, children, }) => {
+const CommentWrapper = ({ createKeyword, comment, can, currentUserId, getCollaborator, getKeyword, listCollaborators, listKeywords, saveComment, deleteComment, isReply, isNew, handleCreateReply, handleSetResolved, isProdNote, isSelected, handleRequestSelect, scrollIntoHighlight, onFocusOut, children, }) => {
     const [isEditing, setIsEditing] = (0, react_1.useState)();
     const threadRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
@@ -89,7 +89,7 @@ const CommentWrapper = ({ createKeyword, comment, can, currentUserId, getCollabo
             react_1.default.createElement(NoteTitle, { type: "button", onMouseDown: onTitleMouseDown, onKeyDown: onTitleKeyDown }, comment.contributions && (react_1.default.createElement(CommentUser_1.CommentUser, { contributions: comment.contributions, getCollaboratorById: getCollaborator, displayName: comment.displayName, createdAt: (0, comments_1.isSavedComment)(comment) ? comment.createdAt * 1000 : undefined }))),
             react_1.default.createElement(CommentActions_1.CommentActions, { id: comment._id, isOwnComment: isOwnComment, can: can, target: comment.target, isResolved: comment.resolved, handleSetResolved: handleSetResolved, deleteComment: deleteComment, setIsEditing: setIsEditing, isProdNote: isProdNote })),
         children,
-        react_1.default.createElement(CommentBody_1.CommentBody, { createKeyword: createKeyword, comment: comment, deleteComment: deleteComment, getCollaborator: getCollaborator, getKeyword: getKeyword, listCollaborators: listCollaborators, listKeywords: listKeywords, isReply: isReply, saveComment: saveComment, handleCreateReply: handleCreateReply, scrollIntoHighlight: scrollIntoHighlight, isNew: isNew, setIsEditing: setIsEditing, isEditing: isEditing, isProdNote: isProdNote })));
+        react_1.default.createElement(CommentBody_1.CommentBody, { createKeyword: createKeyword, onFocusOut: onFocusOut, comment: comment, deleteComment: deleteComment, getCollaborator: getCollaborator, getKeyword: getKeyword, listCollaborators: listCollaborators, listKeywords: listKeywords, isReply: isReply, saveComment: saveComment, handleCreateReply: handleCreateReply, scrollIntoHighlight: scrollIntoHighlight, isNew: isNew, setIsEditing: setIsEditing, isEditing: isEditing, isProdNote: isProdNote })));
 };
 exports.CommentWrapper = CommentWrapper;
 const Note = styled_components_1.default.div `

package/dist/cjs/hooks/use-files.js

@@ -8,21 +8,27 @@ const json_schema_1 = require("@manuscripts/json-schema");
 const transform_1 = require("@manuscripts/transform");
 const inlineFiles_1 = __importDefault(require("../lib/inlineFiles"));
 const use_deep_compare_1 = require("./use-deep-compare");
-const getSupplementFiles = (modelMap, attachments, filePredicate) => {
+const getInlineFilesIds = (inlineFiles) => {
+    return inlineFiles
+        .map(({ attachments }) => (attachments === null || attachments === void 0 ? void 0 : attachments.map(({ id }) => ({ id }))) || [])
+        .flat();
+};
+const getSupplementFiles = (modelMap, inlineFiles, attachments, filePredicate) => {
     const supplements = new Map((0, transform_1.getModelsByType)(modelMap, json_schema_1.ObjectTypes.Supplement).map((supplement) => { var _a; return [(_a = supplement.href) === null || _a === void 0 ? void 0 : _a.replace('attachment:', ''), supplement]; }));
+    const excludedAttachmentsIds = new Set(getInlineFilesIds(inlineFiles).map(({ id }) => id));
     return attachments.filter((attachment) => {
         if (supplements.has(attachment.id) && filePredicate) {
-            return filePredicate(attachment.name);
+            return (!excludedAttachmentsIds.has(attachment.id) &&
+                filePredicate(attachment.name));
         }
         else {
-            return supplements.has(attachment.id);
+            return (!excludedAttachmentsIds.has(attachment.id) &&
+                supplements.has(attachment.id));
         }
     });
 };
 const getOtherFiles = (inlineFiles, supplementFiles, attachments, filePredicate) => {
-    const inlineFilesAttachmentIds = inlineFiles
-        .map(({ attachments }) => (attachments === null || attachments === void 0 ? void 0 : attachments.map(({ id }) => ({ id }))) || [])
-        .flat();
+    const inlineFilesAttachmentIds = getInlineFilesIds(inlineFiles);
     const excludedAttachmentsIds = new Set([...inlineFilesAttachmentIds, ...supplementFiles].map(({ id }) => id));
     return attachments.filter(({ id, name }) => {
         if (!excludedAttachmentsIds.has(id) && filePredicate) {
@@ -35,7 +41,7 @@ const getOtherFiles = (inlineFiles, supplementFiles, attachments, filePredicate)
 };
 const useFiles = (modelMap, attachments, filePredicate) => (0, use_deep_compare_1.useDeepCompareMemo)(() => {
     const inlineFiles = (0, inlineFiles_1.default)(modelMap, attachments);
-    const supplementFiles = getSupplementFiles(modelMap, attachments, filePredicate);
+    const supplementFiles = getSupplementFiles(modelMap, inlineFiles, attachments, filePredicate);
     const otherFiles = getOtherFiles(inlineFiles, supplementFiles, attachments, filePredicate);
     return {
         otherFiles,

package/dist/es/components/Comments/CommentBody.js

@@ -6,7 +6,7 @@ import ReactTooltip from 'react-tooltip';
 import styled from 'styled-components';
 import { ButtonGroup, PrimaryButton, SecondaryButton } from '../Button';
 import { FormError } from '../Form';
-export const CommentBody = React.memo(({ createKeyword, comment, getCollaborator, getKeyword, listCollaborators, listKeywords, saveComment, deleteComment, isReply, isNew, handleCreateReply, setIsEditing, scrollIntoHighlight, isEditing, isProdNote, }) => {
+export const CommentBody = React.memo(({ createKeyword, comment, getCollaborator, getKeyword, listCollaborators, listKeywords, saveComment, deleteComment, isReply, isNew, handleCreateReply, setIsEditing, scrollIntoHighlight, onFocusOut, isEditing, isProdNote, }) => {
     useEffect(() => {
         if (isNew) {
             setIsEditing(true);
@@ -25,11 +25,14 @@ export const CommentBody = React.memo(({ createKeyword, comment, getCollaborator
         } }, ({ errors, values, setFieldValue }) => (React.createElement(Form, null,
         errors.contents && React.createElement(FormError, null, errors.contents),
         React.createElement(Field, { name: 'contents' }, (props) => (React.createElement(CommentContent, null,
-            React.createElement(StyledCommentField, { autoFocus: isEditing, value: values.contents, handleChange: (data) => setFieldValue(props.field.name, data), createKeyword: createKeyword, listCollaborators: listCollaborators, listKeywords: listKeywords, notePlaceholder: !isReply ? 'Comment or @mention...' : 'Reply...' })))),
+            React.createElement(StyledCommentField, { id: comment._id, autoFocus: isEditing, value: values.contents, handleChange: (data) => setFieldValue(props.field.name, data), handleBlur: onFocusOut, createKeyword: createKeyword, listCollaborators: listCollaborators, listKeywords: listKeywords, notePlaceholder: !isReply ? 'Comment or @mention...' : 'Reply...' })))),
         React.createElement(EditingCommentFooter, null,
             React.createElement(Actions, null,
                 React.createElement(SecondaryButton, { onClick: cancelEditing }, "Cancel"),
-                React.createElement(PrimaryButton, { type: "submit" }, "Save"))))))) : (React.createElement("div", null,
+                React.createElement(PrimaryButton, { disabled: !values.contents.replace(/<[^>]+>/g, '').length ||
+                        (!isNew &&
+                            (comment.contents === values.contents ||
+                                !values.contents.replace(/<[^>]+>/g, '').length)), type: "submit" }, "Save"))))))) : (React.createElement("div", null,
         React.createElement(CommentContent, { onClick: () => scrollIntoHighlight && scrollIntoHighlight(comment) },
             React.createElement(StyledCommentViewer, { value: comment.contents, getCollaborator: getCollaborator, getKeyword: getKeyword })),
         !isReply && (React.createElement(CommentFooter, null,

package/dist/es/components/Comments/CommentWrapper.js

@@ -25,7 +25,7 @@ const isOwn = (comment, userId) => {
         ? (_a = comment.contributions) === null || _a === void 0 ? void 0 : _a.some((c) => c.profileID === userId)
         : false;
 };
-export const CommentWrapper = ({ createKeyword, comment, can, currentUserId, getCollaborator, getKeyword, listCollaborators, listKeywords, saveComment, deleteComment, isReply, isNew, handleCreateReply, handleSetResolved, isProdNote, isSelected, handleRequestSelect, scrollIntoHighlight, children, }) => {
+export const CommentWrapper = ({ createKeyword, comment, can, currentUserId, getCollaborator, getKeyword, listCollaborators, listKeywords, saveComment, deleteComment, isReply, isNew, handleCreateReply, handleSetResolved, isProdNote, isSelected, handleRequestSelect, scrollIntoHighlight, onFocusOut, children, }) => {
     const [isEditing, setIsEditing] = useState();
     const threadRef = useRef(null);
     useEffect(() => {
@@ -60,7 +60,7 @@ export const CommentWrapper = ({ createKeyword, comment, can, currentUserId, get
             React.createElement(NoteTitle, { type: "button", onMouseDown: onTitleMouseDown, onKeyDown: onTitleKeyDown }, comment.contributions && (React.createElement(CommentUser, { contributions: comment.contributions, getCollaboratorById: getCollaborator, displayName: comment.displayName, createdAt: isSavedComment(comment) ? comment.createdAt * 1000 : undefined }))),
             React.createElement(CommentActions, { id: comment._id, isOwnComment: isOwnComment, can: can, target: comment.target, isResolved: comment.resolved, handleSetResolved: handleSetResolved, deleteComment: deleteComment, setIsEditing: setIsEditing, isProdNote: isProdNote })),
         children,
-        React.createElement(CommentBody, { createKeyword: createKeyword, comment: comment, deleteComment: deleteComment, getCollaborator: getCollaborator, getKeyword: getKeyword, listCollaborators: listCollaborators, listKeywords: listKeywords, isReply: isReply, saveComment: saveComment, handleCreateReply: handleCreateReply, scrollIntoHighlight: scrollIntoHighlight, isNew: isNew, setIsEditing: setIsEditing, isEditing: isEditing, isProdNote: isProdNote })));
+        React.createElement(CommentBody, { createKeyword: createKeyword, onFocusOut: onFocusOut, comment: comment, deleteComment: deleteComment, getCollaborator: getCollaborator, getKeyword: getKeyword, listCollaborators: listCollaborators, listKeywords: listKeywords, isReply: isReply, saveComment: saveComment, handleCreateReply: handleCreateReply, scrollIntoHighlight: scrollIntoHighlight, isNew: isNew, setIsEditing: setIsEditing, isEditing: isEditing, isProdNote: isProdNote })));
 };
 const Note = styled.div `
   & .note-actions {

package/dist/es/hooks/use-files.js

@@ -2,21 +2,27 @@ import { ObjectTypes } from '@manuscripts/json-schema';
 import { getModelsByType } from '@manuscripts/transform';
 import getInlineFiles from '../lib/inlineFiles';
 import { useDeepCompareMemo } from './use-deep-compare';
-const getSupplementFiles = (modelMap, attachments, filePredicate) => {
+const getInlineFilesIds = (inlineFiles) => {
+    return inlineFiles
+        .map(({ attachments }) => (attachments === null || attachments === void 0 ? void 0 : attachments.map(({ id }) => ({ id }))) || [])
+        .flat();
+};
+const getSupplementFiles = (modelMap, inlineFiles, attachments, filePredicate) => {
     const supplements = new Map(getModelsByType(modelMap, ObjectTypes.Supplement).map((supplement) => { var _a; return [(_a = supplement.href) === null || _a === void 0 ? void 0 : _a.replace('attachment:', ''), supplement]; }));
+    const excludedAttachmentsIds = new Set(getInlineFilesIds(inlineFiles).map(({ id }) => id));
     return attachments.filter((attachment) => {
         if (supplements.has(attachment.id) && filePredicate) {
-            return filePredicate(attachment.name);
+            return (!excludedAttachmentsIds.has(attachment.id) &&
+                filePredicate(attachment.name));
         }
         else {
-            return supplements.has(attachment.id);
+            return (!excludedAttachmentsIds.has(attachment.id) &&
+                supplements.has(attachment.id));
         }
     });
 };
 const getOtherFiles = (inlineFiles, supplementFiles, attachments, filePredicate) => {
-    const inlineFilesAttachmentIds = inlineFiles
-        .map(({ attachments }) => (attachments === null || attachments === void 0 ? void 0 : attachments.map(({ id }) => ({ id }))) || [])
-        .flat();
+    const inlineFilesAttachmentIds = getInlineFilesIds(inlineFiles);
     const excludedAttachmentsIds = new Set([...inlineFilesAttachmentIds, ...supplementFiles].map(({ id }) => id));
     return attachments.filter(({ id, name }) => {
         if (!excludedAttachmentsIds.has(id) && filePredicate) {
@@ -29,7 +35,7 @@ const getOtherFiles = (inlineFiles, supplementFiles, attachments, filePredicate)
 };
 export const useFiles = (modelMap, attachments, filePredicate) => useDeepCompareMemo(() => {
     const inlineFiles = getInlineFiles(modelMap, attachments);
-    const supplementFiles = getSupplementFiles(modelMap, attachments, filePredicate);
+    const supplementFiles = getSupplementFiles(modelMap, inlineFiles, attachments, filePredicate);
     const otherFiles = getOtherFiles(inlineFiles, supplementFiles, attachments, filePredicate);
     return {
         otherFiles,

package/dist/types/components/Comments/CommentBody.d.ts

@@ -1,4 +1,5 @@
 import { Keyword, UserProfile } from '@manuscripts/json-schema';
+import { EditorView } from 'prosemirror-view';
 import React, { Dispatch, SetStateAction } from 'react';
 import { CommentType, UnsavedComment } from '../../lib/comments';
 export interface CommentBodyProps {
@@ -14,6 +15,7 @@ export interface CommentBodyProps {
     saveComment: (comment: CommentType | UnsavedComment) => Promise<CommentType>;
     handleCreateReply: (id: string) => void;
     scrollIntoHighlight?: (comment: CommentType | UnsavedComment) => void;
+    onFocusOut?: (view: EditorView, event: Event) => boolean;
 }
 export declare const CommentBody: React.FC<CommentBodyProps & {
     setIsEditing: Dispatch<SetStateAction<boolean | undefined>>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/style-guide",
   "description": "Shared components for Manuscripts applications",
-  "version": "1.1.11",
+  "version": "1.1.13",
   "repository": "github:Atypon-OpenSource/manuscripts-style-guide",
   "license": "Apache-2.0",
   "main": "dist/cjs",
@@ -36,10 +36,10 @@
     "@formatjs/intl-relativetimeformat": "^4.5.9",
     "@formatjs/intl-utils": "^2.2.0",
     "@manuscripts/assets": "^0.6.2",
-    "@manuscripts/transform": "^1.3.0",
+    "@manuscripts/transform": "^1.3.1",
     "@manuscripts/json-schema": "^2.0.2",
     "@manuscripts/title-editor": "^1.1.0",
-    "@manuscripts/comment-editor": "^1.0.1",
+    "@manuscripts/comment-editor": "^1.0.2",
     "@reach/tabs": "^0.11.2",
     "formik": "^2.2.9",
     "date-fns": "^2.29.3",