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}