diff --git a/src/components/ItaliaTheme/Blocks/Callout/Edit.jsx b/src/components/ItaliaTheme/Blocks/Callout/Edit.jsx index a18c72fd4..273b5d3c2 100644 --- a/src/components/ItaliaTheme/Blocks/Callout/Edit.jsx +++ b/src/components/ItaliaTheme/Blocks/Callout/Edit.jsx @@ -42,9 +42,10 @@ const Edit = ({ const [selectedField, setSelectedField] = useState('title'); useEffect(() => { + console.log(selected, selectedField); if (selected && !selectedField) { setSelectedField('title'); - } else { + } else if (!selected) { setSelectedField(null); } }, [selected]); @@ -80,43 +81,27 @@ const Edit = ({ > {data.icon && } + { onChange({ ...data, title: data.value }, 'title'); }} - setSelected={() => setSelectedField('title')} + selected={selectedField === 'title'} + placeholder={intl.formatMessage(messages.title)} + setSelected={() => { + setSelectedField('title'); + }} focusNextField={() => { setSelectedField('text'); }} - wrapClass={`title-edit-wrapper ${ - data.title?.blocks?.[0]?.text?.length > 0 ? 'has-text' : '' - }`} /> - { - onChange({ ...data, text_simple: data.value }, 'text_simple'); - }} - selected={selectedField === 'text_simple'} - placeholder={intl.formatMessage(messages.text)} - setSelected={() => { - setSelectedField('text_simple'); - }} - focusPrevField={() => { - setSelectedField('title'); - }} - /> { - const title = ; - return (
- + {data.icon && } - {title} - {title} + {data.title} diff --git a/src/components/ItaliaTheme/manage/Widgets/SimpleTextEditorWidget.jsx b/src/components/ItaliaTheme/manage/Widgets/SimpleTextEditorWidget.jsx index 10b8e98b1..ba598998e 100644 --- a/src/components/ItaliaTheme/manage/Widgets/SimpleTextEditorWidget.jsx +++ b/src/components/ItaliaTheme/manage/Widgets/SimpleTextEditorWidget.jsx @@ -5,18 +5,12 @@ * E' un editor di testo da mettere nei blocchi, senza formattazione. */ -import React from 'react'; -import { connect } from 'react-redux'; +import React, { useRef, useEffect } from 'react'; + import PropTypes from 'prop-types'; import { defineMessages, useIntl } from 'react-intl'; import { useInView } from 'react-intersection-observer'; -import { handleKeyDetached } from '@plone/volto-slate/blocks/Text/keyboard'; -import { - uploadContent, - saveSlateBlockSelection, -} from '@plone/volto-slate/actions'; -import { commonSearchBlockMessages } from '../../../../helpers'; import config from '@plone/volto/registry'; const messages = defineMessages({ @@ -43,6 +37,8 @@ const SimpleTextEditorWidget = (props) => { rootMargin: '0px 0px 200px 0px', }); + const fieldRef = useRef(); + const handleKey = (event) => { const { slate } = config.settings; @@ -51,21 +47,33 @@ const SimpleTextEditorWidget = (props) => { if (handlers) { // a handler can return `true` to signify it has handled the event in this // case, the execution flow is stopped - const handlerProps = { getBlockProps: () => props }; + const handlerProps = { + getBlockProps: () => { + return { ...props }; + }, + }; return handlers.find((handler) => handler({ editor: handlerProps, event }), ); } }; + useEffect(() => { + if (selected) { + fieldRef.current.focus(); + } + }, [selected]); + return (
-