Merge pull request #28 from eea/develop

Release
eea · Jun 12, 2024 · b44858c · b44858c
2 parents 6ee2e0a + 2b2b629
commit b44858c
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 31 deletions.
diff --git a/CHANGELOG.md b/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).
 
+### [2.0.2](https://github.com/eea/volto-description-block/compare/2.0.1...2.0.2) - 12 June 2024
+
+#### :bug: Bug Fixes
+
+- fix: Make slate to correlate with metadata description - refs #270726 [dobri1408 - [`010b575`](https://github.com/eea/volto-description-block/commit/010b5755d784158456ea49884733696990fe4ff2)]
+
 ### [2.0.1](https://github.com/eea/volto-description-block/compare/2.0.0...2.0.1) - 7 June 2024
 
 #### :bug: Bug Fixes

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-description-block",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "@eeacms/volto-description-block: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

diff --git a/src/DescriptionBlock/Edit.jsx b/src/DescriptionBlock/Edit.jsx
@@ -1,9 +1,8 @@
-/**
- * Edit description block.
+/* Edit description block.
  * @module volto-slate/blocks/Description/DescriptionBlockEdit
  */
 
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { connect } from 'react-redux';
 import { defineMessages, useIntl } from 'react-intl';
 import config from '@plone/volto/registry';
@@ -20,44 +19,58 @@ const messages = defineMessages({
     defaultMessage: 'Add a description…',
   },
 });
-
 export const DescriptionBlockEdit = (props) => {
-  const { slate } = config.settings;
   const {
     selected,
     index,
     onChangeField,
-    onChangeBlock,
     onSelectBlock,
     block,
     properties,
     metadata,
+    onChangeBlock,
     data,
   } = props;
+  const { slate } = config.settings;
   const intl = useIntl();
-  const value = data?.value || config.settings.slate.defaultValue();
+  const initialValue = data?.value || config.settings.slate.defaultValue();
+  const [value, setValue] = useState(initialValue);
   const text = metadata?.['description'] || properties?.['description'] || '';
-
   const withBlockProperties = useCallback(
     (editor) => {
       editor.getBlockProps = () => props;
       return editor;
     },
     [props],
   );
+  useEffect(() => {
+    // Sync the external text into the slate editor state
+    if (serializeNodesToText(value) !== text) {
+      setValue([
+        {
+          type: 'p',
+          children: [{ text }],
+        },
+      ]);
+    }
+    //we want to make a rerender only when description metadata is changing
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [text]);
 
   const handleChange = useCallback(
-    (value) => {
-      const plainValue = serializeNodesToText(value);
-      onChangeBlock(block, {
-        ...data,
-        value: value,
-      });
+    (newValue) => {
+      const plainValue = serializeNodesToText(newValue);
+
       if (plainValue !== text) {
         onChangeField('description', plainValue);
       }
+
+      if (JSON.stringify(newValue) !== JSON.stringify(value)) {
+        setValue(newValue);
+        onChangeBlock(block, { ...data, value: newValue });
+      }
     },
-    [block, data, text, onChangeField, onChangeBlock],
+    [value, text, block, data, onChangeField, onChangeBlock],
   );
 
   const handleFocus = useCallback(() => {
@@ -66,10 +79,6 @@ export const DescriptionBlockEdit = (props) => {
     }
   }, [onSelectBlock, selected, block]);
 
-  if (typeof window.__SERVER__ !== 'undefined' || __SERVER__) {
-    return <div />;
-  }
-
   const placeholder =
     data.placeholder || intl.formatMessage(messages['description']);
 
@@ -89,14 +98,14 @@ export const DescriptionBlockEdit = (props) => {
         placeholder={placeholder}
         slateSettings={slate}
       />
-      <SidebarPortal selected={props.selected}>
+      <SidebarPortal selected={selected}>
         <BlockDataForm
           schema={schema}
           title={schema.title}
-          onChangeField={(id, value) => {
+          onChangeField={(id, newValue) => {
             props.onChangeBlock(props.block, {
               ...props.data,
-              [id]: value,
+              [id]: newValue,
             });
           }}
           formData={props.data}
@@ -107,11 +116,6 @@ export const DescriptionBlockEdit = (props) => {
   );
 };
 
-export default connect(
-  () => {
-    return {};
-  },
-  {
-    saveSlateBlockSelection,
-  },
-)(DescriptionBlockEdit);
+export default connect(() => ({}), { saveSlateBlockSelection })(
+  DescriptionBlockEdit,
+);