@plone/volto 18.0.0-alpha.34 → 18.0.0-alpha.36

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 (78) hide show
  1. package/.release-it.json +1 -1
  2. package/CHANGELOG.md +43 -0
  3. package/locales/ca/LC_MESSAGES/volto.po +41 -4
  4. package/locales/ca.json +1 -1
  5. package/locales/de/LC_MESSAGES/volto.po +41 -4
  6. package/locales/de.json +1 -1
  7. package/locales/en/LC_MESSAGES/volto.po +41 -4
  8. package/locales/en.json +1 -1
  9. package/locales/es/LC_MESSAGES/volto.po +41 -4
  10. package/locales/es.json +1 -1
  11. package/locales/eu/LC_MESSAGES/volto.po +41 -4
  12. package/locales/eu.json +1 -1
  13. package/locales/fi/LC_MESSAGES/volto.po +44 -7
  14. package/locales/fi.json +1 -1
  15. package/locales/fr/LC_MESSAGES/volto.po +41 -4
  16. package/locales/fr.json +1 -1
  17. package/locales/hi/LC_MESSAGES/volto.po +41 -4
  18. package/locales/hi.json +1 -1
  19. package/locales/it/LC_MESSAGES/volto.po +41 -4
  20. package/locales/it.json +1 -1
  21. package/locales/ja/LC_MESSAGES/volto.po +41 -4
  22. package/locales/ja.json +1 -1
  23. package/locales/nl/LC_MESSAGES/volto.po +41 -4
  24. package/locales/nl.json +1 -1
  25. package/locales/pt/LC_MESSAGES/volto.po +41 -4
  26. package/locales/pt.json +1 -1
  27. package/locales/pt_BR/LC_MESSAGES/volto.po +41 -4
  28. package/locales/pt_BR.json +1 -1
  29. package/locales/ro/LC_MESSAGES/volto.po +41 -4
  30. package/locales/ro.json +1 -1
  31. package/locales/volto.pot +42 -5
  32. package/locales/zh_CN/LC_MESSAGES/volto.po +41 -4
  33. package/locales/zh_CN.json +1 -1
  34. package/package.json +5 -5
  35. package/razzle.config.js +7 -1
  36. package/src/components/manage/AnchorPlugin/components/LinkButton/AddLinkForm.jsx +78 -72
  37. package/src/components/manage/AnchorPlugin/useLinkEditor.js +79 -0
  38. package/src/components/manage/Blocks/Image/Edit.jsx +45 -347
  39. package/src/components/manage/Blocks/Teaser/Data.jsx +69 -1
  40. package/src/components/manage/Blocks/Teaser/schema.js +24 -3
  41. package/src/components/manage/Form/BlocksToolbar.jsx +8 -7
  42. package/src/components/manage/Form/Form.jsx +8 -1
  43. package/src/components/manage/Form/InlineForm.jsx +4 -0
  44. package/src/components/manage/Widgets/ImageWidget.jsx +311 -0
  45. package/src/components/manage/Widgets/ImageWidget.stories.jsx +46 -0
  46. package/src/config/NonContentRoutes.jsx +2 -1
  47. package/src/config/Widgets.jsx +2 -0
  48. package/src/config/index.js +0 -1
  49. package/src/helpers/Blocks/Blocks.js +20 -7
  50. package/src/helpers/Blocks/Blocks.test.js +55 -0
  51. package/src/helpers/Blocks/cloneBlocks.test.js +54 -0
  52. package/src/helpers/Blocks/cloneBlocks.ts +43 -0
  53. package/src/helpers/index.js +1 -0
  54. package/src/icons/external-link.svg +4 -0
  55. package/theme/themes/pastanaga/collections/form.overrides +4 -0
  56. package/theme/themes/pastanaga/elements/button.overrides +2 -1
  57. package/theme/themes/pastanaga/extras/blocks.less +40 -4
  58. package/theme/themes/pastanaga/extras/grid.less +3 -3
  59. package/theme/themes/pastanaga/extras/teaser.less +53 -0
  60. package/theme/themes/pastanaga/extras/widgets.less +108 -0
  61. package/types/components/manage/AnchorPlugin/useLinkEditor.d.ts +7 -0
  62. package/types/components/manage/Blocks/Teaser/schema.d.ts +9 -2
  63. package/types/components/manage/Widgets/ImageWidget.d.ts +10 -0
  64. package/types/components/manage/Widgets/ImageWidget.stories.d.ts +11 -0
  65. package/types/config/Widgets.d.ts +2 -0
  66. package/types/helpers/Blocks/Blocks.d.ts +6 -0
  67. package/types/helpers/Blocks/cloneBlocks.d.ts +1 -0
  68. package/types/helpers/Blocks/cloneBlocks.test.d.ts +1 -0
  69. package/types/helpers/index.d.ts +1 -1
  70. /package/src/components/manage/Blocks/Image/{schema.js → schema.jsx} +0 -0
  71. /package/src/components/theme/LanguageSelector/{LanguageSelector.js → LanguageSelector.jsx} +0 -0
  72. /package/src/helpers/Extensions/{withBlockExtensions.js → withBlockExtensions.jsx} +0 -0
  73. /package/src/helpers/Extensions/{withBlockSchemaEnhancer.js → withBlockSchemaEnhancer.jsx} +0 -0
  74. /package/src/helpers/FormValidation/{FormValidation.js → FormValidation.jsx} +0 -0
  75. /package/src/helpers/Helmet/{Helmet.js → Helmet.jsx} +0 -0
  76. /package/src/helpers/Loadable/{Loadable.js → Loadable.jsx} +0 -0
  77. /package/src/helpers/Loadable/__mocks__/{Loadable.js → Loadable.jsx} +0 -0
  78. /package/src/helpers/Utils/{Utils.js → Utils.jsx} +0 -0
