fix: toolbar buttons for html block (#477)

* fix: fixed toolbar buttons for html block * chore: added RELEASE.md info * fix: removed container class * fix: added lazy import for toastify and removed unnecessary setState * chore: removed unused import --------- Co-authored-by: Piero Nicolli <[email protected]>
RedTurtle · Jan 11, 2024 · ed41904 · ed41904
1 parent 3b45cc8
commit ed41904
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 16 deletions.
diff --git 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
@@ -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(
+        <Toast
+          error
+          title="Errore"
+          content="C'è stato un errore nel formattare il codice html inserito"
+        />,
+      );
     }
   }
 
@@ -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(
+        <Toast
+          error
+          title="Errore"
+          content="C'è stato un errore nel formattare il codice html inserito"
+        />,
+      );
     }
   };
 
@@ -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"
                 >
                   <Icon name={codeSVG} size="24px" />
                 </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"
                 >
                   <Icon name={showSVG} size="24px" />
                 </Button>
@@ -290,6 +305,7 @@ class Edit extends Component {
                   basic
                   aria-label={this.props.intl.formatMessage(messages.prettier)}
                   onClick={this.onPrettify}
+                  type="button"
                 >
                   <Icon name={indentSVG} size="24px" />
                 </Button>
@@ -302,7 +318,12 @@ class Edit extends Component {
             <Popup
               trigger={
                 <Button.Group>
-                  <Button icon basic onClick={() => this.onChangeCode('')}>
+                  <Button
+                    icon
+                    basic
+                    type="button"
+                    onClick={() => this.onChangeCode('')}
+                  >
                     <Icon name={clearSVG} size="24px" color="#e40166" />
                   </Button>
                 </Button.Group>
@@ -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);