From 9369b5617417ca5d39323060cd435503d4099d03 Mon Sep 17 00:00:00 2001 From: ahammouda Date: Sat, 1 Oct 2022 17:47:04 -0400 Subject: [PATCH 1/2] Added ability to change placeholder text, and make comment replies optional --- src/editor/widgets/comment/CommentWidget.jsx | 60 +++++++++++++------- src/editor/widgets/tag/TagWidget.jsx | 10 ++-- 2 files changed, 45 insertions(+), 25 deletions(-) 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 && - From b0bfa94ac803df5904d292035499b23a72f06e65 Mon Sep 17 00:00:00 2001 From: ahammouda Date: Sun, 2 Oct 2022 10:41:14 -0400 Subject: [PATCH 2/2] removed redudant use of markup --- src/editor/widgets/comment/CommentWidget.jsx | 28 +++++--------------- 1 file changed, 7 insertions(+), 21 deletions(-) diff --git a/src/editor/widgets/comment/CommentWidget.jsx b/src/editor/widgets/comment/CommentWidget.jsx index 228dde9..fc6d266 100644 --- a/src/editor/widgets/comment/CommentWidget.jsx +++ b/src/editor/widgets/comment/CommentWidget.jsx @@ -87,6 +87,12 @@ const CommentWidget = props => { const onChangeReplyPurpose = purpose => props.onUpdateBody(draftReply, { ...draftReply, purpose: purpose.value }); + // Pre-condition: will be true if the annotation exists, and Annotorious is not in read-only mode + const isReadable = (!props.readOnly && props.annotation); + + // Extra condtion to: reply field exists if there is no comment yet, or disableReply is false. + const hasReply = comments.length === 0 || !props.disableReply; + return ( <> { comments.map((body, idx) => @@ -100,28 +106,8 @@ const CommentWidget = props => { onDelete={props.onRemoveBody} onSaveAndClose={props.onSaveAndClose} /> )} - { comments.length === 0 && !props.readOnly && props.disableReply && props.annotation && -
- props.onSaveAndClose()} - /> - { props.purposeSelector && draftReply.value.length > 0 && - props.onSaveAndClose()} - /> - } -
- } - { !props.readOnly && !props.disableReply && props.annotation && + { isReadable && hasReply &&