From 34f929c7fa12bde790309d9dce3a4b51de1cfa87 Mon Sep 17 00:00:00 2001 From: Giulia Ghisini Date: Wed, 11 Oct 2023 12:58:40 +0200 Subject: [PATCH] feat: Slate in Hero Block2 --- .../manage/Blocks/HeroImageLeft/Edit.jsx | 233 +++--------------- 1 file changed, 37 insertions(+), 196 deletions(-) diff --git a/src/customizations/volto/components/manage/Blocks/HeroImageLeft/Edit.jsx b/src/customizations/volto/components/manage/Blocks/HeroImageLeft/Edit.jsx index 7d6246eb4..22203e923 100644 --- a/src/customizations/volto/components/manage/Blocks/HeroImageLeft/Edit.jsx +++ b/src/customizations/volto/components/manage/Blocks/HeroImageLeft/Edit.jsx @@ -1,6 +1,7 @@ /* CUSTOMIZATIONS: - Added stores link +- Added slate */ /** @@ -18,17 +19,17 @@ import { isEqual } from 'lodash'; import { defineMessages, injectIntl } from 'react-intl'; import cx from 'classnames'; -import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable'; import { flattenToAppURL, getBaseUrl, validateFileUploadSize, } from '@plone/volto/helpers'; import { createContent } from '@plone/volto/actions'; -import { Icon, SidebarPortal, LinkMore } from '@plone/volto/components'; +import { Icon, SidebarPortal } from '@plone/volto/components'; import clearSVG from '@plone/volto/icons/clear.svg'; +import { TextEditorWidget } from 'design-comuni-plone-theme/components/ItaliaTheme'; import StoresButtons from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/HeroImageLeft/StoresButtons'; import HeroSidebar from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/HeroImageLeft/HeroSidebar'; @@ -114,58 +115,12 @@ class EditComponent extends Component { uploading: false, }; - const { Map } = this.props.immutableLib; - if (!__SERVER__) { - const { DefaultDraftBlockRenderMap, EditorState } = props.draftJs; - const { stateFromHTML } = props.draftJsImportHtml; - - const blockTitleRenderMap = Map({ - unstyled: { - element: 'h1', - }, - }); - - const blockDescriptionRenderMap = Map({ - unstyled: { - element: 'div', - }, - }); - - this.extendedBlockRenderMap = DefaultDraftBlockRenderMap.merge( - blockTitleRenderMap, - ); - - this.extendedDescripBlockRenderMap = DefaultDraftBlockRenderMap.merge( - blockDescriptionRenderMap, - ); - - let titleEditorState; - let descriptionEditorState; - if (props.data && props.data.title) { - titleEditorState = EditorState.createWithContent( - stateFromHTML(props.data.title), - ); - } else { - titleEditorState = EditorState.createEmpty(); - } - if (props.data && props.data.description) { - descriptionEditorState = EditorState.createWithContent( - stateFromHTML(props.data.description), - ); - } else { - descriptionEditorState = EditorState.createEmpty(); - } this.state = { uploading: false, - titleEditorState, - descriptionEditorState, currentFocused: 'title', }; } - - this.onChangeTitle = this.onChangeTitle.bind(this); - this.onChangeDescription = this.onChangeDescription.bind(this); } /** @@ -199,43 +154,6 @@ class EditComponent extends Component { url: nextProps.content['@id'], }); } - - const { EditorState } = this.props.draftJs; - const { stateFromHTML } = this.props.draftJsImportHtml; - - if ( - nextProps.data.title && - this.props.data.title !== nextProps.data.title && - !this.props.selected - ) { - const contentState = stateFromHTML(nextProps.data.title); - this.setState({ - titleEditorState: nextProps.data.title - ? EditorState.createWithContent(contentState) - : EditorState.createEmpty(), - }); - } - - if ( - nextProps.data.description && - this.props.data.description !== nextProps.data.description && - !this.props.selected - ) { - const contentState = stateFromHTML(nextProps.data.description); - this.setState({ - descriptionEditorState: nextProps.data.description - ? EditorState.createWithContent(contentState) - : EditorState.createEmpty(), - }); - } - - if (nextProps.selected !== this.props.selected) { - if (this.state.currentFocused === 'title') { - this.titleEditor.focus(); - } else { - this.descriptionEditor.focus(); - } - } } /** @@ -248,36 +166,6 @@ class EditComponent extends Component { return this.props.selected || !isEqual(this.props.data, nextProps.data); } - /** - * Change Title handler - * @method onChangeTitle - * @param {object} titleEditorState Editor state. - * @returns {undefined} - */ - onChangeTitle(titleEditorState) { - this.setState({ titleEditorState }, () => { - this.props.onChangeBlock(this.props.block, { - ...this.props.data, - title: titleEditorState.getCurrentContent().getPlainText(), - }); - }); - } - - /** - * Change Description handler - * @method onChangeDescription - * @param {object} descriptionEditorState Editor state. - * @returns {undefined} - */ - onChangeDescription(descriptionEditorState) { - this.setState({ descriptionEditorState }, () => { - this.props.onChangeBlock(this.props.block, { - ...this.props.data, - description: descriptionEditorState.getCurrentContent().getPlainText(), - }); - }); - } - /** * Upload image handler * @method onUploadImage @@ -316,7 +204,7 @@ class EditComponent extends Component { if (__SERVER__) { return
; } - const { Editor } = this.props.draftJs; + const placeholder = this.props.data.placeholder || this.props.intl.formatMessage(messages.placeholder); @@ -391,88 +279,43 @@ class EditComponent extends Component { })} >
- { - this.titleEditor = node; - }} - readOnly={!this.props.editable} - onChange={this.onChangeTitle} - editorState={this.state.titleEditorState} - blockRenderMap={this.extendedBlockRenderMap} - handleReturn={() => true} - placeholder={this.props.intl.formatMessage(messages.title)} - blockStyleFn={() => 'title-editor'} - onUpArrow={() => { - const selectionState = this.state.titleEditorState.getSelection(); - const { titleEditorState } = this.state; - if ( - titleEditorState - .getCurrentContent() - .getBlockMap() - .first() - .getKey() === selectionState.getFocusKey() - ) { - this.props.onFocusPreviousBlock( - this.props.block, - this.props.blockNode.current, - ); - } - }} - onDownArrow={() => { - const selectionState = this.state.titleEditorState.getSelection(); - const { titleEditorState } = this.state; - if ( - titleEditorState - .getCurrentContent() - .getBlockMap() - .last() - .getKey() === selectionState.getFocusKey() - ) { +

+ { + this.setState(() => ({ currentFocused: 'title' })); + }} + focusNextField={() => { this.setState(() => ({ currentFocused: 'description' })); - this.descriptionEditor.focus(); - } - }} - /> + }} + /> +

- { - this.descriptionEditor = node; - }} - readOnly={!this.props.editable} - onChange={this.onChangeDescription} - editorState={this.state.descriptionEditorState} - blockRenderMap={this.extendedDescripBlockRenderMap} - handleReturn={() => true} - placeholder={this.props.intl.formatMessage( - messages.description, - )} - blockStyleFn={() => 'description-editor'} - onUpArrow={() => { - const selectionState = this.state.descriptionEditorState.getSelection(); - const currentCursorPosition = selectionState.getStartOffset(); - if (currentCursorPosition === 0) { +

+ { + this.setState(() => ({ currentFocused: 'description' })); + }} + focusPrevField={() => { this.setState(() => ({ currentFocused: 'title' })); - this.titleEditor.focus(); - } - }} - onDownArrow={() => { - const selectionState = this.state.descriptionEditorState.getSelection(); - const { descriptionEditorState } = this.state; - const currentCursorPosition = selectionState.getStartOffset(); - const blockLength = descriptionEditorState - .getCurrentContent() - .getFirstBlock() - .getLength(); + }} + /> +

- if (currentCursorPosition === blockLength) { - this.props.onFocusNextBlock( - this.props.block, - this.props.blockNode.current, - ); - } - }} - />
@@ -485,9 +328,7 @@ class EditComponent extends Component { } } -const Edit = injectLazyLibs(['draftJs', 'immutableLib', 'draftJsImportHtml'])( - EditComponent, -); +const Edit = EditComponent; export default compose( injectIntl,