From 29631addc231d94bafce0a1ded728d924292d7b6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Fern=C3=A1ndez=20de=20Alba?= Date: Sat, 16 Mar 2024 23:06:44 +0100 Subject: [PATCH 01/20] Improve `@plone/types` - Block*Props - Widgets (#5876) --- packages/types/news/5876.feature | 1 + packages/types/src/blocks/index.d.ts | 4 + packages/types/src/config/Blocks.d.ts | 2 +- packages/types/src/config/Widgets.d.ts | 102 ++++++++++++++++-- packages/volto/news/5876.feature | 1 + .../volto/src/components/manage/Add/Add.jsx | 4 + .../manage/Blocks/Block/BlocksForm.jsx | 8 ++ .../volto/src/components/manage/Edit/Edit.jsx | 4 + .../volto/src/components/manage/Form/Form.jsx | 4 + 9 files changed, 122 insertions(+), 8 deletions(-) create mode 100644 packages/types/news/5876.feature create mode 100644 packages/volto/news/5876.feature diff --git a/packages/types/news/5876.feature b/packages/types/news/5876.feature new file mode 100644 index 0000000000..3fb503858d --- /dev/null +++ b/packages/types/news/5876.feature @@ -0,0 +1 @@ +Improve @plone/types - Block*Props and Widgets @sneridagh diff --git a/packages/types/src/blocks/index.d.ts b/packages/types/src/blocks/index.d.ts index fb8893908d..4a367f730c 100644 --- a/packages/types/src/blocks/index.d.ts +++ b/packages/types/src/blocks/index.d.ts @@ -111,4 +111,8 @@ export interface BlockEditProps { path: string; className: string; style: Record<`--${string}`, string>; + content: Content; + history: History; + location: Location; + token: string; } diff --git a/packages/types/src/config/Blocks.d.ts b/packages/types/src/config/Blocks.d.ts index 8df89840e7..b509a274e8 100644 --- a/packages/types/src/config/Blocks.d.ts +++ b/packages/types/src/config/Blocks.d.ts @@ -20,7 +20,6 @@ export interface BlocksConfigData { listing: BlockConfigBase; video: BlockConfigBase; toc: BlockConfigBase; - hero: BlockConfigBase; maps: BlockConfigBase; html: BlockConfigBase; table: BlockConfigBase; @@ -116,6 +115,7 @@ export interface BlockConfigBase { */ // TODO: Improve extensions shape extensions?: Record; + blocksConfig?: Partial; } export type BlockExtension = ( diff --git a/packages/types/src/config/Widgets.d.ts b/packages/types/src/config/Widgets.d.ts index 7be30c7f46..62bd0f1293 100644 --- a/packages/types/src/config/Widgets.d.ts +++ b/packages/types/src/config/Widgets.d.ts @@ -1,7 +1,95 @@ -export type WidgetsConfig = - | { - [key: string]: { - [key: string]: React.ComponentType; - }; - } - | { defaultWidget: React.ComponentType }; +export interface WidgetsConfig { + default: React.ComponentType; + id: { + schema: React.ComponentType; + subjects: React.ComponentType; + query: React.ComponentType; + recurrence: React.ComponentType; + remoteUrl: React.ComponentType; + id: React.ComponentType; + site_logo: React.ComponentType; + }; + widget: { + textarea: React.ComponentType; + datetime: React.ComponentType; + date: React.ComponentType; + password: React.ComponentType; + file: React.ComponentType; + align: React.ComponentType; + buttons: React.ComponentType; + url: React.ComponentType; + internal_url: React.ComponentType; + email: React.ComponentType; + array: React.ComponentType; + token: React.ComponentType; + query: React.ComponentType; + query_sort_on: React.ComponentType; + querystring: React.ComponentType; + object_browser: React.ComponentType; + object: React.ComponentType; + object_list: React.ComponentType; + vocabularyterms: React.ComponentType; + image_size: React.ComponentType; + select_querystring_field: React.ComponentType; + autocomplete: React.ComponentType; + color_picker: React.ComponentType; + select: React.ComponentType; + }; + vocabulary: { + 'plone.app.vocabularies.Catalog': React.ComponentType; + }; + factory: { + 'Relation List': React.ComponentType; + 'Relation Choice': React.ComponentType; + }; + choices: React.ComponentType; + type: { + boolean: React.ComponentType; + array: React.ComponentType; + object: React.ComponentType; + datetime: React.ComponentType; + date: React.ComponentType; + password: React.ComponentType; + number: React.ComponentType; + integer: React.ComponentType; + id: React.ComponentType; + }; + views: { + getWidget: React.ComponentType; + default: React.ComponentType; + id: { + file: React.ComponentType; + image: React.ComponentType; + relatedItems: React.ComponentType; + subjects: React.ComponentType; + }; + widget: { + array: React.ComponentType; + boolean: React.ComponentType; + choices: React.ComponentType; + date: React.ComponentType; + datetime: React.ComponentType; + description: React.ComponentType; + email: React.ComponentType; + file: React.ComponentType; + image: React.ComponentType; + password: React.ComponentType; + relation: React.ComponentType; + relations: React.ComponentType; + richtext: React.ComponentType; + string: React.ComponentType; + tags: React.ComponentType; + textarea: React.ComponentType; + title: React.ComponentType; + url: React.ComponentType; + internal_url: React.ComponentType; + object: React.ComponentType; + }; + vocabulary: {}; + choices: React.ComponentType; + type: { + array: React.ComponentType; + boolean: React.ComponentType; + }; + }; +} diff --git a/packages/volto/news/5876.feature b/packages/volto/news/5876.feature new file mode 100644 index 0000000000..a7e14858b3 --- /dev/null +++ b/packages/volto/news/5876.feature @@ -0,0 +1 @@ +Match props passed to the BlockView if reused from the BlockEdit @sneridagh diff --git a/packages/volto/src/components/manage/Add/Add.jsx b/packages/volto/src/components/manage/Add/Add.jsx index 536981c360..cf5057267b 100644 --- a/packages/volto/src/components/manage/Add/Add.jsx +++ b/packages/volto/src/components/manage/Add/Add.jsx @@ -394,6 +394,10 @@ class Add extends Component { this.setState({ formSelected: 'addForm' }); }} global + // Properties to pass to the BlocksForm to match the View ones + history={this.props.history} + location={this.props.location} + token={this.props.token} /> {this.state.isClient && createPortal( diff --git a/packages/volto/src/components/manage/Blocks/Block/BlocksForm.jsx b/packages/volto/src/components/manage/Blocks/Block/BlocksForm.jsx index 22fb0b176f..0424a307bc 100644 --- a/packages/volto/src/components/manage/Blocks/Block/BlocksForm.jsx +++ b/packages/volto/src/components/manage/Blocks/Block/BlocksForm.jsx @@ -48,6 +48,9 @@ const BlocksForm = (props) => { blocksConfig = config.blocks.blocksConfig, editable = true, direction = 'vertical', + history, + location, + token, } = props; const blockList = getBlocks(properties); @@ -271,6 +274,11 @@ const BlocksForm = (props) => { editable, showBlockChooser: selectedBlock === childId, detached: isContainer, + // Properties to pass to the BlocksForm to match the View ones + content: properties, + history, + location, + token, }; return editBlockWrapper( dragProps, diff --git a/packages/volto/src/components/manage/Edit/Edit.jsx b/packages/volto/src/components/manage/Edit/Edit.jsx index bf27da632d..38e2c6474a 100644 --- a/packages/volto/src/components/manage/Edit/Edit.jsx +++ b/packages/volto/src/components/manage/Edit/Edit.jsx @@ -333,6 +333,10 @@ class Edit extends Component { this.setState({ formSelected: 'editForm' }); }} global + // Properties to pass to the BlocksForm to match the View ones + history={this.props.history} + location={this.props.location} + token={this.props.token} /> ); diff --git a/packages/volto/src/components/manage/Form/Form.jsx b/packages/volto/src/components/manage/Form/Form.jsx index 2eff094e47..cdf7209408 100644 --- a/packages/volto/src/components/manage/Form/Form.jsx +++ b/packages/volto/src/components/manage/Form/Form.jsx @@ -719,6 +719,10 @@ class Form extends Component { showRestricted={this.props.showRestricted} editable={this.props.editable} isMainForm={this.props.editable} + // Properties to pass to the BlocksForm to match the View ones + history={this.props.history} + location={this.props.location} + token={this.props.token} /> {this.state.isClient && this.state.sidebarMetadataIsAvailable && From 6b57f7d53bc6415da184ca67253f85aaa8c85a39 Mon Sep 17 00:00:00 2001 From: sabrina-bongiovanni <116291154+sabrina-bongiovanni@users.noreply.github.com> Date: Sat, 16 Mar 2024 23:07:51 +0100 Subject: [PATCH 02/20] Added download link to filename in file widget (#5880) --- packages/volto/news/5880.feature | 1 + .../components/manage/Widgets/FileWidget.jsx | 8 ++++++-- .../__snapshots__/FileWidget.test.jsx.snap | 17 +++++++++++++++-- 3 files changed, 22 insertions(+), 4 deletions(-) create mode 100644 packages/volto/news/5880.feature diff --git a/packages/volto/news/5880.feature b/packages/volto/news/5880.feature new file mode 100644 index 0000000000..f78c307307 --- /dev/null +++ b/packages/volto/news/5880.feature @@ -0,0 +1 @@ +Added download link to filename in file widget @sabrina-bongiovanni diff --git a/packages/volto/src/components/manage/Widgets/FileWidget.jsx b/packages/volto/src/components/manage/Widgets/FileWidget.jsx index 4a717b97de..e35b015cad 100644 --- a/packages/volto/src/components/manage/Widgets/FileWidget.jsx +++ b/packages/volto/src/components/manage/Widgets/FileWidget.jsx @@ -9,7 +9,7 @@ import { Button, Image, Dimmer } from 'semantic-ui-react'; import { readAsDataURL } from 'promise-file-reader'; import { injectIntl } from 'react-intl'; import deleteSVG from '@plone/volto/icons/delete.svg'; -import { Icon, FormFieldWrapper } from '@plone/volto/components'; +import { Icon, FormFieldWrapper, UniversalLink } from '@plone/volto/components'; import loadable from '@loadable/component'; import { flattenToAppURL, validateFileUploadSize } from '@plone/volto/helpers'; import { defineMessages, useIntl } from 'react-intl'; @@ -170,7 +170,11 @@ const FileWidget = (props) => { )}
- {value && value.filename} + {value && ( + + {value.filename} + + )} {value && (