Merge branch 'comments-title-feature' into 'master'

Comments title feature

See merge request !515

editors/demo/src/Editoria/config/config.js

@@ -178,6 +178,9 @@ export default {
     ),
   ],
   ImageService: { showAlt: true },
+  CommentsService: {
+    showTitle: true
+  },
   CustomTagService: {
     tags: [
       { label: 'custom-tag-label-1', tagType: 'inline' },

editors/demo/src/locale/en.js

@@ -147,6 +147,7 @@ const en = {
         Cancel: 'Cancel',
         Reply: 'Reply',
         'Write comment': 'Write comment',
+        'Write title': 'Write title',
       },
       Various: {
         Add: 'Add',

editors/demo/src/locale/es.js

@@ -148,6 +148,7 @@ const es = {
         Cancel: 'Cancelar',
         Reply: 'Responder',
         'Write comment': 'Escribir comentario',
+        'Write title': 'Escribir titulo',
       },
       Various: {
         Add: 'Agregar',

wax-prosemirror-services/src/CommentsService/CommentsService.js

@@ -31,10 +31,12 @@ export default class CommentsService extends Service {
   }
 
   register() {
+    const commentConfig = this.config.get('config.CommentsService');
     const createMark = this.container.get('CreateMark');
+
     createMark(
       {
-        comment: commentMark,
+        comment: commentMark(commentConfig?.showTitle || false),
       },
       { toWaxSchema: true },
     );

wax-prosemirror-services/src/CommentsService/components/ConnectedComment.js

+/* eslint-disable no-param-reassign */
 /* eslint react/prop-types: 0 */
 import React, { useContext, useMemo, useState, useEffect } from 'react';
 import { TextSelection } from 'prosemirror-state';
@@ -55,7 +56,10 @@ export default ({ comment, top, commentId, recalculateTops }) => {
   };
 
   const commentConfig = app.config.get('config.CommentsService');
-  const isReadOnly = commentConfig ? commentConfig.readOnly : false;
+  const isReadOnly =
+    commentConfig && commentConfig.readOnly ? commentConfig.readOnly : false;
+  const showTitle =
+    commentConfig && commentConfig.showTitle ? commentConfig.showTitle : false;
   const commentPlugin = app.PmPlugins.get('commentPlugin');
   const activeComment = commentPlugin.getState(activeView.state).comment;
 
@@ -68,16 +72,17 @@ export default ({ comment, top, commentId, recalculateTops }) => {
     }
   }, [activeComment]);
 
-  const onClickPost = content => {
-    const { tr } = state;
+  const onClickPost = ({ commentValue, title }) => {
     setClickPost(true);
     const obj = {
-      content,
+      content: commentValue,
       displayName: user.username,
       timestamp: Math.floor(Date.now()),
     };
 
+    comment.attrs.title = title || comment.attrs.title;
     comment.attrs.conversation.push(obj);
+
     const id = uuidv4();
     allCommentsWithSameId.forEach(singleComment => {
       activeView.dispatch(
@@ -98,6 +103,7 @@ export default ({ comment, top, commentId, recalculateTops }) => {
               group: comment.attrs.group,
               viewid: comment.attrs.viewid,
               conversation: comment.attrs.conversation,
+              title: comment.attrs.title,
             }),
           )
           .setMeta('forceUpdate', true),
@@ -148,17 +154,13 @@ export default ({ comment, top, commentId, recalculateTops }) => {
     activeView.focus();
   };
 
-  const onTextAreaBlur = (content, isNewComment) => {
+  const onTextAreaBlur = () => {
     // TODO Save into local storage
     // if (content !== '') {
     //   onClickPost(content);
     // }
     setTimeout(() => {
-      if (
-        comment.attrs.conversation.length === 0 &&
-        isNewComment &&
-        !clickPost
-      ) {
+      if (comment.attrs.conversation.length === 0 && !clickPost) {
         onClickResolve();
         activeView.focus();
       }
@@ -184,6 +186,8 @@ export default ({ comment, top, commentId, recalculateTops }) => {
           onClickResolve={onClickResolve}
           onTextAreaBlur={onTextAreaBlur}
           recalculateTops={recalculateTops}
+          showTitle={showTitle}
+          title={comment.attrs.title}
         />
       </ConnectedCommentStyled>
     ),

wax-prosemirror-services/src/CommentsService/components/ui/comments/CommentBox.js

@@ -81,6 +81,8 @@ const CommentBox = props => {
     onClickPost,
     onClickResolve,
     onTextAreaBlur,
+    title,
+    showTitle,
   } = props;
 
   // send signal to make this comment active
@@ -91,7 +93,6 @@ const CommentBox = props => {
 
   if (!active && (!commentData || commentData.length === 0)) return null;
   const { t, i18n } = useTranslation();
-
   return (
     <Wrapper active={active} className={className} onClick={onClickWrapper}>
       {active && commentData.length > 0 && (
@@ -109,15 +110,14 @@ const CommentBox = props => {
           </Resolve>
         </Head>
       )}
-
-      <CommentItemList active={active} data={commentData} />
-
+      <CommentItemList active={active} data={commentData} title={title} />
       {active && (
         <StyledReply
           isNewComment={commentData.length === 0}
           isReadOnly={isReadOnly}
           onClickPost={onClickPost}
           onTextAreaBlur={onTextAreaBlur}
+          showTitle={showTitle}
         />
       )}
     </Wrapper>
@@ -150,11 +150,14 @@ CommentBox.propTypes = {
   onClickResolve: PropTypes.func.isRequired,
   /** Function to run when text area loses focus */
   onTextAreaBlur: PropTypes.func.isRequired,
+  title: PropTypes.string,
+  showTitle: PropTypes.bool.isRequired,
 };
 
 CommentBox.defaultProps = {
   active: false,
   commentData: [],
+  title: null,
 };
 
 export default CommentBox;

wax-prosemirror-services/src/CommentsService/components/ui/comments/CommentItemList.js

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { clone, uniqueId } from 'lodash';
-import { override } from '@pubsweet/ui-toolkit';
+import { override, th } from '@pubsweet/ui-toolkit';
 
 import CommentItem from './CommentItem';
 
@@ -15,6 +15,13 @@ const Wrapper = styled.div`
   ${override('Wax.CommentItemWrapper')}
 `;
 
+const CommentTitle = styled.span`
+  font-weight: bold;
+  font-size: ${th('fontSizeBase')};
+
+  ${override('Wax.CommentItemTitle')}
+`;
+
 const More = styled.span`
   background: gray;
   border-radius: 3px;
@@ -27,7 +34,7 @@ const More = styled.span`
 `;
 
 const CommentItemList = props => {
-  const { active, className, data } = props;
+  const { active, className, data, title } = props;
   if (!data || data.length === 0) return null;
 
   const [items, setItems] = useState(data);
@@ -49,6 +56,7 @@ const CommentItemList = props => {
 
   return (
     <Wrapper active={active} className={className}>
+      {title && <CommentTitle>{title}</CommentTitle>}
       {items.map(item => (
         <CommentItem
           active={active}
@@ -79,11 +87,13 @@ CommentItemList.propTypes = {
       timestamp: PropTypes.number.isRequired,
     }),
   ),
+  title: PropTypes.string,
 };
 
 CommentItemList.defaultProps = {
   active: false,
   data: [],
+  title: null,
 };
 
 export default CommentItemList;

wax-prosemirror-services/src/CommentsService/components/ui/comments/CommentReply.js

@@ -4,6 +4,7 @@ import styled, { css } from 'styled-components';
 import { isEmpty } from 'lodash';
 import { useTranslation } from 'react-i18next';
 import { grid, th, override } from '@pubsweet/ui-toolkit';
+import { useOnClickOutside } from 'wax-prosemirror-core';
 
 const Wrapper = styled.div`
   background: ${th('colorBackgroundHue')};
@@ -14,6 +15,21 @@ const Wrapper = styled.div`
 
 const TextWrapper = styled.div``;
 
+const CommentTitle = styled.input`
+  background: ${th('colorBackgroundHue')};
+  border: 3px solid ${th('colorBackgroundTabs')};
+  font-family: ${th('fontWriting')};
+  margin-bottom: 10px;
+  position: relative;
+  width: 100%;
+
+  &:focus {
+    outline: 1px solid ${th('colorPrimary')};
+  }
+
+  ${override('Wax.CommentTitle')}
+`;
+
 const ReplyTextArea = styled.textarea`
   background: ${th('colorBackgroundHue')};
   border: 3px solid ${th('colorBackgroundTabs')};
@@ -66,40 +82,61 @@ const CommentReply = props => {
     onClickPost,
     isReadOnly,
     onTextAreaBlur,
+    showTitle,
   } = props;
   const { t, i18n } = useTranslation();
   const commentInput = useRef(null);
+  const commentTitle = useRef(null);
   const [commentValue, setCommentValue] = useState('');
+  const [title, setTitle] = useState('');
+
+  const ref = useRef(null);
+
+  useOnClickOutside(ref, onTextAreaBlur);
 
   useEffect(() => {
     setTimeout(() => {
-      if (commentInput.current && isNewComment) commentInput.current.focus();
+      if (commentTitle.current && isNewComment) commentTitle.current.focus();
+      if (commentInput.current && !isNewComment) commentInput.current.focus();
     });
   }, []);
 
   const handleSubmit = e => {
     e.preventDefault();
     e.stopPropagation();
-    onClickPost(commentValue);
+    onClickPost({ title, commentValue });
     setCommentValue('');
+    setTitle('');
   };
 
   const resetValue = e => {
     e.preventDefault();
     setCommentValue('');
-  };
-
-  const onBlur = content => {
-    onTextAreaBlur(content, isNewComment);
+    setTitle('');
   };
 
   return (
-    <Wrapper className={className}>
+    <Wrapper className={className} ref={ref}>
       <form onSubmit={handleSubmit}>
         <TextWrapper>
+          {isNewComment && showTitle && (
+            <CommentTitle
+              name="title"
+              onChange={e => {
+                setTitle(e.target.value);
+              }}
+              placeholder={`${
+                !isEmpty(i18n) && i18n.exists(`Wax.Comments.Write title`)
+                  ? t(`Wax.Comments.Write title`)
+                  : 'Write title'
+              }...`}
+              ref={commentTitle}
+              type="text"
+              value={title}
+            />
+          )}
           <ReplyTextArea
             cols="5"
-            onBlur={() => onBlur(commentInput.current.value)}
             onChange={() => setCommentValue(commentInput.current.value)}
             onKeyDown={e => {
               if (e.keyCode === 13 && !e.shiftKey) {
@@ -155,6 +192,7 @@ CommentReply.propTypes = {
   onClickPost: PropTypes.func.isRequired,
   isReadOnly: PropTypes.bool.isRequired,
   onTextAreaBlur: PropTypes.func.isRequired,
+  showTitle: PropTypes.bool.isRequired,
 };
 
 CommentReply.defaultProps = {};

wax-prosemirror-services/src/CommentsService/schema/commentMark.js

-const commentMark = {
-  attrs: {
-    class: { default: 'comment' },
-    id: { default: '' },
-    group: { default: '' },
-    viewid: { default: '' },
-    conversation: [],
-  },
-  inclusive: false,
-  excludes: '',
-  parseDOM: [
-    {
-      tag: 'span.comment',
-      getAttrs(hook, next) {
-        Object.assign(hook, {
-          class: hook.dom.getAttribute('class'),
-          id: hook.dom.dataset.id,
-          group: hook.dom.dataset.group,
-          viewid: hook.dom.dataset.viewid,
-          conversation: JSON.parse(hook.dom.dataset.conversation),
-        });
-        next();
-      },
+/* eslint-disable no-param-reassign */
+const commentMark = showTitle => {
+  const comment = {
+    attrs: {
+      class: { default: 'comment' },
+      id: { default: '' },
+      group: { default: '' },
+      viewid: { default: '' },
+      conversation: [],
     },
-  ],
-  toDOM(hook, next) {
-    hook.value = [
-      'span',
+    inclusive: false,
+    excludes: '',
+    parseDOM: [
       {
-        class: hook.node.attrs.class,
-        'data-id': hook.node.attrs.id,
-        'data-conversation': JSON.stringify(hook.node.attrs.conversation),
-        'data-viewid': hook.node.attrs.viewid,
-        'data-group': hook.node.attrs.group,
+        tag: 'span.comment',
+        getAttrs(hook, next) {
+          const parsedDom = {
+            class: hook.dom.getAttribute('class'),
+            id: hook.dom.dataset.id,
+            group: hook.dom.dataset.group,
+            viewid: hook.dom.dataset.viewid,
+            conversation: JSON.parse(hook.dom.dataset.conversation),
+          };
+
+          if (showTitle) {
+            parsedDom.title = hook.dom.dataset.title;
+          }
+
+          Object.assign(hook, parsedDom);
+          next();
+        },
       },
-    ];
-    next();
-  },
+    ],
+    toDOM(hook, next) {
+      hook.value = [
+        'span',
+        {
+          class: hook.node.attrs.class,
+          'data-id': hook.node.attrs.id,
+          'data-conversation': JSON.stringify(hook.node.attrs.conversation),
+          'data-viewid': hook.node.attrs.viewid,
+          'data-group': hook.node.attrs.group,
+        },
+      ];
+
+      if (showTitle) {
+        hook.value[1]['data-title'] = hook.node.attrs.title;
+      }
+
+      next();
+    },
+  };
+
+  if (showTitle) {
+    comment.attrs.title = { default: '' };
+  }
+
+  return comment;
 };
 
 export default commentMark;

wax-prosemirror-services/src/YjsService/YjsService.js

+/* eslint-disable no-console */
 import { Service } from 'wax-prosemirror-core';
 import { yCursorPlugin, ySyncPlugin, yUndoPlugin } from 'y-prosemirror';
 import { WebsocketProvider } from 'y-websocket';
@@ -7,10 +8,22 @@ import './yjs.css';
 class YjsService extends Service {
   name = 'YjsService';
   boot() {
-    const { connectionUrl, docIdentifier } = this.config;
-    const ydoc = new Y.Doc();
-    // const provider = new WebsocketProvider('wss://demos.yjs.dev', 'prosemirror-demo', ydoc)
-    const provider = new WebsocketProvider(connectionUrl, docIdentifier, ydoc);
+    const {
+      connectionUrl,
+      docIdentifier,
+      cursorBuilder,
+      provider: configProvider,
+      ydoc: configYdoc,
+    } = this.config;
+
+    let provider = configProvider ? configProvider() : null;
+    let ydoc = configYdoc ? configYdoc() : null;
+
+    if (!configProvider || !configYdoc) {
+      ydoc = new Y.Doc();
+      provider = new WebsocketProvider(connectionUrl, docIdentifier, ydoc);
+    }
+
     provider.on('sync', args => {
       console.log({ sync: args });
     });
@@ -23,9 +36,23 @@ class YjsService extends Service {
     provider.on('connection-error', args => {
       console.log({ connectioError: args });
     });
+
     const type = ydoc.getXmlFragment('prosemirror');
+
     this.app.PmPlugins.add('ySyncPlugin', ySyncPlugin(type));
-    this.app.PmPlugins.add('yCursorPlugin', yCursorPlugin(provider.awareness));
+
+    if (cursorBuilder) {
+      this.app.PmPlugins.add(
+        'yCursorPlugin',
+        yCursorPlugin(provider.awareness, { cursorBuilder }),
+      );
+    } else {
+      this.app.PmPlugins.add(
+        'yCursorPlugin',
+        yCursorPlugin(provider.awareness),
+      );
+    }
+
     this.app.PmPlugins.add('yUndoPlugin', yUndoPlugin());
   }
 }