Skip to main content
Yoopta Editor provides extensive keyboard shortcuts for efficient editing. All shortcuts are platform-aware, using Cmd on macOS and Ctrl on Windows/Linux.

​
Text Formatting

ShortcutActionDescription
Cmd/Ctrl + BBoldMake text bold
Cmd/Ctrl + IItalicMake text italic
Cmd/Ctrl + UUnderlineUnderline text
Cmd/Ctrl + Shift + SStrikethroughStrike through text
Cmd/Ctrl + ECodeFormat as inline code

​
Block Operations

ShortcutActionDescription
EnterNew blockCreate new block below
Shift + EnterSoft breakInsert line break (in some blocks)
BackspaceDelete/mergeDelete character or merge with previous block
Cmd/Ctrl + Shift + BackspaceDelete lineDelete entire line
TabIncrease depthIndent block
Shift + TabDecrease depthOutdent block
/Slash menuOpen slash command menu

​
Selection & Navigation

ShortcutActionDescription
Cmd/Ctrl + ASelect allSelect all content in current block
Shift + ↑/↓Multi-select blocksSelect multiple blocks
↑/↓NavigateMove cursor up/down
←/→NavigateMove cursor left/right
Opt/Alt + ↑Move line upMove to start of line (macOS)
Opt/Alt + ↓Move line downMove to end of line (macOS)
Opt/Alt + ←Word leftJump to previous word
Opt/Alt + →Word rightJump to next word

​
History

ShortcutActionDescription
Cmd/Ctrl + ZUndoUndo last change
Cmd/Ctrl + Shift + ZRedoRedo last undone change
Ctrl + YRedo (Windows)Alternative redo on Windows

​
Clipboard

ShortcutActionDescription
Cmd/Ctrl + CCopyCopy selected content
Cmd/Ctrl + XCutCut selected content
Cmd/Ctrl + VPastePaste content
Cmd/Ctrl + Shift + VPaste plainPaste without formatting

​
Advanced

ShortcutActionDescription
Cmd/Ctrl + Shift + DDuplicate blockDuplicate current block
Cmd/Ctrl + EnterInsert belowInsert block below current
Cmd/Ctrl + Shift + EnterInsert aboveInsert block above current
EscDeselectClear selection or close menus

​
HOTKEYS API

Yoopta provides a HOTKEYS utility for detecting keyboard shortcuts: 
import { HOTKEYS } from '@yoopta/editor';

// In an event handler
function onKeyDown(event: React.KeyboardEvent) {
  if (HOTKEYS.isBold(event)) {
    event.preventDefault();
    // Toggle bold
  }
  
  if (HOTKEYS.isItalic(event)) {
    event.preventDefault();
    // Toggle italic
  }
  
  if (HOTKEYS.isEnter(event)) {
    // Handle Enter
  }
  
  if (HOTKEYS.isShiftEnter(event)) {
    // Handle Shift + Enter
  }
}

​
Available Hotkey Checkers

// Text formatting
HOTKEYS.isBold(event)      // Cmd/Ctrl + B
HOTKEYS.isItalic(event)    // Cmd/Ctrl + I

// Navigation
HOTKEYS.isArrowLeft(event)
HOTKEYS.isArrowRight(event)
HOTKEYS.isArrowUp(event)
HOTKEYS.isArrowDown(event)
HOTKEYS.isCtrlLeft(event)   // Opt/Alt + Left
HOTKEYS.isCtrlRight(event)  // Opt/Alt + Right

// Editing
HOTKEYS.isEnter(event)
HOTKEYS.isShiftEnter(event)
HOTKEYS.isBackspace(event)
HOTKEYS.isTab(event)
HOTKEYS.isShiftTab(event)

// Deletion
HOTKEYS.isDeleteBackward(event)
HOTKEYS.isDeleteForward(event)
HOTKEYS.isDeleteLineBackward(event)
HOTKEYS.isDeleteLineForward(event)
HOTKEYS.isDeleteWordBackward(event)
HOTKEYS.isDeleteWordForward(event)

// Selection
HOTKEYS.isExtendBackward(event)     // Shift + Left
HOTKEYS.isExtendForward(event)      // Shift + Right
HOTKEYS.isExtendLineBackward(event) // Opt + Shift + Up
HOTKEYS.isExtendLineForward(event)  // Opt + Shift + Down
HOTKEYS.isSelect(event)             // Cmd/Ctrl + A

// History
HOTKEYS.isUndo(event)  // Cmd/Ctrl + Z
HOTKEYS.isRedo(event)  // Cmd/Ctrl + Shift + Z

// Clipboard
HOTKEYS.isCopy(event)  // Cmd/Ctrl + C
HOTKEYS.isCut(event)   // Cmd/Ctrl + X

// Commands
HOTKEYS.isSlashCommand(event)    // /
HOTKEYS.isCmdEnter(event)        // Cmd/Ctrl + Enter
HOTKEYS.isCmdShiftEnter(event)   // Cmd/Ctrl + Shift + Enter
HOTKEYS.isCmdShiftD(event)       // Cmd/Ctrl + Shift + D

// Arrows with Shift
HOTKEYS.isShiftArrowUp(event)
HOTKEYS.isShiftArrowDown(event)

// Special
HOTKEYS.isEscape(event)
HOTKEYS.isSpace(event)
HOTKEYS.isCmd(event)  // Cmd/Ctrl key

​
Custom Keyboard Shortcuts

Define custom shortcuts in your plugins: 
import { YooptaPlugin } from '@yoopta/editor';