@@ -401,7 +401,6 @@ body.has-toolbar.has-sidebar-collapsed .ui.wrapper > .ui.inner.block.full {
401
401
  padding: 4px;
402
402
  border-radius: 1px;
403
403
  margin-left: 4px;
404
- color: @brown !important;
405
404
 
406
405
  &:hover {
407
406
  background-color: #edf1f2 !important;
@@ -414,13 +413,50 @@ body.has-toolbar.has-sidebar-collapsed .ui.wrapper > .ui.inner.block.full {
414
413
  }
415
414
  }
416
415
  }
416
+ }
417
+
418
+ .toolbar-buttons {
419
+ // used by the ImageUploadWidget
420
+ display: flex;
421
+ justify-content: center;
422
+ gap: 4px;
423
+ }
424
+
425
+ .image-upload-widget-toolbar {
426
+ position: absolute;
427
+ top: 1em;
428
+ right: 1em;
429
+
430
+ .icon.circled {
431
+ border: 1px solid #e4e8ec;
432
+ background: #f3f5f7;
433
+ box-shadow: inset 0 0 0 0.14285714rem transparent !important;
434
+ }
435
+ }
436
+
437
+ div.image-upload-widget-image {
438
+ position: relative;
439
+
440
+ img {
441
+ max-width: 100% !important;
442
+ }
443
+ }
444
+
445
+ .image-upload-widget {
446
+ text-align: center;
417
447
 
418
- .ui.active.basic.icon.button {
419
- border: 1px solid #2996da;
420
- background: transparent !important;
448
+ .toolbar-wrapper {
449
+ display: flex;
450
+ flex-direction: column;
451
+ justify-content: flex-end;
421
452
  }
422
453
  }
423
454
 
455
+ .ui.active.basic.icon.button {
456
+ border: 1px solid #2996da;
457
+ background: transparent !important;
458
+ }
459
+
424
460
  // Hero block
425
461
  .block.hero {
426
462
  clear: both;
@@ -396,9 +396,9 @@ body.has-toolbar.has-sidebar .drag.gridBlock.handle.wrapper {
396
396
 
397
397
  // Aspect ratio on all images
398
398
  .grid-image-wrapper img,
399
- .gridBlock .block.image img,
400
- .block-editor-gridBlock .block-editor-image img,
401
- .block-editor-image.contained img {
399
+ .gridBlock .block.image img:not(.placeholder),
400
+ .block-editor-gridBlock .block-editor-image img:not(.placeholder),
401
+ .block-editor-image.contained img:not(.placeholder) {
402
402
  width: 100%;
403
403
  aspect-ratio: @grid-images-aspect-ratio;
404
404
  object-fit: cover;
@@ -164,3 +164,56 @@
164
164
  }
165
165
  }
166
166
  }
167
+
168
+ #sidebar-properties .ui.form {
169
+ .teaser.block.overwrite.actions {
170
+ display: flex;
171
+ flex-direction: column;
172
+
173
+ > div {
174
+ display: flex;
175
+ justify-content: space-between;
176
+
177
+ .ui.label {
178
+ padding-left: 0;
179
+ background: unset;
180
+ font-size: 15px;
181
+ text-transform: capitalize;
182
+ }
183
+ }
184
+
185
+ h3 {
186
+ text-transform: capitalize;
187
+ }
188
+
189
+ .ui.button:hover {
190
+ background: none !important;
191
+ }
192
+ }
193
+
194
+ .ui.message.warning:has(.teaser.block.overwrite.actions) {
195
+ display: block;
196
+ }
197
+ }
198
+
199
+ #sidebar-properties .ui.segment.attached.actions {
200
+ display: flex;
201
+ justify-content: center;
202
+ padding: 1.5em 1em;
203
+ border-top: none;
204
+
205
+ .ui.buttons.refresh.teaser button {
206
+ display: flex;
207
+ align-items: center;
208
+ padding: 0.5833em 0.833em;
209
+ background-color: #e8e8e8 !important;
210
+ color: rgba(0, 0, 0, 0.6) !important;
211
+ font-size: 0.85714286rem;
212
+ font-weight: bold;
213
+
214
+ svg {
215
+ padding: 0 0 0 0.5em;
216
+ margin-right: 0;
217
+ }
218
+ }
219
+ }
@@ -172,3 +172,111 @@ body.babel-view .field.language-independent-field {
172
172
  }
