@uiw/react-md-editor 3.18.1 → 3.18.2

package/lib/commands/title5.js.map

@@ -5,6 +5,7 @@
     "name",
     "keyCommand",
     "shortcuts",
+    "value",
     "buttonProps",
     "title",
     "icon",
@@ -25,7 +26,7 @@
     "../../src/commands/title5.tsx"
   ],
   "sourcesContent": [
-    "import * as React from 'react';\nimport { insertAtLineStart } from '../utils/InsertTextAtPosition';\nimport { ICommand, TextState, TextAreaTextApi } from './';\n\nexport const title5: ICommand = {\n  name: 'title5',\n  keyCommand: 'title5',\n  shortcuts: 'ctrlcmd+5',\n  buttonProps: { 'aria-label': 'Insert title5', title: 'Insert title 5' },\n  icon: <div style={{ fontSize: 12, textAlign: 'left' }}>Title 5</div>,\n  execute: (state: TextState, api: TextAreaTextApi) => {\n    if (state.selection.start === 0 || /\\n$/.test(state.text)) {\n      api.replaceSelection('##### ');\n    } else {\n      insertAtLineStart('##### ', state.selection.start, api.textArea);\n    }\n  },\n};\n"
+    "import * as React from 'react';\nimport { insertAtLineStart } from '../utils/InsertTextAtPosition';\nimport { ICommand, TextState, TextAreaTextApi } from './';\n\nexport const title5: ICommand = {\n  name: 'title5',\n  keyCommand: 'title5',\n  shortcuts: 'ctrlcmd+5',\n  value: 'title5',\n  buttonProps: { 'aria-label': 'Insert title5 (ctrl + 5)', title: 'Insert title5 (ctrl + 5)' },\n  icon: <div style={{ fontSize: 12, textAlign: 'left' }}>Title 5</div>,\n  execute: (state: TextState, api: TextAreaTextApi) => {\n    if (state.selection.start === 0 || /\\n$/.test(state.text)) {\n      api.replaceSelection('##### ');\n    } else {\n      insertAtLineStart('##### ', state.selection.start, api.textArea);\n    }\n  },\n};\n"
   ],
-  "mappings": ";;;;;;;;;AAAA;;AACA;;;;AAGO,IAAMA,MAAgB,GAAG;EAC9BC,IAAI,EAAE,QADwB;EAE9BC,UAAU,EAAE,QAFkB;EAG9BC,SAAS,EAAE,WAHmB;EAI9BC,WAAW,EAAE;IAAE,cAAc,eAAhB;IAAiCC,KAAK,EAAE;EAAxC,CAJiB;EAK9BC,IAAI,eAAE;IAAK,KAAK,EAAE;MAAEC,QAAQ,EAAE,EAAZ;MAAgBC,SAAS,EAAE;IAA3B,CAAZ;IAAA;EAAA,EALwB;EAM9BC,OAAO,EAAE,iBAACC,KAAD,EAAmBC,GAAnB,EAA4C;IACnD,IAAID,KAAK,CAACE,SAAN,CAAgBC,KAAhB,KAA0B,CAA1B,IAA+B,MAAMC,IAAN,CAAWJ,KAAK,CAACK,IAAjB,CAAnC,EAA2D;MACzDJ,GAAG,CAACK,gBAAJ,CAAqB,QAArB;IACD,CAFD,MAEO;MACL,IAAAC,uCAAA,EAAkB,QAAlB,EAA4BP,KAAK,CAACE,SAAN,CAAgBC,KAA5C,EAAmDF,GAAG,CAACO,QAAvD;IACD;EACF;AAZ6B,CAAzB"
+  "mappings": ";;;;;;;;;AAAA;;AACA;;;;AAGO,IAAMA,MAAgB,GAAG;EAC9BC,IAAI,EAAE,QADwB;EAE9BC,UAAU,EAAE,QAFkB;EAG9BC,SAAS,EAAE,WAHmB;EAI9BC,KAAK,EAAE,QAJuB;EAK9BC,WAAW,EAAE;IAAE,cAAc,0BAAhB;IAA4CC,KAAK,EAAE;EAAnD,CALiB;EAM9BC,IAAI,eAAE;IAAK,KAAK,EAAE;MAAEC,QAAQ,EAAE,EAAZ;MAAgBC,SAAS,EAAE;IAA3B,CAAZ;IAAA;EAAA,EANwB;EAO9BC,OAAO,EAAE,iBAACC,KAAD,EAAmBC,GAAnB,EAA4C;IACnD,IAAID,KAAK,CAACE,SAAN,CAAgBC,KAAhB,KAA0B,CAA1B,IAA+B,MAAMC,IAAN,CAAWJ,KAAK,CAACK,IAAjB,CAAnC,EAA2D;MACzDJ,GAAG,CAACK,gBAAJ,CAAqB,QAArB;IACD,CAFD,MAEO;MACL,IAAAC,uCAAA,EAAkB,QAAlB,EAA4BP,KAAK,CAACE,SAAN,CAAgBC,KAA5C,EAAmDF,GAAG,CAACO,QAAvD;IACD;EACF;AAb6B,CAAzB"
 }

package/lib/commands/title6.js

