Docs Editor Model/Schema Cases Scenarios Tips Playground Coverage

deleteByCut

How deleteByCut inputType handles cut operations (Ctrl/Cmd+X) and varies across browsers.

Overview

The deleteByCut inputType is triggered when the user cuts selected content (typically via Ctrl/Cmd + X). The browser removes the selected content and places it in the clipboard.

Basic Behavior

Scenario: Text selected and cut

Before (Text selected)

HTML:
<p>Hello world text</p>

After Ctrl/Cmd + X (Cut)

HTML:
<p>Hello | text</p>
Selected text removed and copied to clipboard

Difference from deleteContent

deleteByCut (Ctrl/Cmd + X)

  • Removes selected content and copies it to clipboard
  • Content can be pasted later
  • Typically requires a selection (non-collapsed)

deleteContent (Delete key)

  • Removes content without copying to clipboard
  • Content cannot be recovered via paste
  • Can work with collapsed selection (forward delete)

Clipboard Interaction

When deleteByCut is triggered:

  • Selected content is copied to the system clipboard
  • Content is removed from the DOM
  • Clipboard contains both plain text and HTML representations (if applicable)
  • The cut event also fires (in addition to beforeinput/input)

Browser-Specific Behavior

Chrome/Edge

  • Preserves HTML structure in clipboard
  • Both cut and beforeinput events fire

Firefox

  • Similar behavior to Chrome
  • Clipboard format may differ slightly

Safari

  • Clipboard handling may differ, especially on macOS
  • May require additional permissions for clipboard access

Editor-Specific Handling

Different editor frameworks handle cut operations similarly to delete operations, but also need to handle clipboard copying. Here's how major editors implement deleteByCut:

Slate.js

Cut Handling

Slate deletes content and handles clipboard: 

    import { Editor, Transforms } from 'slate';

element.addEventListener('beforeinput', (e) => {
  if (e.inputType === 'deleteByCut') {
    e.preventDefault();
    
    const { selection } = editor;
    if (selection && !selection.isCollapsed) {
      // Get selected content
      const fragment = Editor.fragment(editor, selection);
      
      // Copy to clipboard (simplified - real implementation would serialize to HTML)
      const text = Editor.string(editor, selection);
      navigator.clipboard.writeText(text).catch(() => {
        // Fallback for older browsers
      });
      
      // Delete selected content
      Transforms.delete(editor);
    }
  }
});
  • Fragment extraction: Extracts selected content before deletion.
  • Clipboard API: Uses navigator.clipboard to copy to clipboard.
  • Delete operation: Uses Transforms.delete() to remove content.
ProseMirror

Cut Handling

ProseMirror uses deleteSelection and clipboard: 

    import { deleteSelection } from 'prosemirror-commands';

view.dom.addEventListener('beforeinput', (e) => {
  if (e.inputType === 'deleteByCut') {
    e.preventDefault();
    const { state, dispatch } = view;
    
    if (!state.selection.empty) {
      // Copy to clipboard
      const text = state.doc.textBetween(
        state.selection.from,
        state.selection.to
      );
      navigator.clipboard.writeText(text).catch(() => {});
      
      // Delete selection
      if (deleteSelection(state, dispatch)) {
        // Handled
      }
    }
  }
});
  • Text extraction: Extracts text from selection before deletion.
  • Clipboard API: Uses navigator.clipboard to copy.
  • deleteSelection command: Uses deleteSelection() to remove content.
Draft.js

Cut Handling

Draft.js uses Modifier and clipboard: 

    import { EditorState, Modifier } from 'draft-js';

function handleCut(editorState) {
  const contentState = editorState.getCurrentContent();
  const selection = editorState.getSelection();
  
  if (!selection.isCollapsed) {
    // Get selected text
    const text = contentState.getPlainText().slice(
      selection.getStartOffset(),
      selection.getEndOffset()
    );
    
    // Copy to clipboard
    navigator.clipboard.writeText(text).catch(() => {});
    
    // Delete selection
    const newContentState = Modifier.removeRange(
      contentState,
      selection,
      'forward'
    );
    
    return EditorState.push(
      editorState,
      newContentState,
      'remove-range'
    );
  }
  
  return editorState;
}
  • Text extraction: Gets plain text from selection.
  • Clipboard API: Uses navigator.clipboard to copy.
  • Modifier.removeRange: Removes selected content.

Related resources