@uiw/react-md-editor 3.23.6 → 3.24.1

package/src/commands/index.ts

@@ -22,6 +22,9 @@ import { title3 } from './title3';
 import { title4 } from './title4';
 import { title5 } from './title5';
 import { title6 } from './title6';
+import { table } from './table';
+import { issue } from './issue';
+import { help } from './help';
 
 export interface CommandOrchestrator {
   executeCommand(command: ICommand): void;
@@ -48,7 +51,9 @@ export interface ICommandBase<T> {
   shortcuts?: string;
   groupName?: string;
   icon?: React.ReactElement;
-  value?: T;
+  value?: string;
+  prefix?: string;
+  suffix?: string;
   position?: 'right';
   liProps?: React.LiHTMLAttributes<HTMLLIElement>;
   buttonProps?: React.ButtonHTMLAttributes<HTMLButtonElement> | null;
@@ -99,10 +104,13 @@ const getCommands: () => ICommand[] = () => [
   codeBlock,
   comment,
   image,
+  table,
   divider,
   unorderedListCommand,
   orderedListCommand,
   checkedListCommand,
+  divider,
+  help,
 ];
 
 const getExtraCommands: () => ICommand[] = () => [codeEdit, codeLive, codePreview, divider, fullscreen];
@@ -195,6 +203,9 @@ export {
   unorderedListCommand,
   orderedListCommand,
   checkedListCommand,
+  table,
+  issue,
+  help,
   codeEdit,
   codeLive,
   codePreview,

package/src/commands/issue.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { ICommand, ExecuteState, TextAreaTextApi } from './';
+import { selectWord, executeCommand } from '../utils/markdownUtils';
+
+export const issue: ICommand = {
+  name: 'issue',
+  keyCommand: 'issue',
+  prefix: '#',
+  suffix: '',
+  buttonProps: { 'aria-label': 'Add issue', title: 'Add issue' },
+  icon: (
+    <svg role="img" width="12" height="12" viewBox="0 0 448 512">
+      <path
+        fill="currentColor"
+        d="M181.3 32.4c17.4 2.9 29.2 19.4 26.3 36.8L197.8 128h95.1l11.5-69.3c2.9-17.4 19.4-29.2 36.8-26.3s29.2 19.4 26.3 36.8L357.8 128H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H347.1L325.8 320H384c17.7 0 32 14.3 32 32s-14.3 32-32 32H315.1l-11.5 69.3c-2.9 17.4-19.4 29.2-36.826.3s-29.2-19.4-26.3-36.8l9.8-58.7H155.1l-11.5 69.3c-2.9 17.4-19.4 29.2-36.8 26.3s-29.2-19.4-26.3-36.8L90.2 384H32c-17.7 0-32-14.3-32-32s14.3-32 32-32h68.9l21.3-128H64c-17.7 0-32-14.3-32-32s14.3-32 32-32h68.9l11.5-69.3c2.9-17.4 19.4-29.2 36.8-26.3zM187.1 192L165.8320h95.1l21.3-128H187.1z"
+        //Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com
+      />
+    </svg>
+  ),
+  execute: (state: ExecuteState, api: TextAreaTextApi) => {
+    const newSelectionRange = selectWord({
+      text: state.text,
+      selection: state.selection,
+      prefix: state.command.prefix!,
+      suffix: state.command.suffix,
+    });
+    const state1 = api.setSelectionRange(newSelectionRange);
+    executeCommand({
+      api,
+      selectedText: state1.selectedText,
+      selection: state.selection,
+      prefix: state.command.prefix!,
+      suffix: state.command.suffix,
+    });
+  },
+};

package/src/commands/italic.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 import { ICommand, ExecuteState, TextAreaTextApi } from './';
-import { selectWord } from '../utils/markdownUtils';
+import { selectWord, executeCommand } from '../utils/markdownUtils';
 
 export const italic: ICommand = {
   name: 'italic',
   keyCommand: 'italic',
   shortcuts: 'ctrlcmd+i',
-  value: '*{{text}}*',
+  prefix: '*',
   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">
@@ -17,16 +17,17 @@ export const italic: ICommand = {
     </svg>
   ),
   execute: (state: ExecuteState, 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 });
+    const newSelectionRange = selectWord({
+      text: state.text,
+      selection: state.selection,
+      prefix: state.command.prefix!,
+    });
     const state1 = api.setSelectionRange(newSelectionRange);
-    // Replaces the current selection with the bold mark up
-    const val = state.command.value || '';
-    api.replaceSelection(val.replace(/({{text}})/gi, state1.selectedText));
-
-    const start = state1.selection.start + val.indexOf('{{text}}');
-    const end = state1.selection.start + val.indexOf('{{text}}') + (state1.selection.end - state1.selection.start);
-    // Adjust the selection to not contain the **
-    api.setSelectionRange({ start, end });
+    executeCommand({
+      api,
+      selectedText: state1.selectedText,
+      selection: state.selection,
+      prefix: state.command.prefix!,
+    });
   },
 };

package/src/commands/link.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
 import { ICommand, ExecuteState, TextAreaTextApi } from './';
-import { selectWord } from '../utils/markdownUtils';
+import { selectWord, executeCommand } from '../utils/markdownUtils';
 
 export const link: ICommand = {
   name: 'link',
   keyCommand: 'link',
   shortcuts: 'ctrlcmd+l',
-  value: '[{{text}}](URL Here)',
+  prefix: '[',
+  suffix: '](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">
@@ -17,15 +18,41 @@ export const link: ICommand = {
     </svg>
   ),
   execute: (state: ExecuteState, 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 });
-    const state1 = api.setSelectionRange(newSelectionRange);
-    const val = state.command.value || '';
-    // Replaces the current selection with the bold mark up
-    api.replaceSelection(val.replace(/({{text}})/gi, state1.selectedText));
-    const start = state1.selection.start + val.indexOf('{{text}}');
-    const end = state1.selection.start + val.indexOf('{{text}}') + (state1.selection.end - state1.selection.start);
-    // Adjust the selection to not contain the **
-    api.setSelectionRange({ start, end });
+    let newSelectionRange = selectWord({
+      text: state.text,
+      selection: state.selection,
+      prefix: state.command.prefix!,
+      suffix: state.command.suffix,
+    });
+    let state1 = api.setSelectionRange(newSelectionRange);
+    if (state1.selectedText.includes('http') || state1.selectedText.includes('www')) {
+      newSelectionRange = selectWord({ text: state.text, selection: state.selection, prefix: '[](', suffix: ')' });
+      state1 = api.setSelectionRange(newSelectionRange);
+      executeCommand({
+        api,
+        selectedText: state1.selectedText,
+        selection: state.selection,
+        prefix: '[](',
+        suffix: ')',
+      });
+    } else {
+      if (state1.selectedText.length === 0) {
+        executeCommand({
+          api,
+          selectedText: state1.selectedText,
+          selection: state.selection,
+          prefix: '[title',
+          suffix: '](url)',
+        });
+      } else {
+        executeCommand({
+          api,
+          selectedText: state1.selectedText,
+          selection: state.selection,
+          prefix: state.command.prefix!,
+          suffix: state.command.suffix,
+        });
+      }
+    }
   },
 };

