fixed counter for new props schema

eea · Dec 29, 2020 · 6005d82 · 6005d82
1 parent 06a5b74
commit 6005d82
Showing 1 changed file with 26 additions and 18 deletions.
diff --git a/src/components/manage/Blocks/Group/Edit.jsx b/src/components/manage/Blocks/Group/Edit.jsx
@@ -4,6 +4,7 @@ import { Icon } from '@plone/volto/components';
 import delightedSVG from '@plone/volto/icons/delighted.svg';
 import dissatisfiedSVG from '@plone/volto/icons/dissatisfied.svg';
 import { isEmpty } from 'lodash';
+import PropTypes from 'prop-types';
 import React, { useState } from 'react';
 import './editor.less';
 
@@ -46,7 +47,8 @@ const Edit = (props) => {
     if (props.data?.data?.blocks) {
       Object.keys(props.data?.data?.blocks).forEach((blockId) => {
         charCount =
-          charCount + props.data.data.blocks[blockId]?.plaintext?.length || 0;
+          charCount +
+          (props.data.data.blocks[blockId]?.text?.blocks[0]?.text?.length || 0);
       });
     }
   };
@@ -62,26 +64,23 @@ const Edit = (props) => {
         : colors.danger,
     textAlign: 'end',
   };
+
   const counterComponent = props.data.maxChars ? (
     <p style={counterStyle} className="counter">
-      {props.data.maxChars ? (
-        props.data.maxChars - charCount < 0 ? (
-          <>
-            <span>{`${
-              charCount - props.data.maxChars
-            } characters over the limit`}</span>
-            <Icon name={dissatisfiedSVG} size="24px" />
-          </>
-        ) : (
-          <>
-            <span>{`${
-              props.data.maxChars - charCount
-            } characters remaining out of ${props.data.maxChars}`}</span>
-            <Icon name={delightedSVG} size="24px" />
-          </>
-        )
+      {props.data.maxChars - charCount < 0 ? (
+        <>
+          <span>{`${
+            charCount - props.data.maxChars
+          } characters over the limit`}</span>
+          <Icon name={dissatisfiedSVG} size="24px" />
+        </>
       ) : (
-        charCount
+        <>
+          <span>{`${
+            props.data.maxChars - charCount
+          } characters remaining out of ${props.data.maxChars}`}</span>
+          <Icon name={delightedSVG} size="24px" />
+        </>
       )}
     </p>
   ) : null;
@@ -123,4 +122,13 @@ const Edit = (props) => {
   );
 };
 
+Edit.propTypes = {
+  block: PropTypes.object.isRequired,
+  data: PropTypes.object.isRequired,
+  onChangeBlock: PropTypes.func.isRequired,
+  pathname: PropTypes.string.isRequired,
+  selected: PropTypes.bool.isRequired,
+  manage: PropTypes.bool.isRequired,
+};
+
 export default Edit;