Merge pull request #244 from eea/develop

Fix undo/redo on Title & Description blocks

CHANGELOG.md

@@ -4,10 +4,16 @@ 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).
 
+#### [6.2.1](https://github.com/eea/volto-slate/compare/6.2.0...6.2.1)
+
+- Fix undo/redo on Title & Description blocks [`1ae8e2a`](https://github.com/eea/volto-slate/commit/1ae8e2af723ba7c5cc92f7125cbc0ec99cf61289)
+
 #### [6.2.0](https://github.com/eea/volto-slate/compare/6.1.0...6.2.0)
 
+> 8 June 2022
+
+- fix(slate): BlockChooser Icon [`#243`](https://github.com/eea/volto-slate/pull/243)
 - Release 6.2.0 [`ea3ba38`](https://github.com/eea/volto-slate/commit/ea3ba3857dcc7ae42340750c5965440935f14ab6)
-- fix(slate): BlockChooser Icon [`f8e1a75`](https://github.com/eea/volto-slate/commit/f8e1a75e8439a1562f1bbbfe70bba2e2fd0001a9)
 
 #### [6.1.0](https://github.com/eea/volto-slate/compare/6.0.1...6.1.0)
 

Jenkinsfile

@@ -5,7 +5,7 @@ pipeline {
         GIT_NAME = "volto-slate"
         NAMESPACE = ""
         DEPENDENCIES = "volto-slate:asCypressDefault"
-        SONARQUBE_TAGS = "volto.eea.europa.eu,climate-energy.eea.europa.eu,forest.eea.europa.eu,biodiversity.europa.eu,www.eea.europa.eu-ims,sustainability.eionet.europa.eu,clms.land.copernicus.eu,industry.eea.europa.eu,water.europa.eu-freshwater,demo-www.eea.europa.eu,clmsdemo.devel6cph.eea.europa.eu"
+        SONARQUBE_TAGS = "volto.eea.europa.eu,climate-energy.eea.europa.eu,forest.eea.europa.eu,biodiversity.europa.eu,www.eea.europa.eu-ims,sustainability.eionet.europa.eu,clms.land.copernicus.eu,industry.eea.europa.eu,water.europa.eu-freshwater,demo-www.eea.europa.eu,clmsdemo.devel6cph.eea.europa.eu,circularity.eea.europa.eu"
     }
 
   stages {
@@ -125,7 +125,7 @@ pipeline {
               script {
                 try {
                   sh '''docker pull eeacms/plone-backend; docker run --rm -d --name="$BUILD_TAG-plone" -e SITE="Plone" -e PROFILES="eea.kitkat:testing" eeacms/plone-backend'''
-                  sh '''docker pull plone/volto-addon-ci; docker run -i --name="$BUILD_TAG-cypress" --link $BUILD_TAG-plone:plone -e NAMESPACE="$NAMESPACE" -e GIT_NAME=$GIT_NAME -e GIT_BRANCH="$BRANCH_NAME" -e GIT_CHANGE_ID="$CHANGE_ID" -e DEPENDENCIES="$DEPENDENCIES" plone/volto-addon-ci cypress'''
+                  sh '''docker pull plone/volto-addon-ci; docker run -i --name="$BUILD_TAG-cypress" --link $BUILD_TAG-plone:plone -e NAMESPACE="$NAMESPACE" -e GIT_NAME=$GIT_NAME -e GIT_BRANCH="$BRANCH_NAME" -e GIT_CHANGE_ID="$CHANGE_ID" -e DEPENDENCIES="$DEPENDENCIES" -e VOLTO="alpha" plone/volto-addon-ci cypress'''
                 } finally {
                   try {
                     sh '''rm -rf cypress-reports cypress-results cypress-coverage'''

cypress/support/index.js

@@ -26,7 +26,7 @@ coverage-end */
 export const slateBeforeEach = (contentType = 'Document') => {
   cy.autologin();
   cy.createContent({
-    contentType: 'Folder',
+    contentType: 'Document',
     contentId: 'cypress',
     contentTitle: 'Cypress',
   });

package.json

@@ -1,6 +1,6 @@
 {
   "name": "volto-slate",
-  "version": "6.2.0",
+  "version": "6.2.1",
   "description": "Slate.js integration with Volto",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

src/blocks/Title/TitleBlockEdit.jsx

@@ -3,13 +3,19 @@
  * @module volto-slate/blocks/Title/TitleBlockEdit
  */
 
-import React, { useCallback, useEffect, useMemo, useRef } from 'react';
-import { Editor, createEditor, Transforms, Node, Range } from 'slate';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { Editor, Node, Transforms, Range, createEditor } from 'slate';
 import { ReactEditor, Editable, Slate, withReact } from 'slate-react';
 import PropTypes from 'prop-types';
 import { defineMessages, useIntl } from 'react-intl';
 import config from '@plone/volto/registry';
-import { P } from '../../constants';
+import { P } from 'volto-slate/constants';
 import cx from 'classnames';
 
 const messages = defineMessages({
@@ -59,22 +65,32 @@ export const TitleBlockEdit = (props) => {
     editable,
   } = props;
 
-  const editor = useMemo(() => withReact(createEditor()), []);
+  const [editor] = useState(withReact(createEditor()));
+  const [initialValue] = useState([
+    {
+      type: P,
+      children: [
+        {
+          text: metadata?.[formFieldName] || properties?.[formFieldName] || '',
+        },
+      ],
+    },
+  ]);
+
   const intl = useIntl();
 
-  const disableNewBlocks = data.disableNewBlocks || detached;
+  const prevSelected = usePrevious(selected);
 
-  const text = metadata?.[formFieldName] || properties?.[formFieldName] || '';
+  const text = useMemo(
+    () => metadata?.[formFieldName] || properties?.[formFieldName] || '',
+    [metadata, properties, formFieldName],
+  );
 
-  const handleChange = useCallback(
-    (value) => {
-      const newText = Node.string(editor);
-      if (newText !== text) {
-        onChangeField(formFieldName, newText);
-      }
-    },
-    [editor, formFieldName, onChangeField, text],
+  const placeholder = useMemo(
+    () => data.placeholder || intl.formatMessage(messages[formFieldName]),
+    [data.placeholder, formFieldName, intl],
   );
+  const disableNewBlocks = useMemo(() => detached, [detached]);
 
   const TitleOrDescription = useMemo(() => {
     let TitleOrDescription;
@@ -94,26 +110,36 @@ export const TitleBlockEdit = (props) => {
     return TitleOrDescription;
   }, [formFieldName]);
 
-  const prevSelected = usePrevious(selected);
-
   useEffect(() => {
     if (!prevSelected && selected) {
       if (editor.selection && Range.isCollapsed(editor.selection)) {
         // keep selection
         ReactEditor.focus(editor);
       } else {
         // nothing is selected, move focus to end
-        // with this setTimeout uncommented, the focusing of other Volto-Slate
-        // blocks breaks, not sure what was its initial role, but maybe we can
-        // delete it one day
-        // setTimeout(() => {
         ReactEditor.focus(editor);
         Transforms.select(editor, Editor.end(editor, []));
-        // });
       }
     }
   }, [prevSelected, selected, editor]);
 
+  useEffect(() => {
+    // undo/redo handler
+    const oldText = Node.string(editor);
+    if (oldText !== text) {
+      Transforms.insertText(editor, text, {
+        at: [0, 0],
+      });
+    }
+  }, [editor, text]);
+
+  const handleChange = useCallback(() => {
+    const newText = Node.string(editor);
+    if (newText !== text) {
+      onChangeField(formFieldName, newText);
+    }
+  }, [editor, formFieldName, onChangeField, text]);
+
   const handleKeyDown = useCallback(
     (ev) => {
       if (
@@ -153,15 +179,6 @@ export const TitleBlockEdit = (props) => {
     ],
   );
 
-  const val = useMemo(() => {
-    return [
-      {
-        type: P,
-        children: [{ text }],
-      },
-    ];
-  }, [text]);
-
   const handleFocus = useCallback(() => {
     onSelectBlock(block);
   }, [block, onSelectBlock]);
@@ -177,20 +194,15 @@ export const TitleBlockEdit = (props) => {
     [TitleOrDescription, className], // eslint-disable-line react-hooks/exhaustive-deps
   );
 
-  editor.children = val;
-
   if (typeof window.__SERVER__ !== 'undefined') {
     return <div />;
   }
 
-  const placeholder =
-    data.placeholder || intl.formatMessage(messages[formFieldName]);
-
   return (
     <Slate
       editor={editor}
       onChange={handleChange}
-      value={val}
+      value={initialValue}
       className={cx({
         block: formFieldName === 'description',
         description: formFieldName === 'description',