@manuscripts/style-guide 1.4.0-LEAN-3050-0 → 1.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/cjs/components/Comments/CommentBody.js +80 -36
  2. package/dist/es/components/Comments/CommentBody.js +80 -36
  3. package/dist/types/components/Comments/CommentBody.d.ts +2 -1
  4. package/package.json +4 -2
package/dist/cjs/components/Comments/CommentBody.js CHANGED
@@ -28,13 +28,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
28
28
  Object.defineProperty(exports, "__esModule", { value: true });
29
29
  exports.CommentBody = void 0;
30
30
  const AnnotationReply_1 = __importDefault(require("@manuscripts/assets/react/AnnotationReply"));
31
+ const comment_editor_1 = require("@manuscripts/comment-editor");
31
32
  const formik_1 = require("formik");
32
33
  const react_1 = __importStar(require("react"));
33
34
  const react_tooltip_1 = __importDefault(require("react-tooltip"));
34
35
  const styled_components_1 = __importDefault(require("styled-components"));
35
36
  const Button_1 = require("../Button");
36
37
  const Form_1 = require("../Form");
37
- exports.CommentBody = react_1.default.memo(({ comment, saveComment, deleteComment, isReply, isNew, handleCreateReply, setIsEditing, scrollIntoHighlight, onFocusOut, isEditing, isProdNote, }) => {
38
+ exports.CommentBody = react_1.default.memo(({ createKeyword, comment, getCollaborator, getKeyword, listCollaborators, listKeywords, saveComment, deleteComment, isReply, isNew, handleCreateReply, setIsEditing, scrollIntoHighlight, onFocusOut, isEditing, isProdNote, }) => {
38
39
  (0, react_1.useEffect)(() => {
39
40
  if (isNew) {
40
41
  setIsEditing(true);
@@ -53,8 +54,7 @@ exports.CommentBody = react_1.default.memo(({ comment, saveComment, deleteCommen
53
54
  } }, ({ errors, values, setFieldValue }) => (react_1.default.createElement(formik_1.Form, null,
54
55
  errors.contents && react_1.default.createElement(Form_1.FormError, null, errors.contents),
55
56
  react_1.default.createElement(formik_1.Field, { name: 'contents' }, (props) => (react_1.default.createElement(CommentContent, null,
56
- react_1.default.createElement(StyledCommentField, { id: comment._id, autoFocus: isEditing, value: values.contents, onChange: (event) => setFieldValue(props.field.name, event.target.value), onBlur: (event) => onFocusOut &&
57
- onFocusOut(comment._id, event.target.value), placeholder: !isReply ? 'Comment...' : 'Reply...' })))),
57
+ 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...' })))),
58
58
  react_1.default.createElement(EditingCommentFooter, null,
59
59
  react_1.default.createElement(Actions, null,
60
60
  react_1.default.createElement(Button_1.SecondaryButton, { onClick: cancelEditing }, "Cancel"),
@@ -63,7 +63,7 @@ exports.CommentBody = react_1.default.memo(({ comment, saveComment, deleteCommen
63
63
  (comment.contents === values.contents ||
64
64
  !values.contents.replace(/<[^>]+>/g, '').length)), type: "submit" }, "Save"))))))) : (react_1.default.createElement("div", null,
65
65
  react_1.default.createElement(CommentContent, { onClick: () => scrollIntoHighlight && scrollIntoHighlight(comment) },
66
- react_1.default.createElement(StyledCommentViewer, null, comment.contents)),
66
+ react_1.default.createElement(StyledCommentViewer, { value: comment.contents, getCollaborator: getCollaborator, getKeyword: getKeyword })),
67
67
  !isReply && (react_1.default.createElement(CommentFooter, null,
68
68
  react_1.default.createElement("span", null,
69
69
  react_1.default.createElement(ActionButton, { hidden: !isProdNote, "data-tip": true, "data-for": `reply-${comment._id}`, onClick: () => handleCreateReply(comment._id), "aria-label": 'reply', className: "reply-button note-actions" },
@@ -97,46 +97,90 @@ const CommentContent = styled_components_1.default.div `
97
97
  cursor: pointer;
98
98
  padding: 0 ${(props) => props.theme.grid.unit * 4}px;
99
99
  `;
100
- const StyledCommentField = styled_components_1.default.textarea `
101
- cursor: text;
102
- font-family: ${(props) => props.theme.font.family.sans};
103
- color: ${(props) => props.theme.colors.text.primary};
104
- margin: ${(props) => props.theme.grid.unit * 2}px 0;
105
- resize: none;
100
+ const StyledCommentField = (0, styled_components_1.default)(comment_editor_1.CommentField) `
101
+ flex: 1;
106
102
 
107
- width: 100%;
108
- outline: 0;
109
- border: 1px solid #e2e2e2;
110
- border-radius: 6px;
103
+ & .ProseMirror {
104
+ cursor: text;
105
+ font-family: ${(props) => props.theme.font.family.sans};
106
+ color: ${(props) => props.theme.colors.text.primary};
107
+ margin: ${(props) => props.theme.grid.unit * 2}px 0;
111
108
 
112
- &:focus {
113
- background: #f2fbfc;
114
- border: 1px solid #bce7f6;
109
+ outline: 0;
110
+ border: 1px solid #e2e2e2;
115
111
  border-radius: 6px;
116
- }
117
112
 
118
- .empty-node::before {
119
- position: absolute;
120
- color: #c9c9c9;
121
- cursor: text;
122
- pointer-events: none;
123
- }
113
+ &:focus {
114
+ background: #f2fbfc;
115
+ border: 1px solid #bce7f6;
116
+ border-radius: 6px;
117
+ }
118
+
119
+ .empty-node::before {
120
+ position: absolute;
121
+ color: #c9c9c9;
122
+ cursor: text;
123
+ pointer-events: none;
124
+ }
125
+
126
+ ${(props) => `& p.empty-node:before { content: '${props.notePlaceholder}'; }`};
127
+
128
+ box-sizing: border-box;
129
+ padding: 3px 16px 3px 16px;
130
+ font-style: normal;
131
+ font-weight: normal;
132
+ font-size: 14px;
133
+ line-height: 24px;
134
+
135
+ & p:first-child {
136
+ margin-top: 0;
137
+ }
124
138
 
125
- box-sizing: border-box;
126
- padding: 3px 16px 3px 16px;
127
- font-style: normal;
128
- font-weight: normal;
129
- font-size: 14px;
130
- line-height: 24px;
139
+ & p:last-child {
140
+ margin-bottom: 0;
141
+ }
142
+
143
+ & blockquote {
144
+ margin: ${(props) => props.theme.grid.unit * 2}px 0;
145
+ border-left: ${(props) => props.theme.grid.unit}px solid #faed98;
146
+ padding-left: 1em;
147
+ font-size: ${(props) => props.theme.font.size.small};
148
+ font-style: italic;
149
+ line-height: 1.17;
150
+ letter-spacing: -0.2px;
151
+ color: #bababa;
152
+ }
153
+ }
131
154
  `;
132
- const StyledCommentViewer = styled_components_1.default.div `
155
+ const StyledCommentViewer = (0, styled_components_1.default)(comment_editor_1.Comment) `
133
156
  flex: 1;
134
157
 
135
- font-family: ${(props) => props.theme.font.family.sans};
136
- line-height: 1.06;
137
- letter-spacing: -0.2px;
138
- color: ${(props) => props.theme.colors.text.primary};
139
- margin: ${(props) => props.theme.grid.unit * 2}px 0;
158
+ & .ProseMirror {
159
+ font-family: ${(props) => props.theme.font.family.sans};
160
+ line-height: 1.06;
161
+ letter-spacing: -0.2px;
162
+ color: ${(props) => props.theme.colors.text.primary};
163
+ margin: ${(props) => props.theme.grid.unit * 2}px 0;
164
+
165
+ & p:first-child {
166
+ margin-top: 0;
167
+ }
168
+
169
+ & p:last-child {
170
+ margin-bottom: 0;
171
+ }
172
+
173
+ & blockquote {
174
+ margin: 10px 0;
175
+ border-left: 4px solid #faed98;
176
+ padding-left: 1em;
177
+ font-size: ${(props) => props.theme.font.size.small};
178
+ font-style: italic;
179
+ line-height: 1.17;
180
+ letter-spacing: -0.2px;
181
+ color: #bababa;
182
+ }
183
+ }
140
184
  `;
141
185
  const Actions = (0, styled_components_1.default)(Button_1.ButtonGroup) `
142
186
  & button:not(:last-of-type) {
package/dist/es/components/Comments/CommentBody.js CHANGED
@@ -1,11 +1,12 @@
1
1
  import AnnotationReply from '@manuscripts/assets/react/AnnotationReply';
2
+ import { Comment, CommentField } from '@manuscripts/comment-editor';
2
3
  import { Field, Form, Formik } from 'formik';
3
4
  import React, { useEffect } from 'react';
4
5
  import ReactTooltip from 'react-tooltip';
5
6
  import styled from 'styled-components';
6
7
  import { ButtonGroup, PrimaryButton, SecondaryButton } from '../Button';
7
8
  import { FormError } from '../Form';
8
- export const CommentBody = React.memo(({ comment, saveComment, deleteComment, isReply, isNew, handleCreateReply, setIsEditing, scrollIntoHighlight, onFocusOut, isEditing, isProdNote, }) => {
9
+ export const CommentBody = React.memo(({ createKeyword, comment, getCollaborator, getKeyword, listCollaborators, listKeywords, saveComment, deleteComment, isReply, isNew, handleCreateReply, setIsEditing, scrollIntoHighlight, onFocusOut, isEditing, isProdNote, }) => {
9
10
  useEffect(() => {
10
11
  if (isNew) {
11
12
  setIsEditing(true);
@@ -24,8 +25,7 @@ export const CommentBody = React.memo(({ comment, saveComment, deleteComment, is
24
25
  } }, ({ errors, values, setFieldValue }) => (React.createElement(Form, null,
25
26
  errors.contents && React.createElement(FormError, null, errors.contents),
26
27
  React.createElement(Field, { name: 'contents' }, (props) => (React.createElement(CommentContent, null,
27
- React.createElement(StyledCommentField, { id: comment._id, autoFocus: isEditing, value: values.contents, onChange: (event) => setFieldValue(props.field.name, event.target.value), onBlur: (event) => onFocusOut &&
28
- onFocusOut(comment._id, event.target.value), placeholder: !isReply ? 'Comment...' : 'Reply...' })))),
28
+ 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...' })))),
29
29
  React.createElement(EditingCommentFooter, null,
30
30
  React.createElement(Actions, null,
31
31
  React.createElement(SecondaryButton, { onClick: cancelEditing }, "Cancel"),
@@ -34,7 +34,7 @@ export const CommentBody = React.memo(({ comment, saveComment, deleteComment, is
34
34
  (comment.contents === values.contents ||
35
35
  !values.contents.replace(/<[^>]+>/g, '').length)), type: "submit" }, "Save"))))))) : (React.createElement("div", null,
36
36
  React.createElement(CommentContent, { onClick: () => scrollIntoHighlight && scrollIntoHighlight(comment) },
37
- React.createElement(StyledCommentViewer, null, comment.contents)),
37
+ React.createElement(StyledCommentViewer, { value: comment.contents, getCollaborator: getCollaborator, getKeyword: getKeyword })),
38
38
  !isReply && (React.createElement(CommentFooter, null,
39
39
  React.createElement("span", null,
40
40
  React.createElement(ActionButton, { hidden: !isProdNote, "data-tip": true, "data-for": `reply-${comment._id}`, onClick: () => handleCreateReply(comment._id), "aria-label": 'reply', className: "reply-button note-actions" },
@@ -68,46 +68,90 @@ const CommentContent = styled.div `
68
68
  cursor: pointer;
69
69
  padding: 0 ${(props) => props.theme.grid.unit * 4}px;
70
70
  `;
71
- const StyledCommentField = styled.textarea `
72
- cursor: text;
73
- font-family: ${(props) => props.theme.font.family.sans};
74
- color: ${(props) => props.theme.colors.text.primary};
75
- margin: ${(props) => props.theme.grid.unit * 2}px 0;
76
- resize: none;
71
+ const StyledCommentField = styled(CommentField) `
72
+ flex: 1;
77
73
 
78
- width: 100%;
79
- outline: 0;
80
- border: 1px solid #e2e2e2;
81
- border-radius: 6px;
74
+ & .ProseMirror {
75
+ cursor: text;
76
+ font-family: ${(props) => props.theme.font.family.sans};
77
+ color: ${(props) => props.theme.colors.text.primary};
78
+ margin: ${(props) => props.theme.grid.unit * 2}px 0;
82
79
 
83
- &:focus {
84
- background: #f2fbfc;
85
- border: 1px solid #bce7f6;
80
+ outline: 0;
81
+ border: 1px solid #e2e2e2;
86
82
  border-radius: 6px;
87
- }
88
83
 
89
- .empty-node::before {
90
- position: absolute;
91
- color: #c9c9c9;
92
- cursor: text;
93
- pointer-events: none;
94
- }
84
+ &:focus {
85
+ background: #f2fbfc;
86
+ border: 1px solid #bce7f6;
87
+ border-radius: 6px;
88
+ }
89
+
90
+ .empty-node::before {
91
+ position: absolute;
92
+ color: #c9c9c9;
93
+ cursor: text;
94
+ pointer-events: none;
95
+ }
96
+
97
+ ${(props) => `& p.empty-node:before { content: '${props.notePlaceholder}'; }`};
98
+
99
+ box-sizing: border-box;
100
+ padding: 3px 16px 3px 16px;
101
+ font-style: normal;
102
+ font-weight: normal;
103
+ font-size: 14px;
104
+ line-height: 24px;
105
+
106
+ & p:first-child {
107
+ margin-top: 0;
108
+ }
95
109
 
96
- box-sizing: border-box;
97
- padding: 3px 16px 3px 16px;
98
- font-style: normal;
99
- font-weight: normal;
100
- font-size: 14px;
101
- line-height: 24px;
110
+ & p:last-child {
111
+ margin-bottom: 0;
112
+ }
113
+
114
+ & blockquote {
115
+ margin: ${(props) => props.theme.grid.unit * 2}px 0;
116
+ border-left: ${(props) => props.theme.grid.unit}px solid #faed98;
117
+ padding-left: 1em;
118
+ font-size: ${(props) => props.theme.font.size.small};
119
+ font-style: italic;
120
+ line-height: 1.17;
121
+ letter-spacing: -0.2px;
122
+ color: #bababa;
123
+ }
124
+ }
102
125
  `;
103
- const StyledCommentViewer = styled.div `
126
+ const StyledCommentViewer = styled(Comment) `
104
127
  flex: 1;
105
128
 
106
- font-family: ${(props) => props.theme.font.family.sans};
107
- line-height: 1.06;
108
- letter-spacing: -0.2px;
109
- color: ${(props) => props.theme.colors.text.primary};
110
- margin: ${(props) => props.theme.grid.unit * 2}px 0;
129
+ & .ProseMirror {
130
+ font-family: ${(props) => props.theme.font.family.sans};
131
+ line-height: 1.06;
132
+ letter-spacing: -0.2px;
133
+ color: ${(props) => props.theme.colors.text.primary};
134
+ margin: ${(props) => props.theme.grid.unit * 2}px 0;
135
+
136
+ & p:first-child {
137
+ margin-top: 0;
138
+ }
139
+
140
+ & p:last-child {
141
+ margin-bottom: 0;
142
+ }
143
+
144
+ & blockquote {
145
+ margin: 10px 0;
146
+ border-left: 4px solid #faed98;
147
+ padding-left: 1em;
148
+ font-size: ${(props) => props.theme.font.size.small};
149
+ font-style: italic;
150
+ line-height: 1.17;
151
+ letter-spacing: -0.2px;
152
+ color: #bababa;
153
+ }
154
+ }
111
155
  `;
112
156
  const Actions = styled(ButtonGroup) `
113
157
  & button:not(:last-of-type) {
package/dist/types/components/Comments/CommentBody.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import { Keyword, UserProfile } from '@manuscripts/json-schema';
2
+ import { EditorView } from 'prosemirror-view';
2
3
  import React, { Dispatch, SetStateAction } from 'react';
3
4
  import { CommentType, UnsavedComment } from '../../lib/comments';
4
5
  export interface CommentBodyProps {
@@ -14,7 +15,7 @@ export interface CommentBodyProps {
14
15
  saveComment: (comment: CommentType | UnsavedComment) => Promise<CommentType>;
15
16
  handleCreateReply: (id: string) => void;
16
17
  scrollIntoHighlight?: (comment: CommentType | UnsavedComment) => void;
17
- onFocusOut?: (id: string, content: string) => boolean;
18
+ onFocusOut?: (view: EditorView, event: Event) => boolean;
18
19
  }
19
20
  export declare const CommentBody: React.FC<CommentBodyProps & {
20
21
  setIsEditing: Dispatch<SetStateAction<boolean | undefined>>;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@manuscripts/style-guide",
3
3
  "description": "Shared components for Manuscripts applications",
4
- "version": "1.4.0-LEAN-3050-0",
4
+ "version": "1.4.1",
5
5
  "repository": "github:Atypon-OpenSource/manuscripts-style-guide",
6
6
  "license": "Apache-2.0",
7
7
  "main": "dist/cjs",
@@ -36,9 +36,10 @@
36
36
  "@formatjs/intl-relativetimeformat": "^4.5.9",
37
37
  "@formatjs/intl-utils": "^2.2.0",
38
38
  "@manuscripts/assets": "^0.6.2",
39
- "@manuscripts/transform": "1.5.0",
39
+ "@manuscripts/transform": "1.5.2",
40
40
  "@manuscripts/json-schema": "^2.1.2",
41
41
  "@manuscripts/title-editor": "^1.1.0",
42
+ "@manuscripts/comment-editor": "^1.0.3",
42
43
  "@reach/tabs": "^0.11.2",
43
44
  "formik": "^2.2.9",
44
45
  "date-fns": "^2.29.3",
@@ -52,6 +53,7 @@
52
53
  "prosemirror-model": "^1.18.3",
53
54
  "prosemirror-state": "^1.4.2",
54
55
  "prosemirror-transform": "^1.7.0",
56
+ "prosemirror-view": "^1.29.1",
55
57
  "react": "^17.0.2",
56
58
  "react-color": "^2.19.3",
57
59
  "react-dnd": "^11.1.3",