Merge pull request #5 from eea/develop

Fix SlateEditor + clean up
eea · Jun 9, 2022 · 9285e84 · 9285e84
2 parents 1e0229d + 0f59f0e
commit 9285e84
Show file tree

Hide file tree

Showing 4 changed files with 91 additions and 156 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,9 +4,15 @@ 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).
 
+#### [0.3.1](https://github.com/eea/volto-quote-block/compare/0.3.0...0.3.1)
+
+- Fix SlateEditor + clean up [`9189d07`](https://github.com/eea/volto-quote-block/commit/9189d07c7d58bec2d8d96adb1451139d17b4c327)
+
 #### [0.3.0](https://github.com/eea/volto-quote-block/compare/0.2.0...0.3.0)
 
-- refactor(quote): Rename SourceInfo to Extra component [`956ba9b`](https://github.com/eea/volto-quote-block/commit/956ba9bf2e0ed3864d9f142753ba2643c7ecede9)
+> 25 May 2022
+
+- refactor(quote): Rename SourceInfo to Extra component [`#4`](https://github.com/eea/volto-quote-block/pull/4)
 
 #### [0.2.0](https://github.com/eea/volto-quote-block/compare/0.1.2...0.2.0)
 

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

diff --git a/src/Blocks/Quote/variations/DefaultQuote.jsx b/src/Blocks/Quote/variations/DefaultQuote.jsx
@@ -1,35 +1,17 @@
 import React from 'react';
 import cx from 'classnames';
+import { connect } from 'react-redux';
 import { Icon, Message } from 'semantic-ui-react';
 import config from '@plone/volto/registry';
 import SlateEditor from 'volto-slate/editor/SlateEditor';
 import { handleKey } from 'volto-slate/blocks/Text/keyboard';
+import { uploadContent, saveSlateBlockSelection } from 'volto-slate/actions';
 import {
   createSlateParagraph,
   isFloated,
   serializeText,
 } from '@eeacms/volto-quote-block/helpers';
 
-const QuoteWrapper = (props) => {
-  const { children, index, block, mode, handleKeyDown } = props;
-  return mode === 'edit' ? (
-    <div
-      role="presentation"
-      onKeyDown={(e) => {
-        handleKeyDown(e, index, block, props.blockNode.current);
-      }}
-      style={{ outline: 'none' }}
-      // The tabIndex is required for the keyboard navigation
-      /* eslint-disable jsx-a11y/no-noninteractive-tabindex */
-      tabIndex={0}
-    >
-      {children}
-    </div>
-  ) : (
-    children
-  );
-};
-
 const Quote = (props) => {
   const { slate } = config.settings;
   const { icons } = {};
@@ -40,10 +22,7 @@ const Quote = (props) => {
     block,
     selected,
     properties,
-    onAddBlock,
     onChangeBlock,
-    onFocusNextBlock,
-    onFocusPreviousBlock,
     onSelectBlock,
   } = props;
   const { value, source, extra, position = null, reversed = false } = data;
@@ -63,37 +42,8 @@ const Quote = (props) => {
     }
   }, [onSelectBlock, selected, block]);
 
-  const handleKeyDown = React.useCallback(
-    (
-      e,
-      index,
-      block,
-      node,
-      {
-        disableEnter = false,
-        disableArrowUp = false,
-        disableArrowDown = false,
-      } = {},
-    ) => {
-      if (mode === 'edit' && !floated) return;
-      const isMultipleSelection = e.shiftKey;
-      if (e.key === 'ArrowUp' && !disableArrowUp) {
-        onFocusPreviousBlock(block, node, isMultipleSelection);
-        e.preventDefault();
-      }
-      if (e.key === 'ArrowDown' && !disableArrowDown) {
-        onFocusNextBlock(block, node, isMultipleSelection);
-        e.preventDefault();
-      }
-      if ((e.key === 'Return' || e.key === 'Enter') && !disableEnter) {
-        onAddBlock(config.settings.defaultBlockType, index + 1);
-      }
-    },
-    [onAddBlock, onFocusPreviousBlock, onFocusNextBlock, mode, floated],
-  );
-
   return (
-    <QuoteWrapper {...props} handleKeyDown={handleKeyDown}>
+    <>
       {mode === 'edit' && floated && (
         <Message color="teal">
           <Message.Header>Click here to edit quote.</Message.Header>
@@ -144,7 +94,7 @@ const Quote = (props) => {
           )}
         </div>
       </blockquote>
-    </QuoteWrapper>
+    </>
   );
 };
 
@@ -174,4 +124,19 @@ Quote.Extra = ({ children, ...rest }) => (
   </div>
 );
 
-export default Quote;
+export default connect(
+  (state, props) => {
+    const blockId = props.block;
+    return {
+      defaultSelection: blockId
+        ? state.slate_block_selections?.[blockId]
+        : null,
+      uploadRequest: state.upload_content?.[props.block]?.upload || {},
+      uploadedContent: state.upload_content?.[props.block]?.data || {},
+    };
+  },
+  {
+    uploadContent,
+    saveSlateBlockSelection, // needed as editor blockProps
+  },
+)(Quote);
diff --git a/src/Blocks/Quote/variations/TestimonialQuote.jsx b/src/Blocks/Quote/variations/TestimonialQuote.jsx
@@ -1,9 +1,11 @@
 import React from 'react';
+import { connect } from 'react-redux';
 import { Grid, Card, Image } from 'semantic-ui-react';
 import config from '@plone/volto/registry';
 import { flattenToAppURL, isInternalURL } from '@plone/volto/helpers';
 import SlateEditor from 'volto-slate/editor/SlateEditor';
 import { handleKey } from 'volto-slate/blocks/Text/keyboard';
+import { uploadContent, saveSlateBlockSelection } from 'volto-slate/actions';
 import {
   createSlateParagraph,
   serializeText,
@@ -16,26 +18,6 @@ function Divider({ ...rest }) {
   return <div className="eea divider" {...rest}></div>;
 }
 
-const TestimonialWrapper = (props) => {
-  const { children, index, block, mode, handleKeyDown } = props;
-  return mode === 'edit' ? (
-    <div
-      role="presentation"
-      onKeyDown={(e) => {
-        handleKeyDown(e, index, block, props.blockNode.current);
-      }}
-      style={{ outline: 'none' }}
-      // The tabIndex is required for the keyboard navigation
-      /* eslint-disable jsx-a11y/no-noninteractive-tabindex */
-      tabIndex={0}
-    >
-      {children}
-    </div>
-  ) : (
-    children
-  );
-};
-
 const Testimonial = (props) => {
   const { slate } = config.settings;
   const {
@@ -45,10 +27,7 @@ const Testimonial = (props) => {
     block,
     selected,
     properties,
-    onAddBlock,
     onChangeBlock,
-    onFocusNextBlock,
-    onFocusPreviousBlock,
     onSelectBlock,
   } = props;
   const { value, source, extra, image, title } = data;
@@ -67,82 +46,52 @@ const Testimonial = (props) => {
     }
   }, [onSelectBlock, selected, block]);
 
-  const handleKeyDown = React.useCallback(
-    (
-      e,
-      index,
-      block,
-      node,
-      {
-        disableEnter = false,
-        disableArrowUp = false,
-        disableArrowDown = false,
-      } = {},
-    ) => {
-      const isMultipleSelection = e.shiftKey;
-      if (e.key === 'ArrowUp' && !disableArrowUp) {
-        onFocusPreviousBlock(block, node, isMultipleSelection);
-        e.preventDefault();
-      }
-      if (e.key === 'ArrowDown' && !disableArrowDown) {
-        onFocusNextBlock(block, node, isMultipleSelection);
-        e.preventDefault();
-      }
-      if ((e.key === 'Return' || e.key === 'Enter') && !disableEnter) {
-        onAddBlock(config.settings.defaultBlockType, index + 1);
-      }
-    },
-    [onAddBlock, onFocusPreviousBlock, onFocusNextBlock],
-  );
-
   return (
-    <TestimonialWrapper {...props} handleKeyDown={handleKeyDown}>
-      <div className="eea testimonial">
-        <Divider />
-        <Grid>
-          <Testimonial.Avatar
-            src={
-              isInternalURL(image)
-                ? `${flattenToAppURL(image)}/@@images/image/preview`
-                : image || DefaultImageSVG
-            }
-            title={source}
-            description={extra}
-          />
-          <Testimonial.Content>
-            {title && (
-              <Testimonial.Title>{serializeText(title)}</Testimonial.Title>
-            )}
-            {mode === 'edit' ? (
-              <Testimonial.Quote>
-                <SlateEditor
-                  index={index}
-                  properties={properties}
-                  extensions={slate.textblockExtensions}
-                  renderExtensions={[withBlockProperties]}
-                  value={createSlateParagraph(value)}
-                  onChange={(value) => {
-                    onChangeBlock(block, {
-                      ...data,
-                      value,
-                    });
-                  }}
-                  block={block}
-                  onFocus={handleFocus}
-                  onKeyDown={handleKey}
-                  selected={selected}
-                  placeholder="Add quote"
-                  slateSettings={slate}
-                />
-              </Testimonial.Quote>
-            ) : (
-              <Testimonial.Quote>{serializeText(value)}</Testimonial.Quote>
-            )}
-          </Testimonial.Content>
-        </Grid>
-        <Divider />
-      </div>
-    </TestimonialWrapper>
+    <div className="eea testimonial">
+      <Divider />
+      <Grid>
+        <Testimonial.Avatar
+          src={
+            isInternalURL(image)
+              ? `${flattenToAppURL(image)}/@@images/image/preview`
+              : image || DefaultImageSVG
+          }
+          title={source}
+          description={extra}
+        />
+        <Testimonial.Content>
+          {title && (
+            <Testimonial.Title>{serializeText(title)}</Testimonial.Title>
+          )}
+          {mode === 'edit' ? (
+            <Testimonial.Quote>
+              <SlateEditor
+                index={index}
+                properties={properties}
+                extensions={slate.textblockExtensions}
+                renderExtensions={[withBlockProperties]}
+                value={createSlateParagraph(value)}
+                onChange={(value) => {
+                  onChangeBlock(block, {
+                    ...data,
+                    value,
+                  });
+                }}
+                block={block}
+                onFocus={handleFocus}
+                onKeyDown={handleKey}
+                selected={selected}
+                placeholder="Add quote"
+                slateSettings={slate}
+              />
+            </Testimonial.Quote>
+          ) : (
+            <Testimonial.Quote>{serializeText(value)}</Testimonial.Quote>
+          )}
+        </Testimonial.Content>
+      </Grid>
+      <Divider />
+    </div>
   );
 };
 
@@ -188,4 +137,19 @@ Testimonial.Quote = ({ children }) => (
   </blockquote>
 );
 
-export default Testimonial;
+export default connect(
+  (state, props) => {
+    const blockId = props.block;
+    return {
+      defaultSelection: blockId
+        ? state.slate_block_selections?.[blockId]
+        : null,
+      uploadRequest: state.upload_content?.[props.block]?.upload || {},
+      uploadedContent: state.upload_content?.[props.block]?.data || {},
+    };
+  },
+  {
+    uploadContent,
+    saveSlateBlockSelection, // needed as editor blockProps
+  },
+)(Testimonial);