diff --git a/packages/volto-slate/news/6805.bugfix b/packages/volto-slate/news/6805.bugfix
new file mode 100644
index 0000000000..ca0503e71d
--- /dev/null
+++ b/packages/volto-slate/news/6805.bugfix
@@ -0,0 +1 @@
+These changes will ensure that slate text blocks do not behave weirdly when using the 'backspace' or 'delete' keys. @ManojaD2004
\ No newline at end of file
diff --git a/packages/volto-slate/src/blocks/Text/DefaultTextBlockEditor.jsx b/packages/volto-slate/src/blocks/Text/DefaultTextBlockEditor.jsx
index b0c7b8bbe0..a817aec955 100644
--- a/packages/volto-slate/src/blocks/Text/DefaultTextBlockEditor.jsx
+++ b/packages/volto-slate/src/blocks/Text/DefaultTextBlockEditor.jsx
@@ -67,6 +67,7 @@ export const DefaultTextBlockEditor = (props) => {
formDescription,
navRoot,
contentType,
+ content,
} = props;
const { slate } = config.settings;
@@ -242,6 +243,7 @@ export const DefaultTextBlockEditor = (props) => {
placeholder={placeholder}
slateSettings={slateSettings}
editableProps={{ 'aria-multiline': 'false' }}
+ content={content}
/>
{DEBUG ?
{block}
: ''}
>
diff --git a/packages/volto-slate/src/editor/SlateEditor.jsx b/packages/volto-slate/src/editor/SlateEditor.jsx
index d790b41247..e3fff3a5ae 100644
--- a/packages/volto-slate/src/editor/SlateEditor.jsx
+++ b/packages/volto-slate/src/editor/SlateEditor.jsx
@@ -46,6 +46,51 @@ const handleHotKeys = (editor, event, config) => {
return wasHotkey;
};
+const handleWeirdBehaviour = (editor, event, content, index) => {
+ if (!content) {
+ return false;
+ }
+ // console.log("handleWeirdBehaviour", content, index);
+ const blocksLayout = content['blocks_layout'].items;
+ const blocks = content['blocks'];
+ // backspace key
+ if (
+ blocks[blocksLayout[index]]['@type'] !== 'slate' ||
+ !blocks[blocksLayout[index]].plaintext
+ ) {
+ return false;
+ }
+ const textLen = blocks[blocksLayout[index]].plaintext.length;
+ if (
+ isHotkey('backspace', event) &&
+ editor.selection.anchor.offset === 0 &&
+ textLen !== 0
+ ) {
+ // console.log('Backspace key pressed at the start of non-empty text!');
+ return true;
+ }
+ // delete key
+ if (
+ index + 1 === blocksLayout.length ||
+ blocks[blocksLayout[index + 1]]['@type'] !== 'slate' ||
+ !blocks[blocksLayout[index + 1]].plaintext
+ ) {
+ return false;
+ }
+ const nextTextLen = blocks[blocksLayout[index + 1]].plaintext.length;
+ // console.log("handleWeirdBehaviour", blocksLayout[index], blocks[blocksLayout[index]]);
+ // console.log("handleWeirdBehaviour", textLen, nextTextLen);
+ if (
+ isHotkey('delete', event) &&
+ editor.selection.anchor.offset === textLen &&
+ nextTextLen !== 0
+ ) {
+ // console.log('Delete key pressed at the end of text, where next text is non-empty!');
+ return true;
+ }
+ return false;
+};
+
// TODO: implement onFocus
class SlateEditor extends Component {
constructor(props) {
@@ -338,6 +383,13 @@ class SlateEditor extends Component {
onKeyDown={(event) => {
const handled = handleHotKeys(editor, event, slateSettings);
if (handled) return;
+ const handledWeird = handleWeirdBehaviour(
+ editor,
+ event,
+ this.props.content,
+ this.props.index,
+ );
+ if (handledWeird) return;
onKeyDown && onKeyDown({ editor, event });
}}
{...editableProps}