Prevent Deletion of DecoratorBlockNode With Backspace Command

[lsbyerley]

I have a created a custom DecoratorBlockNode used for displaying media (image, video, meta info) in the editor. There is a button inside this node used for deleting the node. I would like to prevent the user from deleting this node when typing in the editor (ie. hitting the backspace command).

Current approach to this is below. The caveat is, it seems to work fine when the backspace is pressed while on an empty line right before the node. It does not work when the backspace is pressed on a line with text. Does anyone know why that might be?

const onBackspaceCommand = useCallback(() => {
  const selection = $getSelection();
  const nodes = selection.getNodes();
  const node = nodes[0];
  const prevNode = node.getPreviousSibling();

  // Prevent custom dedcorator node deletion with backspace command
  if ($isCustomDecoratorNode(node) || $isCustomDecoratorNode(prevNode)) {
    return true;
  }

  return false;
}, []);

useEffect(() => {
  return mergeRegister(
    editor.registerCommand(KEY_BACKSPACE_COMMAND, onBackspaceCommand, COMMAND_PRIORITY_LOW)
  );
}, []);

[2wheeh]

My guess:

  // Prevent custom dedcorator node deletion with backspace command
  if ($isCustomDecoratorNode(node) || $isCustomDecoratorNode(prevNode)) {
    return true;
  }

This checks

1. sibling of selected node is CustomDecoraterNode
2. selected node itself is CustomDecoraterNode

When there is not any text content, selected node is paragraph node and it is case 1 as prevNode (or it's childNode ?) is CustomDecoratorNode :

But when it has a text content, selected node is a text node. so It's not a CustomDecoratorNode.
and this text node has no siblings (prevNode is probably null) :

To achieve what you want, It seems you should check uncle (or it's child) of selected node as well.

[lsbyerley]

So it does appear DELETE_CHARACTER_COMMAND is also firing.. I have since added it to the command list. However, I am still noticing the same behavior. There must be something else firing as well but I'm not sure which command it could be. It is not DELETE_LINE_COMMAND or DELETE_WORD_COMMAND

I've also bumped up priority to COMMAND_PRIORITY_CRITICAL

[2wheeh]

Have you tried this:

 useLayoutEffect(() => {
    return mergeRegister(
      editor.registerCommand(
        DELETE_CHARACTER_COMMAND, // <-- instead of KEY_BACKSPACE_COMMAND
        onBackspaceCommand,
        COMMAND_PRIORITY_CRITICAL,
      ),
    );
  }, [editor, onBackspaceCommand]);

[lsbyerley]

@2wheeh Just gave this a try and unfortunately yields the same result :(

useLayoutEffect(() => {
    return mergeRegister(
      editor.registerCommand(KEY_BACKSPACE_COMMAND, onBackspaceCommand, COMMAND_PRIORITY_CRITICAL),
      editor.registerCommand(DELETE_CHARACTER_COMMAND, onBackspaceCommand, COMMAND_PRIORITY_CRITICAL)
    )
  }, [editor, onBackspaceCommand]);

[lsbyerley]

What's also frustrating is the debugger window only shows those two commands as well..

 commands:
  └ { type: CLICK_COMMAND, payload: PointerEvent }
  └ { type: KEY_BACKSPACE_COMMAND, payload: KeyboardEvent }
  └ { type: DELETE_CHARACTER_COMMAND, payload: true }
  └ { type: CAN_UNDO_COMMAND, payload: true }

[lsbyerley]

On second thought, it appears upping the priority level and keeping the registered command in a useEffect does work! I'll close this out

const onBackspaceCommand = useCallback(() => {
  const selection = $getSelection();

  if ($isRangeSelection(selection) && selection.isCollapsed()) {
    if (selection.anchor.offset === 0) {
      const element = selection.anchor.type === 'element' ? selection.anchor.getNode() : selection.anchor.getNode().getParentOrThrow();

      const prevNode = element.getPreviousSibling();
      if ($isDecoratorNode(prevNode)) {
        return true;
      }
    } else {
      const curNode = selection.anchor.getNode();
      if ($isDecoratorNode(curNode)) {
        return true;
      }
    }
  }

  return false;
}, []);

useEffect(() => {
  return mergeRegister(
    editor.registerCommand(KEY_BACKSPACE_COMMAND, onBackspaceCommand, COMMAND_PRIORITY_CRITICAL),
    editor.registerCommand(DELETE_CHARACTER_COMMAND, onBackspaceCommand, COMMAND_PRIORITY_CRITICAL)
  );
}, []);