diff --git a/editors/demo/src/Editoria/config/config.js b/editors/demo/src/Editoria/config/config.js
index ac848f10e3d477a17f1432bc55a4cb1ae9d463ab..eef89f707935c87230453d1ffd3a51bccdb0d1f4 100644
--- a/editors/demo/src/Editoria/config/config.js
+++ b/editors/demo/src/Editoria/config/config.js
@@ -114,7 +114,7 @@ export default {
},
],
- CommentsService: { readOnly: true },
+ // CommentsService: { readOnly: true },
SchemaService: DefaultSchema,
TitleService: { updateTitle },
RulesService: [emDash, ellipsis],
diff --git a/wax-prosemirror-components/src/components/comments/ConnectedComment.js b/wax-prosemirror-components/src/components/comments/ConnectedComment.js
index ccbd8e6a738479dcac30f048a042ce11affb105d..03aee95c09023c2bfc2f0067d4d0fc320db67a83 100644
--- a/wax-prosemirror-components/src/components/comments/ConnectedComment.js
+++ b/wax-prosemirror-components/src/components/comments/ConnectedComment.js
@@ -49,6 +49,8 @@ export default ({ comment, top, commentId, recalculateTops }) => {
top: `${top}px`,
};
+ const commentConfig = app.config.get('config.CommentsService');
+ const isReadOnly = commentConfig ? commentConfig.readOnly : false;
const commentPlugin = app.PmPlugins.get('commentPlugin');
const activeComment = commentPlugin.getState(activeView.state).comment;
@@ -159,6 +161,7 @@ export default ({ comment, top, commentId, recalculateTops }) => {
active={isActive}
commentData={comment.attrs.conversation}
commentId={commentId}
+ isReadOnly={isReadOnly}
key={commentId}
onClickBox={onClickBox}
onClickPost={onClickPost}
diff --git a/wax-prosemirror-components/src/ui/comments/CommentBox.js b/wax-prosemirror-components/src/ui/comments/CommentBox.js
index 591dfc2442826e5eda3a7cdeccf0f271312c9245..15a7613e8f078f6bc40a0983a757729e4f92d730 100644
--- a/wax-prosemirror-components/src/ui/comments/CommentBox.js
+++ b/wax-prosemirror-components/src/ui/comments/CommentBox.js
@@ -18,6 +18,11 @@ const inactive = css`
}
`;
+const inactiveButton = css`
+ cursor: not-allowed;
+ opacity: 0.3;
+`;
+
const Wrapper = styled.div`
background: white;
border: 1px solid ${th('colorBackgroundTabs')};
@@ -38,8 +43,8 @@ const Head = styled.div`
const Resolve = styled.button`
align-self: flex-end;
- border: none;
background: none;
+ border: none;
color: #0042c7;
cursor: pointer;
margin-bottom: 12px;
@@ -48,6 +53,8 @@ const Resolve = styled.button`
background: ${th('colorBackgroundHue')};
border: none;
}
+
+ ${props => props.isReadOnly && inactiveButton}
`;
const StyledReply = styled(CommentReply)`
@@ -60,6 +67,7 @@ const CommentBox = props => {
className,
commentId,
commentData,
+ isReadOnly,
onClickBox,
onClickPost,
onClickResolve,
@@ -78,7 +86,15 @@ const CommentBox = props => {
<Wrapper active={active} className={className} onClick={onClickWrapper}>
{active && commentData.length > 0 && (
<Head>
- <Resolve onClick={() => onClickResolve(commentId)}>Resolve</Resolve>
+ <Resolve
+ isReadOnly={isReadOnly}
+ onClick={() => {
+ if (!isReadOnly) return onClickResolve(commentId);
+ return false;
+ }}
+ >
+ Resolve
+ </Resolve>
</Head>
)}
@@ -86,9 +102,10 @@ const CommentBox = props => {
{active && (
<StyledReply
- onTextAreaBlur={onTextAreaBlur}
isNewComment={commentData.length === 0}
+ isReadOnly={isReadOnly}
onClickPost={onClickPost}
+ onTextAreaBlur={onTextAreaBlur}
/>
)}
</Wrapper>
@@ -98,6 +115,7 @@ const CommentBox = props => {
CommentBox.propTypes = {
/** Whether this is the current active comment */
active: PropTypes.bool,
+ isReadOnly: PropTypes.bool.isRequired,
/** List of objects containing data for comment items */
commentData: PropTypes.arrayOf(
PropTypes.shape({
diff --git a/wax-prosemirror-components/src/ui/comments/CommentReply.js b/wax-prosemirror-components/src/ui/comments/CommentReply.js
index d739b2a01aa096f13bf8d0d168b1a49eb86f58eb..1af91233bdaa2589c269e941bbedba97f2094217 100644
--- a/wax-prosemirror-components/src/ui/comments/CommentReply.js
+++ b/wax-prosemirror-components/src/ui/comments/CommentReply.js
@@ -40,12 +40,12 @@ const primary = css`
const Button = styled.button`
border: 0;
border-radius: 5px;
- cursor: pointer;
color: gray;
+ cursor: pointer;
padding: ${grid(2)} ${grid(4)};
${props => props.primary && primary}
- ${props => props.disabled && `cursor: not-allowed;`}
+ ${props => props.disabled && `cursor: not-allowed; opacity: 0.3;`}
`;
const ButtonGroup = styled.div`
@@ -55,7 +55,13 @@ const ButtonGroup = styled.div`
`;
const CommentReply = props => {
- const { className, isNewComment, onClickPost, onTextAreaBlur } = props;
+ const {
+ className,
+ isNewComment,
+ onClickPost,
+ isReadOnly,
+ onTextAreaBlur,
+ } = props;
const commentInput = useRef(null);
const [commentValue, setCommentValue] = useState('');
@@ -86,25 +92,29 @@ const CommentReply = props => {
<form onSubmit={handleSubmit}>
<TextWrapper>
<ReplyTextArea
- ref={commentInput}
+ cols="5"
onBlur={() => onBlur(commentInput.current.value)}
- placeholder={isNewComment ? 'Write comment...' : 'Reply...'}
onChange={() => setCommentValue(commentInput.current.value)}
- cols="5"
- rows="3"
onKeyDown={e => {
if (e.keyCode === 13 && !e.shiftKey) {
e.preventDefault();
if (commentValue) handleSubmit(e);
}
}}
+ placeholder={isNewComment ? 'Write comment...' : 'Reply...'}
+ ref={commentInput}
+ rows="3"
value={commentValue}
/>
</TextWrapper>
<ActionWrapper>
<ButtonGroup>
- <Button disabled={commentValue.length === 0} primary type="submit">
+ <Button
+ disabled={commentValue.length === 0 || isReadOnly}
+ primary
+ type="submit"
+ >
Post
</Button>
@@ -121,6 +131,7 @@ const CommentReply = props => {
CommentReply.propTypes = {
isNewComment: PropTypes.bool.isRequired,
onClickPost: PropTypes.func.isRequired,
+ isReadOnly: PropTypes.bool.isRequired,
onTextAreaBlur: PropTypes.func.isRequired,
};