@@ -17,9 +17,10 @@ var title6 = {
   name: 'title6',
   keyCommand: 'title6',
   shortcuts: 'ctrlcmd+6',
+  value: 'title6',
   buttonProps: {
-    'aria-label': 'Insert title6',
-    title: 'Insert title 6'
+    'aria-label': 'Insert title6 (ctrl + 6)',
+    title: 'Insert title6 (ctrl + 6)'
   },
   icon: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     style: {

package/lib/commands/title6.js.map

@@ -5,6 +5,7 @@
     "name",
     "keyCommand",
     "shortcuts",
+    "value",
     "buttonProps",
     "title",
     "icon",
@@ -25,7 +26,7 @@
     "../../src/commands/title6.tsx"
   ],
   "sourcesContent": [
-    "import * as React from 'react';\nimport { insertAtLineStart } from '../utils/InsertTextAtPosition';\nimport { ICommand, TextState, TextAreaTextApi } from './';\n\nexport const title6: ICommand = {\n  name: 'title6',\n  keyCommand: 'title6',\n  shortcuts: 'ctrlcmd+6',\n  buttonProps: { 'aria-label': 'Insert title6', title: 'Insert title 6' },\n  icon: <div style={{ fontSize: 12, textAlign: 'left' }}>Title 6</div>,\n  execute: (state: TextState, api: TextAreaTextApi) => {\n    if (state.selection.start === 0 || /\\n$/.test(state.text)) {\n      api.replaceSelection('###### ');\n    } else {\n      insertAtLineStart('###### ', state.selection.start, api.textArea);\n    }\n  },\n};\n"
+    "import * as React from 'react';\nimport { insertAtLineStart } from '../utils/InsertTextAtPosition';\nimport { ICommand, TextState, TextAreaTextApi } from './';\n\nexport const title6: ICommand = {\n  name: 'title6',\n  keyCommand: 'title6',\n  shortcuts: 'ctrlcmd+6',\n  value: 'title6',\n  buttonProps: { 'aria-label': 'Insert title6 (ctrl + 6)', title: 'Insert title6 (ctrl + 6)' },\n  icon: <div style={{ fontSize: 12, textAlign: 'left' }}>Title 6</div>,\n  execute: (state: TextState, api: TextAreaTextApi) => {\n    if (state.selection.start === 0 || /\\n$/.test(state.text)) {\n      api.replaceSelection('###### ');\n    } else {\n      insertAtLineStart('###### ', state.selection.start, api.textArea);\n    }\n  },\n};\n"
   ],
-  "mappings": ";;;;;;;;;AAAA;;AACA;;;;AAGO,IAAMA,MAAgB,GAAG;EAC9BC,IAAI,EAAE,QADwB;EAE9BC,UAAU,EAAE,QAFkB;EAG9BC,SAAS,EAAE,WAHmB;EAI9BC,WAAW,EAAE;IAAE,cAAc,eAAhB;IAAiCC,KAAK,EAAE;EAAxC,CAJiB;EAK9BC,IAAI,eAAE;IAAK,KAAK,EAAE;MAAEC,QAAQ,EAAE,EAAZ;MAAgBC,SAAS,EAAE;IAA3B,CAAZ;IAAA;EAAA,EALwB;EAM9BC,OAAO,EAAE,iBAACC,KAAD,EAAmBC,GAAnB,EAA4C;IACnD,IAAID,KAAK,CAACE,SAAN,CAAgBC,KAAhB,KAA0B,CAA1B,IAA+B,MAAMC,IAAN,CAAWJ,KAAK,CAACK,IAAjB,CAAnC,EAA2D;MACzDJ,GAAG,CAACK,gBAAJ,CAAqB,SAArB;IACD,CAFD,MAEO;MACL,IAAAC,uCAAA,EAAkB,SAAlB,EAA6BP,KAAK,CAACE,SAAN,CAAgBC,KAA7C,EAAoDF,GAAG,CAACO,QAAxD;IACD;EACF;AAZ6B,CAAzB"
+  "mappings": ";;;;;;;;;AAAA;;AACA;;;;AAGO,IAAMA,MAAgB,GAAG;EAC9BC,IAAI,EAAE,QADwB;EAE9BC,UAAU,EAAE,QAFkB;EAG9BC,SAAS,EAAE,WAHmB;EAI9BC,KAAK,EAAE,QAJuB;EAK9BC,WAAW,EAAE;IAAE,cAAc,0BAAhB;IAA4CC,KAAK,EAAE;EAAnD,CALiB;EAM9BC,IAAI,eAAE;IAAK,KAAK,EAAE;MAAEC,QAAQ,EAAE,EAAZ;MAAgBC,SAAS,EAAE;IAA3B,CAAZ;IAAA;EAAA,EANwB;EAO9BC,OAAO,EAAE,iBAACC,KAAD,EAAmBC,GAAnB,EAA4C;IACnD,IAAID,KAAK,CAACE,SAAN,CAAgBC,KAAhB,KAA0B,CAA1B,IAA+B,MAAMC,IAAN,CAAWJ,KAAK,CAACK,IAAjB,CAAnC,EAA2D;MACzDJ,GAAG,CAACK,gBAAJ,CAAqB,SAArB;IACD,CAFD,MAEO;MACL,IAAAC,uCAAA,EAAkB,SAAlB,EAA6BP,KAAK,CAACE,SAAN,CAAgBC,KAA7C,EAAoDF,GAAG,CAACO,QAAxD;IACD;EACF;AAb6B,CAAzB"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uiw/react-md-editor",
-  "version": "3.18.1",
+  "version": "3.18.2",
   "description": "A markdown editor with preview, implemented with React.js and TypeScript.",
   "homepage": "https://uiwjs.github.io/react-md-editor/",
   "author": "kenny wang <wowohoo@qq.com>",

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