Atomic block's entity should be deleted on backspace command too

I have a simple use case which bothers me since a week. When I add an atomic block:

"‸"

"Some text...‸"

1. add atomic block with entity space (programatically)

"Sometext..."
" "
"‸"

1. Hit backspace (we jump on line 1, atomic block is deleted how we except BUT the space from the atomic block with the entity in it is now on line 1 right next to the cursor.)

"Sometext...‸ "

Normally you not recognize this space with the entity - but when you render the content state side-by-side to the editor you recognize that an entity in still present there on line 1. You can delete this space, than it’s solved theoretically.

I except that the entity space should be removed too when I delete an atomic block by a backspace operation.

Otherwise the content state is now just invalid - there is an atomic entity somewhere free outside of an atomic block.

[aight8]

RichUtils.handleKeyCommand is not bound by default to handle commands. That’s the truth. In the RichUtils.handleKeyCommand method you see all the commands this method handles. They are several, but in most cases it’s okey.

Simple example:

  handleKeyCommand(command) {
    const { editorState } = this.state;

    const newContent = RichUtils.handleKeyCommand(editorState, command);
    if (newContent) {
      this.handleEditorChange(newContent); // .. update editor state ...
      return 'handled';
    } else {
      return 'not-handled';
    }
  }

Detailed explanation When you don’t want that RichUtils.handleKeyCommand handle some command (for example some inline styles) just catch those commands and don’t call RichUtils.handleKeyCommand for it.

The most important point however is that you return the handled string when your custom code or RichUtils.handleKeyCommand handled the command - this will prevent the default key action. When you don’t return handled even when RichUtils.handleKeyCommand was handled the command and updated the editor state, still 90% of the commands are working as excepted. But deleting atomic block will not work correctly since draft.js thinks the command was not handled and executes the default action which break the atomic block removal.

It’s a tricky point.

I suggested that draft.js should warn the user when handleKeyCommand function not returns explicitly “handled” or “not-handled”. Or clarify this case in the docs even more. (–> https://facebook.github.io/draft-js/docs/advanced-topics-key-bindings.html)

[stevensacks]

Sorry that’s a slightly older version. This one’s been cleaned up.

export const auditEditorState = editorState => {
    // Need to make sure when an atomic block is deleted that its corresponding entity is, as well
    const atomicTypes = {image: true, twitter: true, youtube: true};

    const selectionState = editorState.getSelection();
    const anchorKey = selectionState.getAnchorKey();
    const currentContent = editorState.getCurrentContent();
    const currentContentBlock = currentContent.getBlockForKey(anchorKey);

    const type = currentContentBlock.getType();
    if (type === 'unstyled') {
        let orphan = false;
        currentContentBlock.getCharacterList().forEach(cm => {
            if (!orphan) {
                const entityKey = cm.getEntity();
                if (entityKey) {
                    const entityType = currentContent.getEntity(entityKey).getType();
                    if (entityKey && atomicTypes[entityType]) {
                        //console.log(`${entityType} not allowed in unstyled block ${currentContentBlock.getKey()}`);
                        orphan = true;
                    }
                }
            }
        });

        if (orphan) {
            const newEditorState = editorState;
            newEditorState._immutable = newEditorState._immutable.set('allowUndo', false); // hack to allow pushing a new state without creating an undo
            const updatedSelection = selectionState.merge({anchorOffset: 0});
            const newContent = Modifier.removeRange(currentContent, updatedSelection, 'forward');
            return EditorState.push(
                newEditorState,
                newContent,
                'remove-orphaned-entities'
            );
        }
    }
    return editorState;
};```