@eeacms/volto-group-block 8.1.1 → 10.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-group-block",
-  "version": "8.1.1",
+  "version": "10.0.0",
   "description": "volto-group-block: Volto block to be used to group other blocks",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/components/manage/Blocks/Group/CounterComponent.jsx

@@ -56,7 +56,7 @@ const countTextInEachBlock =
       : countCharsWithSpaces(foundText);
   };
 
-const countTextInBlocks = (blocksObject, ignoreSpaces, maxChars) => {
+export const countTextInBlocks = (blocksObject, ignoreSpaces, maxChars) => {
   const { countTextIn, skipBlocksInGroups = [] } =
     config.blocks?.blocksConfig?.group || {};
   // use obj ref to update value - if you send number it will not be updated
@@ -82,12 +82,21 @@ const countTextInBlocks = (blocksObject, ignoreSpaces, maxChars) => {
 };
 
 const CounterComponent = ({ data, setSidebarTab, setSelectedBlock }) => {
-  const { maxChars, ignoreSpaces } = data;
-  const charCount = countTextInBlocks(data?.data, ignoreSpaces, maxChars);
+  const maxChars = parseInt(data.maxChars) || 0;
+  const maxCharsOverflowPercent = parseInt(data.maxCharsOverflowPercent) || 0;
+  const { ignoreSpaces } = data;
+  const charCount =
+    data.charCount ?? countTextInBlocks(data?.data, ignoreSpaces, maxChars);
+
+  const overflowLimit =
+    maxCharsOverflowPercent > 0
+      ? Math.ceil((maxChars * (100 + maxCharsOverflowPercent)) / 100)
+      : maxChars;
+
   const counterClass =
     charCount < Math.ceil(maxChars / 1.05)
       ? 'info'
-      : charCount < maxChars
+      : charCount <= overflowLimit
       ? 'warning'
       : 'danger';
 

package/src/components/manage/Blocks/Group/CounterComponent.test.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import CounterComponent from './CounterComponent';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 
 jest.mock('@plone/volto/registry', () => ({
   blocks: {
@@ -231,4 +231,119 @@ describe('CounterComponent', () => {
     expect(setSidebarTab).toHaveBeenCalledWith(1);
     expect(setSelectedBlock).toHaveBeenCalled();
   });
+
+  it('should render warning class when chars are within overflow zone (maxCharsOverflowPercent=10)', () => {
+    const { container, getByText } = render(
+      <CounterComponent
+        data={{
+          maxChars: 100,
+          maxCharsOverflowPercent: 10,
+          data: {
+            blocks: {
+              block1: { '@type': 'text', plaintext: 'a'.repeat(105) },
+            },
+            blocks_layout: {
+              items: ['block1'],
+            },
+          },
+        }}
+        setSidebarTab={setSidebarTab}
+        setSelectedBlock={setSelectedBlock}
+      />,
+    );
+    expect(getByText('5 characters over the limit')).toBeInTheDocument();
+    expect(container.querySelector('.counter.warning')).toBeInTheDocument();
+  });
+
+  it('should render danger class when chars exceed overflow zone (maxCharsOverflowPercent=10)', () => {
+    const { container, getByText } = render(
+      <CounterComponent
+        data={{
+          maxChars: 100,
+          maxCharsOverflowPercent: 10,
+          data: {
+            blocks: {
+              block1: { '@type': 'text', plaintext: 'a'.repeat(111) },
+            },
+            blocks_layout: {
+              items: ['block1'],
+            },
+          },
+        }}
+        setSidebarTab={setSidebarTab}
+        setSelectedBlock={setSelectedBlock}
+      />,
+    );
+    expect(getByText('11 characters over the limit')).toBeInTheDocument();
+    expect(container.querySelector('.counter.danger')).toBeInTheDocument();
+  });
+
+  it('should render warning class when chars equal maxChars with no overflow percent', () => {
+    const { container, getByText } = render(
+      <CounterComponent
+        data={{
+          maxChars: 100,
+          data: {
+            blocks: {
+              block1: { '@type': 'text', plaintext: 'a'.repeat(100) },
+            },
+            blocks_layout: {
+              items: ['block1'],
+            },
+          },
+        }}
+        setSidebarTab={setSidebarTab}
+        setSelectedBlock={setSelectedBlock}
+      />,
+    );
+    expect(getByText('0 characters remaining out of 100')).toBeInTheDocument();
+    expect(container.querySelector('.counter.warning')).toBeInTheDocument();
+  });
+
+  it('should render danger class when negative overflow percent falls back to maxChars', () => {
+    const { container, getByText } = render(
+      <CounterComponent
+        data={{
+          maxChars: 100,
+          maxCharsOverflowPercent: -5,
+          data: {
+            blocks: {
+              block1: { '@type': 'text', plaintext: 'a'.repeat(104) },
+            },
+            blocks_layout: {
+              items: ['block1'],
+            },
+          },
+        }}
+        setSidebarTab={setSidebarTab}
+        setSelectedBlock={setSelectedBlock}
+      />,
+    );
+    expect(getByText('4 characters over the limit')).toBeInTheDocument();
+    expect(container.querySelector('.counter.danger')).toBeInTheDocument();
+  });
+
+  it('should use persisted charCount from data instead of recomputing', () => {
+    const { container, getByText } = render(
+      <CounterComponent
+        data={{
+          maxChars: 100,
+          charCount: 42,
+          data: {
+            blocks: {
+              block1: { '@type': 'text', plaintext: 'a'.repeat(90) },
+            },
+            blocks_layout: {
+              items: ['block1'],
+            },
+          },
+        }}
+        setSidebarTab={setSidebarTab}
+        setSelectedBlock={setSelectedBlock}
+      />,
+    );
+    // Should use charCount=42 from data, not 90 from blocks
+    expect(getByText('58 characters remaining out of 100')).toBeInTheDocument();
+    expect(container.querySelector('.counter.info')).toBeInTheDocument();
+  });
 });

package/src/components/manage/Blocks/Group/DefaultBody.jsx

@@ -1,10 +1,7 @@
-import { Button } from 'semantic-ui-react';
-import { BlocksForm, Icon, RenderBlocks } from '@plone/volto/components';
-import EditBlockWrapper from './EditBlockWrapper';
+import { BlocksForm, RenderBlocks } from '@plone/volto/components';
+import { countTextInBlocks } from './CounterComponent';
 import { useLocation } from 'react-router-dom';
 
-import helpSVG from '@plone/volto/icons/help.svg';
-
 const GroupBlockDefaultBody = (props) => {
   const location = useLocation();
   const {
@@ -16,10 +13,8 @@ const GroupBlockDefaultBody = (props) => {
     selected,
     selectedBlock,
     onSelectBlock,
-    setSelectedBlock,
     manage,
     childBlocksForm,
-    multiSelected,
     formDescription,
     isEditMode,
   } = props;
@@ -41,6 +36,8 @@ const GroupBlockDefaultBody = (props) => {
       allowedBlocks={data.allowedBlocks}
       title={data.placeholder}
       description={instructions}
+      isMainForm={false}
+      stopPropagation={selectedBlock}
       onSelectBlock={(id, l, e) => {
         const isMultipleSelection = e
           ? e.shiftKey || e.ctrlKey || e.metaKey
@@ -48,58 +45,44 @@ const GroupBlockDefaultBody = (props) => {
         onSelectBlock(id, isMultipleSelection, e, selectedBlock);
       }}
       onChangeFormData={(newFormData) => {
-        onChangeBlock(block, {
+        const newData = {
           ...data,
           data: newFormData,
-        });
+        };
+        if (data.maxChars) {
+          newData.charCount = countTextInBlocks(
+            newFormData,
+            data.ignoreSpaces,
+            data.maxChars,
+          );
+        }
+        onChangeBlock(block, newData);
       }}
       onChangeField={(id, value) => {
         if (['blocks', 'blocks_layout'].indexOf(id) > -1) {
           blockState[id] = value;
-          onChangeBlock(block, {
+          const newChildData = {
+            ...data.data,
+            ...blockState,
+          };
+          const newData = {
             ...data,
-            data: {
-              ...data.data,
-              ...blockState,
-            },
-          });
+            data: newChildData,
+          };
+          if (data.maxChars) {
+            newData.charCount = countTextInBlocks(
+              newChildData,
+              data.ignoreSpaces,
+              data.maxChars,
+            );
+          }
+          onChangeBlock(block, newData);
         } else {
           onChangeField(id, value);
         }
       }}
       pathname={pathname}
-    >
-      {({ draginfo }, editBlock, blockProps) => (
-        <EditBlockWrapper
-          draginfo={draginfo}
-          blockProps={blockProps}
-          disabled={data.disableInnerButtons}
-          extraControls={
-            <>
-              {instructions && (
-                <>
-                  <Button
-                    icon
-                    basic
-                    title="Section help"
-                    onClick={() => {
-                      setSelectedBlock();
-                      const tab = manage ? 0 : 1;
-                      props.setSidebarTab(tab);
-                    }}
-                  >
-                    <Icon name={helpSVG} className="" size="19px" />
-                  </Button>
-                </>
-              )}
-            </>
-          }
-          multiSelected={multiSelected.includes(blockProps.block)}
-        >
-          {editBlock}
-        </EditBlockWrapper>
-      )}
-    </BlocksForm>
+    />
   ) : (
     <RenderBlocks
       location={location}

package/src/components/manage/Blocks/Group/DefaultBody.test.jsx

@@ -3,7 +3,9 @@ import { render } from '@testing-library/react';
 import { Provider } from 'react-intl-redux';
 import DefaultBody from './DefaultBody';
 import configureStore from 'redux-mock-store';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
+
+const mockBlocksForm = jest.fn();
 
 jest.mock('react-router-dom', () => ({
   ...jest.requireActual('react-router-dom'),
@@ -15,7 +17,10 @@ jest.mock('react-router-dom', () => ({
 }));
 
 jest.mock('@plone/volto/components', () => ({
-  BlocksForm: jest.fn(() => <div className="blocks-form">RenderBlocks</div>),
+  BlocksForm: jest.fn((props) => {
+    mockBlocksForm(props);
+    return <div className="blocks-form">RenderBlocks</div>;
+  }),
   RenderBlocks: jest.fn(() => <div>RenderBlocks</div>),
 }));
 
@@ -28,6 +33,10 @@ const store = mockStore({
 });
 
 describe('DefaultBody', () => {
+  beforeEach(() => {
+    mockBlocksForm.mockClear();
+  });
+
   it('renders children', () => {
     const props = {
       data: {
@@ -55,14 +64,26 @@ describe('DefaultBody Edit', () => {
         variation: {},
         allowedBlocks: ['listing'],
       },
+      childBlocksForm: {
+        blocks: {
+          a: {
+            '@type': 'slate',
+          },
+        },
+        blocks_layout: {
+          items: ['a'],
+        },
+      },
       metadata: {},
       properties: {},
       variation: {},
       onSelectBlock: jest.fn(),
-      onDeleteBlock: jest.fn(),
-      onMutateBlock: jest.fn(),
-      onInsertBlock: jest.fn(),
+      onChangeBlock: jest.fn(),
+      onChangeField: jest.fn(),
+      selectedBlock: 'a',
       selected: true,
+      manage: true,
+      pathname: '/',
     };
 
     const { getByText } = render(
@@ -71,5 +92,7 @@ describe('DefaultBody Edit', () => {
       </Provider>,
     );
     expect(getByText('RenderBlocks')).toBeInTheDocument();
+    expect(mockBlocksForm).toHaveBeenCalledTimes(1);
+    expect(mockBlocksForm.mock.calls[0][0].children).toBeUndefined();
   });
 });

package/src/components/manage/Blocks/Group/Edit.jsx

@@ -18,7 +18,7 @@ import PropTypes from 'prop-types';
 import { Segment } from 'semantic-ui-react';
 import EditSchema from './EditSchema';
 
-import CounterComponent from './CounterComponent';
+import CounterComponent, { countTextInBlocks } from './CounterComponent';
 import './editor.less';
 import { defineMessages, injectIntl } from 'react-intl';
 import { compose } from 'redux';
@@ -115,20 +115,29 @@ const Edit = (props) => {
     });
     const selectedIndex =
       data.data.blocks_layout.items.indexOf(selectedBlock) + 1;
-    onChangeBlock(block, {
-      ...data,
-      data: {
-        ...data?.data,
-        ...newBlockData,
-        blocks_layout: {
-          items: [
-            ...data.data.blocks_layout.items.slice(0, selectedIndex),
-            ...pastedBlocks,
-            ...data.data.blocks_layout.items.slice(selectedIndex),
-          ],
-        },
+    const newChildData = {
+      ...data?.data,
+      ...newBlockData,
+      blocks_layout: {
+        items: [
+          ...data.data.blocks_layout.items.slice(0, selectedIndex),
+          ...pastedBlocks,
+          ...data.data.blocks_layout.items.slice(selectedIndex),
+        ],
       },
-    });
+    };
+    const newData = {
+      ...data,
+      data: newChildData,
+    };
+    if (data.maxChars) {
+      newData.charCount = countTextInBlocks(
+        newChildData,
+        data.ignoreSpaces,
+        data.maxChars,
+      );
+    }
+    onChangeBlock(block, newData);
   };
 
   React.useEffect(() => {
@@ -137,10 +146,14 @@ const Edit = (props) => {
       childBlocksForm.blocks_layout.items[0] !== selectedBlock
     ) {
       setSelectedBlock(childBlocksForm.blocks_layout.items[0]);
-      onChangeBlock(block, {
+      const newData = {
         ...data,
         data: childBlocksForm,
-      });
+      };
+      if (data.maxChars) {
+        newData.charCount = 0;
+      }
+      onChangeBlock(block, newData);
     }
   }, [onChangeBlock, childBlocksForm, selectedBlock, block, data, data_blocks]);
 
@@ -154,7 +167,9 @@ const Edit = (props) => {
     <fieldset
       role="presentation"
       id={props.data.id}
-      className={cx('section-block', props.data.className)}
+      className={cx('section-block', props.data.className, {
+        'disable-inner-buttons': data.disableInnerButtons,
+      })}
       onKeyDown={(e) => {
         handleKeyDown(e, props.index, props.block, props.blockNode.current);
       }}
@@ -218,10 +233,24 @@ const Edit = (props) => {
             title={props.intl.formatMessage(messages.sectionGroupSettings)}
             formData={data}
             onChangeField={(id, value) => {
-              props.onChangeBlock(props.block, {
+              const newData = {
                 ...props.data,
                 [id]: value,
-              });
+              };
+              const effectiveMaxChars =
+                id === 'maxChars' ? value : props.data.maxChars;
+              const effectiveIgnoreSpaces =
+                id === 'ignoreSpaces' ? value : props.data.ignoreSpaces;
+              if (effectiveMaxChars) {
+                newData.charCount = countTextInBlocks(
+                  props.data?.data,
+                  effectiveIgnoreSpaces,
+                  effectiveMaxChars,
+                );
+              } else {
+                delete newData.charCount;
+              }
+              props.onChangeBlock(props.block, newData);
             }}
           />
         )}

package/src/components/manage/Blocks/Group/Edit.test.jsx

@@ -4,7 +4,7 @@ import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import thunk from 'redux-thunk';
 import { render, screen, fireEvent } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 
 const mockStore = configureStore([thunk]);
 const store = mockStore({
@@ -90,6 +90,22 @@ describe('Edit', () => {
     expect(getByRole('presentation')).toBeInTheDocument();
   });
 
+  it('adds a root modifier when inner buttons are disabled', () => {
+    const { getByRole } = render(
+      <Provider store={store}>
+        <Edit
+          {...props}
+          data={{
+            ...props.data,
+            disableInnerButtons: true,
+          }}
+        />
+      </Provider>,
+    );
+
+    expect(getByRole('presentation')).toHaveClass('disable-inner-buttons');
+  });
+
   it('should call ArrowUp keydown', () => {
     const mockOnFocusPreviousBlock = jest.fn();
     const { getByRole } = render(

package/src/components/manage/Blocks/Group/LayoutSchema.jsx

@@ -11,6 +11,7 @@ const Schema = {
         'allowedBlocks',
         'as',
         'maxChars',
+        'maxCharsOverflowPercent',
         'ignoreSpaces',
         'readOnlySettings',
         'disableInnerButtons',
@@ -68,6 +69,13 @@ const Schema = {
       type: 'integer',
       factory: 'Integer',
     },
+    maxCharsOverflowPercent: {
+      title: 'Maximum Characters Overflow Percent',
+      description:
+        'The percentage of characters that can overflow the maximum characters limit before showing a warning: 0-100',
+      type: 'integer',
+      factory: 'Integer',
+    },
     ignoreSpaces: {
       title: 'Ignore spaces',
       description: 'Ignore spaces while calculating maximum characters',

package/src/components/manage/Blocks/Group/View.test.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import View from './View';
 import { render, screen } from '@testing-library/react';
 import { RenderBlocks } from '@plone/volto/components';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 
 jest.mock('@plone/volto/components', () => ({
   RenderBlocks: jest.fn(() => <div>RenderBlocks</div>),

package/src/components/manage/Blocks/Group/editor.less

@@ -10,10 +10,6 @@
     margin-bottom: 1rem;
   }
 
-  .block-add-button {
-    display: none !important;
-  }
-
   .block.group.selected::before,
   .block.group:hover::before {
     border-style: dashed;
@@ -70,32 +66,11 @@
     margin-top: 0.5rem;
   }
 
-  .blocks-chooser {
-    position: absolute;
-    right: 0 !important;
-    left: auto !important;
-    margin-top: 3rem;
-  }
-
-  .block-toolbar {
-    position: absolute;
-    z-index: 3;
-    right: -9px;
-    display: flex;
-    border: none;
-    border: 1px solid @borderColor;
-    border-bottom: 1px solid @pageBackground;
-    margin-top: -45px;
-    background-color: @pageBackground;
-    border-top-left-radius: 1rem;
-    border-top-right-radius: 1rem;
-
-    .ui.basic.button {
-      padding: 8px 5px;
-    }
-
-    .ui.basic.button:hover {
-      background: transparent !important;
+  .section-block.disable-inner-buttons {
+    .drag.handle.wrapper,
+    .delete-button,
+    .block-add-button {
+      display: none !important;
     }
   }
 }