-
Notifications
You must be signed in to change notification settings - Fork 3.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Rich Text example: 'select all' and 'delete' does not delete everything when there is a list #2500
Comments
This bug still exists, and there doesn't seem to be an easy way to get around it either. |
Possible duct tape fix (haven't tested it): enforce via schema that first element is paragraph (or other). |
I'm working on an editor built similar to the rich text example, so I might test if the same issue occurs there and attempt a fix. |
One possible fix is to keep track of both Ctrl+A and Delete usages. If Delete is used after select all Ctrl+A then you can use const DEFAULT_NODE = "paragraph";
const isDeleteHotKey = isKeyHotkey("delete");
const isSelectAllHotKey = isKeyHotkey("mod+a");
//using React hooks
function Editor() {
const [isAllSelected, setAllSelected] = useState(false);
...
const onKeyDown = (event, editor, next) => {
...
} else if (isSelectAllHotKey(event)) {
setAllSelected(!isAllSelected); //Toggle selected flag for Ctrl+A
return next();
} else if (isDeleteHotKey(event)) {
if (isAllSelected) {
editor.setBlocks(DEFAULT_NODE);
setAllSelected(false);
return next();
} else {
return next();
}
} else {
if (isAllSelected) setAllSelected(false); //Ensure isAllSelected is false on other key presses.
return next();
}
}
} |
I had a similar issue and I fixed it with const Uneditable: FunctionComponent = props => {
return (
<>
<div contentEditable={false}>{props.children}</div>
{/*
To fix errror: "IndexSizeError: Failed to execute 'getRangeAt'
on 'Selection': 0 is not a valid index." and some others.
*/}
<style jsx>{`
div {
user-select: none;
}
`}</style>
</>
);
}; |
Went down the same path as @dons20 - here is the updated code to work with Slate 0.50+ import { Transforms, .. } from 'slate';
..
const isSelectAllHotkey = isHotkey('mod+a');
const isDeleteHotkey = isHotkey('backspace');
..
const [isAllSelected, setAllSelected] = React.useState(false);
..
onKeyDown={event => {
if (isDeleteHotkey(event)) {
if (isAllSelected) {
Transforms.delete(editor);
Transforms.setNodes(editor, { type: 'paragraph' });
setAllSelected(false);
return;
}
}
if (isSelectAllHotkey(event)) {
setAllSelected(!isAllSelected);
} else {
setAllSelected(false);
} While not ideal, it fixed the bug for me 🤷♂️ |
This reproduced for use when using tables.
Now we're always in a single So to solve it we added this to the
Hope this might help others |
I used |
Do you want to request a feature or report a bug?
A bug.
What's the current behavior?
On the current "Rich Text" example on https://www.slatejs.org/#/rich-text the following steps are causing an unexpected behavior:
The editor's contents are not entirely removed, instead the unordered list is kept and the cursor is still indented, without any list items.
What's the expected behavior?
The entire content should be deleted.
The text was updated successfully, but these errors were encountered: