@manuscripts/style-guide 1.4.0-LEAN-2852-8 → 1.4.0-LEAN-3050-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 (7) hide show
  1. package/dist/cjs/components/Comments/CommentBody.js +36 -80
  2. package/dist/cjs/components/NavDropdown.js +7 -2
  3. package/dist/es/components/Comments/CommentBody.js +36 -80
  4. package/dist/es/components/NavDropdown.js +6 -1
  5. package/dist/types/components/Comments/CommentBody.d.ts +1 -2
  6. package/dist/types/components/NavDropdown.d.ts +2 -0
  7. package/package.json +4 -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/cjs/components/NavDropdown.js CHANGED
@@ -41,8 +41,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
41
41
  return (mod && mod.__esModule) ? mod : { "default": mod };
42
42
  };
43
43
  Object.defineProperty(exports, "__esModule", { value: true });
44
- exports.NavDropdownButton = exports.NavDropdownButtonContainer = exports.NotificationsBadge = exports.NavDropdownToggle = exports.NavDropdownButtonText = exports.NavDropdownSeparator = exports.NavDropdownElement = exports.NavDropdownLink = exports.InvitedBy = exports.NavDropdown = exports.NavDropdownContainer = void 0;
44
+ exports.NavDropdownButton = exports.NavDropdownButtonContainer = exports.NotificationsBadge = exports.NavDropdownToggle = exports.NavDropdownButtonText = exports.NavDropdownSeparator = exports.NavDropdownElement = exports.NavDropdownLink = exports.InvitedBy = exports.PlaceholderTitle = exports.NavDropdown = exports.NavDropdownContainer = void 0;
45
45
  const ArrowDownUp_1 = __importDefault(require("@manuscripts/assets/react/ArrowDownUp"));
46
+ const title_editor_1 = require("@manuscripts/title-editor");
46
47
  const react_1 = __importDefault(require("react"));
47
48
  const react_router_dom_1 = require("react-router-dom");
48
49
  const styled_components_1 = __importStar(require("styled-components"));
@@ -71,6 +72,9 @@ exports.NavDropdown = styled_components_1.default.div `
71
72
  position: absolute;
72
73
  z-index: 10;
73
74
  `;
75
+ exports.PlaceholderTitle = (0, styled_components_1.default)(title_editor_1.Title) `
76
+ color: ${(props) => props.theme.colors.text.secondary};
77
+ `;
74
78
  exports.InvitedBy = styled_components_1.default.div `
75
79
  display: flex;
76
80
  align-items: center;
@@ -93,7 +97,8 @@ const commonStyles = (0, styled_components_1.css) `
93
97
  : props.theme.colors.text.primary};
94
98
  pointer-events: ${(props) => (props.disabled ? 'none' : 'unset')};
95
99
 
96
- &:hover {
100
+ &:hover,
101
+ &:hover ${exports.PlaceholderTitle} {
97
102
  background: ${(props) => props.theme.colors.background.fifth};
98
103
  }
99
104
  `;
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/es/components/NavDropdown.js CHANGED
@@ -14,6 +14,7 @@
14
14
  * limitations under the License.
15
15
  */
16
16
  import ArrowDownUp from '@manuscripts/assets/react/ArrowDownUp';
17
+ import { Title } from '@manuscripts/title-editor';
17
18
  import React from 'react';
18
19
  import { NavLink } from 'react-router-dom';
19
20
  import styled, { css } from 'styled-components';
@@ -42,6 +43,9 @@ export const NavDropdown = styled.div `
42
43
  position: absolute;
43
44
  z-index: 10;
44
45
  `;
46
+ export const PlaceholderTitle = styled(Title) `
47
+ color: ${(props) => props.theme.colors.text.secondary};
48
+ `;
45
49
  export const InvitedBy = styled.div `
46
50
  display: flex;
47
51
  align-items: center;
@@ -64,7 +68,8 @@ const commonStyles = css `
64
68
  : props.theme.colors.text.primary};
65
69
  pointer-events: ${(props) => (props.disabled ? 'none' : 'unset')};
66
70
 
67
- &:hover {
71
+ &:hover,
72
+ &:hover ${PlaceholderTitle} {
68
73
  background: ${(props) => props.theme.colors.background.fifth};
69
74
  }
70
75
  `;
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/dist/types/components/NavDropdown.d.ts CHANGED
@@ -13,6 +13,7 @@
13
13
  * See the License for the specific language governing permissions and
14
14
  * limitations under the License.
15
15
  */
16
+ import { Title } from '@manuscripts/title-editor';
16
17
  import React from 'react';
17
18
  import { NavLink } from 'react-router-dom';
18
19
  export declare const NavDropdownContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
@@ -21,6 +22,7 @@ export declare const NavDropdown: import("styled-components").StyledComponent<"d
21
22
  minWidth?: number | undefined;
22
23
  top?: number | undefined;
23
24
  }, never>;
25
+ export declare const PlaceholderTitle: import("styled-components").StyledComponent<typeof Title, import("styled-components").DefaultTheme, {}, never>;
24
26
  export declare const InvitedBy: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
25
27
  export declare const NavDropdownLink: import("styled-components").StyledComponent<typeof NavLink, import("styled-components").DefaultTheme, {
26
28
  disabled?: 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-2852-8",
4
+ "version": "1.4.0-LEAN-3050-0",
5
5
  "repository": "github:Atypon-OpenSource/manuscripts-style-guide",
6
6
  "license": "Apache-2.0",
7
7
  "main": "dist/cjs",
@@ -36,9 +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.1-LEAN-2852-9",
40
- "@manuscripts/json-schema": "2.2.0-LEAN-2852-12",
41
- "@manuscripts/comment-editor": "^1.0.3",
39
+ "@manuscripts/transform": "1.5.0",
40
+ "@manuscripts/json-schema": "^2.1.2",
41
+ "@manuscripts/title-editor": "^1.1.0",
42
42
  "@reach/tabs": "^0.11.2",
43
43
  "formik": "^2.2.9",
44
44
  "date-fns": "^2.29.3",
@@ -52,7 +52,6 @@
52
52
  "prosemirror-model": "^1.18.3",
53
53
  "prosemirror-state": "^1.4.2",
54
54
  "prosemirror-transform": "^1.7.0",
55
- "prosemirror-view": "^1.29.1",
56
55
  "react": "^17.0.2",
57
56
  "react-color": "^2.19.3",
58
57
  "react-dnd": "^11.1.3",