use slate_richtext widget instead of plain text

CHANGELOG.md

@@ -4,11 +4,21 @@ 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).
 
+### [1.2.0](https://github.com/eea/volto-statistic-block/compare/1.1.0...1.2.0) - 22 May 2023
+
+#### :rocket: New Features
+
+- feat: use slate_richtext widget instead of plain text [Miu Razvan - [`98983eb`](https://github.com/eea/volto-statistic-block/commit/98983eb93793c51e7e332ded83c0964fa4f93351)]
+- feat: customize slate_richtext widget to add backward compatibility [Miu Razvan - [`aa0ebd2`](https://github.com/eea/volto-statistic-block/commit/aa0ebd2cd8e2c10d3bb5ebb134050423dac2f891)]
+
+#### :hammer_and_wrench: Others
+
+- use countup.js@2.5.0 [Miu Razvan - [`9dad099`](https://github.com/eea/volto-statistic-block/commit/9dad099fb6519688752bf4788023712bd9719671)]
+- bump version [Miu Razvan - [`e886513`](https://github.com/eea/volto-statistic-block/commit/e886513e63bf480dcdb5c9e0a627b31c6b4e989d)]
 ### [1.1.0](https://github.com/eea/volto-statistic-block/compare/1.0.1...1.1.0) - 27 March 2023
 
 #### :hammer_and_wrench: Others
 
-- Release 1.1.0 [Alin Voinea - [`f16c776`](https://github.com/eea/volto-statistic-block/commit/f16c776d4f6f1c00243125f33fd1739d8d7fb641)]
 - test(Jenkins): Run tests and cypress with latest canary @plone/volto [Alin Voinea - [`75e506f`](https://github.com/eea/volto-statistic-block/commit/75e506fd7cf92296871ddf52f9b1c82a053ec931)]
 ### [1.0.1](https://github.com/eea/volto-statistic-block/compare/1.0.0...1.0.1) - 16 November 2022
 

Jenkinsfile

@@ -4,7 +4,7 @@ pipeline {
   environment {
         GIT_NAME = "volto-statistic-block"
         NAMESPACE = "@eeacms"
-        SONARQUBE_TAGS = "volto.eea.europa.eu,demo-www.eea.europa.eu,prod-www.eea.europa.eu,circularity.eea.europa.eu,forest.eea.europa.eu,demo-kitkat.dev2aws.eea.europa.eu,clmsdemo.devel6cph.eea.europa.eu,water.europa.eu-marine,biodiversity.europa.eu,climate-adapt.eea.europa.eu,climate-energy.eea.europa.eu,climate-advisory-board.devel4cph.eea.europa.eu,climate-advisory-board.europa.eu,www.eea.europa.eu-ims,www.eea.europa.eu-en"
+        SONARQUBE_TAGS = "volto.eea.europa.eu,demo-www.eea.europa.eu,circularity.eea.europa.eu,forest.eea.europa.eu,clmsdemo.devel6cph.eea.europa.eu,water.europa.eu-marine,biodiversity.europa.eu,climate-adapt.eea.europa.eu,climate-energy.eea.europa.eu,climate-advisory-board.devel4cph.eea.europa.eu,climate-advisory-board.europa.eu,www.eea.europa.eu-ims,www.eea.europa.eu-en,industry.eea.europa.eu"
         DEPENDENCIES = ""
         VOLTO = ""
     }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-statistic-block",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "@eeacms/volto-statistic-block: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -17,6 +17,9 @@
     "url": "git@github.com:eea/volto-statistic-block.git"
   },
   "addons": [],
+  "resolutions": {
+    "react-countup/countup.js": "2.5.0"
+  },
   "dependencies": {
     "react-countup": "6.3.1",
     "react-visibility-sensor": "5.1.1"

src/RichTextWidget.jsx

@@ -0,0 +1,79 @@
+/**
+ * A Slate widget that uses internal JSON representation as its value
+ *
+ */
+
+import React from 'react';
+import isUndefined from 'lodash/isUndefined';
+import isString from 'lodash/isString';
+import config from '@plone/volto/registry';
+import { FormFieldWrapper } from '@plone/volto/components';
+import SlateEditor from '@plone/volto-slate/editor/SlateEditor';
+import { createEmptyParagraph } from '@plone/volto-slate/utils/blocks';
+
+import '@plone/volto-slate/widgets/style.css';
+
+function createParagraph(text) {
+  return {
+    type: config.settings.slate.defaultBlockType,
+    children: [{ text }],
+  };
+}
+
+const getValue = (value) => {
+  if (isUndefined(value) || !isUndefined(value?.data)) {
+    return [createEmptyParagraph()];
+  }
+  // Previously this was a text field
+  if (isString(value)) {
+    return [createParagraph(value)];
+  }
+  return value;
+};
+
+const SlateRichTextWidget = (props) => {
+  const {
+    id,
+    onChange,
+    value,
+    focus,
+    className,
+    block,
+    placeholder,
+    properties,
+    readOnly = false,
+  } = props;
+  const [selected, setSelected] = React.useState(focus);
+
+  return (
+    <FormFieldWrapper {...props} draggable={false} className="slate_wysiwyg">
+      <div
+        className="slate_wysiwyg_box"
+        role="textbox"
+        tabIndex="-1"
+        style={{ boxSizing: 'initial' }}
+        onClick={() => {
+          setSelected(true);
+        }}
+        onKeyDown={() => {}}
+      >
+        <SlateEditor
+          className={className}
+          readOnly={readOnly}
+          id={id}
+          name={id}
+          value={getValue(value)}
+          onChange={(newValue) => {
+            onChange(id, newValue);
+          }}
+          block={block}
+          selected={selected}
+          properties={properties}
+          placeholder={placeholder}
+        />
+      </div>
+    </FormFieldWrapper>
+  );
+};
+
+export default SlateRichTextWidget;

src/StatisticBlock/View.jsx

@@ -71,10 +71,10 @@ const View = ({ data, mode }) => {
                 ? { className: 'ui statistic', href: item.href }
                 : {})}
             >
-              <Statistic.Value className={cx(valueVariation)}>
+              <Statistic.Value className={cx('slate', valueVariation)}>
                 {animation.enabled ? (
                   <CountUp
-                    end={Number(item.value)}
+                    end={Number(serializeText(item.value))}
                     duration={animation.duration > 0 ? animation.duration : 2}
                     decimals={animation.decimals > 0 ? animation.decimals : 0}
                     prefix={animation.prefix || ''}
@@ -83,11 +83,11 @@ const View = ({ data, mode }) => {
                     {(props) => <CountUpWrapper {...props} />}
                   </CountUp>
                 ) : (
-                  item.value
+                  serializeText(item.value)
                 )}
               </Statistic.Value>
-              <Statistic.Label className={cx(labelVariation)}>
-                {item.label}
+              <Statistic.Label className={cx('slate', labelVariation)}>
+                {serializeText(item.label)}
               </Statistic.Label>
               <div className={cx('slate text-center', extraVariation)}>
                 {serializeText(item.info)}

src/StatisticBlock/schema.js

@@ -13,9 +13,11 @@ const statisticSchema = {
   properties: {
     value: {
       title: 'Value',
+      widget: 'slate_richtext',
     },
     label: {
       title: 'Label',
+      widget: 'slate_richtext',
     },
     info: {
       title: 'Extra info',

src/index.js

@@ -1,6 +1,10 @@
 import installStatisticBlock from './StatisticBlock';
+import RichTextWidget from './RichTextWidget';
 
 const applyConfig = (config) => {
+  config.widgets.widget.slate = RichTextWidget;
+  config.widgets.widget.slate_richtext = RichTextWidget;
+
   return [installStatisticBlock].reduce((acc, apply) => apply(acc), config);
 };