From 085f13f6149c646fd237e0bf2c1e4baf588ff5f7 Mon Sep 17 00:00:00 2001
From: Giulia Ghisini <giulia.ghisini@redturtle.it>
Date: Mon, 17 Jun 2024 14:39:48 +0200
Subject: [PATCH] fix: button block pos editor

---
 src/config/italiaConfig.js                    |   6 +-
 .../BlockChooser/BlockChooserButton.jsx       | 157 ------------------
 src/theme/_cms-ui.scss                        |   5 +
 3 files changed, 8 insertions(+), 160 deletions(-)
 delete mode 100644 src/customizations/volto/components/manage/BlockChooser/BlockChooserButton.jsx

diff --git a/src/config/italiaConfig.js b/src/config/italiaConfig.js
index 5bc90332c..04388f85a 100644
--- a/src/config/italiaConfig.js
+++ b/src/config/italiaConfig.js
@@ -66,8 +66,8 @@ import { schemaListing } from 'design-comuni-plone-theme/components/ItaliaTheme/
 
 import reducers from 'design-comuni-plone-theme/reducers';
 
-const ReleaseLog = loadable(
-  () => import('design-comuni-plone-theme/components/ReleaseLog/ReleaseLog'),
+const ReleaseLog = loadable(() =>
+  import('design-comuni-plone-theme/components/ReleaseLog/ReleaseLog'),
 );
 
 const messages = defineMessages({
@@ -84,7 +84,7 @@ export default function applyConfig(voltoConfig) {
    * SETTINGS
    ******************************************************************************/
   const voltoSentryOptions = voltoConfig.settings.sentryOptions;
-
+  config.experimental.addBlockButton.enabled = true; //per spostare il bottone di aggiunta dei blocchi in basso, e fare in modo che i bottoni di edit dei blocchi siano usabili anche da tablet/mobile
   config.settings = {
     ...config.settings,
     openExternalLinkInNewTab: true,
diff --git a/src/customizations/volto/components/manage/BlockChooser/BlockChooserButton.jsx b/src/customizations/volto/components/manage/BlockChooser/BlockChooserButton.jsx
deleted file mode 100644
index 18e9f47ed..000000000
--- a/src/customizations/volto/components/manage/BlockChooser/BlockChooserButton.jsx
+++ /dev/null
@@ -1,157 +0,0 @@
-/* CUSTOMIZATIONS
-- zindex for handling overlapping in small pages
-*/
-
-import React from 'react';
-import { doesNodeContainClick } from 'semantic-ui-react/dist/commonjs/lib';
-import addSVG from '@plone/volto/icons/circle-plus.svg';
-import { blockHasValue } from '@plone/volto/helpers';
-import { Icon, BlockChooser } from '@plone/volto/components';
-import config from '@plone/volto/registry';
-import { Button, Ref } from 'semantic-ui-react';
-import { defineMessages, useIntl } from 'react-intl';
-import { usePopper } from 'react-popper';
-import { Portal } from 'react-portal';
-
-const messages = defineMessages({
-  addBlock: {
-    id: 'Add block',
-    defaultMessage: 'Add block',
-  },
-});
-
-export const ButtonComponent = (props) => {
-  const intl = useIntl();
-  const {
-    className = `block-add-button${
-      config.experimental.addBlockButton.enabled ? ' new-add-block' : ''
-    }`,
-    size = '19px',
-    onShowBlockChooser,
-  } = props;
-
-  return (
-    <Button
-      icon
-      basic
-      title={intl.formatMessage(messages.addBlock)}
-      onClick={(e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        onShowBlockChooser();
-      }}
-      className={className}
-    >
-      <Icon name={addSVG} className={className} size={size} />
-    </Button>
-  );
-};
-
-const BlockChooserButton = (props) => {
-  const {
-    block,
-    allowedBlocks,
-    showRestricted,
-    data,
-    onMutateBlock,
-    onInsertBlock,
-    blocksConfig,
-    buttonComponent,
-    properties,
-  } = props;
-  const { disableNewBlocks } = data;
-  const [addNewBlockOpened, setAddNewBlockOpened] = React.useState(false);
-
-  const blockChooserRef = React.useRef();
-
-  const handleClickOutside = React.useCallback((e) => {
-    if (
-      blockChooserRef.current &&
-      doesNodeContainClick(blockChooserRef.current, e)
-    )
-      return;
-    setAddNewBlockOpened(false);
-  }, []);
-
-  const Component = buttonComponent || ButtonComponent;
-
-  React.useEffect(() => {
-    document.addEventListener('mousedown', handleClickOutside, false);
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside, false);
-    };
-  }, [handleClickOutside]);
-
-  const [referenceElement, setReferenceElement] = React.useState(null);
-  const [popperElement, setPopperElement] = React.useState(null);
-  const { styles, attributes } = usePopper(referenceElement, popperElement, {
-    placement: config.experimental.addBlockButton.enabled
-      ? 'bottom'
-      : 'right-start',
-    modifiers: [
-      {
-        name: 'offset',
-        options: {
-          offset: [-10, 5],
-        },
-      },
-      {
-        name: 'flip',
-        options: {
-          fallbackPlacements: ['right-end', 'top-start'],
-        },
-      },
-    ],
-  });
-
-  return (
-    <>
-      {!disableNewBlocks &&
-        (config.experimental.addBlockButton.enabled ||
-          !blockHasValue(data)) && (
-          <Ref innerRef={setReferenceElement}>
-            <Component
-              {...props}
-              onShowBlockChooser={() => setAddNewBlockOpened(true)}
-            />
-          </Ref>
-        )}
-      {addNewBlockOpened && (
-        <Portal node={document.getElementById('body')}>
-          <div
-            ref={setPopperElement}
-            style={{ ...styles.popper, zIndex: 1000 }}
-            {...attributes.popper}
-          >
-            <BlockChooser
-              onMutateBlock={
-                onMutateBlock
-                  ? (id, value) => {
-                      setAddNewBlockOpened(false);
-                      onMutateBlock(id, value);
-                    }
-                  : null
-              }
-              onInsertBlock={
-                onInsertBlock
-                  ? (id, value) => {
-                      setAddNewBlockOpened(false);
-                      onInsertBlock(id, value);
-                    }
-                  : null
-              }
-              currentBlock={block}
-              allowedBlocks={allowedBlocks}
-              blocksConfig={blocksConfig}
-              properties={properties}
-              showRestricted={showRestricted}
-              ref={blockChooserRef}
-            />
-          </div>
-        </Portal>
-      )}
-    </>
-  );
-};
-
-export default BlockChooserButton;
diff --git a/src/theme/_cms-ui.scss b/src/theme/_cms-ui.scss
index 0983c767a..693856308 100644
--- a/src/theme/_cms-ui.scss
+++ b/src/theme/_cms-ui.scss
@@ -244,6 +244,11 @@ body.cms-ui {
     }
   }
 
+  /*Block chooser*/
+  [data-popper-placement] {
+    z-index: 1000;
+  }
+
   .sidebar-container {
     .numbers-block-sidebar-form-container {
       padding-bottom: 1rem;