@uiw/react-md-editor 3.8.2 → 3.9.0

package/src/Editor.tsx

@@ -76,6 +76,10 @@ export interface MDEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>
    * Default `2` spaces.
    */
   tabSize?: number;
+  /**
+   * If `false`, the `tab` key inserts a tab character into the textarea. If `true`, the `tab` key executes default behavior e.g. focus shifts to next element.
+   */
+  defaultTabEnable?: boolean;
   /**
    * You can create your own commands or reuse existing commands.
    */
@@ -84,7 +88,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.
    */
@@ -128,23 +132,29 @@ const InternalMDEditor = (
     minHeight = 100,
     autoFocus,
     tabSize = 2,
+    defaultTabEnable = false,
     onChange,
     hideToolbar,
     renderTextarea,
     ...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,
     height,
     highlightEnable,
     tabSize,
+    defaultTabEnable,
     scrollTop: 0,
     scrollTopPreview: 0,
     commands: cmds,
-    extraCommands,
+    extraCommands: extraCmds,
     fullscreen,
     barPopup: {},
   });

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

@@ -10,8 +10,17 @@ export interface TextAreaProps extends Omit<React.TextareaHTMLAttributes<HTMLTex
 
 export default function Textarea(props: TextAreaProps) {
   const { prefixCls, onChange, ...other } = props;
-  const { markdown, commands, fullscreen, preview, highlightEnable, extraCommands, tabSize, dispatch } =
-    useContext(EditorContext);
+  const {
+    markdown,
+    commands,
+    fullscreen,
+    preview,
+    highlightEnable,
+    extraCommands,
+    tabSize,
+    defaultTabEnable,
+    dispatch,
+  } = useContext(EditorContext);
   const textRef = React.useRef<HTMLTextAreaElement>(null);
   const executeRef = React.useRef<TextAreaCommandOrchestrator>();
   const statesRef = React.useRef<ExecuteCommandState>({ fullscreen, preview });
@@ -30,7 +39,7 @@ export default function Textarea(props: TextAreaProps) {
   }, []);
 
   const onKeyDown = (e: KeyboardEvent | React.KeyboardEvent<HTMLTextAreaElement>) => {
-    handleKeyDown(e, tabSize);
+    handleKeyDown(e, tabSize, defaultTabEnable);
     shortcuts(e, [...(commands || []), ...(extraCommands || [])], executeRef.current, dispatch, statesRef.current);
   };
   useEffect(() => {

package/src/components/TextArea/handleKeyDown.tsx

@@ -14,16 +14,18 @@ function stopPropagation(e: KeyboardEvent | React.KeyboardEvent<HTMLTextAreaElem
 export default function handleKeyDown(
   e: KeyboardEvent | React.KeyboardEvent<HTMLTextAreaElement>,
   tabSize: number = 2,
+  defaultTabEnable: boolean = false,
 ) {
   const target = e.target as HTMLTextAreaElement;
   const starVal = target.value.substr(0, target.selectionStart);
   const valArr = starVal.split('\n');
   const currentLineStr = valArr[valArr.length - 1];
   const textArea = new TextAreaTextApi(target);
+
   /**
    * `9` - `Tab`
    */
-  if (e.code && e.code.toLowerCase() === 'tab') {
+  if (!defaultTabEnable && e.code && e.code.toLowerCase() === 'tab') {
     stopPropagation(e);
     const space = new Array(tabSize + 1).join('  ');
     if (target.selectionStart !== target.selectionEnd) {

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