Shortcuts Plugin

import { Editor, ShortcutsPlugin } from 'on-codemerge';
import 'on-codemerge/index.css';
import 'on-codemerge/public.css';

const editor = new Editor(container, {
  plugins: [ShortcutsPlugin()],
});

// Add custom shortcut
editor.addShortcut('Ctrl+Shift+S', 'save-document');

// Remove shortcut
editor.removeShortcut('Ctrl+Shift+S');

// List all shortcuts
const shortcuts = editor.getShortcuts();

// Trigger shortcut programmatically
editor.triggerShortcut('Ctrl+Shift+S');

// Listen to shortcut events
editor.on('shortcut:triggered', (shortcut, command) => {
  console.log('Shortcut triggered:', shortcut, command);
});

editor.on('shortcut:added', (shortcut, command) => {
  console.log('Shortcut added:', shortcut, command);
});

editor.on('shortcut:removed', (shortcut) => {
  console.log('Shortcut removed:', shortcut);
});

// Add a new shortcut
editor.addShortcut('Ctrl+Alt+N', 'new-document');

// Remove a shortcut
editor.removeShortcut('Ctrl+Alt+N');

// List all shortcuts
const shortcuts = editor.getShortcuts();
console.log('All shortcuts:', shortcuts);

// Open shortcut menu
editor.openShortcutMenu();

// Edit shortcut in menu
editor.editShortcut('Ctrl+Alt+M', 'comment');

import React, { useEffect, useRef, useState } from 'react';
import { Editor, ShortcutsPlugin } from 'on-codemerge';
import 'on-codemerge/index.css';
import 'on-codemerge/public.css';

function MyEditor() {
  const editorRef = useRef(null);
  const editorInstance = useRef(null);
  const [shortcuts, setShortcuts] = useState([]);

  useEffect(() => {
    if (editorRef.current && !editorInstance.current) {
      editorInstance.current = new Editor(editorRef.current);
      // v2: pass ShortcutsPlugin() in Editor constructor plugins: [...]
      editorInstance.current.on('shortcut:added', (shortcut, command) => {
        setShortcuts((prev) => [...prev, { shortcut, command }]);
      });
    }
    return () => {
      if (editorInstance.current) editorInstance.current.destroy();
    };
  }, []);

  return <div ref={editorRef} className="editor-container" />;
}

<template>
  <div>
    <div>Shortcuts: {{ shortcuts.length }}</div>
    <div ref="editorContainer" class="editor-container"></div>
  </div>
</template>
<script>
import { Editor, ShortcutsPlugin } from 'on-codemerge';
import 'on-codemerge/index.css';
import 'on-codemerge/public.css';
export default {
  data() {
    return { editor: null, shortcuts: [] };
  },
  mounted() {
    this.editor = new Editor(this.$refs.editorContainer);
    this.this.editor // use plugins: [ShortcutsPlugin()];
      .on('shortcut:added', (shortcut, command) => {
        this.shortcuts.push({ shortcut, command });
      });
  },
  beforeDestroy() {
    if (this.editor) this.editor.destroy();
  },
};
</script>

.shortcuts-menu {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 12px 20px;
  min-width: 300px;
}
.shortcut-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
}
.shortcut-key {
  background: #f3f4f6;
  border-radius: 4px;
  padding: 2px 8px;
  font-family: monospace;
  font-size: 13px;
}
.shortcut-command {
  color: #374151;
  font-weight: 500;
}
.shortcut-edit {
  margin-left: auto;
  color: #3b82f6;
  cursor: pointer;
}
.shortcut-edit:hover {
  text-decoration: underline;
}