@uiw/react-md-editor 3.18.0 → 3.18.2

package/src/Editor.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useReducer, useMemo, useRef, useImperativeHandle, CSSProperties } from 'react';
+import React, { useEffect, useReducer, useMemo, useRef, useImperativeHandle, CSSProperties, PropsWithRef } from 'react';
 import MarkdownPreview, { MarkdownPreviewProps } from '@uiw/react-markdown-preview';
 import TextArea, { ITextAreaProps } from './components/TextArea';
 import Toolbar from './components/Toolbar';
@@ -298,14 +298,11 @@ const InternalMDEditor = (
   };
 
   const previewClassName = `${prefixCls}-preview ${previewOptions.className || ''}`;
+  const handlePreviewScroll = (e: React.UIEvent<HTMLDivElement, UIEvent>) => handleScroll(e, 'preview');
   let mdPreview = useMemo(
     () => (
       <div ref={previewRef} className={previewClassName}>
-        <MarkdownPreview
-          {...previewOptions}
-          onScroll={(e) => handleScroll(e, 'preview')}
-          source={state.markdown || ''}
-        />
+        <MarkdownPreview {...previewOptions} onScroll={handlePreviewScroll} source={state.markdown || ''} />
       </div>
     ),
     [previewClassName, previewOptions, state.markdown],
@@ -313,26 +310,19 @@ const InternalMDEditor = (
   const preview = components?.preview && components?.preview(state.markdown || '', state, dispatch);
   if (preview && React.isValidElement(preview)) {
     mdPreview = (
-      <div className={previewClassName} ref={previewRef} onScroll={(e) => handleScroll(e, 'preview')}>
+      <div className={previewClassName} ref={previewRef} onScroll={handlePreviewScroll}>
         {preview}
       </div>
     );
   }
 
+  const containerStyle = { ...other.style, height: state.height || '100%' };
+  const containerClick = () => dispatch({ barPopup: { ...setGroupPopFalse(state.barPopup) } });
+  const dragBarChange = (newHeight: number) => dispatch({ height: newHeight });
+
   return (
     <EditorContext.Provider value={{ ...state, dispatch }}>
-      <div
-        ref={container}
-        className={cls}
-        {...other}
-        onClick={() => {
-          dispatch({ barPopup: { ...setGroupPopFalse(state.barPopup) } });
-        }}
-        style={{
-          ...other.style,
-          height: state.height || '100%',
-        }}
-      >
+      <div ref={container} className={cls} {...other} onClick={containerClick} style={containerStyle}>
         {!hideToolbar && !toolbarBottom && (
           <Toolbar prefixCls={prefixCls} overflow={overflow} toolbarBottom={toolbarBottom} />
         )}
@@ -361,9 +351,7 @@ const InternalMDEditor = (
             height={state.height as number}
             maxHeight={maxHeight!}
             minHeight={minHeight!}
-            onChange={(newHeight) => {
-              dispatch({ height: newHeight });
-            }}
+            onChange={dragBarChange}
           />
         )}
         {!hideToolbar && toolbarBottom && (
@@ -374,12 +362,10 @@ const InternalMDEditor = (
   );
 };
 
-const mdEditor = React.forwardRef<ContextStore, MDEditorProps>(InternalMDEditor);
+type Editor = React.FC<PropsWithRef<MDEditorProps>> & { Markdown: typeof MarkdownPreview };
 
-type MDEditor = typeof mdEditor & {
-  Markdown: typeof MarkdownPreview;
-};
+const mdEditor: Editor = React.forwardRef(InternalMDEditor) as unknown as Editor;
 
-(mdEditor as MDEditor).Markdown = MarkdownPreview;
+mdEditor.Markdown = MarkdownPreview;
 
-export default mdEditor as MDEditor;
+export default mdEditor;

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 });

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/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)) {