@eeacms/volto-group-block 8.1.1 → 9.0.0

package/CHANGELOG.md

@@ -4,6 +4,12 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+### [9.0.0](https://github.com/eea/volto-group-block/compare/8.1.1...9.0.0) - 10 February 2026
+
+#### :rocket: New Features
+
+- feat: Persist charCount to block data and add maxCharsOverflowPercent - refs #294806 [Alin Voinea - [`b5bbd75`](https://github.com/eea/volto-group-block/commit/b5bbd7516cb8cb6bcff8541d711fd9fa74a4d92c)]
+
 ### [8.1.1](https://github.com/eea/volto-group-block/compare/8.1.0...8.1.1) - 26 January 2026
 
 #### :hammer_and_wrench: Others
@@ -23,16 +29,9 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :house: Internal changes
 
-- chore: [JENKINS] fix sonarqube tags [valentinab25 - [`6dbeeb3`](https://github.com/eea/volto-group-block/commit/6dbeeb3b42ee1e69692dcb466bbff921a54ddabb)]
 
 #### :hammer_and_wrench: Others
 
-- Add Sonarqube tag using clms-frontend addons list [EEA Jenkins - [`8e153d3`](https://github.com/eea/volto-group-block/commit/8e153d34ef330adeb5b1ef7d96b2ff433ecec5ff)]
-- Add Sonarqube tag using clms-frontend addons list [EEA Jenkins - [`405738f`](https://github.com/eea/volto-group-block/commit/405738f8f13a236ad89f5f9870316322b1522518)]
-- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`84d6509`](https://github.com/eea/volto-group-block/commit/84d6509edf1b0821bd8709cf603f1025f99d18ff)]
-- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`ffb8602`](https://github.com/eea/volto-group-block/commit/ffb860257444d9ca05412111081a1320def9ee78)]
-- Add Sonarqube tag using clms-frontend addons list [EEA Jenkins - [`4bd723a`](https://github.com/eea/volto-group-block/commit/4bd723a108b4c9d6e78cc7c1ceec58573c57abf2)]
-- Add Sonarqube tag using ied-frontend addons list [EEA Jenkins - [`4f803d3`](https://github.com/eea/volto-group-block/commit/4f803d38efffcdc87f0dc0173b4142d9398bd2db)]
 ### [7.1.1](https://github.com/eea/volto-group-block/compare/7.1.0...7.1.1) - 30 January 2025
 
 #### :house: Internal changes
@@ -60,9 +59,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :hammer_and_wrench: Others
 
-- Add Sonarqube tag using insitu-frontend addons list [EEA Jenkins - [`e727ac6`](https://github.com/eea/volto-group-block/commit/e727ac6a8c1882b4e77a08fd0c5bb0a401cd3bdb)]
-- Add Sonarqube tag using clms-frontend addons list [EEA Jenkins - [`75c2946`](https://github.com/eea/volto-group-block/commit/75c29460dc6c42bbb799c13a5a6ef2bb8f26ed5a)]
-- Add Sonarqube tag using insitu-frontend addons list [EEA Jenkins - [`96f3133`](https://github.com/eea/volto-group-block/commit/96f31335cdda925daf3e5824f0a23121b0c9b3ef)]
 ### [6.4.0](https://github.com/eea/volto-group-block/compare/6.3.5...6.4.0) - 17 January 2024
 
 #### :rocket: New Features
@@ -77,7 +73,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :house: Internal changes
 
-- chore: [JENKINS] Refactor automated testing [valentinab25 - [`616f6eb`](https://github.com/eea/volto-group-block/commit/616f6ebe0385d82a827c6679eabdcf4e92a18c11)]
 
 #### :hammer_and_wrench: Others
 
@@ -90,11 +85,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - Prettier [kreafox - [`0c5d2d1`](https://github.com/eea/volto-group-block/commit/0c5d2d1a494489663cc97c5dc0f4ad13c4b67c8d)]
 - test: mock useLocation [kreafox - [`746887f`](https://github.com/eea/volto-group-block/commit/746887fa0e778f2d4cbe86661fc8c38c8a4bafb5)]
 - test: mock useLocation [kreafox - [`a360401`](https://github.com/eea/volto-group-block/commit/a360401b8ee05e9cb54b253b0e605d0a040c8f78)]
-- test: [JENKINS] Use java17 for sonarqube scanner [valentinab25 - [`25030fb`](https://github.com/eea/volto-group-block/commit/25030fbd69108f90df02130e5010e56398941ad2)]
-- test: [JENKINS] Run cypress in started frontend container [valentinab25 - [`1517dbb`](https://github.com/eea/volto-group-block/commit/1517dbb81cf9128752d835ae59dc22b251f4b035)]
-- test: [JENKINS] Add cpu limit on cypress docker [valentinab25 - [`b0ba5f9`](https://github.com/eea/volto-group-block/commit/b0ba5f9c6d37526411a7a984595ac624401f8ac5)]
-- test: [JENKINS] Increase shm-size to cypress docker [valentinab25 - [`8dbdfeb`](https://github.com/eea/volto-group-block/commit/8dbdfeb89fe53c6dc2f476b183a53c9266ab2bdf)]
-- test: [JENKINS] Improve cypress time [valentinab25 - [`d0324f4`](https://github.com/eea/volto-group-block/commit/d0324f4aad6d94233ca8ce3645ca5162f39d9834)]
 ### [6.3.4](https://github.com/eea/volto-group-block/compare/6.3.3...6.3.4) - 22 October 2023
 
 ### [6.3.3](https://github.com/eea/volto-group-block/compare/6.3.2...6.3.3) - 17 October 2023
@@ -142,7 +132,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 - Release #39 from eea/develop [ichim-david - [`283e1e8`](https://github.com/eea/volto-group-block/commit/283e1e8dd1047415bae054cfd502d1691deaeb59)]
 - Release 6.3.0 [Alin Voinea - [`3d74bb5`](https://github.com/eea/volto-group-block/commit/3d74bb5342e3882e0ddee1aa8edab7e90949def6)]
-- test: Fix eslint and yarn i18n [Alin Voinea - [`763f764`](https://github.com/eea/volto-group-block/commit/763f76448625e05b53a2bde86ca48dda0cb263cb)]
 - i18n: Add en [Alin Voinea - [`f3385cd`](https://github.com/eea/volto-group-block/commit/f3385cd33bfbe3efe514fd82fd140d17e33051e1)]
 - test: Update Makefile and docker-compose to align it with Jenkinsfile [valentinab25 - [`3aa996b`](https://github.com/eea/volto-group-block/commit/3aa996b4c115da6f37ca771f07f10d58fbfa33e8)]
 - fix eslint warnings [nileshgulia1 - [`cfdf2e9`](https://github.com/eea/volto-group-block/commit/cfdf2e900bcc456fa5a24ce7b03859170ad024ba)]
@@ -173,7 +162,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :house: Internal changes
 
-- chore: [JENKINS] Deprecate circularity website [valentinab25 - [`ad30e83`](https://github.com/eea/volto-group-block/commit/ad30e832bb869b67dc4e64ed99590b51cb80ab75)]
 
 #### :hammer_and_wrench: Others
 
@@ -190,19 +178,12 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :hammer_and_wrench: Others
 
-- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`37ffae5`](https://github.com/eea/volto-group-block/commit/37ffae512967b36af22cbed208a3ec9e1ddc392b)]
 ## [6.0.0](https://github.com/eea/volto-group-block/compare/5.0.1...6.0.0) - 24 March 2023
 
 #### :hammer_and_wrench: Others
 
 - (feat): Possibility to copy/cut/paste blocks within section group block - refs #157469 [dobri1408 - [`e9fc098`](https://github.com/eea/volto-group-block/commit/e9fc09825ba2ae258feb77864491d97d94c585b4)]
-- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`db4b09a`](https://github.com/eea/volto-group-block/commit/db4b09a6c14a8b271dec0c766886ffbcc3fe205e)]
-- Add Sonarqube tag using advisory-board-frontend addons list [EEA Jenkins - [`b8c2bf4`](https://github.com/eea/volto-group-block/commit/b8c2bf471868bb0394b2dbbf75ccb7917a9ef0bf)]
-- Add Sonarqube tag using advisory-board-frontend addons list [EEA Jenkins - [`b343119`](https://github.com/eea/volto-group-block/commit/b3431196931fd568476fa8bf6fbc508e086229ae)]
 - test(Jenkins): Run tests and cypress with latest canary @plone/volto [Alin Voinea - [`2f42e7c`](https://github.com/eea/volto-group-block/commit/2f42e7c19a1da5a9c6a883cb4f101e8fa224ff94)]
-- Add Sonarqube tag using cca-frontend addons list [EEA Jenkins - [`73afcc2`](https://github.com/eea/volto-group-block/commit/73afcc2f417797cedaa78cceefb007001d6c2406)]
-- yarn 3 [Alin Voinea - [`3c00ccc`](https://github.com/eea/volto-group-block/commit/3c00ccc7110bbf12a4d268182313418fb46b1a5d)]
-- Add Sonarqube tag using demo-kitkat-frontend addons list [EEA Jenkins - [`9b9662b`](https://github.com/eea/volto-group-block/commit/9b9662bda1da70ba0c3a7b4b05cebf130ed89e9e)]
 ### [5.0.1](https://github.com/eea/volto-group-block/compare/5.0.0...5.0.1) - 16 November 2022
 
 #### :nail_care: Enhancements
@@ -219,8 +200,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 - Prepare 5.0.0 release [Miu Razvan - [`88c0ddd`](https://github.com/eea/volto-group-block/commit/88c0ddd569aeda7ee34d1eadea6a087f4e7dc257)]
 - Update dependencies [Alin Voinea - [`c8405af`](https://github.com/eea/volto-group-block/commit/c8405afb830cdf62e7877bf30b619933519e1d71)]
-- Add Sonarqube tag using marine-frontend addons list [EEA Jenkins - [`18e26c6`](https://github.com/eea/volto-group-block/commit/18e26c6939706d572ab8574e9b1826b9abc76314)]
-- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`8ed6d21`](https://github.com/eea/volto-group-block/commit/8ed6d21d8489911cc4cb471e3f8823c35f4adc50)]
 ### [4.3.8](https://github.com/eea/volto-group-block/compare/4.3.7...4.3.8) - 26 August 2022
 
 ### [4.3.7](https://github.com/eea/volto-group-block/compare/4.3.6...4.3.7) - 22 August 2022
@@ -233,9 +212,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :hammer_and_wrench: Others
 
-- Add Sonarqube tag using circularity-frontend addons list [EEA Jenkins - [`4e73f8b`](https://github.com/eea/volto-group-block/commit/4e73f8be3c73559557efadc410cb56abc055d82d)]
-- Add Sonarqube tag using clms-frontend addons list [EEA Jenkins - [`3040335`](https://github.com/eea/volto-group-block/commit/3040335002c63b50208c95918413bc958150e7a9)]
-- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`386f730`](https://github.com/eea/volto-group-block/commit/386f730ed65f73fe1468b9b77351c97fb70edcc5)]
 ### [4.3.5](https://github.com/eea/volto-group-block/compare/4.3.4...4.3.5) - 4 January 2022
 
 ### [4.3.4](https://github.com/eea/volto-group-block/compare/4.3.3...4.3.4) - 3 January 2022
@@ -244,23 +220,15 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :hammer_and_wrench: Others
 
-- Add Sonarqube tag using freshwater-frontend addons list [EEA Jenkins - [`3e62d79`](https://github.com/eea/volto-group-block/commit/3e62d79a7ed37d10d623bc845d43e1144f8080f7)]
 ### [4.3.2](https://github.com/eea/volto-group-block/compare/4.3.1...4.3.2) - 10 December 2021
 
 #### :hammer_and_wrench: Others
 
 - Refs #142010 - Optimize Volto-addons gitflow pipelines [valentinab25 - [`bc36cf5`](https://github.com/eea/volto-group-block/commit/bc36cf58c39e2b43c2fbf5189df6ddefc1260857)]
-- Add Sonarqube tag using industry-frontend addons list [EEA Jenkins - [`8038e78`](https://github.com/eea/volto-group-block/commit/8038e783c1e8ddd71e21f72070fdfa8e7e098993)]
-- Add Sonarqube tag using clms-frontend addons list [EEA Jenkins - [`daccdbc`](https://github.com/eea/volto-group-block/commit/daccdbc733e47be7d6536eb67f8f2eea038dc94b)]
 ### [4.3.1](https://github.com/eea/volto-group-block/compare/4.3.0...4.3.1) - 11 October 2021
 
 #### :hammer_and_wrench: Others
 
-- Add Sonarqube tag using bise-frontend addons list [EEA Jenkins - [`b0092e4`](https://github.com/eea/volto-group-block/commit/b0092e4f78a1a0184e22e32bb9806cd57417dfb2)]
-- Add Sonarqube tag using sustainability-frontend addons list [EEA Jenkins - [`ff8889c`](https://github.com/eea/volto-group-block/commit/ff8889cb7b0761b1df43b201984ce40b14e1561b)]
-- Add Sonarqube tag using climate-energy-frontend addons list [EEA Jenkins - [`0375c28`](https://github.com/eea/volto-group-block/commit/0375c28ed1ffe9186a4790b454795c0ca8039f72)]
-- Add Sonarqube tag using ims-frontend addons list [EEA Jenkins - [`c392190`](https://github.com/eea/volto-group-block/commit/c392190f044f5d9397bd2fb8c3d6a357f84960d0)]
-- Add Sonarqube tag using frontend addons list [EEA Jenkins - [`9694501`](https://github.com/eea/volto-group-block/commit/9694501141e6780eba89464d36406e3c93629fd8)]
 ### [4.3.0](https://github.com/eea/volto-group-block/compare/4.2.3...4.3.0) - 24 June 2021
 
 #### :hammer_and_wrench: Others
@@ -376,7 +344,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - Release 1.0.0 [Alin Voinea - [`b6ef873`](https://github.com/eea/volto-group-block/commit/b6ef873cb6f61e17db66fdd4de1d9d4902a66fc6)]
 - Update package meta info [Alin Voinea - [`143b7d4`](https://github.com/eea/volto-group-block/commit/143b7d44438d7afa5e346a9d21a85352df4e925f)]
 - Add Jenkinkins pipeline [Alin Voinea - [`866a4e1`](https://github.com/eea/volto-group-block/commit/866a4e14ea1eb8f5adb01222e576e5ab6dc73a70)]
-- yarn prettier [Alin Voinea - [`e3fe0a3`](https://github.com/eea/volto-group-block/commit/e3fe0a36b89878769341b45198d6c9e2f2584d15)]
 ### [0.1.3](https://github.com/eea/volto-group-block/compare/0.1.2...0.1.3) - 9 November 2020
 
 #### :hammer_and_wrench: Others
@@ -416,5 +383,4 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - Render meta block [Alin Voinea - [`0d44560`](https://github.com/eea/volto-group-block/commit/0d4456011ca56454068a54c610250b02df4ccb3b)]
 - Implement meta block allowedBlocks settings [Alin Voinea - [`f24feb1`](https://github.com/eea/volto-group-block/commit/f24feb1a1751f04841c21c7cd52a517fb02074ba)]
 - Edit meta block [Alin Voinea - [`236d291`](https://github.com/eea/volto-group-block/commit/236d29156fa835a7aa54eecdb4f120de0d64b271)]
-- yarn bootstrap [Alin Voinea - [`e009dfb`](https://github.com/eea/volto-group-block/commit/e009dfb6b9b74d101a6722f0982a5359fc522b6b)]
 - Initial commit [Alin Voinea - [`6a7b0de`](https://github.com/eea/volto-group-block/commit/6a7b0deb8f873d1462fd6a9c61edfc1562b3aace)]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-group-block",
-  "version": "8.1.1",
+  "version": "9.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

@@ -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,6 +1,7 @@
 import { Button } from 'semantic-ui-react';
 import { BlocksForm, Icon, RenderBlocks } from '@plone/volto/components';
 import EditBlockWrapper from './EditBlockWrapper';
+import { countTextInBlocks } from './CounterComponent';
 import { useLocation } from 'react-router-dom';
 
 import helpSVG from '@plone/volto/icons/help.svg';
@@ -48,21 +49,38 @@ 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);
         }

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]);
 
@@ -218,10 +231,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/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',