@uiw/react-md-editor 3.23.6 → 3.24.1

package/esm/commands/link.js

@@ -1,11 +1,12 @@
 import React from 'react';
-import { selectWord } from '../utils/markdownUtils';
+import { selectWord, executeCommand } from '../utils/markdownUtils';
 import { jsx as _jsx } from "react/jsx-runtime";
 export var link = {
   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)'
@@ -22,21 +23,46 @@ export var link = {
     })
   }),
   execute: (state, api) => {
-    // Adjust the selection to encompass the whole word if the caret is inside one
     var newSelectionRange = selectWord({
       text: state.text,
-      selection: state.selection
+      selection: state.selection,
+      prefix: state.command.prefix,
+      suffix: state.command.suffix
     });
     var state1 = api.setSelectionRange(newSelectionRange);
-    var val = state.command.value || '';
-    // Replaces the current selection with the bold mark up
-    api.replaceSelection(val.replace(/({{text}})/gi, state1.selectedText));
-    var start = state1.selection.start + val.indexOf('{{text}}');
-    var end = state1.selection.start + val.indexOf('{{text}}') + (state1.selection.end - state1.selection.start);
-    // Adjust the selection to not contain the **
-    api.setSelectionRange({
-      start,
-      end
-    });
+    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/esm/commands/list.d.ts

@@ -1,13 +1,6 @@
-import { ICommand, TextState, TextAreaTextApi } from './';
-export type AlterLineFunction = (line: string, index: number) => string;
-/**
- * Inserts insertionString before each line
- */
-export declare function insertBeforeEachLine(selectedText: string, insertBefore: string | AlterLineFunction): {
-    modifiedText: string;
-    insertionLength: number;
-};
-export declare const makeList: (state: TextState, api: TextAreaTextApi, insertBefore: string | AlterLineFunction) => void;
+import { ICommand, ExecuteState, TextAreaTextApi } from './';
+import { AlterLineFunction } from '../utils/markdownUtils';
+export declare const makeList: (state: ExecuteState, api: TextAreaTextApi, insertBefore: string | AlterLineFunction) => void;
 export declare const unorderedListCommand: ICommand;
 export declare const orderedListCommand: ICommand;
 export declare const checkedListCommand: ICommand;

package/esm/commands/list.js

@@ -1,58 +1,56 @@
 import React from 'react';
-import { selectWord, getBreaksNeededForEmptyLineBefore, getBreaksNeededForEmptyLineAfter } from '../utils/markdownUtils';
+import { selectWord, getBreaksNeededForEmptyLineBefore, getBreaksNeededForEmptyLineAfter, insertBeforeEachLine } from '../utils/markdownUtils';
 import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * Inserts insertionString before each line
- */
-export function insertBeforeEachLine(selectedText, insertBefore) {
-  var lines = selectedText.split(/\n/);
-  var insertionLength = 0;
-  var modifiedText = lines.map((item, index) => {
-    if (typeof insertBefore === 'string') {
-      insertionLength += insertBefore.length;
-      return insertBefore + item;
-    } else if (typeof insertBefore === 'function') {
-      var 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 var makeList = (state, api, insertBefore) => {
-  // Adjust the selection to encompass the whole word if the caret is inside one
   var newSelectionRange = selectWord({
     text: state.text,
-    selection: state.selection
+    selection: state.selection,
+    prefix: state.command.prefix
   });
   var state1 = api.setSelectionRange(newSelectionRange);
   var breaksBeforeCount = getBreaksNeededForEmptyLineBefore(state1.text, state1.selection.start);
   var breaksBefore = Array(breaksBeforeCount + 1).join('\n');
   var breaksAfterCount = getBreaksNeededForEmptyLineAfter(state1.text, state1.selection.end);
   var breaksAfter = Array(breaksAfterCount + 1).join('\n');
-  var 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
-  var oneLinerOffset = state1.selectedText.indexOf('\n') === -1 ? modifiedText.insertionLength : 0;
-  var selectionStart = state1.selection.start + breaksBeforeCount + oneLinerOffset;
-  var selectionEnd = selectionStart + modifiedText.modifiedText.length - oneLinerOffset;
-
-  // Adjust the selection to not contain the **
-  api.setSelectionRange({
-    start: selectionStart,
-    end: selectionEnd
-  });
+  var {
+    modifiedText,
+    insertionLength
+  } = insertBeforeEachLine(state1.selectedText, insertBefore);
+  if (insertionLength < 0) {
+    // Remove
+    var selectionStart = state1.selection.start;
+    var 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;
+    }
+    api.setSelectionRange({
+      start: selectionStart,
+      end: selectionEnd
+    });
+    api.replaceSelection("" + modifiedText);
+    api.setSelectionRange({
+      start: selectionStart,
+      end: selectionStart + modifiedText.length
+    });
+  } else {
+    // Add
+    api.replaceSelection("" + breaksBefore + modifiedText + breaksAfter);
+    var _selectionStart = state1.selection.start + breaksBeforeCount;
+    var _selectionEnd = _selectionStart + modifiedText.length;
+    api.setSelectionRange({
+      start: _selectionStart,
+      end: _selectionEnd
+    });
+  }
 };
 export var unorderedListCommand = {
   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)'
@@ -75,7 +73,7 @@ export var orderedListCommand = {
   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)'
@@ -99,7 +97,7 @@ export var checkedListCommand = {
   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)'

package/esm/commands/quote.js

@@ -1,10 +1,11 @@
 import React from 'react';
-import { getBreaksNeededForEmptyLineBefore, getBreaksNeededForEmptyLineAfter, selectWord } from '../utils/markdownUtils';
+import { getBreaksNeededForEmptyLineBefore, getBreaksNeededForEmptyLineAfter, selectWord, insertBeforeEachLine } from '../utils/markdownUtils';
 import { jsx as _jsx } from "react/jsx-runtime";
 export var quote = {
   name: 'quote',
   keyCommand: 'quote',
   shortcuts: 'ctrlcmd+q',
+  prefix: '> ',
   buttonProps: {
     'aria-label': 'Insert a quote (ctrl + q)',
     title: 'Insert a quote (ctrl + q)'
@@ -19,21 +20,20 @@ export var quote = {
     })
   }),
   execute: (state, api) => {
-    // Adjust the selection to encompass the whole word if the caret is inside one
     var newSelectionRange = selectWord({
       text: state.text,
-      selection: state.selection
+      selection: state.selection,
+      prefix: state.command.prefix
     });
     var state1 = api.setSelectionRange(newSelectionRange);
     var breaksBeforeCount = getBreaksNeededForEmptyLineBefore(state1.text, state1.selection.start);
     var breaksBefore = Array(breaksBeforeCount + 1).join('\n');
     var breaksAfterCount = getBreaksNeededForEmptyLineAfter(state1.text, state1.selection.end);
     var breaksAfter = Array(breaksAfterCount + 1).join('\n');
-
-    // Replaces the current selection with the quote mark up
-    api.replaceSelection(breaksBefore + "> " + state1.selectedText + breaksAfter);
-    var selectionStart = state1.selection.start + breaksBeforeCount + 2;
-    var selectionEnd = selectionStart + state1.selectedText.length;
+    var modifiedText = insertBeforeEachLine(state1.selectedText, state.command.prefix);
+    api.replaceSelection("" + breaksBefore + modifiedText.modifiedText + breaksAfter);
+    var selectionStart = state1.selection.start + breaksBeforeCount;
+    var selectionEnd = selectionStart + modifiedText.modifiedText.length;
     api.setSelectionRange({
       start: selectionStart,
       end: selectionEnd

package/esm/commands/strikeThrough.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { selectWord } from '../utils/markdownUtils';
+import { selectWord, executeCommand } from '../utils/markdownUtils';
 import { jsx as _jsx } from "react/jsx-runtime";
 export var strikethrough = {
   name: 'strikethrough',
@@ -9,7 +9,7 @@ export var strikethrough = {
     'aria-label': 'Add strikethrough text (ctrl + shift + x)',
     title: 'Add strikethrough text (ctrl + shift + x)'
   },
-  value: '~~{{text}}~~',
+  prefix: '~~',
   icon: /*#__PURE__*/_jsx("svg", {
     "data-name": "strikethrough",
     width: "12",
@@ -22,21 +22,17 @@ export var strikethrough = {
     })
   }),
   execute: (state, api) => {
-    // Adjust the selection to encompass the whole word if the caret is inside one
     var newSelectionRange = selectWord({
       text: state.text,
-      selection: state.selection
+      selection: state.selection,
+      prefix: state.command.prefix
     });
     var state1 = api.setSelectionRange(newSelectionRange);
-    // Replaces the current selection with the bold mark up
-    var val = state.command.value || '';
-    api.replaceSelection(val.replace(/({{text}})/gi, state1.selectedText));
-    var start = state1.selection.start + val.indexOf('{{text}}');
-    var 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/esm/commands/table.d.ts

@@ -0,0 +1,2 @@
+import { ICommand } from './';
+export declare const table: ICommand;

package/esm/commands/table.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import { selectWord, executeCommand } from '../utils/markdownUtils';
+import { jsx as _jsx } from "react/jsx-runtime";
+export var table = {
+  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: /*#__PURE__*/_jsx("svg", {
+    role: "img",
+    width: "12",
+    height: "12",
+    viewBox: "0 0 512 512",
+    children: /*#__PURE__*/_jsx("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
+    })
+  }),
+
+  execute: (state, api) => {
+    var newSelectionRange = selectWord({
+      text: state.text,
+      selection: state.selection,
+      prefix: state.command.prefix,
+      suffix: state.command.suffix
+    });
+    var 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/esm/commands/title.d.ts

@@ -1,2 +1,8 @@
-import { ICommand } from './';
+import { ICommand, ExecuteState, TextAreaTextApi } from './';
+export declare function titleExecute({ state, api, prefix, suffix, }: {
+    state: ExecuteState;
+    api: TextAreaTextApi;
+    prefix: string;
+    suffix?: string;
+}): void;
 export declare const title: ICommand;

package/esm/commands/title.js

@@ -1,7 +1,28 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { title1 } from './title1';
+import { selectLine, executeCommand } from '../utils/markdownUtils';
 import { jsx as _jsx } from "react/jsx-runtime";
+export function titleExecute(_ref) {
+  var {
+    state,
+    api,
+    prefix,
+    suffix = prefix
+  } = _ref;
+  var newSelectionRange = selectLine({
+    text: state.text,
+    selection: state.selection
+  });
+  var state1 = api.setSelectionRange(newSelectionRange);
+  executeCommand({
+    api,
+    selectedText: state1.selectedText,
+    selection: state.selection,
+    prefix,
+    suffix
+  });
+}
 export var title = _extends({}, title1, {
   icon: /*#__PURE__*/_jsx("svg", {
     width: "12",

package/esm/commands/title1.js

@@ -1,11 +1,12 @@
 import React from 'react';
-import { insertAtLineStart } from '../utils/InsertTextAtPosition';
+import { titleExecute } from '../commands/title';
 import { jsx as _jsx } from "react/jsx-runtime";
 export var title1 = {
   name: 'title1',
   keyCommand: 'title1',
   shortcuts: 'ctrlcmd+1',
-  value: 'title1',
+  prefix: '# ',
+  suffix: '',
   buttonProps: {
     'aria-label': 'Insert title1 (ctrl + 1)',
     title: 'Insert title1 (ctrl + 1)'
@@ -18,10 +19,11 @@ export var title1 = {
     children: "Title 1"
   }),
   execute: (state, api) => {
-    if (state.selection.start === 0 || /\n$/.test(state.text)) {
-      api.replaceSelection('# ');
-    } else {
-      insertAtLineStart('# ', state.selection.start, api.textArea);
-    }
+    titleExecute({
+      state,
+      api,
+      prefix: state.command.prefix,
+      suffix: state.command.suffix
+    });
   }
 };

package/esm/commands/title2.js

@@ -1,11 +1,12 @@
 import React from 'react';
-import { insertAtLineStart } from '../utils/InsertTextAtPosition';
+import { titleExecute } from '../commands/title';
 import { jsx as _jsx } from "react/jsx-runtime";
 export var title2 = {
   name: 'title2',
   keyCommand: 'title2',
   shortcuts: 'ctrlcmd+2',
-  value: 'title2',
+  prefix: '## ',
+  suffix: '',
   buttonProps: {
     'aria-label': 'Insert title2 (ctrl + 2)',
     title: 'Insert title2 (ctrl + 2)'
@@ -18,10 +19,11 @@ export var title2 = {
     children: "Title 2"
   }),
   execute: (state, api) => {
-    if (state.selection.start === 0 || /\n$/.test(state.text)) {
-      api.replaceSelection('## ');
-    } else {
-      insertAtLineStart('## ', state.selection.start, api.textArea);
-    }
+    titleExecute({
+      state,
+      api,
+      prefix: state.command.prefix,
+      suffix: state.command.suffix
+    });
   }
 };

package/esm/commands/title3.js

@@ -1,11 +1,12 @@
 import React from 'react';
-import { insertAtLineStart } from '../utils/InsertTextAtPosition';
+import { titleExecute } from '../commands/title';
 import { jsx as _jsx } from "react/jsx-runtime";
 export var title3 = {
   name: 'title3',
   keyCommand: 'title3',
   shortcuts: 'ctrlcmd+3',
-  value: 'title3',
+  prefix: '### ',
+  suffix: '',
   buttonProps: {
     'aria-label': 'Insert title3 (ctrl + 3)',
     title: 'Insert title3 (ctrl + 3)'
@@ -18,10 +19,11 @@ export var title3 = {
     children: "Title 3"
   }),
   execute: (state, api) => {
-    if (state.selection.start === 0 || /\n$/.test(state.text)) {
-      api.replaceSelection('### ');
-    } else {
-      insertAtLineStart('### ', state.selection.start, api.textArea);
-    }
+    titleExecute({
+      state,
+      api,
+      prefix: state.command.prefix,
+      suffix: state.command.suffix
+    });
   }
 };

package/esm/commands/title4.js

@@ -1,11 +1,12 @@
 import React from 'react';
-import { insertAtLineStart } from '../utils/InsertTextAtPosition';
+import { titleExecute } from '../commands/title';
 import { jsx as _jsx } from "react/jsx-runtime";
 export var title4 = {
   name: 'title4',
   keyCommand: 'title4',
   shortcuts: 'ctrlcmd+4',
-  value: 'title4',
+  prefix: '#### ',
+  suffix: '',
   buttonProps: {
     'aria-label': 'Insert title4 (ctrl + 4)',
     title: 'Insert title4 (ctrl + 4)'
@@ -18,10 +19,11 @@ export var title4 = {
     children: "Title 4"
   }),
   execute: (state, api) => {
-    if (state.selection.start === 0 || /\n$/.test(state.text)) {
-      api.replaceSelection('#### ');
-    } else {
-      insertAtLineStart('#### ', state.selection.start, api.textArea);
-    }
+    titleExecute({
+      state,
+      api,
+      prefix: state.command.prefix,
+      suffix: state.command.suffix
+    });
   }
 };

package/esm/commands/title5.js

@@ -1,11 +1,12 @@
 import React from 'react';
-import { insertAtLineStart } from '../utils/InsertTextAtPosition';
+import { titleExecute } from '../commands/title';
 import { jsx as _jsx } from "react/jsx-runtime";
 export var title5 = {
   name: 'title5',
   keyCommand: 'title5',
   shortcuts: 'ctrlcmd+5',
-  value: 'title5',
+  prefix: '##### ',
+  suffix: '',
   buttonProps: {
     'aria-label': 'Insert title5 (ctrl + 5)',
     title: 'Insert title5 (ctrl + 5)'
@@ -18,10 +19,11 @@ export var title5 = {
     children: "Title 5"
   }),
   execute: (state, api) => {
-    if (state.selection.start === 0 || /\n$/.test(state.text)) {
-      api.replaceSelection('##### ');
-    } else {
-      insertAtLineStart('##### ', state.selection.start, api.textArea);
-    }
+    titleExecute({
+      state,
+      api,
+      prefix: state.command.prefix,
+      suffix: state.command.suffix
+    });
   }
 };

package/esm/commands/title6.js

@@ -1,11 +1,12 @@
 import React from 'react';
-import { insertAtLineStart } from '../utils/InsertTextAtPosition';
+import { titleExecute } from '../commands/title';
 import { jsx as _jsx } from "react/jsx-runtime";
 export var title6 = {
   name: 'title6',
   keyCommand: 'title6',
   shortcuts: 'ctrlcmd+6',
-  value: 'title6',
+  prefix: '###### ',
+  suffix: '',
   buttonProps: {
     'aria-label': 'Insert title6 (ctrl + 6)',
     title: 'Insert title6 (ctrl + 6)'
@@ -18,10 +19,11 @@ export var title6 = {
     children: "Title 6"
   }),
   execute: (state, api) => {
-    if (state.selection.start === 0 || /\n$/.test(state.text)) {
-      api.replaceSelection('###### ');
-    } else {
-      insertAtLineStart('###### ', state.selection.start, api.textArea);
-    }
+    titleExecute({
+      state,
+      api,
+      prefix: state.command.prefix,
+      suffix: state.command.suffix
+    });
   }
 };