const MyPlugin = new YooptaPlugin({
  type: 'MyPlugin',
  elements: { /* ... */ },
  
  events: {
    onKeyDown: (editor, slate, options) => {
      const { hotkeys, currentBlock } = options;
      
      return (event) => {
        // Custom shortcut: Cmd/Ctrl + Shift + M
        if (event.metaKey && event.shiftKey && event.key === 'm') {
          event.preventDefault();
          // Custom action
          console.log('Custom shortcut triggered!');
        }
        
        // Use built-in hotkey checkers
        if (hotkeys.isEnter(event)) {
          event.preventDefault();
          // Custom Enter behavior
        }
      };
    },
  },
});

​
Custom Mark Shortcuts

Define shortcuts for custom marks: 
import { createYooptaMark } from '@yoopta/editor';

const Highlight = createYooptaMark({
  type: 'highlight',
  hotkey: 'mod+shift+h',  // Cmd/Ctrl + Shift + H
  render: (props) => (
    <mark style={{ backgroundColor: '#FFFF00' }}>
      {props.children}
    </mark>
  ),
});

const TextColor = createYooptaMark({
  type: 'textColor',
  hotkey: 'mod+shift+c',  // Cmd/Ctrl + Shift + C
  render: (props) => <span>{props.children}</span>,
});

​
Global Shortcuts Example

Implement global keyboard shortcuts: 
import { useEffect } from 'react';
import { useYooptaEditor } from '@yoopta/editor';
import { Marks } from '@yoopta/editor';

function EditorWithShortcuts() {
  const editor = useYooptaEditor();
  
  useEffect(() => {
    const handleKeyDown = (event: KeyboardEvent) => {
      // Cmd/Ctrl + S to save
      if ((event.metaKey || event.ctrlKey) && event.key === 's') {
        event.preventDefault();
        const content = editor.getEditorValue();
        saveContent(content);
      }
      
      // Cmd/Ctrl + P to print
      if ((event.metaKey || event.ctrlKey) && event.key === 'p') {
        event.preventDefault();
        window.print();
      }
      
      // Cmd/Ctrl + K for link
      if ((event.metaKey || event.ctrlKey) && event.key === 'k') {
        event.preventDefault();
        // Open link dialog
      }
    };
    
    document.addEventListener('keydown', handleKeyDown);
    return () => document.removeEventListener('keydown', handleKeyDown);
  }, [editor]);
  
  return <YooptaEditor editor={editor} />;
}

​
Slash Commands

The / key opens the slash command menu: 
// Type / to open menu
// Then type to filter:
/heading     // Insert heading
/code        // Insert code block
/image       // Insert image
/table       // Insert table
// etc.
Configure slash command shortcuts in plugin options: 
const MyPlugin = new YooptaPlugin({
  type: 'MyPlugin',
  options: {
    display: {
      title: 'My Block',
      description: 'Insert my custom block',
    },
    shortcuts: ['myblock', 'custom', 'mb'],  // Slash command aliases
  },
});

// Now typing /myblock, /custom, or /mb will show this plugin

​
Platform-Specific Shortcuts

Shortcuts automatically adapt to the platform: 
// On macOS:
// Cmd + B, Cmd + Z, Opt + Arrow, etc.

// On Windows/Linux:
// Ctrl + B, Ctrl + Z, Alt + Arrow, etc.
The mod key in hotkey definitions automatically maps to the correct modifier: 
// 'mod+b' becomes:
// - 'cmd+b' on macOS
// - 'ctrl+b' on Windows/Linux

​
Disabling Shortcuts

Prevent default shortcuts in specific contexts: 
function CustomEditor() {
  const handleKeyDown = (event: React.KeyboardEvent) => {
    // Disable Cmd+S (save)
    if ((event.metaKey || event.ctrlKey) && event.key === 's') {
      event.preventDefault();
      // Do nothing, or custom save
    }
  };
  
  return (
    <div onKeyDown={handleKeyDown}>
      <YooptaEditor editor={editor} />
    </div>
  );
}

​
Shortcut Reference Card

Display shortcuts to users: 
function ShortcutHelp() {
  const shortcuts = [
    { key: 'Cmd/Ctrl + B', action: 'Bold' },
    { key: 'Cmd/Ctrl + I', action: 'Italic' },
    { key: 'Cmd/Ctrl + Z', action: 'Undo' },
    { key: 'Cmd/Ctrl + Shift + Z', action: 'Redo' },
    { key: 'Tab', action: 'Indent' },
    { key: 'Shift + Tab', action: 'Outdent' },
    { key: '/', action: 'Open menu' },
  ];
  
  return (
    <div className="shortcut-help">
      <h3>Keyboard Shortcuts</h3>
      {shortcuts.map(({ key, action }) => (
        <div key={key}>
          <kbd>{key}</kbd>
          <span>{action}</span>
        </div>
      ))}
    </div>
  );
}

​
Best Practices

Stick to common conventions for better UX:
  • Cmd/Ctrl + B for bold
  • Cmd/Ctrl + Z for undo
  • Cmd/Ctrl + S for save
Avoid overriding browser shortcuts:
// Don't override:
// Cmd/Ctrl + T (new tab)
// Cmd/Ctrl + W (close tab)
// Cmd/Ctrl + R (reload)
Provide a help dialog or tooltip for custom shortcuts:
<button title="Bold (Cmd/Ctrl + B)">
  B
</button>
Verify shortcuts work correctly on macOS, Windows, and Linux.

Build docs developers (and LLMs) love

Get started for freeTalk to us