@manuscripts/body-editor 3.8.4 → 3.8.6
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.
- package/dist/cjs/components/ChangeHandlingForm.js +4 -3
- package/dist/cjs/components/affiliations/AffiliationForm.js +35 -38
- package/dist/cjs/components/authors/AuthorDetailsForm.js +42 -36
- package/dist/cjs/components/authors/AuthorsModal.js +1 -10
- package/dist/cjs/components/authors/CreditDrawer.js +1 -1
- package/dist/cjs/components/awards/AwardForm.js +27 -45
- package/dist/cjs/components/awards/AwardModal.js +2 -21
- package/dist/cjs/components/modal-drawer/GenericDrawerGroup.js +5 -3
- package/dist/cjs/components/references/ImportBibliographyForm.js +11 -30
- package/dist/cjs/components/references/ImportBibliographyModal.js +2 -17
- package/dist/cjs/components/references/ReferenceForm/PersonDropDown.js +6 -6
- package/dist/cjs/components/references/ReferenceForm/ReferenceForm.js +72 -98
- package/dist/cjs/components/references/ReferenceForm/styled-components.js +8 -64
- package/dist/cjs/components/toolbar/InsertEmbedDialog.js +6 -8
- package/dist/cjs/components/views/LinkForm.js +63 -37
- package/dist/cjs/versions.js +1 -1
- package/dist/es/components/ChangeHandlingForm.js +4 -3
- package/dist/es/components/affiliations/AffiliationForm.js +34 -37
- package/dist/es/components/authors/AuthorDetailsForm.js +41 -35
- package/dist/es/components/authors/AuthorsModal.js +1 -10
- package/dist/es/components/authors/CreditDrawer.js +2 -2
- package/dist/es/components/awards/AwardForm.js +28 -46
- package/dist/es/components/awards/AwardModal.js +2 -18
- package/dist/es/components/modal-drawer/GenericDrawerGroup.js +5 -3
- package/dist/es/components/references/ImportBibliographyForm.js +12 -31
- package/dist/es/components/references/ImportBibliographyModal.js +2 -17
- package/dist/es/components/references/ReferenceForm/PersonDropDown.js +8 -8
- package/dist/es/components/references/ReferenceForm/ReferenceForm.js +71 -97
- package/dist/es/components/references/ReferenceForm/styled-components.js +7 -63
- package/dist/es/components/toolbar/InsertEmbedDialog.js +7 -9
- package/dist/es/components/views/LinkForm.js +63 -37
- package/dist/es/versions.js +1 -1
- package/dist/types/components/ChangeHandlingForm.d.ts +1 -1
- package/dist/types/components/authors/AuthorDetailsForm.d.ts +0 -1
- package/dist/types/components/references/ReferenceForm/styled-components.d.ts +3 -11
- package/dist/types/components/views/LinkForm.d.ts +0 -1
- package/dist/types/versions.d.ts +1 -1
- package/package.json +2 -2
|
@@ -118,50 +118,43 @@ const ReferenceForm = ({ values, showDelete, onChange, onDelete, onCancel, onSav
|
|
|
118
118
|
react_1.default.createElement(style_guide_1.SecondaryButton, { onClick: onCancel }, "Cancel"),
|
|
119
119
|
react_1.default.createElement(style_guide_1.PrimaryButton, { type: "submit", disabled: !formik.isValid || !formik.dirty }, "Save"))),
|
|
120
120
|
react_1.default.createElement(styled_components_1.FormFields, { ref: fieldsRef },
|
|
121
|
-
react_1.default.createElement(
|
|
122
|
-
react_1.default.createElement(
|
|
123
|
-
react_1.default.createElement(styled_components_1.Label, { htmlFor: 'citation-item-type' }, "Type")),
|
|
121
|
+
react_1.default.createElement(style_guide_1.FormRow, null,
|
|
122
|
+
react_1.default.createElement(style_guide_1.Label, { htmlFor: 'citation-item-type' }, "Type"),
|
|
124
123
|
react_1.default.createElement(formik_1.Field, { id: 'citation-item-type', name: 'type', component: style_guide_1.SelectField, options: bibliographyItemTypeOptions })),
|
|
125
|
-
(0, utils_1.shouldRenderField)('title', formik.values.type) && (react_1.default.createElement(
|
|
126
|
-
react_1.default.createElement(
|
|
127
|
-
react_1.default.createElement(styled_components_1.Label, null, "Title")),
|
|
124
|
+
(0, utils_1.shouldRenderField)('title', formik.values.type) && (react_1.default.createElement(style_guide_1.FormRow, null,
|
|
125
|
+
react_1.default.createElement(style_guide_1.Label, null, "Title"),
|
|
128
126
|
react_1.default.createElement(formik_1.Field, { name: 'title' }, (props) => (react_1.default.createElement(styled_components_1.ReferenceTextArea, { id: 'title', ...props.field }))))),
|
|
129
|
-
(0, utils_1.shouldRenderField)('literal', formik.values.type) && (react_1.default.createElement(
|
|
130
|
-
react_1.default.createElement(
|
|
131
|
-
react_1.default.createElement(styled_components_1.Label, null, "Text")),
|
|
127
|
+
(0, utils_1.shouldRenderField)('literal', formik.values.type) && (react_1.default.createElement(style_guide_1.FormRow, null,
|
|
128
|
+
react_1.default.createElement(style_guide_1.Label, null, "Text"),
|
|
132
129
|
react_1.default.createElement(formik_1.Field, { name: 'literal' }, (props) => (react_1.default.createElement(styled_components_1.ReferenceTextArea, { id: 'literal', ...props.field }))))),
|
|
133
|
-
(0, utils_1.shouldRenderField)('std', formik.values.type) && (react_1.default.createElement(
|
|
134
|
-
react_1.default.createElement(
|
|
135
|
-
react_1.default.createElement(styled_components_1.Label, { htmlFor: 'std' }, "Standard")),
|
|
130
|
+
(0, utils_1.shouldRenderField)('std', formik.values.type) && (react_1.default.createElement(style_guide_1.FormRow, null,
|
|
131
|
+
react_1.default.createElement(style_guide_1.Label, { htmlFor: 'std' }, "Standard"),
|
|
136
132
|
react_1.default.createElement(formik_1.Field, { name: 'std' }, (props) => (react_1.default.createElement(styled_components_1.ReferenceTextArea, { id: 'std', ...props.field }))))),
|
|
137
|
-
(0, utils_1.shouldRenderField)('author', formik.values.type) && (react_1.default.createElement(formik_1.FieldArray, { name: 'author', render: ({ push, remove }) => (react_1.default.createElement(
|
|
138
|
-
react_1.default.createElement(
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
react_1.default.createElement(styled_components_1.
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
} },
|
|
159
|
-
react_1.default.createElement(style_guide_1.AddAuthorIcon, { height: 17, width: 17 }))),
|
|
133
|
+
(0, utils_1.shouldRenderField)('author', formik.values.type) && (react_1.default.createElement(formik_1.FieldArray, { name: 'author', render: ({ push, remove }) => (react_1.default.createElement(style_guide_1.FormRow, { direction: "row", justify: "space-between", align: "center" },
|
|
134
|
+
react_1.default.createElement(style_guide_1.Label, null, "Authors"),
|
|
135
|
+
react_1.default.createElement(styled_components_1.Button, { onClick: () => {
|
|
136
|
+
setNewAuthorIndex(formik.values.author?.length);
|
|
137
|
+
push({
|
|
138
|
+
given: '',
|
|
139
|
+
family: '',
|
|
140
|
+
});
|
|
141
|
+
} },
|
|
142
|
+
react_1.default.createElement(style_guide_1.AddAuthorIcon, { height: 17, width: 17 })),
|
|
143
|
+
react_1.default.createElement("div", { style: { width: '100%' } }, formik.values.author?.map((author, index) => (react_1.default.createElement(PersonDropDown_1.PersonDropDown, { key: index, index: index, person: author, isNew: newAuthorIndex === index, remove: remove, onChange: formik.handleChange, type: "author" })))))) })),
|
|
144
|
+
(0, utils_1.shouldRenderField)('editor', formik.values.type) && (react_1.default.createElement(formik_1.FieldArray, { name: 'editor', render: ({ push, remove }) => (react_1.default.createElement(style_guide_1.FormRow, null,
|
|
145
|
+
react_1.default.createElement(style_guide_1.Label, null, "Editors"),
|
|
146
|
+
react_1.default.createElement(styled_components_1.Button, { onClick: () => {
|
|
147
|
+
setNewEditorIndex(formik.values.editor?.length);
|
|
148
|
+
push({
|
|
149
|
+
given: '',
|
|
150
|
+
family: '',
|
|
151
|
+
});
|
|
152
|
+
} },
|
|
153
|
+
react_1.default.createElement(style_guide_1.AddAuthorIcon, { height: 17, width: 17 })),
|
|
160
154
|
react_1.default.createElement("div", null, formik.values.editor?.map((editor, index) => (react_1.default.createElement(PersonDropDown_1.PersonDropDown, { key: index, index: index, person: editor, isNew: newEditorIndex === index, remove: remove, onChange: formik.handleChange, type: "editor" })))))) })),
|
|
161
|
-
(0, utils_1.shouldRenderField)('issued', formik.values.type) && (react_1.default.createElement(
|
|
162
|
-
react_1.default.createElement(
|
|
163
|
-
|
|
164
|
-
react_1.default.createElement(styled_components_1.YearField, { name: "issued['date-parts'][0][0]", type: 'number', step: 1, onChange: (event) => {
|
|
155
|
+
(0, utils_1.shouldRenderField)('issued', formik.values.type) && (react_1.default.createElement(style_guide_1.FormRow, null,
|
|
156
|
+
react_1.default.createElement(style_guide_1.Label, { htmlFor: "issued['date-parts'][0][0]" }, "Issued (Year)"),
|
|
157
|
+
react_1.default.createElement(style_guide_1.YearField, { name: "issued['date-parts'][0][0]", type: 'number', step: 1, onChange: (event) => {
|
|
165
158
|
const { value } = event.target;
|
|
166
159
|
if (value) {
|
|
167
160
|
if (formik.values.issued) {
|
|
@@ -177,50 +170,39 @@ const ReferenceForm = ({ values, showDelete, onChange, onDelete, onCancel, onSav
|
|
|
177
170
|
formik.setFieldValue('issued', '');
|
|
178
171
|
}
|
|
179
172
|
} }))),
|
|
180
|
-
(0, utils_1.shouldRenderField)('container-title', formik.values.type) && (react_1.default.createElement(
|
|
181
|
-
react_1.default.createElement(
|
|
182
|
-
react_1.default.createElement(styled_components_1.Label, { htmlFor: 'container-title' }, "Container Title")),
|
|
173
|
+
(0, utils_1.shouldRenderField)('container-title', formik.values.type) && (react_1.default.createElement(style_guide_1.FormRow, null,
|
|
174
|
+
react_1.default.createElement(style_guide_1.Label, { htmlFor: 'container-title' }, "Container Title"),
|
|
183
175
|
react_1.default.createElement(formik_1.Field, { name: 'container-title' }, (props) => (react_1.default.createElement(styled_components_1.ReferenceTextArea, { id: 'container-title', ...props.field }))))),
|
|
184
|
-
(0, utils_1.shouldRenderField)('collection-title', formik.values.type) && (react_1.default.createElement(
|
|
185
|
-
react_1.default.createElement(
|
|
186
|
-
react_1.default.createElement(styled_components_1.Label, { htmlFor: 'collection-title' }, "Collection Title")),
|
|
176
|
+
(0, utils_1.shouldRenderField)('collection-title', formik.values.type) && (react_1.default.createElement(style_guide_1.FormRow, null,
|
|
177
|
+
react_1.default.createElement(style_guide_1.Label, { htmlFor: 'collection-title' }, "Collection Title"),
|
|
187
178
|
react_1.default.createElement(formik_1.Field, { name: 'collection-title' }, (props) => (react_1.default.createElement(styled_components_1.ReferenceTextArea, { id: 'collection-title', ...props.field }))))),
|
|
188
|
-
(0, utils_1.shouldRenderField)('volume', formik.values.type) && (react_1.default.createElement(
|
|
189
|
-
react_1.default.createElement(
|
|
190
|
-
react_1.default.createElement(styled_components_1.Label, { htmlFor: 'volume' }, "Volume")),
|
|
179
|
+
(0, utils_1.shouldRenderField)('volume', formik.values.type) && (react_1.default.createElement(style_guide_1.FormRow, null,
|
|
180
|
+
react_1.default.createElement(style_guide_1.Label, { htmlFor: 'volume' }, "Volume"),
|
|
191
181
|
react_1.default.createElement(formik_1.Field, { name: 'volume' }, (props) => (react_1.default.createElement(styled_components_1.ReferenceTextField, { id: 'volume', ...props.field }))))),
|
|
192
|
-
(0, utils_1.shouldRenderField)('issue', formik.values.type) && (react_1.default.createElement(
|
|
193
|
-
react_1.default.createElement(
|
|
194
|
-
react_1.default.createElement(styled_components_1.Label, { htmlFor: 'issue' }, "Issue")),
|
|
182
|
+
(0, utils_1.shouldRenderField)('issue', formik.values.type) && (react_1.default.createElement(style_guide_1.FormRow, null,
|
|
183
|
+
react_1.default.createElement(style_guide_1.Label, { htmlFor: 'issue' }, "Issue"),
|
|
195
184
|
react_1.default.createElement(formik_1.Field, { name: 'issue' }, (props) => (react_1.default.createElement(styled_components_1.ReferenceTextField, { id: 'issue', ...props.field }))))),
|
|
196
|
-
(0, utils_1.shouldRenderField)('supplement', formik.values.type) && (react_1.default.createElement(
|
|
197
|
-
react_1.default.createElement(
|
|
198
|
-
react_1.default.createElement(styled_components_1.Label, { htmlFor: 'supplement' }, "Supplement")),
|
|
185
|
+
(0, utils_1.shouldRenderField)('supplement', formik.values.type) && (react_1.default.createElement(style_guide_1.FormRow, null,
|
|
186
|
+
react_1.default.createElement(style_guide_1.Label, { htmlFor: 'supplement' }, "Supplement"),
|
|
199
187
|
react_1.default.createElement(formik_1.Field, { name: 'supplement' }, (props) => (react_1.default.createElement(styled_components_1.ReferenceTextField, { type: 'supplement', id: 'supplement', ...props.field }))))),
|
|
200
|
-
(0, utils_1.shouldRenderField)('edition', formik.values.type) && (react_1.default.createElement(
|
|
201
|
-
react_1.default.createElement(
|
|
202
|
-
react_1.default.createElement(styled_components_1.Label, { htmlFor: 'edition' }, "Edition")),
|
|
188
|
+
(0, utils_1.shouldRenderField)('edition', formik.values.type) && (react_1.default.createElement(style_guide_1.FormRow, null,
|
|
189
|
+
react_1.default.createElement(style_guide_1.Label, { htmlFor: 'edition' }, "Edition"),
|
|
203
190
|
react_1.default.createElement(formik_1.Field, { name: 'edition' }, (props) => (react_1.default.createElement(styled_components_1.ReferenceTextField, { id: 'edition', ...props.field }))))),
|
|
204
|
-
(0, utils_1.shouldRenderField)('publisher-place', formik.values.type) && (react_1.default.createElement(
|
|
205
|
-
react_1.default.createElement(
|
|
206
|
-
react_1.default.createElement(styled_components_1.Label, { htmlFor: 'publisher-place' }, "Publisher Location")),
|
|
191
|
+
(0, utils_1.shouldRenderField)('publisher-place', formik.values.type) && (react_1.default.createElement(style_guide_1.FormRow, null,
|
|
192
|
+
react_1.default.createElement(style_guide_1.Label, { htmlFor: 'publisher-place' }, "Publisher Location"),
|
|
207
193
|
react_1.default.createElement(formik_1.Field, { name: 'publisher-place' }, (props) => (react_1.default.createElement(styled_components_1.ReferenceTextField, { id: 'publisher-place', ...props.field }))))),
|
|
208
|
-
(0, utils_1.shouldRenderField)('publisher', formik.values.type) && (react_1.default.createElement(
|
|
209
|
-
react_1.default.createElement(
|
|
210
|
-
react_1.default.createElement(styled_components_1.Label, { htmlFor: 'publisher' }, "Publisher")),
|
|
194
|
+
(0, utils_1.shouldRenderField)('publisher', formik.values.type) && (react_1.default.createElement(style_guide_1.FormRow, null,
|
|
195
|
+
react_1.default.createElement(style_guide_1.Label, { htmlFor: 'publisher' }, "Publisher"),
|
|
211
196
|
react_1.default.createElement(formik_1.Field, { name: 'publisher' }, (props) => (react_1.default.createElement(styled_components_1.ReferenceTextField, { id: "publisher", ...props.field }))))),
|
|
212
|
-
(0, utils_1.shouldRenderField)('event', formik.values.type) && (react_1.default.createElement(
|
|
213
|
-
react_1.default.createElement(
|
|
214
|
-
react_1.default.createElement(styled_components_1.Label, { htmlFor: 'event' }, "Event")),
|
|
197
|
+
(0, utils_1.shouldRenderField)('event', formik.values.type) && (react_1.default.createElement(style_guide_1.FormRow, null,
|
|
198
|
+
react_1.default.createElement(style_guide_1.Label, { htmlFor: 'event' }, "Event"),
|
|
215
199
|
react_1.default.createElement(formik_1.Field, { name: 'event' }, (props) => (react_1.default.createElement(styled_components_1.ReferenceTextField, { id: 'event', ...props.field }))))),
|
|
216
|
-
(0, utils_1.shouldRenderField)('event-place', formik.values.type) && (react_1.default.createElement(
|
|
217
|
-
react_1.default.createElement(
|
|
218
|
-
react_1.default.createElement(styled_components_1.Label, { htmlFor: 'event-place' }, "Event Place")),
|
|
200
|
+
(0, utils_1.shouldRenderField)('event-place', formik.values.type) && (react_1.default.createElement(style_guide_1.FormRow, null,
|
|
201
|
+
react_1.default.createElement(style_guide_1.Label, { htmlFor: 'event-place' }, "Event Place"),
|
|
219
202
|
react_1.default.createElement(formik_1.Field, { name: 'event-place' }, (props) => (react_1.default.createElement(styled_components_1.ReferenceTextField, { id: 'event-place', ...props.field }))))),
|
|
220
|
-
(0, utils_1.shouldRenderField)('event-date', formik.values.type) && (react_1.default.createElement(
|
|
221
|
-
react_1.default.createElement(
|
|
222
|
-
|
|
223
|
-
react_1.default.createElement(styled_components_1.YearField, { name: "event-date['date-parts'][0][0]", type: 'number', step: 1, onChange: (event) => {
|
|
203
|
+
(0, utils_1.shouldRenderField)('event-date', formik.values.type) && (react_1.default.createElement(style_guide_1.FormRow, null,
|
|
204
|
+
react_1.default.createElement(style_guide_1.Label, { htmlFor: "event-date['date-parts'][0][0]" }, "Event date (Year)"),
|
|
205
|
+
react_1.default.createElement(style_guide_1.YearField, { name: "event-date['date-parts'][0][0]", type: 'number', step: 1, onChange: (event) => {
|
|
224
206
|
const { value } = event.target;
|
|
225
207
|
if (value) {
|
|
226
208
|
if (formik.values['event-date']) {
|
|
@@ -236,34 +218,27 @@ const ReferenceForm = ({ values, showDelete, onChange, onDelete, onCancel, onSav
|
|
|
236
218
|
formik.setFieldValue('event-date', '');
|
|
237
219
|
}
|
|
238
220
|
} }))),
|
|
239
|
-
(0, utils_1.shouldRenderField)('institution', formik.values.type) && (react_1.default.createElement(
|
|
240
|
-
react_1.default.createElement(
|
|
241
|
-
react_1.default.createElement(styled_components_1.Label, { htmlFor: 'institution' }, "Institution")),
|
|
221
|
+
(0, utils_1.shouldRenderField)('institution', formik.values.type) && (react_1.default.createElement(style_guide_1.FormRow, null,
|
|
222
|
+
react_1.default.createElement(style_guide_1.Label, { htmlFor: 'institution' }, "Institution"),
|
|
242
223
|
react_1.default.createElement(formik_1.Field, { name: 'institution' }, (props) => (react_1.default.createElement(styled_components_1.ReferenceTextField, { id: 'institution', ...props.field }))))),
|
|
243
|
-
(0, utils_1.shouldRenderField)('page', formik.values.type) && (react_1.default.createElement(
|
|
244
|
-
react_1.default.createElement(
|
|
245
|
-
react_1.default.createElement(styled_components_1.Label, { htmlFor: 'page' }, "Page")),
|
|
224
|
+
(0, utils_1.shouldRenderField)('page', formik.values.type) && (react_1.default.createElement(style_guide_1.FormRow, null,
|
|
225
|
+
react_1.default.createElement(style_guide_1.Label, { htmlFor: 'page' }, "Page"),
|
|
246
226
|
react_1.default.createElement(formik_1.Field, { name: 'page' }, (props) => (react_1.default.createElement(styled_components_1.ReferenceTextField, { id: 'page', ...props.field }))))),
|
|
247
|
-
(0, utils_1.shouldRenderField)('number-of-pages', formik.values.type) && (react_1.default.createElement(
|
|
248
|
-
react_1.default.createElement(
|
|
249
|
-
react_1.default.createElement(styled_components_1.Label, { htmlFor: 'number-of-pages' }, "Number of pages")),
|
|
227
|
+
(0, utils_1.shouldRenderField)('number-of-pages', formik.values.type) && (react_1.default.createElement(style_guide_1.FormRow, null,
|
|
228
|
+
react_1.default.createElement(style_guide_1.Label, { htmlFor: 'number-of-pages' }, "Number of pages"),
|
|
250
229
|
react_1.default.createElement(formik_1.Field, { name: 'umber-of-pages' }, (props) => (react_1.default.createElement(styled_components_1.ReferenceTextField, { id: 'number-of-pages', ...props.field }))))),
|
|
251
|
-
(0, utils_1.shouldRenderField)('locator', formik.values.type) && (react_1.default.createElement(
|
|
252
|
-
react_1.default.createElement(
|
|
253
|
-
react_1.default.createElement(styled_components_1.Label, { htmlFor: 'locator' }, "Locator")),
|
|
230
|
+
(0, utils_1.shouldRenderField)('locator', formik.values.type) && (react_1.default.createElement(style_guide_1.FormRow, null,
|
|
231
|
+
react_1.default.createElement(style_guide_1.Label, { htmlFor: 'locator' }, "Locator"),
|
|
254
232
|
react_1.default.createElement(formik_1.Field, { name: 'locator' }, (props) => (react_1.default.createElement(styled_components_1.ReferenceTextField, { id: 'locator', ...props.field }))))),
|
|
255
|
-
(0, utils_1.shouldRenderField)('DOI', formik.values.type) && (react_1.default.createElement(
|
|
256
|
-
react_1.default.createElement(
|
|
257
|
-
react_1.default.createElement(styled_components_1.Label, { htmlFor: 'DOI' }, "DOI")),
|
|
233
|
+
(0, utils_1.shouldRenderField)('DOI', formik.values.type) && (react_1.default.createElement(style_guide_1.FormRow, null,
|
|
234
|
+
react_1.default.createElement(style_guide_1.Label, { htmlFor: 'DOI' }, "DOI"),
|
|
258
235
|
react_1.default.createElement(formik_1.Field, { name: 'DOI' }, (props) => (react_1.default.createElement(styled_components_1.ReferenceTextField, { id: 'DOI', pattern: '(https://doi.org/)?10..+', ...props.field }))))),
|
|
259
|
-
(0, utils_1.shouldRenderField)('URL', formik.values.type) && (react_1.default.createElement(
|
|
260
|
-
react_1.default.createElement(
|
|
261
|
-
react_1.default.createElement(styled_components_1.Label, { htmlFor: 'URL' }, "URL")),
|
|
236
|
+
(0, utils_1.shouldRenderField)('URL', formik.values.type) && (react_1.default.createElement(style_guide_1.FormRow, null,
|
|
237
|
+
react_1.default.createElement(style_guide_1.Label, { htmlFor: 'URL' }, "URL"),
|
|
262
238
|
react_1.default.createElement(formik_1.Field, { name: 'URL' }, (props) => (react_1.default.createElement(styled_components_1.ReferenceTextField, { id: 'URL', ...props.field }))))),
|
|
263
|
-
(0, utils_1.shouldRenderField)('accessed', formik.values.type) && (react_1.default.createElement(
|
|
264
|
-
react_1.default.createElement(
|
|
265
|
-
|
|
266
|
-
react_1.default.createElement(styled_components_1.YearField, { name: "accessed['date-parts'][0][0]", type: 'number', step: 1, onChange: (event) => {
|
|
239
|
+
(0, utils_1.shouldRenderField)('accessed', formik.values.type) && (react_1.default.createElement(style_guide_1.FormRow, null,
|
|
240
|
+
react_1.default.createElement(style_guide_1.Label, { htmlFor: "accessed['date-parts'][0][0]" }, "Accessed (Year)"),
|
|
241
|
+
react_1.default.createElement(style_guide_1.YearField, { name: "accessed['date-parts'][0][0]", type: 'number', step: 1, onChange: (event) => {
|
|
267
242
|
const { value } = event.target;
|
|
268
243
|
if (value) {
|
|
269
244
|
if (formik.values['event-date']) {
|
|
@@ -279,9 +254,8 @@ const ReferenceForm = ({ values, showDelete, onChange, onDelete, onCancel, onSav
|
|
|
279
254
|
formik.setFieldValue('accessed', '');
|
|
280
255
|
}
|
|
281
256
|
} }))),
|
|
282
|
-
(0, utils_1.shouldRenderField)('comment', formik.values.type) && (react_1.default.createElement(
|
|
283
|
-
react_1.default.createElement(
|
|
284
|
-
react_1.default.createElement(styled_components_1.Label, null, "Comment")),
|
|
257
|
+
(0, utils_1.shouldRenderField)('comment', formik.values.type) && (react_1.default.createElement(style_guide_1.FormRow, null,
|
|
258
|
+
react_1.default.createElement(style_guide_1.Label, null, "Comment"),
|
|
285
259
|
react_1.default.createElement(formik_1.Field, { name: 'comment' }, (props) => (react_1.default.createElement(styled_components_1.ReferenceTextArea, { id: 'comment', ...props.field }))))))));
|
|
286
260
|
}));
|
|
287
261
|
};
|
|
@@ -3,67 +3,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
3
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.RemoveButton = exports.ToggleButton = exports.DropdownIndicator = exports.Title = exports.PersonForm = exports.Section = exports.DeleteButton = exports.FormFields = exports.ReferenceTextArea = exports.ReferenceTextField = exports.
|
|
6
|
+
exports.RemoveButton = exports.ToggleButton = exports.DropdownIndicator = exports.Title = exports.PersonForm = exports.Section = exports.DeleteButton = exports.FormFields = exports.ReferenceTextArea = exports.ReferenceTextField = exports.Actions = exports.Button = void 0;
|
|
7
7
|
const style_guide_1 = require("@manuscripts/style-guide");
|
|
8
|
-
const formik_1 = require("formik");
|
|
9
8
|
const styled_components_1 = __importDefault(require("styled-components"));
|
|
10
|
-
exports.LabelContainer = styled_components_1.default.div `
|
|
11
|
-
display: flex;
|
|
12
|
-
justify-content: space-between;
|
|
13
|
-
align-items: center;
|
|
14
|
-
margin-bottom: ${(props) => props.theme.grid.unit}px;
|
|
15
|
-
`;
|
|
16
|
-
exports.Label = styled_components_1.default.label `
|
|
17
|
-
font-family: ${(props) => props.theme.font.family.sans};
|
|
18
|
-
font-size: ${(props) => props.theme.font.size.medium};
|
|
19
|
-
display: flex;
|
|
20
|
-
color: ${(props) => props.theme.colors.text.secondary};
|
|
21
|
-
`;
|
|
22
|
-
exports.FieldLabel = styled_components_1.default.label `
|
|
23
|
-
font-family: ${(props) => props.theme.font.family.sans};
|
|
24
|
-
font-size: ${(props) => props.theme.font.size.medium};
|
|
25
|
-
color: ${(props) => props.theme.colors.text.muted};
|
|
26
|
-
padding-right: ${(props) => props.theme.grid.unit * 3}px;
|
|
27
|
-
`;
|
|
28
|
-
exports.NameFieldContainer = styled_components_1.default.div `
|
|
29
|
-
display: flex;
|
|
30
|
-
align-items: center;
|
|
31
|
-
justify-content: space-between;
|
|
32
|
-
background-color: ${(props) => props.theme.colors.background.primary};
|
|
33
|
-
:not(:last-child) {
|
|
34
|
-
border-bottom: 1px solid ${(props) => props.theme.colors.text.muted};
|
|
35
|
-
}
|
|
36
|
-
`;
|
|
37
|
-
exports.NameField = styled_components_1.default.input `
|
|
38
|
-
font-size: ${(props) => props.theme.font.size.normal};
|
|
39
|
-
padding: ${(props) => props.theme.grid.unit * 2}px
|
|
40
|
-
${(props) => props.theme.grid.unit * 4}px;
|
|
41
|
-
box-sizing: border-box;
|
|
42
|
-
border: none;
|
|
43
|
-
background-color: transparent;
|
|
44
|
-
width: 50%;
|
|
45
|
-
|
|
46
|
-
&:focus {
|
|
47
|
-
outline: none;
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
&::placeholder {
|
|
51
|
-
color: ${(props) => props.theme.colors.text.muted};
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
&:hover::placeholder {
|
|
55
|
-
color: ${(props) => props.theme.colors.text.secondary};
|
|
56
|
-
}
|
|
57
|
-
`;
|
|
58
|
-
exports.YearField = (0, styled_components_1.default)(formik_1.Field) `
|
|
59
|
-
font-family: ${(props) => props.theme.font.family.sans};
|
|
60
|
-
padding: ${(props) => props.theme.grid.unit * 2}px
|
|
61
|
-
${(props) => props.theme.grid.unit * 3}px;
|
|
62
|
-
font-size: ${(props) => props.theme.font.size.medium};
|
|
63
|
-
color: ${(props) => props.theme.colors.text.primary};
|
|
64
|
-
border-radius: ${(props) => props.theme.grid.radius.small};
|
|
65
|
-
border: solid 1px ${(props) => props.theme.colors.text.muted};
|
|
66
|
-
`;
|
|
67
9
|
exports.Button = (0, styled_components_1.default)(style_guide_1.IconButton).attrs({
|
|
68
10
|
defaultColor: true,
|
|
69
11
|
size: 24,
|
|
@@ -89,9 +31,6 @@ exports.Actions = styled_components_1.default.div `
|
|
|
89
31
|
border-radius: 6px;
|
|
90
32
|
}
|
|
91
33
|
`;
|
|
92
|
-
exports.FormField = styled_components_1.default.div `
|
|
93
|
-
padding: ${(props) => props.theme.grid.unit * 3}px;
|
|
94
|
-
`;
|
|
95
34
|
exports.ReferenceTextField = (0, styled_components_1.default)(style_guide_1.TextField) `
|
|
96
35
|
padding: ${(props) => props.theme.grid.unit * 2}px
|
|
97
36
|
${(props) => props.theme.grid.unit * 3}px;
|
|
@@ -120,8 +59,13 @@ exports.Section = styled_components_1.default.section `
|
|
|
120
59
|
margin-bottom: ${(props) => props.theme.grid.unit * 3}px;
|
|
121
60
|
overflow: hidden;
|
|
122
61
|
`;
|
|
123
|
-
exports.PersonForm =
|
|
124
|
-
|
|
62
|
+
exports.PersonForm = styled_components_1.default.div `
|
|
63
|
+
padding: ${(props) => props.theme.grid.unit * 4}px
|
|
64
|
+
${(props) => props.theme.grid.unit * 4}px;
|
|
65
|
+
|
|
66
|
+
& > div:last-child {
|
|
67
|
+
margin-bottom: 0;
|
|
68
|
+
}
|
|
125
69
|
`;
|
|
126
70
|
exports.Title = styled_components_1.default.h4 `
|
|
127
71
|
margin: 0;
|
|
@@ -62,9 +62,6 @@ const use_do_with_debounce_1 = require("../../lib/use-do-with-debounce");
|
|
|
62
62
|
const editor_props_1 = require("../../plugins/editor-props");
|
|
63
63
|
const ReactSubView_1 = __importDefault(require("../../views/ReactSubView"));
|
|
64
64
|
const LinkForm_1 = require("../views/LinkForm");
|
|
65
|
-
const Label = styled_components_1.default.label `
|
|
66
|
-
padding-bottom: 4px;
|
|
67
|
-
`;
|
|
68
65
|
const HeaderContainer = (0, styled_components_1.default)(style_guide_1.PrimaryBoldHeading) `
|
|
69
66
|
font-size: ${(props) => props.theme.font.size.large};
|
|
70
67
|
`;
|
|
@@ -113,12 +110,13 @@ const InsertEmbedDialog = ({ state, dispatch, pos, }) => {
|
|
|
113
110
|
" external media"),
|
|
114
111
|
react_1.default.createElement(style_guide_1.MessageContainer, null,
|
|
115
112
|
react_1.default.createElement(Container, null,
|
|
116
|
-
react_1.default.createElement(
|
|
117
|
-
react_1.default.createElement(Label, { htmlFor: 'embed-link' }, "Media link"),
|
|
118
|
-
url && (0, url_1.allowedHref)(url) && (react_1.default.createElement(LinkForm_1.Open, { id: 'media-link', href: url, target: '_blank', rel: 'noopener' }))
|
|
119
|
-
|
|
113
|
+
react_1.default.createElement(style_guide_1.FormRow, { direction: 'row' },
|
|
114
|
+
react_1.default.createElement(style_guide_1.Label, { htmlFor: 'embed-link' }, "Media link"),
|
|
115
|
+
url && (0, url_1.allowedHref)(url) && (react_1.default.createElement(LinkForm_1.Open, { id: 'media-link', href: url, target: '_blank', rel: 'noopener' })),
|
|
116
|
+
react_1.default.createElement(style_guide_1.TextArea, { id: 'embed-link', rows: 2, cols: 2, defaultValue: url, autoFocus: true, required: true, placeholder: 'https://youtube.com/...', onChange: (e) => setUrl(e.target.value.trim()) }))),
|
|
120
117
|
url && (0, url_1.allowedHref)(url) && (react_1.default.createElement(Container, null,
|
|
121
|
-
react_1.default.createElement(
|
|
118
|
+
react_1.default.createElement(style_guide_1.FormRow, null,
|
|
119
|
+
react_1.default.createElement(style_guide_1.Label, null, "Preview")),
|
|
122
120
|
(oembedHTML && (react_1.default.createElement(PreviewContainer, { dangerouslySetInnerHTML: { __html: oembedHTML } }))) || react_1.default.createElement(NoPreviewMessage, null)))),
|
|
123
121
|
react_1.default.createElement(style_guide_1.ButtonGroup, null,
|
|
124
122
|
react_1.default.createElement(style_guide_1.SecondaryButton, { onClick: () => setOpen(false) }, "Cancel"),
|
|
@@ -51,14 +51,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
51
51
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
52
52
|
};
|
|
53
53
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
54
|
-
exports.LinkForm = exports.Open =
|
|
54
|
+
exports.LinkForm = exports.Open = void 0;
|
|
55
55
|
const style_guide_1 = require("@manuscripts/style-guide");
|
|
56
56
|
const react_1 = __importStar(require("react"));
|
|
57
57
|
const styled_components_1 = __importDefault(require("styled-components"));
|
|
58
58
|
const url_1 = require("../../lib/url");
|
|
59
|
-
const Form = styled_components_1.default.form `
|
|
60
|
-
padding: 16px;
|
|
61
|
-
`;
|
|
62
59
|
const Actions = styled_components_1.default.div `
|
|
63
60
|
display: flex;
|
|
64
61
|
align-items: center;
|
|
@@ -73,20 +70,15 @@ const ActionGroup = styled_components_1.default.span `
|
|
|
73
70
|
margin-right: 4px;
|
|
74
71
|
}
|
|
75
72
|
`;
|
|
76
|
-
const
|
|
77
|
-
margin-bottom: ${(props) => props.theme.grid.unit * 4}px;
|
|
78
|
-
`;
|
|
79
|
-
exports.FieldHeading = styled_components_1.default.div `
|
|
73
|
+
const RemoveButton = (0, styled_components_1.default)(style_guide_1.SecondaryButton) `
|
|
80
74
|
display: flex;
|
|
81
|
-
align-items: center;
|
|
82
75
|
justify-content: space-between;
|
|
83
|
-
margin-bottom: ${(props) => props.theme.grid.unit}px;
|
|
84
|
-
`;
|
|
85
|
-
const Label = styled_components_1.default.label `
|
|
86
|
-
display: flex;
|
|
87
76
|
align-items: center;
|
|
88
|
-
|
|
89
|
-
|
|
77
|
+
gap: 8px;
|
|
78
|
+
|
|
79
|
+
svg .icon_element {
|
|
80
|
+
fill: #6e6e6e;
|
|
81
|
+
}
|
|
90
82
|
`;
|
|
91
83
|
exports.Open = styled_components_1.default.a `
|
|
92
84
|
display: inline-block;
|
|
@@ -105,29 +97,63 @@ const LinkForm = ({ onCancel, onRemove, onSave, value, }) => {
|
|
|
105
97
|
const [href, setHref] = (0, react_1.useState)(value.href);
|
|
106
98
|
const [text, setText] = (0, react_1.useState)(value.text);
|
|
107
99
|
const [title, setTitle] = (0, react_1.useState)(value.title || '');
|
|
100
|
+
const [errors, setErrors] = (0, react_1.useState)({});
|
|
101
|
+
const validate = (0, react_1.useCallback)((currentHref, currentText) => {
|
|
102
|
+
const newErrors = {};
|
|
103
|
+
if (!currentHref) {
|
|
104
|
+
newErrors.href = 'URL is required';
|
|
105
|
+
}
|
|
106
|
+
else if (!(0, url_1.allowedHref)(currentHref)) {
|
|
107
|
+
newErrors.href = 'Please enter a valid URL';
|
|
108
|
+
}
|
|
109
|
+
if (!currentText) {
|
|
110
|
+
newErrors.text = 'Text is required';
|
|
111
|
+
}
|
|
112
|
+
setErrors(newErrors);
|
|
113
|
+
return Object.keys(newErrors).length === 0;
|
|
114
|
+
}, []);
|
|
115
|
+
const handleHrefChange = (0, react_1.useCallback)((e) => {
|
|
116
|
+
const newValue = e.target.value;
|
|
117
|
+
setHref(newValue);
|
|
118
|
+
if (errors.href) {
|
|
119
|
+
validate(newValue, text);
|
|
120
|
+
}
|
|
121
|
+
}, [errors.href, text, validate]);
|
|
122
|
+
const handleTextChange = (0, react_1.useCallback)((e) => {
|
|
123
|
+
const newValue = e.target.value;
|
|
124
|
+
setText(newValue);
|
|
125
|
+
if (errors.text) {
|
|
126
|
+
validate(href, newValue);
|
|
127
|
+
}
|
|
128
|
+
}, [errors.text, href, validate]);
|
|
108
129
|
const handleSubmit = (0, react_1.useCallback)((event) => {
|
|
109
130
|
event.preventDefault();
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
react_1.default.createElement(
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
react_1.default.createElement(
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
react_1.default.createElement(style_guide_1.
|
|
129
|
-
react_1.default.createElement(
|
|
130
|
-
react_1.default.createElement(
|
|
131
|
-
|
|
131
|
+
if (validate(href, text)) {
|
|
132
|
+
onSave({ href, text, title });
|
|
133
|
+
}
|
|
134
|
+
}, [href, text, title, onSave, validate]);
|
|
135
|
+
return (react_1.default.createElement("form", { onSubmit: handleSubmit, noValidate: true },
|
|
136
|
+
react_1.default.createElement(style_guide_1.FormContainer, null,
|
|
137
|
+
react_1.default.createElement(style_guide_1.FormRow, null,
|
|
138
|
+
react_1.default.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: '8px' } },
|
|
139
|
+
react_1.default.createElement(style_guide_1.Label, null, "URL*"),
|
|
140
|
+
href && (0, url_1.allowedHref)(href) && (react_1.default.createElement(exports.Open, { href: href, target: '_blank', rel: 'noopener' }))),
|
|
141
|
+
react_1.default.createElement(style_guide_1.TextField, { type: 'text', name: 'href', value: href, autoComplete: 'off', error: !!errors.href, onChange: handleHrefChange }),
|
|
142
|
+
errors.href && react_1.default.createElement(style_guide_1.InputErrorText, null, errors.href)),
|
|
143
|
+
react_1.default.createElement(style_guide_1.FormRow, null,
|
|
144
|
+
react_1.default.createElement(style_guide_1.Label, null, "Text"),
|
|
145
|
+
react_1.default.createElement(style_guide_1.TextField, { type: 'text', name: 'text', value: text, autoComplete: 'off', error: !!errors.text, onChange: handleTextChange }),
|
|
146
|
+
errors.text && react_1.default.createElement(style_guide_1.InputErrorText, null, errors.text)),
|
|
147
|
+
react_1.default.createElement(style_guide_1.FormRow, null,
|
|
148
|
+
react_1.default.createElement(style_guide_1.Label, null, "Title"),
|
|
149
|
+
react_1.default.createElement(style_guide_1.TextField, { type: 'text', name: 'title', value: title, autoComplete: 'off', required: false, onChange: (e) => setTitle(e.target.value) })),
|
|
150
|
+
react_1.default.createElement(Actions, null,
|
|
151
|
+
react_1.default.createElement(ActionGroup, null,
|
|
152
|
+
react_1.default.createElement(RemoveButton, { type: 'button', onClick: onRemove },
|
|
153
|
+
react_1.default.createElement(style_guide_1.DeleteIcon, null),
|
|
154
|
+
react_1.default.createElement("span", null, "Remove Link"))),
|
|
155
|
+
react_1.default.createElement(ActionGroup, null,
|
|
156
|
+
react_1.default.createElement(style_guide_1.SecondaryButton, { type: 'button', onClick: onCancel }, "Cancel"),
|
|
157
|
+
react_1.default.createElement(style_guide_1.PrimaryButton, { type: 'submit' }, "Save"))))));
|
|
132
158
|
};
|
|
133
159
|
exports.LinkForm = LinkForm;
|
package/dist/cjs/versions.js
CHANGED
|
@@ -3,10 +3,11 @@ import React, { useEffect } from 'react';
|
|
|
3
3
|
import styled from 'styled-components';
|
|
4
4
|
export const ChangeHandlingForm = (props) => {
|
|
5
5
|
const { values } = useFormikContext();
|
|
6
|
+
const { onChange, id, formRef, children, ...formProps } = props;
|
|
6
7
|
useEffect(() => {
|
|
7
|
-
|
|
8
|
-
}, [
|
|
9
|
-
return (React.createElement(FlexForm, { id:
|
|
8
|
+
onChange?.(values);
|
|
9
|
+
}, [onChange, values]);
|
|
10
|
+
return (React.createElement(FlexForm, { id: id, ref: formRef, ...formProps }, children));
|
|
10
11
|
};
|
|
11
12
|
export const FlexForm = styled(Form) `
|
|
12
13
|
height: 100%;
|