173
173
  }
174
174
  }
175
+
176
+ .image-widget {
177
+ container-type: inline-size;
178
+
179
+ .no-image-wrapper {
180
+ display: flex;
181
+ width: ~'min(100%, 450px)';
182
+ flex-direction: column;
183
+ align-items: center;
184
+ }
185
+
186
+ .toolbar-inner {
187
+ display: flex;
188
+ width: ~'min(100%, 450px)';
189
+ height: 40px;
190
+ padding: 4px;
191
+ border-radius: 2px;
192
+ background-color: rgba(255, 255, 255, 0.975);
193
+ box-shadow:
194
+ 0 0 8px rgba(0, 0, 0, 0.1),
195
+ 0 2px 4px rgba(0, 0, 0, 0.05);
196
+
197
+ .ui.form & .ui.input input[type='text'] {
198
+ height: initial;
199
+ }
200
+
201
+ & > svg {
202
+ display: inline-block !important;
203
+ box-sizing: content-box;
204
+ padding: 4px;
205
+ margin-right: 4px;
206
+ color: @brown !important;
207
+ }
208
+
209
+ .ui.input {
210
+ width: 100%;
211
+ margin-left: 8px;
212
+ }
213
+
214
+ .ui.input > input {
215
+ padding: 0;
216
+ border: none;
217
+ }
218
+
219
+ .ui.icon.button {
220
+ padding: 4px;
221
+ border-radius: 1px;
222
+ margin-left: -3px;
223
+ color: @brown !important;
224
+
225
+ &:hover {
226
+ background-color: #edf1f2 !important;
227
+ }
228
+ }
229
+
230
+ .ui.buttons:first-child {
231
+ & .ui.icon.button {
232
+ margin-left: 0;
233
+ }
234
+ }
235
+ }
236
+
237
+ @blueArctic: #e2f1fd;
238
+ @greySnow: #f3f5f7;
239
+ @greySmoke: #e4e8ec;
240
+
241
+ .image-widget-preview-wrapper {
242
+ position: relative;
243
+ }
244
+
245
+ .ui.basic.button.remove-block-button {
246
+ position: absolute;
247
+ z-index: 2;
248
+ top: 6px;
249
+ right: 2px;
250
+ background-color: transparent;
251
+ box-shadow: none;
252
+
253
+ .icon {
254
+ height: 18px !important;
255
+ }
256
+
257
+ .circled {
258
+ padding: 8px;
259
+ border: 1px solid @greySmoke;
260
+ background: @greySnow;
261
+
262
+ &:hover {
263
+ background-color: @greySmoke;
264
+ }
265
+ }
266
+
267
+ &:hover {
268
+ background-color: transparent !important;
269
+ }
270
+ }
271
+
272
+ .image-widget-filepath-preview {
273
+ display: flex;
274
+ align-items: center;
275
+ padding: 5px;
276
+ word-break: break-all;
277
+
278
+ a {
279
+ margin-left: 5px;
280
+ }
281
+ }
282
+ }
@@ -0,0 +1,7 @@
1
+ export default useLinkEditor;
2
+ declare function useLinkEditor(): {
3
+ anchorNode: React.MutableRefObject<undefined>;
4
+ show: () => void;
5
+ LinkEditor: (props: any) => import("react/jsx-runtime").JSX.Element;
6
+ };
7
+ import React from 'react';
@@ -1,4 +1,5 @@
1
- export function TeaserSchema({ intl }: {
1
+ export function TeaserSchema({ data, intl }: {
2
+ data: any;
2
3
  intl: any;
3
4
  }): {
4
5
  title: any;
@@ -15,6 +16,12 @@ export function TeaserSchema({ intl }: {
15
16
  selectedItemAttrs: string[];
16
17
  allowExternals: boolean;
17
18
  };
19
+ overwrite: {
20
+ title: any;
21
+ description: any;
22
+ type: string;
23
+ default: boolean;
24
+ };
18
25
  title: {
19
26
  title: any;
20
27
  };
@@ -37,7 +44,7 @@ export function TeaserSchema({ intl }: {
37
44
  type: string;
38
45
  };
39
46
  };
40
- required: any[];
47
+ required: string[];
41
48
  };
42
49
  export function gridTeaserDisableStylingSchema({ schema, formData, intl }: {
43
50
  schema: any;
@@ -0,0 +1,10 @@
1
+ export function ImageToolbar({ className, data, id, onChange, selected }: {
2
+ className: any;
3
+ data: any;
4
+ id: any;
5
+ onChange: any;
6
+ selected: any;
7
+ }): import("react/jsx-runtime").JSX.Element;
8
+ export const ImageInput: any;
9
+ export default ImageUploadWidget;
10
+ declare function ImageUploadWidget(props: any): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,11 @@
1
+ export const Default: any;
2
+ export const Filled: any;
3
+ export const Inline: any;
4
+ declare namespace _default {
5
+ export let title: string;
6
+ export { ImageWidget as component };
7
+ export let decorators: ((Story: any) => import("react/jsx-runtime").JSX.Element)[];
8
+ export let argTypes: {};
9
+ }
10
+ export default _default;
11
+ import ImageWidget from './ImageWidget';
@@ -14,6 +14,7 @@ export namespace widgetMapping {
14
14
  export { DatetimeWidget as date };
15
15
  export { PasswordWidget as password };
16
16
  export { FileWidget as file };
17
+ export { ImageWidget as image };
17
18
  export { AlignWidget as align };
18
19
  export { ButtonsWidget as buttons };
19
20
  export { UrlWidget as url };
@@ -108,6 +109,7 @@ import { TextareaWidget } from '@plone/volto/components/manage/Widgets';
108
109
  import { DatetimeWidget } from '@plone/volto/components/manage/Widgets';
109
110
  import { PasswordWidget } from '@plone/volto/components/manage/Widgets';
110
111
  import { FileWidget } from '@plone/volto/components/manage/Widgets';
112
+ import ImageWidget from '@plone/volto/components/manage/Widgets/ImageWidget';
111
113
  import { AlignWidget } from '@plone/volto/components/manage/Widgets';
112
114
  import { ButtonsWidget } from '@plone/volto/components/manage/Widgets';
113
115
  import { InternalUrlWidget } from '@plone/volto/components/manage/Widgets';
@@ -134,6 +134,12 @@ export function applySchemaDefaults({ data, schema, intl }: {
134
134
  * @return {Object} Derived data, with the defaults extracted from the schema
135
135
  */
136
136
  export function applyBlockDefaults({ data, intl, navRoot, contentType, ...rest }: any, blocksConfig: any): any;
137
+ /**
138
+ * Check if a block is a container block
139
+ * check blocks from data as well since some add-ons use that
140
+ * such as @eeacms/volto-tabs-block
141
+ */
142
+ export function isBlockContainer(block: any): boolean;
137
143
  /**
138
144
  * Given a `block` object and a list of block types, return a list of block ids matching the types
139
145
  *
@@ -0,0 +1 @@
1
+ export declare function cloneBlocks(blocksData: any): any;
@@ -0,0 +1 @@
1
+ export {};
@@ -18,7 +18,7 @@ export { getWidgetView } from "./Widget/widget";
18
18
  export { getSiteAsyncPropExtender } from "./Site";
19
19
  export { ContentTypeCondition } from "./Slots";
20
20
  export { getAuthToken, persistAuthToken } from "@plone/volto/helpers/AuthToken/AuthToken";
21
- export { addAppURL, expandToBackendURL, flattenHTMLToAppURL, flattenToAppURL, stripQuerystring, toPublicURL, isInternalURL, getParentUrl, getBaseUrl, getView, isCmsUi, getId, isUrl, normalizeUrl, removeProtocol, URLUtils, flattenScales } from "@plone/volto/helpers/Url/Url";
21
+ export { addAppURL, expandToBackendURL, flattenHTMLToAppURL, flattenToAppURL, stripQuerystring, toPublicURL, isInternalURL, getParentUrl, getBaseUrl, getView, isCmsUi, getId, isUrl, normalizeUrl, removeProtocol, URLUtils, flattenScales, getFieldURL } from "@plone/volto/helpers/Url/Url";
22
22
  export { nestContent, getLayoutFieldname, getContentIcon, getLanguageIndependentFields } from "@plone/volto/helpers/Content/Content";
23
23
  export { addBlock, insertBlock, blockHasValue, changeBlock, deleteBlock, emptyBlocksForm, getBlocks, getBlocksFieldname, getBlocksLayoutFieldname, hasBlocksData, moveBlock, mutateBlock, nextBlockId, previousBlockId, applyBlockDefaults, applySchemaDefaults, blocksFormGenerator, buildStyleClassNamesFromData, buildStyleClassNamesExtenders, buildStyleObjectFromData, getPreviousNextBlock, findBlocks, getBlocksHierarchy, moveBlockEnhanced } from "@plone/volto/helpers/Blocks/Blocks";
24
24
  export { getSimpleDefaultBlocks, getDefaultBlocks } from "@plone/volto/helpers/Blocks/defaultBlocks";
File without changes
File without changes