package/src/commands/list.tsx

@@ -1,43 +1,15 @@
 import React from 'react';
-import { ICommand, TextState, TextAreaTextApi } from './';
+import { ICommand, ExecuteState, TextAreaTextApi } from './';
 import {
   selectWord,
   getBreaksNeededForEmptyLineBefore,
   getBreaksNeededForEmptyLineAfter,
+  insertBeforeEachLine,
+  AlterLineFunction,
 } from '../utils/markdownUtils';
 
-export type AlterLineFunction = (line: string, index: number) => string;
-
-/**
- * Inserts insertionString before each line
- */
-export function insertBeforeEachLine(
-  selectedText: string,
-  insertBefore: string | AlterLineFunction,
-): { modifiedText: string; insertionLength: number } {
-  const lines = selectedText.split(/\n/);
-
-  let insertionLength = 0;
-  const modifiedText = lines
-    .map((item, index) => {
-      if (typeof insertBefore === 'string') {
-        insertionLength += insertBefore.length;
-        return insertBefore + item;
-      } else if (typeof insertBefore === 'function') {
-        const insertionResult = insertBefore(item, index);
-        insertionLength += insertionResult.length;
-        return insertBefore(item, index) + item;
-      }
-      throw Error('insertion is expected to be either a string or a function');
-    })
-    .join('\n');
-
-  return { modifiedText, insertionLength };
-}
-
-export const makeList = (state: TextState, api: TextAreaTextApi, insertBefore: string | AlterLineFunction) => {
-  // Adjust the selection to encompass the whole word if the caret is inside one
-  const newSelectionRange = selectWord({ text: state.text, selection: state.selection });
+export const makeList = (state: ExecuteState, api: TextAreaTextApi, insertBefore: string | AlterLineFunction) => {
+  const newSelectionRange = selectWord({ text: state.text, selection: state.selection, prefix: state.command.prefix! });
   const state1 = api.setSelectionRange(newSelectionRange);
 
   const breaksBeforeCount = getBreaksNeededForEmptyLineBefore(state1.text, state1.selection.start);
@@ -46,28 +18,38 @@ export const makeList = (state: TextState, api: TextAreaTextApi, insertBefore: s
   const breaksAfterCount = getBreaksNeededForEmptyLineAfter(state1.text, state1.selection.end);
   const breaksAfter = Array(breaksAfterCount + 1).join('\n');
 
-  const modifiedText = insertBeforeEachLine(state1.selectedText, insertBefore);
-
-  api.replaceSelection(`${breaksBefore}${modifiedText.modifiedText}${breaksAfter}`);
-
-  // Specifically when the text has only one line, we can exclude the "- ", for example, from the selection
-  const oneLinerOffset = state1.selectedText.indexOf('\n') === -1 ? modifiedText.insertionLength : 0;
-
-  const selectionStart = state1.selection.start + breaksBeforeCount + oneLinerOffset;
-  const selectionEnd = selectionStart + modifiedText.modifiedText.length - oneLinerOffset;
+  const { modifiedText, insertionLength } = insertBeforeEachLine(state1.selectedText, insertBefore);
+  if (insertionLength < 0) {
+    // Remove
+    let selectionStart = state1.selection.start;
+    let selectionEnd = state1.selection.end;
+    if (state1.selection.start > 0 && state.text.slice(state1.selection.start - 1, state1.selection.start) === '\n') {
+      selectionStart -= 1;
+    }
+    if (
+      state1.selection.end < state.text.length - 1 &&
+      state.text.slice(state1.selection.end, state1.selection.end + 1) === '\n'
+    ) {
+      selectionEnd += 1;
+    }
 
-  // Adjust the selection to not contain the **
-  api.setSelectionRange({
-    start: selectionStart,
-    end: selectionEnd,
-  });
+    api.setSelectionRange({ start: selectionStart, end: selectionEnd });
+    api.replaceSelection(`${modifiedText}`);
+    api.setSelectionRange({ start: selectionStart, end: selectionStart + modifiedText.length });
+  } else {
+    // Add
+    api.replaceSelection(`${breaksBefore}${modifiedText}${breaksAfter}`);
+    const selectionStart = state1.selection.start + breaksBeforeCount;
+    const selectionEnd = selectionStart + modifiedText.length;
+    api.setSelectionRange({ start: selectionStart, end: selectionEnd });
+  }
 };
 
 export const unorderedListCommand: ICommand = {
   name: 'unordered-list',
   keyCommand: 'list',
   shortcuts: 'ctrl+shift+u',
-  value: '- ',
+  prefix: '- ',
   buttonProps: {
     'aria-label': 'Add unordered list (ctrl + shift + u)',
     title: 'Add unordered list (ctrl + shift + u)',
@@ -80,7 +62,7 @@ export const unorderedListCommand: ICommand = {
       />
     </svg>
   ),
-  execute: (state: TextState, api: TextAreaTextApi) => {
+  execute: (state: ExecuteState, api: TextAreaTextApi) => {
     makeList(state, api, '- ');
   },
 };
@@ -89,7 +71,7 @@ export const orderedListCommand: ICommand = {
   name: 'ordered-list',
   keyCommand: 'list',
   shortcuts: 'ctrl+shift+o',
-  value: '1. ',
+  prefix: '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">
@@ -99,7 +81,7 @@ export const orderedListCommand: ICommand = {
       />
     </svg>
   ),
-  execute: (state: TextState, api: TextAreaTextApi) => {
+  execute: (state: ExecuteState, api: TextAreaTextApi) => {
     makeList(state, api, (item, index) => `${index + 1}. `);
   },
 };
@@ -108,7 +90,7 @@ export const checkedListCommand: ICommand = {
   name: 'checked-list',
   keyCommand: 'list',
   shortcuts: 'ctrl+shift+c',
-  value: '- [x] ',
+  prefix: '- [ ] ',
   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">
@@ -118,7 +100,7 @@ export const checkedListCommand: ICommand = {
       />
     </svg>
   ),
-  execute: (state: TextState, api: TextAreaTextApi) => {
+  execute: (state: ExecuteState, api: TextAreaTextApi) => {
     makeList(state, api, (item, index) => `- [ ] `);
   },
 };

package/src/commands/quote.tsx

@@ -1,15 +1,17 @@
 import React from 'react';
-import { ICommand, TextState, TextAreaTextApi } from './';
+import { ICommand, ExecuteState, TextAreaTextApi } from './';
 import {
   getBreaksNeededForEmptyLineBefore,
   getBreaksNeededForEmptyLineAfter,
   selectWord,
+  insertBeforeEachLine,
 } from '../utils/markdownUtils';
 
 export const quote: ICommand = {
   name: 'quote',
   keyCommand: 'quote',
   shortcuts: 'ctrlcmd+q',
+  prefix: '> ',
   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">
@@ -19,9 +21,12 @@ export const quote: ICommand = {
       />
     </svg>
   ),
-  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 });
+  execute: (state: ExecuteState, api: TextAreaTextApi) => {
+    const newSelectionRange = selectWord({
+      text: state.text,
+      selection: state.selection,
+      prefix: state.command.prefix!,
+    });
     const state1 = api.setSelectionRange(newSelectionRange);
     const breaksBeforeCount = getBreaksNeededForEmptyLineBefore(state1.text, state1.selection.start);
     const breaksBefore = Array(breaksBeforeCount + 1).join('\n');
@@ -29,15 +34,11 @@ export const quote: ICommand = {
     const breaksAfterCount = getBreaksNeededForEmptyLineAfter(state1.text, state1.selection.end);
     const breaksAfter = Array(breaksAfterCount + 1).join('\n');
 
-    // Replaces the current selection with the quote mark up
-    api.replaceSelection(`${breaksBefore}> ${state1.selectedText}${breaksAfter}`);
-
-    const selectionStart = state1.selection.start + breaksBeforeCount + 2;
-    const selectionEnd = selectionStart + state1.selectedText.length;
+    const modifiedText = insertBeforeEachLine(state1.selectedText, state.command.prefix!);
+    api.replaceSelection(`${breaksBefore}${modifiedText.modifiedText}${breaksAfter}`);
 
-    api.setSelectionRange({
-      start: selectionStart,
-      end: selectionEnd,
-    });
+    const selectionStart = state1.selection.start + breaksBeforeCount;
+    const selectionEnd = selectionStart + modifiedText.modifiedText.length;
+    api.setSelectionRange({ start: selectionStart, end: selectionEnd });
   },
 };

package/src/commands/strikeThrough.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ICommand, ExecuteState, TextAreaTextApi } from './';
-import { selectWord } from '../utils/markdownUtils';
+import { selectWord, executeCommand } from '../utils/markdownUtils';
 
 export const strikethrough: ICommand = {
   name: 'strikethrough',
@@ -10,7 +10,7 @@ export const strikethrough: ICommand = {
     'aria-label': 'Add strikethrough text (ctrl + shift + x)',
     title: 'Add strikethrough text (ctrl + shift + x)',
   },
-  value: '~~{{text}}~~',
+  prefix: '~~',
   icon: (
     <svg data-name="strikethrough" width="12" height="12" role="img" viewBox="0 0 512 512">
       <path
@@ -20,16 +20,17 @@ export const strikethrough: ICommand = {
     </svg>
   ),
   execute: (state: ExecuteState, 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 });
+    const newSelectionRange = selectWord({
+      text: state.text,
+      selection: state.selection,
+      prefix: state.command.prefix!,
+    });
     const state1 = api.setSelectionRange(newSelectionRange);
-    // Replaces the current selection with the bold mark up
-    const val = state.command.value || '';
-    api.replaceSelection(val.replace(/({{text}})/gi, state1.selectedText));
-
-    const start = state1.selection.start + val.indexOf('{{text}}');
-    const end = state1.selection.start + val.indexOf('{{text}}') + (state1.selection.end - state1.selection.start);
-    // Adjust the selection to not contain the **
-    api.setSelectionRange({ start, end });
+    executeCommand({
+      api,
+      selectedText: state1.selectedText,
+      selection: state.selection,
+      prefix: state.command.prefix!,
+    });
   },
 };

package/src/commands/table.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { ICommand, ExecuteState, TextAreaTextApi } from './';
+import { selectWord, executeCommand } from '../utils/markdownUtils';
+
+export const table: ICommand = {
+  name: 'table',
+  keyCommand: 'table',
+  prefix: '\n| Header | Header |\n|--------|--------|\n| Cell | Cell |\n| Cell | Cell |\n| Cell | Cell |\n\n',
+  suffix: '',
+  buttonProps: { 'aria-label': 'Add table', title: 'Add table' },
+  icon: (
+    <svg role="img" width="12" height="12" viewBox="0 0 512 512">
+      <path
+        fill="currentColor"
+        d="M64 256V160H224v96H64zm0 64H224v96H64V320zm224 96V320H448v96H288zM448 256H288V160H448v96zM64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64z"
+        //Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com
+      />
+    </svg>
+  ),
+  execute: (state: ExecuteState, api: TextAreaTextApi) => {
+    const newSelectionRange = selectWord({
+      text: state.text,
+      selection: state.selection,
+      prefix: state.command.prefix!,
+      suffix: state.command.suffix,
+    });
+    let state1 = api.setSelectionRange(newSelectionRange);
+    if (
+      state1.selectedText.length >= state.command.prefix!.length + state.command.suffix!.length &&
+      state1.selectedText.startsWith(state.command.prefix!)
+    ) {
+      // Remove
+      executeCommand({
+        api,
+        selectedText: state1.selectedText,
+        selection: state.selection,
+        prefix: state.command.prefix!,
+        suffix: state.command.suffix,
+      });
+    } else {
+      // Add
+      state1 = api.setSelectionRange({ start: state.selection.start, end: state.selection.start });
+      executeCommand({
+        api,
+        selectedText: state1.selectedText,
+        selection: state.selection,
+        prefix: state.command.prefix!,
+        suffix: state.command.suffix,
+      });
+    }
+  },
+};

package/src/commands/title.tsx

@@ -1,6 +1,23 @@
 import React from 'react';
-import { ICommand } from './';
+import { ICommand, ExecuteState, TextAreaTextApi } from './';
 import { title1 } from './title1';
+import { selectLine, executeCommand } from '../utils/markdownUtils';
+
+export function titleExecute({
+  state,
+  api,
+  prefix,
+  suffix = prefix,
+}: {
+  state: ExecuteState;
+  api: TextAreaTextApi;
+  prefix: string;
+  suffix?: string;
+}) {
+  const newSelectionRange = selectLine({ text: state.text, selection: state.selection });
+  const state1 = api.setSelectionRange(newSelectionRange);
+  executeCommand({ api, selectedText: state1.selectedText, selection: state.selection, prefix, suffix });
+}
 
 export const title: ICommand = {
   ...title1,

package/src/commands/title1.tsx

@@ -1,19 +1,16 @@
 import React from 'react';
-import { insertAtLineStart } from '../utils/InsertTextAtPosition';
-import { ICommand, TextState, TextAreaTextApi } from './';
+import { titleExecute } from '../commands/title';
+import { ICommand, ExecuteState, TextAreaTextApi } from './';
 
 export const title1: ICommand = {
   name: 'title1',
   keyCommand: 'title1',
   shortcuts: 'ctrlcmd+1',
-  value: 'title1',
+  prefix: '# ',
+  suffix: '',
   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)) {
-      api.replaceSelection('# ');
-    } else {
-      insertAtLineStart('# ', state.selection.start, api.textArea);
-    }
+  execute: (state: ExecuteState, api: TextAreaTextApi) => {
+    titleExecute({ state, api, prefix: state.command.prefix!, suffix: state.command.suffix });
   },
 };

package/src/commands/title2.tsx

@@ -1,19 +1,16 @@
 import React from 'react';
-import { insertAtLineStart } from '../utils/InsertTextAtPosition';
-import { ICommand, TextState, TextAreaTextApi } from './';
+import { titleExecute } from '../commands/title';
+import { ICommand, ExecuteState, TextAreaTextApi } from './';
 
 export const title2: ICommand = {
   name: 'title2',
   keyCommand: 'title2',
   shortcuts: 'ctrlcmd+2',
-  value: 'title2',
+  prefix: '## ',
+  suffix: '',
   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)) {
-      api.replaceSelection('## ');
-    } else {
-      insertAtLineStart('## ', state.selection.start, api.textArea);
-    }
+  execute: (state: ExecuteState, api: TextAreaTextApi) => {
+    titleExecute({ state, api, prefix: state.command.prefix!, suffix: state.command.suffix });
   },
 };

