Skip to content

Commit

Permalink
feat: Slate in Hero Block2
Browse files Browse the repository at this point in the history
  • Loading branch information
@giuliaghisini
giuliaghisini committed Oct 11, 2023
1 parent 2c0c20b commit 34f929c
Showing 1 changed file with 37 additions and 196 deletions.
233 changes: 37 additions & 196 deletions src/customizations/volto/components/manage/Blocks/HeroImageLeft/Edit.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
/*
CUSTOMIZATIONS:
- Added stores link
- Added slate
*/

/**
Expand All @@ -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';

Expand Down Expand Up @@ -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);
}

/**
Expand Down Expand Up @@ -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();
}
}
}

/**
Expand All @@ -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
Expand Down Expand Up @@ -316,7 +204,7 @@ class EditComponent extends Component {
if (__SERVER__) {
return <div />;
}
const { Editor } = this.props.draftJs;

const placeholder =
this.props.data.placeholder ||
this.props.intl.formatMessage(messages.placeholder);
Expand Down Expand Up @@ -391,88 +279,43 @@ class EditComponent extends Component {
})}
>
<div className="edit-title">
<Editor
ref={(node) => {
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()
) {
<h1>
<TextEditorWidget
{...this.props}
showToolbar={false}
data={this.props.data}
fieldName="title"
selected={this.state.currentFocused === 'title'}
placeholder={this.props.intl.formatMessage(messages.title)}
setSelected={() => {
this.setState(() => ({ currentFocused: 'title' }));
}}
focusNextField={() => {
this.setState(() => ({ currentFocused: 'description' }));
this.descriptionEditor.focus();
}
}}
/>
}}
/>
</h1>
</div>
<Editor
ref={(node) => {
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) {
<p>
<TextEditorWidget
{...this.props}
showToolbar={false}
data={this.props.data}
fieldName="description"
selected={this.state.currentFocused === 'description'}
placeholder={this.props.intl.formatMessage(
messages.description,
)}
setSelected={() => {
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();
}}
/>
</p>

if (currentCursorPosition === blockLength) {
this.props.onFocusNextBlock(
this.props.block,
this.props.blockNode.current,
);
}
}}
/>
<StoresButtons data={this.props.data} />
</div>
</div>
Expand All @@ -485,9 +328,7 @@ class EditComponent extends Component {
}
}

const Edit = injectLazyLibs(['draftJs', 'immutableLib', 'draftJsImportHtml'])(
EditComponent,
);
const Edit = EditComponent;

export default compose(
injectIntl,
Expand Down

0 comments on commit 34f929c

Please sign in to comment.