Override the keyboard shortcuts in React Document Editor component

22 Jul 20266 minutes to read

React Document Editor triggers the keyDown event every time any key is entered and provides an instance of DocumentEditorKeyDownEventArgs. You can use the isHandled property to override the keyboard shortcut behavior.

Prevent the default keyboard shortcut

The following code shows how to prevent the CTRL + C keyboard shortcut for copying selected content in the Document Editor.

import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { DocumentEditorComponent, DocumentEditorKeyDownEventArgs, SfdtExport, Selection, Editor } from '@syncfusion/ej2-react-documenteditor';

DocumentEditorComponent.Inject(SfdtExport, Selection, Editor);
function App() {
    let documenteditor: DocumentEditorComponent;
    React.useEffect(() => {
        componentDidMount()
    }, []);
    function componentDidMount() {
        documenteditor.keyDown = function (args: DocumentEditorKeyDownEventArgs) {
            let keyCode: number = args.event.which || args.event.keyCode;
            let isCtrlKey: boolean = (args.event.ctrlKey || args.event.metaKey) ? true : ((keyCode === 17) ? true : false);
            //67 is the character code for 'C'
            if (isCtrlKey && keyCode === 67) {
                //To prevent the copy operation, set isHandled to true
                args.isHandled = true;
            }
        }
    }
    return (
        <DocumentEditorComponent
            id="container"
            ref={scope => {
                documenteditor = scope;
            }}
            isReadOnly={false}
            enableSelection={true}
            enableEditor={true}
            height={'330px'}
        />
    );
}
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));

Override or define a keyboard shortcut

You can override or define a new keyboard shortcut behavior instead of preventing the default behavior.

For example, Ctrl + S keyboard shortcut saves the document in SFDT format by default, and there is no behavior for Ctrl + Alt + S. The following code demonstrates how to override the Ctrl + S shortcut to save a document in DOCX format and define Ctrl + Alt + S to save the document in SFDT format.

import * as ReactDOM from 'react-dom';
import * as React from 'react';
import {
  DocumentEditorComponent,
  DocumentEditor,
  SfdtExport,
  Selection,
  Editor,
  DocumentEditorKeyDownEventArgs,
} from '@syncfusion/ej2-react-documenteditor';

DocumentEditorComponent.Inject(SfdtExport, Selection, Editor);
function App() {
  let documentEditor;
  React.useEffect(() => {
    componentDidMount();
  }, []);
  function componentDidMount() {
    documentEditor.keyDown = (args) => {
      let keyCode = args.event.which || args.event.keyCode;
      let isCtrlKey =
        args.event.ctrlKey || args.event.metaKey
          ? true
          : keyCode === 17
          ? true
          : false;
      let isAltKey = args.event.altKey
        ? args.event.altKey
        : keyCode === 18
        ? true
        : false;
      // 83 is the character code for 'S'
      if (isCtrlKey && !isAltKey && keyCode === 83) {
        //To prevent the default save operation, set the isHandled property to true
        args.isHandled = true;
        //Download the document in DOCX format.
        documentEditor.save('sample', 'Docx');
        args.event.preventDefault();
      } else if (isCtrlKey && isAltKey && keyCode === 83) {
        //Download the document in SFDT format.
        documentEditor.save('sample', 'Sfdt');
      }
    };
  }
  return (
    <DocumentEditorComponent
      id="container"
      ref={(scope) => {
        documentEditor = scope;
      }}
      isReadOnly={false}
      enableSelection={true}
      enableEditor={true}
      enableSfdtExport={true}
      height={'330px'}
    />
  );
}
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));