improve the quality

eea · Apr 1, 2024 · d6bf215 · d6bf215
1 parent 2c31ecd
commit d6bf215
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 12 deletions.
diff --git a/src/components/Blocks/Hero/Edit.jsx b/src/components/Blocks/Hero/Edit.jsx
@@ -7,7 +7,6 @@ import { BlocksForm } from '@plone/volto/components';
 import EditBlockWrapper from './EditBlockWrapper';
 import { v4 as uuid } from 'uuid';
 
-import { emptyBlocksForm } from '@plone/volto/helpers';
 import { isEmpty } from 'lodash';
 import {
   BlockDataForm,
@@ -51,6 +50,7 @@ export default function Edit(props) {
     metadata = null,
   } = props;
   const { copyright, copyrightIcon, copyrightPosition } = data;
+
   const copyrightPrefix = config.blocks.blocksConfig.hero.copyrightPrefix || '';
   const schema = React.useMemo(() => {
     if (isFunction(HeroBlockSchema)) {
@@ -61,6 +61,7 @@ export default function Edit(props) {
 
   const blockState = {};
   const data_blocks = data?.data?.blocks;
+
   if (data?.text || isEmpty(data_blocks)) {
     let dataWithoutText = { ...data };
     if (dataWithoutText) delete dataWithoutText.text;
@@ -72,28 +73,42 @@ export default function Edit(props) {
             blocks: {
               [id]: {
                 '@type': 'slate',
-                value: data.text,
+                value: { ...data.text },
                 plaintext: data.text?.[0].children?.[0].text,
               },
             },
             blocks_layout: { items: [id] },
           }
-        : emptyBlocksForm(),
+        : {
+            blocks: {
+              [id]: {
+                '@type': 'slate',
+                value: [{ type: 'h2', children: [{ text: '' }] }],
+                plaintext: '',
+              },
+            },
+            blocks_layout: { items: [id] },
+          },
     });
   }
 
   return (
     <>
       <BodyClass className="with-hero-block" />
 
-      <Hero {...data}>
+      <Hero
+        {...data}
+        onClick={(e) => {
+          if (e.target.className.includes('hero')) setSelectedBlock(null);
+        }}
+      >
         <Hero.Text {...data}>
           <BlocksForm
             metadata={properties || metadata}
             properties={data.data || {}}
             manage={false}
             allowedBlocks={'slate'}
-            selectedBlock={selected ? selectedBlock : null}
+            selectedBlock={selectedBlock}
             title={data.placeholder}
             onSelectBlock={(s, e) => {
               setSelectedBlock(s);

diff --git a/src/components/Blocks/Hero/Hero.jsx b/src/components/Blocks/Hero/Hero.jsx
@@ -26,6 +26,7 @@ function Hero({
   spaced = false,
   inverted = true,
   styles,
+  onClick = () => {},
   ...props
 }) {
   const image = getFieldURL(props.image);
@@ -35,6 +36,7 @@ function Hero({
 
   const bgImgRef = React.useRef();
   const onScreen = useFirstVisited(bgImgRef);
+
   return (
     <div
       className={cx(
@@ -49,6 +51,8 @@ function Hero({
           'full-height': fullHeight,
         },
       )}
+      role="banner"
+      onClick={onClick}
     >
       <div
         className={cx(
@@ -101,9 +105,10 @@ Hero.Text = ({ children, quoted, styles }) => {
         'hero-block-text',
         `color-fg-${textVariant}`,
         `text-${textAlign}`,
+        quoted ? 'quoted-wrapper' : '',
       )}
     >
-      <div className={quoted ? 'quoted-wrapper' : ''}>{children}</div>
+      {children}
     </div>
   );
 };

diff --git a/src/components/Blocks/Hero/schema.js b/src/components/Blocks/Hero/schema.js
@@ -26,7 +26,6 @@ export const HeroBlockSchema = () => {
           'quoted',
           'spaced',
           'inverted',
-          'isMultiline',
           'buttonLabel',
           'buttonLink',
           'overlay',
@@ -65,11 +64,6 @@ export const HeroBlockSchema = () => {
         type: 'boolean',
         defaultValue: true,
       },
-      isMultiline: {
-        title: 'Multiline',
-        type: 'boolean',
-        defaultValue: false,
-      },
       buttonLabel: {
         title: 'Button label',
         widget: 'textarea',

diff --git a/src/helpers.js b/src/helpers.js
@@ -2,6 +2,7 @@ import { serializeNodes } from '@plone/volto-slate/editor/render';
 import isArray from 'lodash/isArray';
 import isObject from 'lodash/isObject';
 import isString from 'lodash/isString';
+import { v4 as uuid } from 'uuid';
 import { isInternalURL, flattenToAppURL } from '@plone/volto/helpers';
 
 export const getFieldURL = (data) => {
@@ -26,6 +27,38 @@ const createEmptyHeader = () => {
   };
 };
 
+export const addEmptyHeaderSlateBlockToData = (
+  data,
+  index,
+  setSelectedBlock,
+) => {
+  console.log(index);
+  const id = uuid();
+  setSelectedBlock(id);
+  return {
+    ...data,
+    blocks: {
+      ...data.blocks,
+      [id]: {
+        '@type': 'slate',
+        value: [{ type: 'h2', children: [{ text: '' }] }],
+        plaintext: '',
+      },
+    },
+    blocks_layout: {
+      ...data.blocks_layout,
+      items: [
+        ...data.blocks_layout.items.slice(0, index),
+        id,
+        ...data.blocks_layout.items.slice(
+          index,
+          data.blocks_layout.items.length,
+        ),
+      ],
+    },
+  };
+};
+
 export const createSlateHeader = (text) => {
   return isArray(text) ? text : [createEmptyHeader()];
 };