make title editable

src/components/manage/Blocks/Accordion/AccordionEdit.jsx

@@ -1,13 +1,34 @@
 import React from 'react';
 import { Segment, Accordion } from 'semantic-ui-react';
+import { emptyBlocksForm } from '@eeacms/volto-blocks-form/helpers';
+import { v4 as uuid } from 'uuid';
 import { Icon } from '@plone/volto/components';
 import upSVG from '@plone/volto/icons/up-key.svg';
 import downSVG from '@plone/volto/icons/down-key.svg';
-import { TextWidget } from '@plone/volto/components';
+
+import { BlocksForm } from '@eeacms/volto-blocks-form/components';
 import AnimateHeight from 'react-animate-height';
-export default ({ children }) => {
-  const [activeIndex, setActiveIndex] = React.useState(0);
+export default ({
+  children,
+  coldata,
+  metadata,
+  pathname,
+  manage,
+  selected,
+  block,
+  selectedBlock,
+  setSelectedBlock,
+  onChangeBlock,
+  data,
+}) => {
+  const empty = () => {
+    return [uuid(), emptyBlocksForm()];
+  };
 
+  const [newId, newData] = empty();
+
+  const [activeIndex, setActiveIndex] = React.useState(0);
+  const blockState = {};
   function handleClick(e, titleProps) {
     const { index } = titleProps;
     const newIndex = activeIndex === index ? -1 : index;
@@ -25,13 +46,57 @@ export default ({ children }) => {
             onClick={handleClick}
             className="accordion-title"
           >
-            <div className="accordion-tools">
+            {/* <div className="accordion-tools">
               {activeIndex === 0 ? (
                 <Icon name={upSVG} size="20px" />
               ) : (
                 <Icon name={downSVG} size="20px" />
               )}
-            </div>
+            </div> */}
+            <BlocksForm
+              key={newId}
+              metadata={metadata}
+              properties={newData}
+              manage={manage}
+              selectedBlock={selected ? selectedBlock[newId] : null}
+              description={data?.instructions?.data}
+              onSelectBlock={(id) =>
+                setSelectedBlock({
+                  [newId]: id,
+                })
+              }
+              onChangeFormData={(newFormData) => {
+                onChangeBlock(block, {
+                  ...data,
+                  data: {
+                    ...coldata,
+                    blocks: {
+                      ...coldata.blocks,
+                      [newId]: newFormData,
+                    },
+                  },
+                });
+              }}
+              onChangeField={(id, value) => {
+                if (['blocks', 'blocks_layout'].indexOf(id) > -1) {
+                  blockState[id] = value;
+                  onChangeBlock(block, {
+                    ...data,
+                    data: {
+                      ...coldata,
+                      blocks: {
+                        ...coldata.blocks,
+                        [newId]: {
+                          ...coldata.blocks?.[newId],
+                          ...blockState,
+                        },
+                      },
+                    },
+                  });
+                }
+              }}
+              pathname={pathname}
+            />
           </Accordion.Title>
           <div>
             <Accordion.Content active={activeIndex === 0}>

src/components/manage/Blocks/Accordion/Edit.jsx

@@ -67,7 +67,18 @@ const Edit = (props) => {
       ) : (
         <div>
           {columnList.map(([colId, column], index) => (
-            <AccordionEdit>
+            <AccordionEdit
+              data={data}
+              block={block}
+              metadata={metadata}
+              pathname={pathname}
+              manage={manage}
+              selected={selected}
+              selectedBlock={selectedBlock}
+              setSelectedBlock={setSelectedBlock}
+              coldata={coldata}
+              onChangeBlock={onChangeBlock}
+            >
               <BlocksForm
                 key={colId}
                 metadata={metadata}