fix: serialize nodes as it should be done

eea · May 22, 2023 · ebbf6f7 · ebbf6f7
1 parent 49bb280
commit ebbf6f7
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 11 deletions.
diff --git a/src/StatisticBlock/View.jsx b/src/StatisticBlock/View.jsx
@@ -1,10 +1,19 @@
 import React from 'react';
+import isNumber from 'lodash/isNumber';
+import isNaN from 'lodash/isNaN';
 import cx from 'classnames';
 import CountUp from 'react-countup';
 import VisibilitySensor from 'react-visibility-sensor';
 import { Statistic } from 'semantic-ui-react';
 import { UniversalLink } from '@plone/volto/components';
-import { serializeText } from '@eeacms/volto-statistic-block/helpers';
+import {
+  serializeNodes as _serializeNodes,
+  serializeNodesToText,
+} from '@plone/volto-slate/editor/render';
+import {
+  serializeToNodes,
+  serializeNodes,
+} from '@eeacms/volto-statistic-block/helpers';
 
 import './styles.less';
 
@@ -64,6 +73,9 @@ const View = ({ data, mode }) => {
       >
         {items.map((item, index) => {
           const StatisticWrapper = item.href ? UniversalLink : Statistic;
+          const slateNodes = serializeToNodes(item.value);
+          const valueNo = Number(serializeNodesToText(slateNodes));
+
           return (
             <StatisticWrapper
               key={`${index}-${item.label}`}
@@ -72,9 +84,9 @@ const View = ({ data, mode }) => {
                 : {})}
             >
               <Statistic.Value className={cx('slate', valueVariation)}>
-                {animation.enabled ? (
+                {animation.enabled && isNumber(valueNo) && !isNaN(valueNo) ? (
                   <CountUp
-                    end={Number(serializeText(item.value))}
+                    end={valueNo}
                     duration={animation.duration > 0 ? animation.duration : 2}
                     decimals={animation.decimals > 0 ? animation.decimals : 0}
                     prefix={animation.prefix || ''}
@@ -83,14 +95,14 @@ const View = ({ data, mode }) => {
                     {(props) => <CountUpWrapper {...props} />}
                   </CountUp>
                 ) : (
-                  serializeText(item.value)
+                  _serializeNodes(slateNodes)
                 )}
               </Statistic.Value>
               <Statistic.Label className={cx('slate', labelVariation)}>
-                {serializeText(item.label)}
+                {serializeNodes(item.label)}
               </Statistic.Label>
               <div className={cx('slate text-center', extraVariation)}>
-                {serializeText(item.info)}
+                {serializeNodes(item.info)}
               </div>
             </StatisticWrapper>
           );

diff --git a/src/helpers.js b/src/helpers.js
@@ -1,6 +1,27 @@
-import { isArray } from 'lodash';
-import { serializeNodes } from '@plone/volto-slate/editor/render';
+import isArray from 'lodash/isArray';
+import isString from 'lodash/isString';
+import { Node } from 'slate';
+import config from '@plone/volto/registry';
+import { serializeNodes as _serializeNodes } from '@plone/volto-slate/editor/render';
 
-export const serializeText = (text) => {
-  return isArray(text) ? serializeNodes(text) : text;
-};
+function isValidNodesArray(value) {
+  return isArray(value) && Node.isNodeList(value);
+}
+
+export function createParagraph(text) {
+  return {
+    type: config.settings.slate.defaultBlockType,
+    children: [{ text }],
+  };
+}
+
+export function serializeToNodes(text) {
+  if (isValidNodesArray(text)) return text;
+  if (isString(text)) return [createParagraph(text)];
+  return [createParagraph('')];
+}
+
+export function serializeNodes(value) {
+  const nodes = serializeToNodes(value);
+  return _serializeNodes(nodes);
+}