@manuscripts/style-guide 1.4.2 → 1.4.3-LEAN-3030-0

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 +36 -80
  2. package/dist/es/components/Comments/CommentBody.js +36 -80
  3. package/dist/types/components/Comments/CommentBody.d.ts +1 -2
  4. package/package.json +2 -5
package/dist/cjs/components/Comments/CommentBody.js CHANGED
@@ -28,14 +28,13 @@ 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");
32
31
  const formik_1 = require("formik");
33
32
  const react_1 = __importStar(require("react"));
34
33
  const react_tooltip_1 = __importDefault(require("react-tooltip"));
35
34
  const styled_components_1 = __importDefault(require("styled-components"));
36
35
  const Button_1 = require("../Button");
37
36
  const Form_1 = require("../Form");
38
- exports.CommentBody = react_1.default.memo(({ createKeyword, comment, getCollaborator, getKeyword, listCollaborators, listKeywords, saveComment, deleteComment, isReply, isNew, handleCreateReply, setIsEditing, scrollIntoHighlight, onFocusOut, isEditing, isProdNote, }) => {
37
+ exports.CommentBody = react_1.default.memo(({ comment, saveComment, deleteComment, isReply, isNew, handleCreateReply, setIsEditing, scrollIntoHighlight, onFocusOut, isEditing, isProdNote, }) => {
39
38
  (0, react_1.useEffect)(() => {
40
39
  if (isNew) {
41
40
  setIsEditing(true);
@@ -54,7 +53,8 @@ exports.CommentBody = react_1.default.memo(({ createKeyword, comment, getCollabo
54
53
  } }, ({ errors, values, setFieldValue }) => (react_1.default.createElement(formik_1.Form, null,
55
54
  errors.contents && react_1.default.createElement(Form_1.FormError, null, errors.contents),
56
55
  react_1.default.createElement(formik_1.Field, { name: 'contents' }, (props) => (react_1.default.createElement(CommentContent, null,
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...' })))),
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...' })))),
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(({ createKeyword, comment, getCollabo
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, { value: comment.contents, getCollaborator: getCollaborator, getKeyword: getKeyword })),
66
+ react_1.default.createElement(StyledCommentViewer, null, comment.contents)),
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,90 +97,46 @@ 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 = (0, styled_components_1.default)(comment_editor_1.CommentField) `
101
- flex: 1;
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;
102
106
 
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;
107
+ width: 100%;
108
+ outline: 0;
109
+ border: 1px solid #e2e2e2;
110
+ border-radius: 6px;
108
111
 
109
- outline: 0;
110
- border: 1px solid #e2e2e2;
112
+ &:focus {
113
+ background: #f2fbfc;
114
+ border: 1px solid #bce7f6;
111
115
  border-radius: 6px;
116
+ }
112
117
 
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
- }
138
-
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
- }
118
+ .empty-node::before {
119
+ position: absolute;
120
+ color: #c9c9c9;
121
+ cursor: text;
122
+ pointer-events: none;
153
123
  }
124
+
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;
154
131
  `;
155
- const StyledCommentViewer = (0, styled_components_1.default)(comment_editor_1.Comment) `
132
+ const StyledCommentViewer = styled_components_1.default.div `
156
133
  flex: 1;
157
134
 
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
- }
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;
184
140
  `;
185
141
  const Actions = (0, styled_components_1.default)(Button_1.ButtonGroup) `
186
142
  & button:not(:last-of-type) {
package/dist/es/components/Comments/CommentBody.js CHANGED
@@ -1,12 +1,11 @@
1
1
  import AnnotationReply from '@manuscripts/assets/react/AnnotationReply';
2
- import { Comment, CommentField } from '@manuscripts/comment-editor';
3
2
  import { Field, Form, Formik } from 'formik';
4
3
  import React, { useEffect } from 'react';
5
4
  import ReactTooltip from 'react-tooltip';
6
5
  import styled from 'styled-components';
7
6
  import { ButtonGroup, PrimaryButton, SecondaryButton } from '../Button';
8
7
  import { FormError } from '../Form';
9
- export const CommentBody = React.memo(({ createKeyword, comment, getCollaborator, getKeyword, listCollaborators, listKeywords, saveComment, deleteComment, isReply, isNew, handleCreateReply, setIsEditing, scrollIntoHighlight, onFocusOut, isEditing, isProdNote, }) => {
8
+ export const CommentBody = React.memo(({ comment, saveComment, deleteComment, isReply, isNew, handleCreateReply, setIsEditing, scrollIntoHighlight, onFocusOut, isEditing, isProdNote, }) => {
10
9
  useEffect(() => {
11
10
  if (isNew) {
12
11
  setIsEditing(true);
@@ -25,7 +24,8 @@ export const CommentBody = React.memo(({ createKeyword, comment, getCollaborator
25
24
  } }, ({ errors, values, setFieldValue }) => (React.createElement(Form, null,
26
25
  errors.contents && React.createElement(FormError, null, errors.contents),
27
26
  React.createElement(Field, { name: 'contents' }, (props) => (React.createElement(CommentContent, null,
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...' })))),
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...' })))),
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(({ createKeyword, comment, getCollaborator
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, { value: comment.contents, getCollaborator: getCollaborator, getKeyword: getKeyword })),
37
+ React.createElement(StyledCommentViewer, null, comment.contents)),
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,90 +68,46 @@ 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(CommentField) `
72
- flex: 1;
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;
73
77
 
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;
78
+ width: 100%;
79
+ outline: 0;
80
+ border: 1px solid #e2e2e2;
81
+ border-radius: 6px;
79
82
 
80
- outline: 0;
81
- border: 1px solid #e2e2e2;
83
+ &:focus {
84
+ background: #f2fbfc;
85
+ border: 1px solid #bce7f6;
82
86
  border-radius: 6px;
87
+ }
83
88
 
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
- }
109
-
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
- }
89
+ .empty-node::before {
90
+ position: absolute;
91
+ color: #c9c9c9;
92
+ cursor: text;
93
+ pointer-events: none;
124
94
  }
95
+
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;
125
102
  `;
126
- const StyledCommentViewer = styled(Comment) `
103
+ const StyledCommentViewer = styled.div `
127
104
  flex: 1;
128
105
 
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
- }
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;
155
111
  `;
156
112
  const Actions = styled(ButtonGroup) `
157
113
  & button:not(:last-of-type) {
package/dist/types/components/Comments/CommentBody.d.ts CHANGED
@@ -1,5 +1,4 @@
1
1
  import { Keyword, UserProfile } from '@manuscripts/json-schema';
2
- import { EditorView } from 'prosemirror-view';
3
2
  import React, { Dispatch, SetStateAction } from 'react';
4
3
  import { CommentType, UnsavedComment } from '../../lib/comments';
5
4
  export interface CommentBodyProps {
@@ -15,7 +14,7 @@ export interface CommentBodyProps {
15
14
  saveComment: (comment: CommentType | UnsavedComment) => Promise<CommentType>;
16
15
  handleCreateReply: (id: string) => void;
17
16
  scrollIntoHighlight?: (comment: CommentType | UnsavedComment) => void;
18
- onFocusOut?: (view: EditorView, event: Event) => boolean;
17
+ onFocusOut?: (id: string, content: string) => boolean;
19
18
  }
20
19
  export declare const CommentBody: React.FC<CommentBodyProps & {
21
20
  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.2",
4
+ "version": "1.4.3-LEAN-3030-0",
5
5
  "repository": "github:Atypon-OpenSource/manuscripts-style-guide",
6
6
  "license": "Apache-2.0",
7
7
  "main": "dist/cjs",
@@ -36,10 +36,9 @@
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.2",
39
+ "@manuscripts/transform": "1.5.2-LEAN-3032",
40
40
  "@manuscripts/json-schema": "^2.1.2",
41
41
  "@manuscripts/title-editor": "^1.1.0",
42
- "@manuscripts/comment-editor": "^1.0.3",
43
42
  "@reach/tabs": "^0.11.2",
44
43
  "formik": "^2.2.9",
45
44
  "date-fns": "^2.29.3",
@@ -53,7 +52,6 @@
53
52
  "prosemirror-model": "^1.18.3",
54
53
  "prosemirror-state": "^1.4.2",
55
54
  "prosemirror-transform": "^1.7.0",
56
- "prosemirror-view": "^1.29.1",
57
55
  "react": "^17.0.2",
58
56
  "react-color": "^2.19.3",
59
57
  "react-dnd": "^11.1.3",
@@ -124,7 +122,6 @@
124
122
  "prosemirror-model": "^1.18.3",
125
123
  "prosemirror-state": "^1.4.2",
126
124
  "prosemirror-transform": "^1.7.0",
127
- "prosemirror-view": "^1.29.1",
128
125
  "react": "^17.0.2",
129
126
  "react-color": "^2.19.3",
130
127
  "react-dnd": "^11.1.3",