Keyboard support in React Markdown Editor Component

18 Mar 202516 minutes to read

You can use the following keyboard shortcuts when the Rich Text Editor is set to editorMode as Markdown.

These shortcuts provide quick access to toolbar functions for managing menus and dialogs.

Actions	Windows	Mac
Focus on toolbar	`Alt` + `F10`	`⌥` + `F10`
Close dropdowns/menu and dialogs	`Esc`	`Esc`

Content editing and formatting

These shortcuts help in efficiently editing and formatting text content.

Actions	Windows	Mac
Select all content	`Ctrl` + `A`	`⌘` + `A`
Insert a hard line break (a new paragraph)	`Enter`	`Enter`
Make text bold	`Ctrl` + `B`	`⌘` + `B`
Italicize text	`Ctrl` + `I`	`⌘` + `I`
Apply strikethrough	`Ctrl` + `Shift` + `S`	`⌘` + `⇧` + `S`

Inserting

These shortcuts allow for the quick insertion of tables, links, and images.

Actions	Windows	Mac
Open the insert table dialog	`Ctrl` + `Shift` + `E`	`⌘` + `⇧` + `E`
Create link	`Ctrl` + `K`	`⌘` + `K`
Open the insert image dialog	`Ctrl` + `Shift` + `I`	`⌘` + `⇧` + `I`

Text manipulation

These shortcuts help in modifying text case and applying superscript or subscript.

Actions	Windows	Mac
Convert text to uppercase	`Ctrl` + `Shift` + `U`	`⌘` + `⇧` + `U`
Convert text to lowercase	`Ctrl` + `Shift` + `L`	`⌘` + `⇧` + `L`
Apply superscript	`Ctrl` + `Shift` + `=`	`⌘` + `⇧` + `=`
Apply subscript	`Ctrl` + `=`	`⌘` + `=`

Lists

These shortcuts enable the creation of ordered and unordered lists.

Actions	Windows	Mac
Create an ordered list	`Ctrl` + `Shift` + `O`	`⌘` + `⇧` + `O`
Create an unordered list	`Ctrl` + `Alt` + `O`	`⌘` + `⌥` + `O`

Clipboard operations

These shortcuts facilitate copying, cutting, and pasting content.

Actions	Windows	Mac
Copy the selected content	`Ctrl` + `C`	`⌘` + `C`
Cut the selected content	`Ctrl` + `X`	`⌘` + `X`
Paste the copied or cut content	`Ctrl` + `V`	`⌘` + `V`

Undo & redo

These shortcuts allow for undoing and redoing recent changes.

Actions	Windows	Mac
Undo	`Ctrl` + `Z`	`⌘` + `Z`
Redo	`Ctrl` + `Y`	`⌘` + `Y`

Other actions

These shortcuts provide additional functionalities like fullscreen mode.

Actions	Windows	Mac
Toggle fullscreen mode	`Ctrl` + `Shift` + `F`	`⌘` + `⇧` + `F`

[Class-component]

app.jsx
app.tsx
/**
 * Rich Text Editor - MarkdownEditor KeyConfig sample
 */
