diff --git a/src/editor/widgets/comment/CommentWidget.jsx b/src/editor/widgets/comment/CommentWidget.jsx index ec3fb8a..228dde9 100644 --- a/src/editor/widgets/comment/CommentWidget.jsx +++ b/src/editor/widgets/comment/CommentWidget.jsx @@ -7,11 +7,11 @@ import PurposeSelect, { PURPOSES } from './PurposeSelect'; const validPurposes = PURPOSES.map(p => p.value); /** - * Comments are TextualBodies where the purpose field is either + * Comments are TextualBodies where the purpose field is either * blank or 'commenting' or 'replying' */ const isComment = (body, matchAllPurposes) => { - const hasMatchingPurpose = matchAllPurposes ? + const hasMatchingPurpose = matchAllPurposes ? validPurposes.indexOf(body.purpose) > -1 : body.purpose == 'commenting' || body.purpose == 'replying'; return body.type === 'TextualBody' && ( @@ -19,10 +19,10 @@ const isComment = (body, matchAllPurposes) => { ); } -/** +/** /* A comment should be read-only if: /* - the global read-only flag is set -/* - the current rule is 'MINE_ONLY' and the creator ID differs +/* - the current rule is 'MINE_ONLY' and the creator ID differs /* The 'editable' config flag overrides the global setting, if any */ const isReadOnlyComment = (body, props) => { @@ -56,18 +56,18 @@ const getDraftReply = (existingDraft, isReply) => { }; }; -/** +/** * Renders a list of comment bodies, followed by a 'reply' field. */ const CommentWidget = props => { // All comments - const all = props.annotation ? + const all = props.annotation ? props.annotation.bodies.filter(body => isComment(body, props.purposeSelector)) : []; // Add a draft reply if there isn't one already const draftReply = getDraftReply(all.find(b => b.draft == true), all.length > 1); - + // All except draft reply const comments = all.filter(b => b != draftReply); @@ -89,36 +89,56 @@ const CommentWidget = props => { return ( <> - { comments.map((body, idx) => - + )} - - { !props.readOnly && props.annotation && + { comments.length === 0 && !props.readOnly && props.disableReply && props.annotation &&
0 ? i18n.t('Add a reply...') : i18n.t('Add a comment...')} + placeholder={props.textPlaceHolder || i18n.t('Add a comment...') } onChange={onEditReply} onSaveAndClose={() => props.onSaveAndClose()} - /> + /> { props.purposeSelector && draftReply.value.length > 0 && props.onSaveAndClose()} /> - } + } +
+ } + + { !props.readOnly && !props.disableReply && props.annotation && +
+ 0 ? i18n.t('Add a reply...') : (props.textPlaceHolder || i18n.t('Add a comment...'))} + onChange={onEditReply} + onSaveAndClose={() => props.onSaveAndClose()} + /> + { props.purposeSelector && draftReply.value.length > 0 && + props.onSaveAndClose()} + /> + }
} @@ -127,9 +147,9 @@ const CommentWidget = props => { } CommentWidget.disableDelete = (annotation, props) => { - const commentBodies = + const commentBodies = annotation.bodies.filter(body => isComment(body, props.purposeSelector)); - + return commentBodies.some(comment => isReadOnlyComment(comment, props)); } diff --git a/src/editor/widgets/tag/TagWidget.jsx b/src/editor/widgets/tag/TagWidget.jsx index be7b954..9d50bd5 100644 --- a/src/editor/widgets/tag/TagWidget.jsx +++ b/src/editor/widgets/tag/TagWidget.jsx @@ -13,11 +13,11 @@ const getDraftTag = existingDraft => const TagWidget = props => { // All tags (draft + non-draft) - const all = props.annotation ? + const all = props.annotation ? props.annotation.bodies.filter(b => b.purpose === 'tagging') : []; // Last draft tag goes into the input field - const draftTag = getDraftTag(all.slice().reverse().find(b => b.draft)); + const draftTag = getDraftTag(all.slice().reverse().find(b => b.draft)); // All except draft tag const tags = all.filter(b => b != draftTag); @@ -66,7 +66,7 @@ const TagWidget = props => { if (draftTag.value.trim().length === 0) { props.onAppendBody(toSubmit); } else { - props.onUpdateBody(draftTag, toSubmit); + props.onUpdateBody(draftTag, toSubmit); } } @@ -96,9 +96,9 @@ const TagWidget = props => { } {!props.readOnly && -