@uiw/react-md-editor 3.8.0 → 3.8.4

package/src/commands/title3.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { insertAtLineStart } from '../utils/InsertTextAtPosition';
 import { ICommand, TextState, TextAreaTextApi } from './';
 
 export const title3: ICommand = {
@@ -8,10 +9,10 @@ export const title3: ICommand = {
   buttonProps: { 'aria-label': 'Insert title3', title: 'Insert title 3' },
   icon: <div style={{ fontSize: 15, textAlign: 'left' }}>Title 3</div>,
   execute: (state: TextState, api: TextAreaTextApi) => {
-    let modifyText = `### ${state.selectedText}\n`;
-    if (!state.selectedText) {
-      modifyText = `### `;
+    if (state.selection.start === 0 || /\n$/.test(state.text)) {
+      api.replaceSelection('### ');
+    } else {
+      insertAtLineStart('### ', state.selection.start, api.textArea);
     }
-    api.replaceSelection(modifyText);
   },
 };

package/src/commands/title4.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { insertAtLineStart } from '../utils/InsertTextAtPosition';
 import { ICommand, TextState, TextAreaTextApi } from './';
 
 export const title4: ICommand = {
@@ -8,10 +9,10 @@ export const title4: ICommand = {
   buttonProps: { 'aria-label': 'Insert title4', title: 'Insert title 4' },
   icon: <div style={{ fontSize: 14, textAlign: 'left' }}>Title 4</div>,
   execute: (state: TextState, api: TextAreaTextApi) => {
-    let modifyText = `#### ${state.selectedText}\n`;
-    if (!state.selectedText) {
-      modifyText = `#### `;
+    if (state.selection.start === 0 || /\n$/.test(state.text)) {
+      api.replaceSelection('#### ');
+    } else {
+      insertAtLineStart('#### ', state.selection.start, api.textArea);
     }
-    api.replaceSelection(modifyText);
   },
 };

package/src/commands/title5.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { insertAtLineStart } from '../utils/InsertTextAtPosition';
 import { ICommand, TextState, TextAreaTextApi } from './';
 
 export const title5: ICommand = {
@@ -8,10 +9,10 @@ export const title5: ICommand = {
   buttonProps: { 'aria-label': 'Insert title5', title: 'Insert title 5' },
   icon: <div style={{ fontSize: 12, textAlign: 'left' }}>Title 5</div>,
   execute: (state: TextState, api: TextAreaTextApi) => {
-    let modifyText = `##### ${state.selectedText}\n`;
-    if (!state.selectedText) {
-      modifyText = `##### `;
+    if (state.selection.start === 0 || /\n$/.test(state.text)) {
+      api.replaceSelection('##### ');
+    } else {
+      insertAtLineStart('##### ', state.selection.start, api.textArea);
     }
-    api.replaceSelection(modifyText);
   },
 };

package/src/commands/title6.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { insertAtLineStart } from '../utils/InsertTextAtPosition';
 import { ICommand, TextState, TextAreaTextApi } from './';
 
 export const title6: ICommand = {
@@ -8,10 +9,10 @@ export const title6: ICommand = {
   buttonProps: { 'aria-label': 'Insert title6', title: 'Insert title 6' },
   icon: <div style={{ fontSize: 12, textAlign: 'left' }}>Title 6</div>,
   execute: (state: TextState, api: TextAreaTextApi) => {
-    let modifyText = `###### ${state.selectedText}\n`;
-    if (!state.selectedText) {
-      modifyText = `###### `;
+    if (state.selection.start === 0 || /\n$/.test(state.text)) {
+      api.replaceSelection('###### ');
+    } else {
+      insertAtLineStart('###### ', state.selection.start, api.textArea);
     }
-    api.replaceSelection(modifyText);
   },
 };

package/src/components/TextArea/Textarea.tsx

@@ -9,8 +9,8 @@ import './index.less';
 export interface TextAreaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'value'>, IProps {}
 
 export default function Textarea(props: TextAreaProps) {
-  const { prefixCls, onChange: onChangeFromProps, ...other } = props;
-  const { markdown, commands, fullscreen, preview, highlightEnable, extraCommands, tabSize, onChange, dispatch } =
+  const { prefixCls, onChange, ...other } = props;
+  const { markdown, commands, fullscreen, preview, highlightEnable, extraCommands, tabSize, dispatch } =
     useContext(EditorContext);
   const textRef = React.useRef<HTMLTextAreaElement>(null);
   const executeRef = React.useRef<TextAreaCommandOrchestrator>();
@@ -58,8 +58,7 @@ export default function Textarea(props: TextAreaProps) {
       value={markdown}
       onChange={(e) => {
         dispatch && dispatch({ markdown: e.target.value });
-        onChange && onChange(e.target.value);
-        onChangeFromProps && onChangeFromProps(e);
+        onChange && onChange(e);
       }}
     />
   );

package/src/components/TextArea/index.tsx

@@ -2,14 +2,14 @@ import React, { useEffect, Fragment, useContext } from 'react';
 import { EditorContext, ContextStore, ExecuteCommandState } from '../../Context';
 import shortcuts from './shortcuts';
 import Markdown from './Markdown';
-import Textarea from './Textarea';
-import { MDEditorProps, IProps } from '../../Editor';
+import Textarea, { TextAreaProps } from './Textarea';
+import { IProps } from '../../Editor';
 import { TextAreaCommandOrchestrator, ICommand } from '../../commands';
 import './index.less';
 
 type RenderTextareaHandle = {
   dispatch: ContextStore['dispatch'];
-  onChange?: MDEditorProps['onChange'];
+  onChange?: TextAreaProps['onChange'];
   useContext?: {
     commands: ContextStore['commands'];
     extraCommands: ContextStore['extraCommands'];
@@ -42,7 +42,7 @@ export type TextAreaRef = {
 
 export default function TextArea(props: ITextAreaProps) {
   const { prefixCls, className, onScroll, renderTextarea, ...otherProps } = props || {};
-  const { markdown, scrollTop, commands, extraCommands, onChange, dispatch } = useContext(EditorContext);
+  const { markdown, scrollTop, commands, extraCommands, dispatch } = useContext(EditorContext);
   const textRef = React.useRef<HTMLTextAreaElement>(null);
   const executeRef = React.useRef<TextAreaCommandOrchestrator>();
   const warp = React.createRef<HTMLDivElement>();
@@ -88,7 +88,7 @@ export default function TextArea(props: ITextAreaProps) {
               },
               {
                 dispatch,
-                onChange,
+                onChange: otherProps.onChange,
                 shortcuts,
                 useContext: { commands, extraCommands, commandOrchestrator: executeRef.current },
               },

package/src/utils/InsertTextAtPosition.ts

@@ -10,7 +10,7 @@ let browserSupportsTextareaTextNodes: any;
  * @param {HTMLElement} input
  * @return {boolean}
  */
-function canManipulateViaTextNodes(input: HTMLTextAreaElement | HTMLInputElement) {
+function canManipulateViaTextNodes(input: HTMLTextAreaElement | HTMLInputElement): boolean {
   if (input.nodeName !== 'TEXTAREA') {
     return false;
   }
@@ -22,12 +22,39 @@ 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
  * @returns {void}
  */
-export function insertTextAtPosition(input: HTMLTextAreaElement | HTMLInputElement, text: string) {
+export function insertTextAtPosition(input: HTMLTextAreaElement | HTMLInputElement, text: string): void {
   // Most of the used APIs only work with the field selected
   input.focus();