import { Image, Inject, Link, MarkdownEditor, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
class App extends React.Component {
    rteObj;
    toolbarSettings = {
        items: ['Bold', 'Italic', 'StrikeThrough', '|',
        'Formats', 'OrderedList', 'UnorderedList', '|',
        'CreateLink', 'Image', '|','Undo', 'Redo']
    };
   
    value = `In Rich Text Editor, you click the toolbar buttons to format the words and the changes are visible immediately. Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.`;

    componentDidMount() {
        document.addEventListener('keyup', this.docKeyUp.bind(this));
    }
    docKeyUp(e) {
        if (e.altKey && e.keyCode === 84) { /* t */
            // press alt+t to focus the component.
            this.rteObj.focusIn();
        }
    }
    render() {
        return (<RichTextEditorComponent ref={(richtexteditor) => { this.rteObj = richtexteditor; }} height={450} toolbarSettings={this.toolbarSettings} value={this.value} editorMode={'Markdown'}>
        <Inject services={[Toolbar, Image, Link, MarkdownEditor]}/>
      </RichTextEditorComponent>);
    }
}
export default App;
/**
 * Rich Text Editor - MarkdownEditor KeyConfig sample
 */
import { Image, Inject, Link, MarkdownEditor, RichTextEditorComponent, Toolbar  } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';

class App extends React.Component<{},{}> {
  private rteObj: RichTextEditorComponent;

  private toolbarSettings: object = {
    items: ['Bold', 'Italic', 'StrikeThrough', '|',
      'Formats', 'OrderedList', 'UnorderedList', '|',
      'CreateLink', 'Image', '|','Undo', 'Redo']
  }

  public value: string = `In Rich Text Editor, you click the toolbar buttons to format the words and the changes are visible immediately. Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.`;

  public componentDidMount() {
    document.addEventListener('keyup', this.docKeyUp.bind(this));
  }

  public docKeyUp(e: any) {
    if (e.altKey && e.keyCode === 84) { /* t */
      // press alt+t to focus the component.
      this.rteObj.focusIn();
    }
  }

  public render() {
    return (
      <RichTextEditorComponent ref={(richtexteditor) => { this.rteObj = richtexteditor }} height={450} toolbarSettings={this.toolbarSettings} value={this.value} editorMode={'Markdown'}>
        <Inject services={[Toolbar, Image, Link, MarkdownEditor]} />
      </RichTextEditorComponent>
    );
  }
}

export default App;

[Functional-component]

app.jsx
app.tsx
/**
 * Rich Text Editor - MarkdownEditor KeyConfig sample
 */
import { Image, Inject, Link, MarkdownEditor, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
import { useEffect, useRef } from 'react';

function App() {
    let rteObj;

    let value = `In Rich Text Editor, you click the toolbar buttons to format the words and the changes are visible immediately. Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.`;

    let toolbarSettings = {
        items: ['Bold', 'Italic', 'StrikeThrough', '|',
            'Formats', 'OrderedList', 'UnorderedList', '|',
            'CreateLink', 'Image', '|', 'Undo', 'Redo']
    };
    
    function componentDidMount() {
        document.addEventListener('keyup', docKeyUp.bind(this));
    }  
    
    function docKeyUp(e) {
        if (e.altKey && e.keyCode === 84) { /* t */
            // press alt+t to focus the component.
            rteObj.current.focusIn();
        }
    }

    return (<RichTextEditorComponent ref={rteObj} created={ componentDidMount } height={450} toolbarSettings={toolbarSettings} value={value} editorMode={'Markdown'}>
        <Inject services={[Toolbar, Image, Link, MarkdownEditor]}/>
      </RichTextEditorComponent>);
}
export default App;
import { Image, Inject, Link, MarkdownEditor, RichTextEditorComponent, Toolbar  } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
import { useEffect, useRef } from 'react';

function App() {
  const rteObj = useRef<RichTextEditorComponent>(null);

  let toolbarSettings: object = {
    items: ['Bold', 'Italic', 'StrikeThrough', '|',
      'Formats', 'OrderedList', 'UnorderedList', '|',
      'CreateLink', 'Image', '|','Undo', 'Redo']
  }

  let value: string = `In Rich Text Editor, you click the toolbar buttons to format the words and the changes are visible immediately. Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.`;

  function componentDidMount() {
    document.addEventListener('keyup', docKeyUp.bind(this));
  }
  

  function docKeyUp(e: any) {
    if (e.altKey && e.keyCode === 84) { /* t */
      // press alt+t to focus the component.
      rteObj.current.focusIn();
    }
  }

    return (
      <RichTextEditorComponent created={ componentDidMount }  ref={rteObj} toolbarSettings={toolbarSettings} value={value} editorMode={'Markdown'}>
        <Inject services={[Toolbar, Image, Link, MarkdownEditor]} />
      </RichTextEditorComponent>
    );
}

export default App;