@uiw/react-md-editor 3.8.1 → 3.8.5

package/src/Editor.tsx

@@ -84,7 +84,7 @@ export interface MDEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>
    * Filter or modify your commands.
    * https://github.com/uiwjs/react-md-editor/issues/296
    */
-  commandsFilter?: (command: ICommand) => false | ICommand;
+  commandsFilter?: (command: ICommand, isExtra: boolean) => false | ICommand;
   /**
    * You can create your own commands or reuse existing commands.
    */
@@ -134,7 +134,12 @@ const InternalMDEditor = (
     ...other
   } = props || {};
 
-  const cmds = commands.map((item) => (commandsFilter ? commandsFilter(item) : item)).filter(Boolean) as ICommand[];
+  const cmds = commands
+    .map((item) => (commandsFilter ? commandsFilter(item, false) : item))
+    .filter(Boolean) as ICommand[];
+  const extraCmds = extraCommands
+    .map((item) => (commandsFilter ? commandsFilter(item, true) : item))
+    .filter(Boolean) as ICommand[];
   let [state, dispatch] = useReducer(reducer, {
     markdown: propsValue,
     preview: previewType,
@@ -144,9 +149,8 @@ const InternalMDEditor = (
     scrollTop: 0,
     scrollTopPreview: 0,
     commands: cmds,
-    extraCommands,
+    extraCommands: extraCmds,
     fullscreen,
-    onChange,
     barPopup: {},
   });
   const container = useRef<HTMLDivElement>(null);
@@ -271,6 +275,12 @@ const InternalMDEditor = (
               prefixCls={prefixCls}
               autoFocus={autoFocus}
               {...textareaProps}
+              onChange={(evn) => {
+                onChange && onChange(evn.target.value);
+                if (textareaProps && textareaProps.onChange) {
+                  textareaProps.onChange(evn);
+                }
+              }}
               renderTextarea={renderTextarea}
               onScroll={(e) => handleScroll(e, 'text')}
             />

package/src/commands/title1.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { insertAtLineStart } from '../utils/InsertTextAtPosition';
 import { ICommand, TextState, TextAreaTextApi } from './';
 
 export const title1: ICommand = {
@@ -8,10 +9,10 @@ export const title1: ICommand = {
   buttonProps: { 'aria-label': 'Insert title 1', title: 'Insert title 1' },
   icon: <div style={{ fontSize: 18, textAlign: 'left' }}>Title 1</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/title2.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { insertAtLineStart } from '../utils/InsertTextAtPosition';
 import { ICommand, TextState, TextAreaTextApi } from './';
 
 export const title2: ICommand = {
@@ -8,10 +9,10 @@ export const title2: ICommand = {
   buttonProps: { 'aria-label': 'Insert title2', title: 'Insert title 2' },
   icon: <div style={{ fontSize: 16, textAlign: 'left' }}>Title 2</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/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/Markdown.tsx

@@ -41,7 +41,7 @@ export default function Markdown(props: MarkdownProps) {
       .processSync(
         `<pre class="language-markdown ${prefixCls}-text-pre wmde-markdown-color"><code class="language-markdown">${html2Escape(
           markdown,
-        )}</code></pre>`,
+        )}\n</code></pre>`,
       );
     return React.createElement('div', {
       className: 'wmde-markdown-color',

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();