@uiw/react-md-editor 3.23.6 → 3.24.0

package/src/components/TextArea/handleKeyDown.tsx

@@ -1,6 +1,6 @@
 import { insertTextAtPosition } from '../../utils/InsertTextAtPosition';
+import { insertBeforeEachLine, selectLine } from '../../utils/markdownUtils';
 import { TextAreaTextApi } from '../../commands';
-import { insertBeforeEachLine } from '../../commands/list';
 
 /**
  * - `13` - `Enter`
@@ -11,6 +11,38 @@ function stopPropagation(e: KeyboardEvent | React.KeyboardEvent<HTMLTextAreaElem
   e.preventDefault();
 }
 
+function handleLineMove(e: KeyboardEvent | React.KeyboardEvent<HTMLTextAreaElement>, direction: number) {
+  stopPropagation(e);
+  const target = e.target as HTMLTextAreaElement;
+  const textArea = new TextAreaTextApi(target);
+  let selection = { start: target.selectionStart, end: target.selectionEnd };
+  selection = selectLine({ text: target.value, selection });
+  if ((direction < 0 && selection.start <= 0) || (direction > 0 && selection.end >= target.value.length)) {
+    return;
+  }
+
+  const blockText = target.value.slice(selection.start, selection.end);
+  if (direction < 0) {
+    const prevLineSelection = selectLine({
+      text: target.value,
+      selection: { start: selection.start - 1, end: selection.start - 1 },
+    });
+    const prevLineText = target.value.slice(prevLineSelection.start, prevLineSelection.end);
+    textArea.setSelectionRange({ start: prevLineSelection.start, end: selection.end });
+    insertTextAtPosition(target, `${blockText}\n${prevLineText}`);
+    textArea.setSelectionRange({ start: prevLineSelection.start, end: prevLineSelection.start + blockText.length });
+  } else {
+    const nextLineSelection = selectLine({
+      text: target.value,
+      selection: { start: selection.end + 1, end: selection.end + 1 },
+    });
+    const nextLineText = target.value.slice(nextLineSelection.start, nextLineSelection.end);
+    textArea.setSelectionRange({ start: selection.start, end: nextLineSelection.end });
+    insertTextAtPosition(target, `${nextLineText}\n${blockText}`);
+    textArea.setSelectionRange({ start: nextLineSelection.end - blockText.length, end: nextLineSelection.end });
+  }
+}
+
 export default function handleKeyDown(
   e: KeyboardEvent | React.KeyboardEvent<HTMLTextAreaElement>,
   tabSize: number = 2,
@@ -70,7 +102,8 @@ export default function handleKeyDown(
   } else if (
     e.keyCode === 13 &&
     e.code.toLowerCase() === 'enter' &&
-    (/^(-|\*)\s/.test(currentLineStr) || /^\d+.\s/.test(currentLineStr))
+    (/^(-|\*)\s/.test(currentLineStr) || /^\d+.\s/.test(currentLineStr)) &&
+    !e.shiftKey
   ) {
     /**
      * `13` - `Enter`
@@ -84,7 +117,7 @@ export default function handleKeyDown(
 
     if (currentLineStr.startsWith('- [ ]')) {
       startStr = '\n- [ ] ';
-    } else if (currentLineStr.startsWith('- [X]')) {
+    } else if (currentLineStr.startsWith('- [X]') || currentLineStr.startsWith('- [x]')) {
       startStr = '\n- [X] ';
     }
 
@@ -92,5 +125,19 @@ export default function handleKeyDown(
       startStr = `\n${parseInt(currentLineStr) + 1}. `;
     }
     return insertTextAtPosition(target, startStr);
+  } else if (e.code && e.code.toLowerCase() === 'keyd' && e.ctrlKey) {
+    // Duplicate lines
+    stopPropagation(e);
+    let selection = { start: target.selectionStart, end: target.selectionEnd };
+    const savedSelection = selection;
+    selection = selectLine({ text: target.value, selection });
+    const textToDuplicate = target.value.slice(selection.start, selection.end);
+    textArea.setSelectionRange({ start: selection.end, end: selection.end });
+    insertTextAtPosition(target, `\n${textToDuplicate}`);
+    textArea.setSelectionRange({ start: savedSelection.start, end: savedSelection.end });
+  } else if (e.code && e.code.toLowerCase() === 'arrowup' && e.altKey) {
+    handleLineMove(e, -1);
+  } else if (e.code && e.code.toLowerCase() === 'arrowdown' && e.altKey) {
+    handleLineMove(e, 1);
   }
 }

package/src/utils/InsertTextAtPosition.ts

@@ -22,33 +22,6 @@ function canManipulateViaTextNodes(input: HTMLTextAreaElement | HTMLInputElement
   return browserSupportsTextareaTextNodes;
 }
 
-/**
- * @param {string} val
- * @param {number} cursorIdx
- * @param {HTMLTextAreaElement|HTMLInputElement} input
- * @return {void}
- */
-export const insertAtLineStart = (
-  val: string,
-  cursorIdx: number,
-  input: HTMLTextAreaElement | HTMLInputElement,
-): void => {
-  const content = input.value;
-  let startIdx = 0;
-
-  while (cursorIdx--) {
-    let char = content[cursorIdx];
-    if (char === '\n') {
-      startIdx = cursorIdx + 1;
-      break;
-    }
-  }
-
-  input.focus();
-  input.setRangeText(val, startIdx, startIdx);
-  input.dispatchEvent(new Event('input', { bubbles: true }));
-};
-
 /**
  * @param {HTMLTextAreaElement|HTMLInputElement} input
  * @param {string} text
@@ -71,7 +44,13 @@ export function insertTextAtPosition(input: HTMLTextAreaElement | HTMLInputEleme
   }
 
   // Webkit + Edge
-  const isSuccess = document.execCommand && document.execCommand('insertText', false, text);
+  let isSuccess = false;
+  if (text !== '') {
+    isSuccess = document.execCommand && document.execCommand('insertText', false, text);
+  } else {
+    isSuccess = document.execCommand && document.execCommand('delete', false);
+  }
+
   if (!isSuccess) {
     const start = input.selectionStart!;
     const end = input.selectionEnd!;

package/src/utils/markdownUtils.ts

@@ -1,16 +1,42 @@
 import { TextRange } from '../commands';
+import { TextAreaTextApi, ExecuteState } from '../commands';
 
 export interface TextSection {
   text: string;
   selection: TextRange;
 }
 
-export function selectWord({ text, selection }: TextSection): TextRange {
+export function selectWord({
+  text,
+  selection,
+  prefix,
+  suffix = prefix,
+}: {
+  text: string;
+  selection: TextRange;
+  prefix: string;
+  suffix?: string;
+}): TextRange {
+  let result = selection;
   if (text && text.length && selection.start === selection.end) {
-    // the user is pointing to a word
-    return getSurroundingWord(text, selection.start);
+    result = getSurroundingWord(text, selection.start);
+  }
+  if (result.start >= prefix.length && result.end <= text.length - suffix.length) {
+    const selectedTextContext = text.slice(result.start - prefix.length, result.end + suffix.length);
+    if (selectedTextContext.startsWith(prefix) && selectedTextContext.endsWith(suffix)) {
+      return { start: result.start - prefix.length, end: result.end + suffix.length };
+    }
   }
-  return selection;
+  return result;
+}
+
+export function selectLine({ text, selection }: TextSection): TextRange {
+  const start = text.slice(0, selection.start).lastIndexOf('\n') + 1;
+  let end = text.slice(selection.end).indexOf('\n') + selection.end;
+  if (end === selection.end - 1) {
+    end = text.length;
+  }
+  return { start, end };
 }
 
 /**
@@ -100,3 +126,67 @@ export function getSurroundingWord(text: string, position: number): TextRange {
 
   return { start, end };
 }
+
+export function executeCommand({
+  api,
+  selectedText,
+  selection,
+  prefix,
+  suffix = prefix,
+}: {
+  api: TextAreaTextApi;
+  selectedText: string;
+  selection: TextRange;
+  prefix: string;
+  suffix?: string;
+}) {
+  if (
+    selectedText.length >= prefix.length + suffix.length &&
+    selectedText.startsWith(prefix) &&
+    selectedText.endsWith(suffix)
+  ) {
+    api.replaceSelection(selectedText.slice(prefix.length, suffix.length ? -suffix.length : undefined));
+    api.setSelectionRange({ start: selection.start - prefix.length, end: selection.end - prefix.length });
+  } else {
+    api.replaceSelection(`${prefix}${selectedText}${suffix}`);
+    api.setSelectionRange({ start: selection.start + prefix.length, end: selection.end + prefix.length });
+  }
+}
+
+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') {
+        if (item.startsWith(insertBefore)) {
+          insertionLength -= insertBefore.length;
+          return item.slice(insertBefore.length);
+        }
+        insertionLength += insertBefore.length;
+        return insertBefore + item;
+      }
+      if (typeof insertBefore === 'function') {
+        if (item.startsWith(insertBefore(item, index))) {
+          insertionLength -= insertBefore(item, index).length;
+          return item.slice(insertBefore(item, index).length);
+        }
+        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 };
+}