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 (
-
);
};
diff --git a/src/components/ItaliaTheme/manage/Widgets/TextEditorWidget.jsx b/src/components/ItaliaTheme/manage/Widgets/TextEditorWidget.jsx
index 107b48ad6..fefd43228 100644
--- a/src/components/ItaliaTheme/manage/Widgets/TextEditorWidget.jsx
+++ b/src/components/ItaliaTheme/manage/Widgets/TextEditorWidget.jsx
@@ -46,7 +46,8 @@ const TextEditorWidget = (props) => {
const withBlockProperties = React.useCallback(
(editor) => {
- editor.getBlockProps = () => props;
+ const p = { ...props, showToolbar: showToolbar };
+ editor.getBlockProps = () => p;
return editor;
},
[props],
@@ -67,7 +68,7 @@ const TextEditorWidget = (props) => {
onClick={() => setSelected()}
onFocus={() => setSelected()}
onKeyDown={() => setSelected()}
- role="textbox"
+ role={'textbox'}
tabIndex="-1"
>
{showToolbar ? (
diff --git a/src/config/Slate/handlers.js b/src/config/Slate/handlers.js
index 3c9f5f00c..df32ff5ea 100644
--- a/src/config/Slate/handlers.js
+++ b/src/config/Slate/handlers.js
@@ -7,10 +7,20 @@ import {
import {
isCursorAtBlockStart,
isCursorAtBlockEnd,
+ getNextVoltoBlock,
+ getPreviousVoltoBlock,
+ createDefaultBlock,
} from '@plone/volto-slate/utils';
const focusPrev = (props) => {
- const { focusPrevField, showToolbar } = props.editor.getBlockProps();
+ const {
+ focusPrevField,
+ showToolbar,
+ onFocusPreviousBlock,
+ block,
+ blockNode,
+ properties,
+ } = props.editor.getBlockProps();
let isAtStart = false;
@@ -20,36 +30,119 @@ const focusPrev = (props) => {
isAtStart = props.event.target.selectionStart === 0;
}
- if (focusPrevField && isAtStart) {
- props.event.stopPropagation();
- return focusPrevField();
+ if (isAtStart) {
+ //move to prev field
+ if (focusPrevField) {
+ props.event.stopPropagation();
+ return focusPrevField();
+ }
+
+ //handle SimpleTextEditorWidget -> move to prev block
+ if (!showToolbar && onFocusPreviousBlock) {
+ const prev = getPreviousVoltoBlock(props.index, properties);
+ if (!prev || prev[0]?.['@type'] !== 'slate')
+ return onFocusPreviousBlock(block, blockNode.current);
+ const [slateBlock, id] = prev;
+ const pseudoEditor = {
+ children: slateBlock.value || [createDefaultBlock()],
+ };
+ const match = Node.last(pseudoEditor, []);
+ if (!match) return onFocusPreviousBlock(block, blockNode.current);
+
+ const [node, path] = match;
+ const point = { path, offset: (node?.text || '').length };
+ const selection = { anchor: point, focus: point };
+ props.saveSlateBlockSelection(id, selection);
+ return onFocusPreviousBlock(block, blockNode.current);
+ }
}
- return goUp(props); // Select prev block
+
+ //handle SlateEditor arrow-up key
+ return goUp(props);
};
+const goToNextVoltoBlock = (props) => {
+ const {
+ onFocusNextBlock,
+ block,
+ blockNode,
+ properties,
+ } = props.editor.getBlockProps();
+ const next = getNextVoltoBlock(props.index, properties);
+ if (!next || next[0]?.['@type'] !== 'slate')
+ return onFocusNextBlock(block, blockNode.current);
+
+ const [slateBlock, id] = next;
+ const pseudoEditor = {
+ children: slateBlock.value || [createDefaultBlock()],
+ };
+ const match = Node.last(pseudoEditor, []);
+ if (!match) return onFocusNextBlock(block, blockNode.current);
+
+ const path = match[1];
+ const point = { path, offset: 0 };
+ const selection = { anchor: point, focus: point };
+ props.saveSlateBlockSelection(id, selection);
+ return onFocusNextBlock(block, blockNode.current);
+};
const focusNext = (props) => {
- const { focusNextField, showToolbar } = props.editor.getBlockProps();
+ const {
+ focusNextField,
+ showToolbar,
+ onFocusNextBlock,
+ } = props.editor.getBlockProps();
let isAtEnd = false;
+
if (showToolbar) {
isAtEnd = isCursorAtBlockEnd(props.editor);
} else {
isAtEnd =
- props.event.target.selectionEnd === props.event.target.value.length;
+ props.event.target.selectionEnd === props.event.target.value?.length;
}
- if (focusNextField && isAtEnd) {
- props.event.stopPropagation();
- return focusNextField();
+
+ if (isAtEnd) {
+ //move to next field
+ if (focusNextField) {
+ props.event.stopPropagation();
+ return focusNextField();
+ }
+
+ //handle SimpleTextEditorWidget -> move to next block
+ if (!showToolbar && onFocusNextBlock) {
+ goToNextVoltoBlock(props);
+ }
+ }
+ //handle SlateEditor arrow-down key
+ return goDown(props);
+};
+
+const customSoftBreak = (props) => {
+ //handle SimpleTextEditorWidget softBreak
+ const { showToolbar } = props.editor.getBlockProps();
+ if (props.event.key === 'Enter' && props.event.shiftKey && !showToolbar) {
+ props.event.preventDefault();
+ goToNextVoltoBlock(props);
+ return false;
}
- return goDown(props); // Select next block
+ return softBreak;
};
+
+const breakInSimpleTextEditor = (props) => {
+ //disable break in SimpleTextEditorWidget
+ const { showToolbar } = props.editor.getBlockProps();
+ if (props.event.key === 'Enter' && !props.event.shiftKey && !showToolbar) {
+ props.event.preventDefault();
+ goToNextVoltoBlock(props);
+ return false;
+ }
+ return true;
+};
+
export default function install(config) {
config.settings.slate.textblockDetachedKeyboardHandlers = {
...config.settings.slate.textblockDetachedKeyboardHandlers,
- Enter: [
- ...config.settings.slate.textblockDetachedKeyboardHandlers.Enter,
- focusNext,
- ],
+ Enter: [breakInSimpleTextEditor, customSoftBreak, focusNext],
ArrowUp: [focusPrev],
ArrowDown: [focusNext],
};
diff --git a/src/theme/ItaliaTheme/Blocks/_callout.scss b/src/theme/ItaliaTheme/Blocks/_callout.scss
index 8831fc5ba..9109126a8 100644
--- a/src/theme/ItaliaTheme/Blocks/_callout.scss
+++ b/src/theme/ItaliaTheme/Blocks/_callout.scss
@@ -8,13 +8,6 @@ body.cms-ui {
flex: 1 0 100%;
max-width: 32px;
}
- .title-edit-wrapper {
- flex: 1 1 100%;
- min-width: 165px;
- &.has-text {
- min-width: unset;
- }
- }
}
p {
diff --git a/src/theme/_cms-ui.scss b/src/theme/_cms-ui.scss
index 43c77ad52..282f13a74 100644
--- a/src/theme/_cms-ui.scss
+++ b/src/theme/_cms-ui.scss
@@ -91,6 +91,18 @@ body.cms-ui {
}
}
+ .simple-text-editor-widget {
+ .simple-text-input {
+ height: $line-height-base;
+ &:empty:before {
+ content: attr(placeholder);
+ pointer-events: none;
+ display: block; /* For Firefox */
+ font-weight: inherit;
+ opacity: 0.333;
+ }
+ }
+ }
.it-header-wrapper,
.public-ui {
font-size: 18px;
@@ -441,12 +453,6 @@ body.cms-ui {
// z-index necessario su Volto 17 finché non passiamo ad usare slate
.block {
- .DraftEditor-root {
- .DraftEditor-editorContainer,
- .public-DraftEditorPlaceholder-root {
- z-index: 0;
- }
- }
&.image {
.block.align {
&.left,