package/src/commands/title3.tsx

@@ -1,19 +1,16 @@
 import React from 'react';
-import { insertAtLineStart } from '../utils/InsertTextAtPosition';
-import { ICommand, TextState, TextAreaTextApi } from './';
+import { titleExecute } from '../commands/title';
+import { ICommand, ExecuteState, TextAreaTextApi } from './';
 
 export const title3: ICommand = {
   name: 'title3',
   keyCommand: 'title3',
   shortcuts: 'ctrlcmd+3',
-  value: 'title3',
+  prefix: '### ',
+  suffix: '',
   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)) {
-      api.replaceSelection('### ');
-    } else {
-      insertAtLineStart('### ', state.selection.start, api.textArea);
-    }
+  execute: (state: ExecuteState, api: TextAreaTextApi) => {
+    titleExecute({ state, api, prefix: state.command.prefix!, suffix: state.command.suffix });
   },
 };

package/src/commands/title4.tsx

@@ -1,19 +1,16 @@
 import React from 'react';
-import { insertAtLineStart } from '../utils/InsertTextAtPosition';
-import { ICommand, TextState, TextAreaTextApi } from './';
+import { titleExecute } from '../commands/title';
+import { ICommand, ExecuteState, TextAreaTextApi } from './';
 
 export const title4: ICommand = {
   name: 'title4',
   keyCommand: 'title4',
   shortcuts: 'ctrlcmd+4',
-  value: 'title4',
+  prefix: '#### ',
+  suffix: '',
   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)) {
-      api.replaceSelection('#### ');
-    } else {
-      insertAtLineStart('#### ', state.selection.start, api.textArea);
-    }
+  execute: (state: ExecuteState, api: TextAreaTextApi) => {
+    titleExecute({ state, api, prefix: state.command.prefix!, suffix: state.command.suffix });
   },
 };

package/src/commands/title5.tsx

@@ -1,19 +1,16 @@
 import React from 'react';
-import { insertAtLineStart } from '../utils/InsertTextAtPosition';
-import { ICommand, TextState, TextAreaTextApi } from './';
+import { titleExecute } from '../commands/title';
+import { ICommand, ExecuteState, TextAreaTextApi } from './';
 
 export const title5: ICommand = {
   name: 'title5',
   keyCommand: 'title5',
   shortcuts: 'ctrlcmd+5',
-  value: 'title5',
+  prefix: '##### ',
+  suffix: '',
   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)) {
-      api.replaceSelection('##### ');
-    } else {
-      insertAtLineStart('##### ', state.selection.start, api.textArea);
-    }
+  execute: (state: ExecuteState, api: TextAreaTextApi) => {
+    titleExecute({ state, api, prefix: state.command.prefix!, suffix: state.command.suffix });
   },
 };