Slash Commands in a WYSIWYG Editor: Notion-Style Block Menu (v2.0.10)

What Are Slash Commands?

Slash commands — popularized by Notion — let users insert any block type by typing / on an empty line. A palette appears showing available block types: headings, lists, tables, code blocks, images, and more. Users can navigate with arrow keys or type to filter. It is faster than finding a small toolbar button, especially on mobile.

Slash commands are a sign of a modern WYSIWYG editor. TinyMCE, Quill, and Trix do not have them. RayEditor includes a complete slash command system — built-in commands plus a public API for custom commands — in the free MIT package.

Built-in Slash Commands

Enabling Slash Commands

Slash commands are enabled by default. They activate automatically when the user presses / on a blank line. No additional configuration needed:

const editor = new RayEditor(document.getElementById('editor'), {
  placeholder: 'Type / for commands...',
  toolbar: ['bold','italic','link','table']
  // slash commands are on by default
});

Registering Custom Slash Commands

editor.registerSlashCommand({
  name: 'Alert Box',
  icon: '⚠',          // emoji or SVG string
  description: 'Insert a styled alert',
  action(editor) {
    const div = document.createElement('div');
    div.className = 'my-alert';
    div.innerHTML = '<p>⚠ This is an alert</p>';
    // Insert at current cursor position
    const sel = window.getSelection();
    const range = sel.getRangeAt(0);
    range.deleteContents();
    range.insertNode(div);
  }
});

// Register multiple at once
const cmds = [
  { name: 'Pull Quote', icon: '❝', description: 'Large pull quote', action(e) { /* ... */ } },
  { name: 'Divider', icon: '—', description: 'Horizontal rule', action(e) { /* ... */ } }
];
cmds.forEach(c => editor.registerSlashCommand(c));

Slash Commands via Plugin

const myPlugin = {
  name: 'my-blocks',
  install(editor) {
    editor.registerSlashCommand({
      name: 'Notice',
      icon: '🔔',
      description: 'Insert a notice block',
      action(ed) {
        ed.insertHTML('<div class="notice"><p>Notice</p></div>');
      }
    });
  }
};
editor.use(myPlugin);

Keyboard Navigation

• ↓ / ↑ — move through commands
• Enter — execute highlighted command
• Escape — dismiss palette without inserting
• Type after / — fuzzy search filters commands

Which Editors Have Slash Commands?

Conclusion

Slash commands are the most productive way to insert block types in a modern WYSIWYG editor. RayEditor includes a full implementation: 40+ built-in commands, custom command registration via registerSlashCommand(), and keyboard-navigable fuzzy search. All free, MIT licensed.