diff --git a/RELEASE.md b/RELEASE.md index 286eb42d9..8ebc5fd28 100644 --- a/RELEASE.md +++ b/RELEASE.md @@ -51,6 +51,7 @@ ### Fix - Risolto un problema nel blocco Video Gallery, per cui alcuni video di youtube non erano riproducibili. +- Risolto problema nel funzionamento della toolbar per il blocco HTML. - Sistemate spaziature e font su mobile del blocco Card con Immagine e Card Semplice, migliorato il layout di quest'ultimo. - È stato migliorato il contrasto minimo necessario tra sfondo e testo nei blocchi numeri, countdown e galleria a griglia. diff --git a/src/customizations/volto/components/manage/Blocks/HTML/Edit.jsx b/src/customizations/volto/components/manage/Blocks/HTML/Edit.jsx index 54df6652f..afbc0d210 100644 --- a/src/customizations/volto/components/manage/Blocks/HTML/Edit.jsx +++ b/src/customizations/volto/components/manage/Blocks/HTML/Edit.jsx @@ -23,6 +23,7 @@ import clearSVG from '@plone/volto/icons/clear.svg'; import codeSVG from '@plone/volto/icons/code.svg'; import indentSVG from '@plone/volto/icons/indent.svg'; import Sidebar from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/HTML/Sidebar.jsx'; +import { Toast } from '@plone/volto/components'; const Editor = loadable(() => import('react-simple-code-editor')); @@ -157,21 +158,26 @@ class Edit extends Component { */ onPreview() { try { - const code = this.props.prettierStandalone + this.props.prettierStandalone .format(this.getValue(), { parser: 'html', plugins: [this.props.prettierParserHtml], }) - .trim(); - this.setState( - { - isPreview: !this.state.isPreview, - }, - () => this.onChangeCode(code), - ); + .then((value) => { + this.onChangeCode(value.trim()); + }); + this.setState({ + isPreview: !this.state.isPreview, + }); } catch (ex) { // error while parsing the user-typed HTML - // TODO: show a toast notification or something similar to the user + this.props.toastify.toast.error( + , + ); } } @@ -182,16 +188,23 @@ class Edit extends Component { */ onPrettify = () => { try { - const code = this.props.prettierStandalone + this.props.prettierStandalone .format(this.getValue(), { parser: 'html', plugins: [this.props.prettierParserHtml], }) - .trim(); - this.onChangeCode(code); + .then((value) => { + this.onChangeCode(value.trim()); + }); } catch (ex) { // error while parsing the user-typed HTML - // TODO: show a toast notification or something similar to the user + this.props.toastify.toast.error( + , + ); } }; @@ -259,6 +272,7 @@ class Edit extends Component { aria-label={this.props.intl.formatMessage(messages.source)} active={!this.state.isPreview} onClick={this.onCodeEditor} + type="button" > @@ -275,6 +289,7 @@ class Edit extends Component { aria-label={this.props.intl.formatMessage(messages.preview)} active={this.state.isPreview} onClick={this.onPreview} + type="button" > @@ -290,6 +305,7 @@ class Edit extends Component { basic aria-label={this.props.intl.formatMessage(messages.prettier)} onClick={this.onPrettify} + type="button" > @@ -302,7 +318,12 @@ class Edit extends Component { - @@ -343,7 +364,7 @@ class Edit extends Component { : () => {} } padding={8} - className="html-editor container" + className="html-editor" ref={(node) => { if (node) { this.codeEditorRef.current = node; @@ -383,7 +404,12 @@ const withPrismMarkup = (WrappedComponent) => (props) => { }; export default compose( - injectLazyLibs(['prettierStandalone', 'prettierParserHtml', 'prismCore']), + injectLazyLibs([ + 'prettierStandalone', + 'prettierParserHtml', + 'prismCore', + 'toastify', + ]), withPrismMarkup, injectIntl, )(Edit);