@uiw/react-md-editor 3.18.1 → 3.18.3

package/src/__test__/commands.test.tsx

@@ -21,7 +21,7 @@ it('MDEditor commands bold', async () => {
     );
   };
   render(<MyComponent />);
-  const btn = screen.getByTitle('Add bold text');
+  const btn = screen.getByTitle('Add bold text (ctrl + b)');
   btn.focus();
   fireEvent(
     btn,
@@ -48,7 +48,7 @@ it('MDEditor commands italic', async () => {
     );
   };
   render(<MyComponent />);
-  const btn = screen.getByTitle('Add italic text');
+  const btn = screen.getByTitle('Add italic text (ctrl + i)');
   btn.focus();
   fireEvent(
     btn,
@@ -66,7 +66,7 @@ it('MDEditor commands code', async () => {
   render(<MDEditor value={`He llo \nWold!`} textareaProps={{ title: 'test' }} onChange={handleChange} />);
   const input = screen.getByTitle<HTMLInputElement>('test');
   input.setSelectionRange(0, 5);
-  const btn = screen.getByLabelText('Insert code');
+  const btn = screen.getByLabelText('Insert code (ctrl + j)');
   fireEvent(
     btn,
     new MouseEvent('click', {
@@ -82,7 +82,7 @@ it('MDEditor commands selectOptions code', async () => {
   render(<MDEditor value={`Hello\nWold!`} textareaProps={{ title: 'test' }} onChange={handleChange} />);
   const input = screen.getByTitle<HTMLInputElement>('test');
   input.setSelectionRange(0, 11);
-  const btn = screen.getByLabelText('Insert code');
+  const btn = screen.getByLabelText('Insert code (ctrl + j)');
   fireEvent(
     btn,
     new MouseEvent('click', {
@@ -115,7 +115,7 @@ it('MDEditor commands quote', async () => {
     );
   };
   render(<MyComponent />);
-  const btn = screen.getByLabelText('Insert a quote');
+  const btn = screen.getByLabelText('Insert a quote (ctrl + q)');
   btn.focus();
   fireEvent(
     btn,
@@ -142,7 +142,7 @@ it('MDEditor commands HR', async () => {
     );
   };
   render(<MyComponent />);
-  const btn = screen.getByLabelText('Insert HR');
+  const btn = screen.getByLabelText('Insert HR (ctrl + h)');
   btn.focus();
   fireEvent(
     btn,
@@ -169,7 +169,7 @@ it('MDEditor commands strikethrough text', async () => {
     );
   };
   render(<MyComponent />);
-  const btn = screen.getByLabelText('Add strikethrough text');
+  const btn = screen.getByLabelText('Add strikethrough text (ctrl + shift + x)');
   btn.focus();
   fireEvent(
     btn,
@@ -196,7 +196,7 @@ it('MDEditor commands link', async () => {
     );
   };
   render(<MyComponent />);
-  const btn = screen.getByLabelText('Add a link');
+  const btn = screen.getByLabelText('Add a link (ctrl + l)');
   btn.focus();
   fireEvent(
     btn,
@@ -223,7 +223,7 @@ it('MDEditor commands image', async () => {
     );
   };
   render(<MyComponent />);
-  const btn = screen.getByLabelText('Add image');
+  const btn = screen.getByLabelText('Add image (ctrl + k)');
   btn.focus();
   fireEvent(
     btn,
@@ -250,7 +250,7 @@ it("MDEditor commands image === ''", async () => {
     );
   };
   render(<MyComponent />);
-  const btn = screen.getByLabelText('Add image');
+  const btn = screen.getByLabelText('Add image (ctrl + k)');
   btn.focus();
   fireEvent(
     btn,
@@ -277,7 +277,7 @@ it('MDEditor commands Add unordered list', async () => {
     );
   };
   render(<MyComponent />);
-  const btn = screen.getByLabelText('Add unordered list');
+  const btn = screen.getByLabelText('Add unordered list (ctrl + shift + u)');
   btn.focus();
   fireEvent(
     btn,
@@ -293,7 +293,7 @@ it('MDEditor commands Add unordered list', async () => {
 it('MDEditor commands Add ordered list', async () => {
   const handleChange = jest.fn((value) => value);
   render(<MDEditor value="title" textareaProps={{ title: 'test' }} onChange={handleChange} />);
-  const btn = screen.getByLabelText('Add ordered list');
+  const btn = screen.getByLabelText('Add ordered list (ctrl + shift + o)');
   fireEvent(
     btn,
     new MouseEvent('click', {
@@ -318,7 +318,7 @@ it('MDEditor commands Add checked list', async () => {
     );
   };
   render(<MyComponent />);
-  const btn = screen.getByLabelText('Add checked list');
+  const btn = screen.getByLabelText('Add checked list (ctrl + shift + c)');
 
   btn.focus();
   fireEvent(
@@ -335,7 +335,7 @@ it('MDEditor commands Add checked list', async () => {
 it('MDEditor commands fullscreen', async () => {
   const handleChange = jest.fn((value) => value);
   await render(<MDEditor value="title" textareaProps={{ title: 'test' }} onChange={handleChange} />);
-  const btn = screen.getByLabelText('fullscreen');
+  const btn = screen.getByLabelText('Toggle fullscreen (ctrl + 0)');
   fireEvent(btn, new MouseEvent('click', { bubbles: true, cancelable: true }));
   expect(document.body.style).toMatchObject({
     overflow: 'hidden',
@@ -365,7 +365,7 @@ it('MDEditor commands comment `ctrlcmd+/`', async () => {
 it('MDEditor commands title1 value === undefined', async () => {
   const handleChange = jest.fn((value) => value);
   render(<MDEditor onChange={handleChange} commands={[commands.title1]} />);
-  const btn = screen.getByLabelText('Insert title 1');
+  const btn = screen.getByLabelText('Insert title1 (ctrl + 1)');
   fireEvent(btn, new MouseEvent('click', { bubbles: true, cancelable: true }));
   expect(handleChange).toHaveReturnedWith('# ');
 });
@@ -380,7 +380,7 @@ it('MDEditor commands title1 value === test', async () => {
       commands={[commands.title1]}
     />,
   );
-  const btn = screen.getByLabelText('Insert title 1');
+  const btn = screen.getByLabelText('Insert title1 (ctrl + 1)');
   const input = screen.getByTitle<HTMLTextAreaElement>('textarea');
   input.setSelectionRange(2, 2);
 
@@ -393,7 +393,7 @@ it('MDEditor commands title2 value === undefined', async () => {
   render(<MDEditor onChange={handleChange} textareaProps={{ title: 'test' }} commands={[commands.title2]} />);
   const input = screen.getByTitle<HTMLInputElement>('test');
   input.setSelectionRange(0, 0);
-  const btn = screen.getByLabelText('Insert title2');
+  const btn = screen.getByLabelText('Insert title2 (ctrl + 2)');
   fireEvent(btn, new MouseEvent('click', { bubbles: true, cancelable: true }));
   input.setSelectionRange(0, 0);
   expect(handleChange).toHaveReturnedWith('## ');
@@ -406,7 +406,7 @@ it('MDEditor commands title2 value === test', async () => {
   );
   const input = screen.getByTitle<HTMLInputElement>('test');
   input.setSelectionRange(2, 2);
-  const btn = screen.getByLabelText('Insert title2');
+  const btn = screen.getByLabelText('Insert title2 (ctrl + 2)');
   fireEvent(btn, new MouseEvent('click', { bubbles: true, cancelable: true }));
   expect(handleChange).toHaveReturnedWith('## test');
 });
@@ -414,7 +414,7 @@ it('MDEditor commands title2 value === test', async () => {
 it('MDEditor commands title3 value === undefined', async () => {
   const handleChange = jest.fn((value) => value);
   render(<MDEditor onChange={handleChange} commands={[commands.title3]} />);
-  const btn = screen.getByLabelText('Insert title3');
+  const btn = screen.getByLabelText('Insert title3 (ctrl + 3)');
   fireEvent(btn, new MouseEvent('click', { bubbles: true, cancelable: true }));
   expect(handleChange).toHaveReturnedWith('### ');
 });
@@ -429,7 +429,7 @@ it('MDEditor commands title3 value === test', async () => {
       commands={[commands.title3]}
     />,
   );
-  const btn = screen.getByLabelText('Insert title3');
+  const btn = screen.getByLabelText('Insert title3 (ctrl + 3)');
   const input = screen.getByTitle<HTMLInputElement>('textarea');
   input.setSelectionRange(2, 2);
   fireEvent(btn, new MouseEvent('click', { bubbles: true, cancelable: true }));
@@ -439,7 +439,7 @@ it('MDEditor commands title3 value === test', async () => {
 it('MDEditor commands title4 value === undefined', async () => {
   const handleChange = jest.fn((value) => value);
   render(<MDEditor onChange={handleChange} commands={[commands.title4]} />);
-  const btn = screen.getByLabelText('Insert title4');
+  const btn = screen.getByLabelText('Insert title4 (ctrl + 4)');
   fireEvent(btn, new MouseEvent('click', { bubbles: true, cancelable: true }));
   expect(handleChange).toHaveReturnedWith('#### ');
 });
@@ -454,7 +454,7 @@ it('MDEditor commands title4 value === test', async () => {
       commands={[commands.title4]}
     />,
   );
-  const btn = screen.getByLabelText('Insert title4');
+  const btn = screen.getByLabelText('Insert title4 (ctrl + 4)');
   const input = screen.getByTitle('textarea');
   (input as any).setSelectionRange(2, 2);
   fireEvent(btn, new MouseEvent('click', { bubbles: true, cancelable: true }));
@@ -464,7 +464,7 @@ it('MDEditor commands title4 value === test', async () => {
 it('MDEditor commands title5 value === undefined', async () => {
   const handleChange = jest.fn((value) => value);
   render(<MDEditor onChange={handleChange} commands={[commands.title5]} />);
-  const btn = screen.getByLabelText('Insert title5');
+  const btn = screen.getByLabelText('Insert title5 (ctrl + 5)');
   fireEvent(btn, new MouseEvent('click', { bubbles: true, cancelable: true }));
   expect(handleChange).toHaveReturnedWith('##### ');
 });
@@ -479,7 +479,7 @@ it('MDEditor commands title5 value === test', async () => {
       commands={[commands.title5]}
     />,
   );
-  const btn = screen.getByLabelText('Insert title5');
+  const btn = screen.getByLabelText('Insert title5 (ctrl + 5)');
   const input = screen.getByTitle<HTMLInputElement>('textarea');
   input.setSelectionRange(2, 2);
   fireEvent(btn, new MouseEvent('click', { bubbles: true, cancelable: true }));
@@ -489,7 +489,7 @@ it('MDEditor commands title5 value === test', async () => {
 it('MDEditor commands title6 value === undefined', async () => {
   const handleChange = jest.fn((value) => value);
   render(<MDEditor onChange={handleChange} commands={[commands.title6]} />);
-  const btn = screen.getByLabelText('Insert title6');
+  const btn = screen.getByLabelText('Insert title6 (ctrl + 6)');
   fireEvent(btn, new MouseEvent('click', { bubbles: true, cancelable: true }));
   expect(handleChange).toHaveReturnedWith('###### ');
 });
@@ -504,7 +504,7 @@ it('MDEditor commands title6 value === test', async () => {
       commands={[commands.title6]}
     />,
   );
-  const btn = screen.getByLabelText('Insert title6');
+  const btn = screen.getByLabelText('Insert title6 (ctrl + 6)');
   const input = screen.getByTitle('textarea');
   (input as any).setSelectionRange(2, 2);
   fireEvent(btn, new MouseEvent('click', { bubbles: true, cancelable: true }));

package/src/commands/bold.tsx

@@ -6,7 +6,8 @@ export const bold: ICommand = {
   name: 'bold',
   keyCommand: 'bold',
   shortcuts: 'ctrlcmd+b',
-  buttonProps: { 'aria-label': 'Add bold text', title: 'Add bold text' },
+  value: '**',
+  buttonProps: { 'aria-label': 'Add bold text (ctrl + b)', title: 'Add bold text (ctrl + b)' },
   icon: (
     <svg role="img" width="12" height="12" viewBox="0 0 384 512">
       <path

package/src/commands/code.tsx

@@ -10,7 +10,8 @@ export const code: ICommand = {
   name: 'code',
   keyCommand: 'code',
   shortcuts: 'ctrlcmd+j',
-  buttonProps: { 'aria-label': 'Insert code', title: 'Insert code' },
+  value: '``',
+  buttonProps: { 'aria-label': 'Insert code (ctrl + j)', title: 'Insert code (ctrl + j)' },
   icon: (
     <svg width="12" height="12" role="img" viewBox="0 0 640 512">
       <path
@@ -60,6 +61,7 @@ export const codeBlock: ICommand = {
   name: 'codeBlock',
   keyCommand: 'codeBlock',
   shortcuts: 'ctrlcmd+shift+j',
+  value: '```\n```',
   icon: (
     <svg width="12" height="12" role="img" viewBox="0 0 156 156">
       <path
@@ -68,7 +70,7 @@ export const codeBlock: ICommand = {
       />
     </svg>
   ),
-  buttonProps: { 'aria-label': 'Insert Code Block', title: 'Insert Code Block' },
+  buttonProps: { 'aria-label': 'Insert Code Block (ctrl + shift + j)', title: 'Insert Code Block (ctrl + shift +j)' },
   execute: (tate: TextState, api: TextAreaTextApi) => {
     // Adjust the selection to encompass the whole word if the caret is inside one
     const newSelectionRange = selectWord({ text: tate.text, selection: tate.selection });

package/src/commands/comment.tsx

@@ -5,6 +5,8 @@ export const comment: ICommand = {
   name: 'comment',
   keyCommand: 'comment',
   shortcuts: 'ctrlcmd+/',
+  value: '<!-- -->',
+  buttonProps: { 'aria-label': 'Insert comment (ctrl + /)', title: 'Insert comment (ctrl + /)' },
   execute: (state: TextState, api: TextAreaTextApi) => {
     // Adjust the selection to encompass the whole word if the caret is inside one
     const newSelectionRange = selectWord({ text: state.text, selection: state.selection });
@@ -17,4 +19,10 @@ export const comment: ICommand = {
       end: state2.selection.end - 4,
     });
   },
+  icon: (
+    <svg role="img" viewBox="0 0 512 512" width="12" height="12">
+      <path fill="currentColor" d="M281 72H231oLuLFozwYpLrBi5VTa8sg7fDqKkeyD81V172H281V72Z" />
+      <path fill="currentColor" d="M287.817 501H213.333L298.667 334H438.857C438.857 334 438.857 333.021 438.857 308.308V187.875V74.6028C438.857 64.3818 438.857 67.2814 438.857 62.625C438.857 61.7594 439.31 62.625 426.667 62.625H256H73.1429C73.1429 65.4903 73.1429 77.3378 73.1429 79.8845V187.875V308.308C73.1429 311.005 73.1429 334 73.1429 334C73.1429 334 113.826 334 106.667 334H149.333H237.714V385.385H73.1429C53.7442 385.385 35.14 377.264 21.423 362.809C7.7061 348.355 0 328.75 0 308.308V77.0769C0 56.6349 7.7061 37.03 21.423 22.5753C35.14 8.12058 53.7442 0 73.1429 0H438.857C458.256 0 476.86 8.12058 490.577 22.5753C504.294 37.03 512 56.6349 512 77.0769V308.308C512 328.75 504.294 348.355 490.577 362.809C476.86 377.264 458.256 385.385 438.857 385.385H350.354L287.817 501Z" />
+    </svg>
+  )
 };

package/src/commands/fullscreen.tsx

@@ -5,8 +5,9 @@ import { ContextStore, ExecuteCommandState } from '../Context';
 export const fullscreen: ICommand = {
   name: 'fullscreen',
   keyCommand: 'fullscreen',
-  shortcuts: 'escape',
-  buttonProps: { 'aria-label': 'fullscreen', title: 'fullscreen' },
+  shortcuts: 'ctrlcmd+0',
+  value: 'fullscreen',
+  buttonProps: { 'aria-label': 'Toggle fullscreen (ctrl + 0)', title: 'Toggle fullscreen (ctrl+ 0)' },
   icon: (
     <svg width="12" height="12" viewBox="0 0 520 520">
       <path

package/src/commands/hr.tsx

@@ -5,7 +5,8 @@ export const hr: ICommand = {
   name: 'hr',
   keyCommand: 'hr',
   shortcuts: 'ctrlcmd+h',
-  buttonProps: { 'aria-label': 'Insert HR', title: 'Insert HR' },
+  value: '----------',
+  buttonProps: { 'aria-label': 'Insert HR (ctrl + h)', title: 'Insert HR (ctrl + h)' },
   icon: (
     <svg width="12" height="12" viewBox="0 0 175 175">
       <path

package/src/commands/image.tsx

@@ -5,8 +5,9 @@ import { selectWord } from '../utils/markdownUtils';
 export const image: ICommand = {
   name: 'image',
   keyCommand: 'image',
-  shortcuts: 'ctrlcmd+i',
-  buttonProps: { 'aria-label': 'Add image', title: 'Add image' },
+  shortcuts: 'ctrlcmd+k',
+  value: '![image]()',
+  buttonProps: { 'aria-label': 'Add image (ctrl + k)', title: 'Add image (ctrl + k)' },
   icon: (
     <svg width="12" height="12" viewBox="0 0 20 20">
       <path

package/src/commands/index.ts

@@ -1,11 +1,20 @@
 import React from 'react';
+import { ContextStore, ExecuteCommandState } from '../Context';
+import { insertTextAtPosition } from '../utils/InsertTextAtPosition';
 import { bold } from './bold';
 import { code, codeBlock } from './code';
+import { comment } from './comment';
+import { divider } from './divider';
+import { fullscreen } from './fullscreen';
+import { group } from './group';
+import { hr } from './hr';
+import { image } from './image';
 import { italic } from './italic';
 import { link } from './link';
-import { unorderedListCommand, orderedListCommand, checkedListCommand } from './list';
+import { checkedListCommand, orderedListCommand, unorderedListCommand } from './list';
+import { codeEdit, codeLive, codePreview } from './preview';
 import { quote } from './quote';
-import { hr } from './hr';
+import { strikethrough } from './strikeThrough';
 import { title } from './title';
 import { title1 } from './title1';
 import { title2 } from './title2';
@@ -13,15 +22,6 @@ import { title3 } from './title3';
 import { title4 } from './title4';
 import { title5 } from './title5';
 import { title6 } from './title6';
-import { comment } from './comment';
-import { group } from './group';
-import { divider } from './divider';
-import { codePreview, codeEdit, codeLive } from './preview';
-import { fullscreen } from './fullscreen';
-import { image } from './image';
-import { strikethrough } from './strikeThrough';
-import { insertTextAtPosition } from '../utils/InsertTextAtPosition';
-import { ContextStore, ExecuteCommandState } from '../Context';
 
 export interface CommandOrchestrator {
   executeCommand(command: ICommand): void;
@@ -84,7 +84,11 @@ const getCommands: () => ICommand[] = () => [
   italic,
   strikethrough,
   hr,
-  title,
+  group([title1, title2, title3, title4, title5, title6], {
+			name: "title",
+			groupName: "title",
+			buttonProps: { "aria-label": "Insert title", title: "Insert title" },
+		}),
   divider,
   link,
   quote,
@@ -163,7 +167,6 @@ class TextAreaCommandOrchestrator implements CommandOrchestrator {
 }
 
 export {
-  // Toolbars.
   title,
   title1,
   title2,
@@ -196,3 +199,4 @@ export {
   TextAreaCommandOrchestrator,
   TextAreaTextApi,
 };
+

package/src/commands/italic.tsx

@@ -6,7 +6,8 @@ export const italic: ICommand = {
   name: 'italic',
   keyCommand: 'italic',
   shortcuts: 'ctrlcmd+i',
-  buttonProps: { 'aria-label': 'Add italic text', title: 'Add italic text' },
+  value: '* *',
+  buttonProps: { 'aria-label': 'Add italic text (ctrl + i)', title: 'Add italic text (ctrl + i)' },
   icon: (
     <svg data-name="italic" width="12" height="12" role="img" viewBox="0 0 320 512">
       <path

package/src/commands/link.tsx

@@ -5,8 +5,9 @@ import { selectWord } from '../utils/markdownUtils';
 export const link: ICommand = {
   name: 'link',
   keyCommand: 'link',
-  shortcuts: 'ctrlcmd+k',
-  buttonProps: { 'aria-label': 'Add a link', title: 'Add a link' },
+  shortcuts: 'ctrlcmd+l',
+  value: '[](url)',
+  buttonProps: { 'aria-label': 'Add a link (ctrl + l)', title: 'Add a link (ctrl + l)' },
   icon: (
     <svg data-name="italic" width="12" height="12" role="img" viewBox="0 0 520 520">
       <path

package/src/commands/list.tsx

@@ -66,8 +66,12 @@ export const makeList = (state: TextState, api: TextAreaTextApi, insertBefore: s
 export const unorderedListCommand: ICommand = {
   name: 'unordered-list',
   keyCommand: 'list',
-  shortcuts: 'ctrl+shift+l',
-  buttonProps: { 'aria-label': 'Add unordered list', title: 'Add unordered list' },
+  shortcuts: 'ctrl+shift+u',
+  value: '- ',
+  buttonProps: {
+    'aria-label': 'Add unordered list (ctrl + shift + u)',
+    title: 'Add unordered list (ctrl + shift + u)',
+  },
   icon: (
     <svg data-name="unordered-list" width="12" height="12" viewBox="0 0 512 512">
       <path
@@ -85,7 +89,8 @@ export const orderedListCommand: ICommand = {
   name: 'ordered-list',
   keyCommand: 'list',
   shortcuts: 'ctrl+shift+o',
-  buttonProps: { 'aria-label': 'Add ordered list', title: 'Add ordered list' },
+  value: '1. ',
+  buttonProps: { 'aria-label': 'Add ordered list (ctrl + shift + o)', title: 'Add ordered list (ctrl + shift + o)' },
   icon: (
     <svg data-name="ordered-list" width="12" height="12" role="img" viewBox="0 0 512 512">
       <path
@@ -103,7 +108,8 @@ export const checkedListCommand: ICommand = {
   name: 'checked-list',
   keyCommand: 'list',
   shortcuts: 'ctrl+shift+c',
-  buttonProps: { 'aria-label': 'Add checked list', title: 'Add checked list' },
+  value: '- [x] ',
+  buttonProps: { 'aria-label': 'Add checked list (ctrl + shift + c)', title: 'Add checked list (ctrl + shift + c)' },
   icon: (
     <svg data-name="checked-list" width="12" height="12" role="img" viewBox="0 0 512 512">
       <path

package/src/commands/preview.tsx

@@ -5,7 +5,8 @@ export const codePreview: ICommand = {
   name: 'preview',
   keyCommand: 'preview',
   value: 'preview',
-  buttonProps: { 'aria-label': 'Preview code', title: 'Preview code' },
+  shortcuts: 'ctrlcmd+9',
+  buttonProps: { 'aria-label': 'Preview code (ctrl + 9)', title: 'Preview code (ctrl + 9)' },
   icon: (
     <svg width="12" height="12" viewBox="0 0 520 520">
       <polygon
@@ -25,7 +26,8 @@ export const codeEdit: ICommand = {
   name: 'edit',
   keyCommand: 'preview',
   value: 'edit',
-  buttonProps: { 'aria-label': 'Edit code', title: 'Edit code' },
+  shortcuts: 'ctrlcmd+7',
+  buttonProps: { 'aria-label': 'Edit code (ctrl + 7)', title: 'Edit code (ctrl + 7)' },
   icon: (
     <svg width="12" height="12" viewBox="0 0 520 520">
       <polygon fill="currentColor" points="0 71.293 0 122 319 122 319 397 0 397 0 449.707 372 449.413 372 71.293" />
@@ -42,7 +44,8 @@ export const codeLive: ICommand = {
   name: 'live',
   keyCommand: 'preview',
   value: 'live',
-  buttonProps: { 'aria-label': 'Live code', title: 'Live code' },
+  shortcuts: 'ctrlcmd+8',
+  buttonProps: { 'aria-label': 'Live code (ctrl + 8)', title: 'Live code (ctrl + 8)' },
   icon: (
     <svg width="12" height="12" viewBox="0 0 520 520">
       <polygon fill="currentColor" points="0 71.293 0 122 179 122 179 397 0 397 0 449.707 232 449.413 232 71.293" />

package/src/commands/quote.tsx

@@ -10,7 +10,7 @@ export const quote: ICommand = {
   name: 'quote',
   keyCommand: 'quote',
   shortcuts: 'ctrlcmd+q',
-  buttonProps: { 'aria-label': 'Insert a quote', title: 'Insert a quote' },
+  buttonProps: { 'aria-label': 'Insert a quote (ctrl + q)', title: 'Insert a quote (ctrl + q)' },
   icon: (
     <svg width="12" height="12" viewBox="0 0 520 520">
       <path

package/src/commands/strikeThrough.tsx

@@ -6,7 +6,11 @@ export const strikethrough: ICommand = {
   name: 'strikethrough',
   keyCommand: 'strikethrough',
   shortcuts: 'ctrl+shift+x',
-  buttonProps: { 'aria-label': 'Add strikethrough text', title: 'Add strikethrough text' },
+  buttonProps: {
+    'aria-label': 'Add strikethrough text (ctrl + shift + x)',
+    title: 'Add strikethrough text (ctrl + shift + x)',
+  },
+  value: '~~',
   icon: (
     <svg data-name="strikethrough" width="12" height="12" role="img" viewBox="0 0 512 512">
       <path

package/src/commands/title.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { ICommand } from './';
-import { title2 } from './title2';
+import { title1 } from './title1';
 
 export const title: ICommand = {
-  ...title2,
+  ...title1,
   icon: (
     <svg width="12" height="12" viewBox="0 0 520 520">
       <path

package/src/commands/title1.tsx

@@ -6,7 +6,8 @@ export const title1: ICommand = {
   name: 'title1',
   keyCommand: 'title1',
   shortcuts: 'ctrlcmd+1',
-  buttonProps: { 'aria-label': 'Insert title 1', title: 'Insert title 1' },
+  value: 'title1',
+  buttonProps: { 'aria-label': 'Insert title1 (ctrl + 1)', title: 'Insert title1 (ctrl + 1)' },
   icon: <div style={{ fontSize: 18, textAlign: 'left' }}>Title 1</div>,
   execute: (state: TextState, api: TextAreaTextApi) => {
     if (state.selection.start === 0 || /\n$/.test(state.text)) {

package/src/commands/title2.tsx

@@ -6,7 +6,8 @@ export const title2: ICommand = {
   name: 'title2',
   keyCommand: 'title2',
   shortcuts: 'ctrlcmd+2',
-  buttonProps: { 'aria-label': 'Insert title2', title: 'Insert title 2' },
+  value: 'title2',
+  buttonProps: { 'aria-label': 'Insert title2 (ctrl + 2)', title: 'Insert title2 (ctrl + 2)' },
   icon: <div style={{ fontSize: 16, textAlign: 'left' }}>Title 2</div>,
   execute: (state: TextState, api: TextAreaTextApi) => {
     if (state.selection.start === 0 || /\n$/.test(state.text)) {

package/src/commands/title3.tsx

@@ -6,7 +6,8 @@ export const title3: ICommand = {
   name: 'title3',
   keyCommand: 'title3',
   shortcuts: 'ctrlcmd+3',
-  buttonProps: { 'aria-label': 'Insert title3', title: 'Insert title 3' },
+  value: 'title3',
+  buttonProps: { 'aria-label': 'Insert title3 (ctrl + 3)', title: 'Insert title3 (ctrl + 3)' },
   icon: <div style={{ fontSize: 15, textAlign: 'left' }}>Title 3</div>,
   execute: (state: TextState, api: TextAreaTextApi) => {
     if (state.selection.start === 0 || /\n$/.test(state.text)) {

package/src/commands/title4.tsx

@@ -6,7 +6,8 @@ export const title4: ICommand = {
   name: 'title4',
   keyCommand: 'title4',
   shortcuts: 'ctrlcmd+4',
-  buttonProps: { 'aria-label': 'Insert title4', title: 'Insert title 4' },
+  value: 'title4',
+  buttonProps: { 'aria-label': 'Insert title4 (ctrl + 4)', title: 'Insert title4 (ctrl + 4)' },
   icon: <div style={{ fontSize: 14, textAlign: 'left' }}>Title 4</div>,
   execute: (state: TextState, api: TextAreaTextApi) => {
     if (state.selection.start === 0 || /\n$/.test(state.text)) {

package/src/commands/title5.tsx

@@ -6,7 +6,8 @@ export const title5: ICommand = {
   name: 'title5',
   keyCommand: 'title5',
   shortcuts: 'ctrlcmd+5',
-  buttonProps: { 'aria-label': 'Insert title5', title: 'Insert title 5' },
+  value: 'title5',
+  buttonProps: { 'aria-label': 'Insert title5 (ctrl + 5)', title: 'Insert title5 (ctrl + 5)' },
   icon: <div style={{ fontSize: 12, textAlign: 'left' }}>Title 5</div>,
   execute: (state: TextState, api: TextAreaTextApi) => {
     if (state.selection.start === 0 || /\n$/.test(state.text)) {

package/src/commands/title6.tsx

@@ -6,7 +6,8 @@ export const title6: ICommand = {
   name: 'title6',
   keyCommand: 'title6',
   shortcuts: 'ctrlcmd+6',
-  buttonProps: { 'aria-label': 'Insert title6', title: 'Insert title 6' },
+  value: 'title6',
+  buttonProps: { 'aria-label': 'Insert title6 (ctrl + 6)', title: 'Insert title6 (ctrl + 6)' },
   icon: <div style={{ fontSize: 12, textAlign: 'left' }}>Title 6</div>,
   execute: (state: TextState, api: TextAreaTextApi) => {
     if (state.selection.start === 0 || /\n$/.test(state.text)) {