@uiw/react-md-editor 4.1.4 → 4.1.6

package/esm/Editor.factory.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["prefixCls", "className", "value", "commands", "commandsFilter", "direction", "extraCommands", "height", "enableScroll", "visibleDragbar", "highlightEnable", "preview", "fullscreen", "overflow", "previewOptions", "textareaProps", "maxHeight", "minHeight", "autoFocus", "autoFocusEnd", "tabSize", "defaultTabEnable", "onChange", "onStatistics", "onHeightChange", "hideToolbar", "toolbarBottom", "components", "renderTextarea"];
+var _excluded = ["prefixCls", "className", "value", "commands", "commandsFilter", "direction", "extraCommands", "height", "enableScroll", "visibleDragbar", "highlightEnable", "preview", "fullscreen", "overflow", "previewOptions", "textareaProps", "id", "name", "required", "disabled", "readOnly", "placeholder", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid", "aria-required", "aria-errormessage", "maxHeight", "minHeight", "autoFocus", "autoFocusEnd", "tabSize", "defaultTabEnable", "onChange", "onStatistics", "onHeightChange", "hideToolbar", "toolbarBottom", "components", "renderTextarea"];
 import React, { useEffect, useReducer, useMemo, useRef, useImperativeHandle } from 'react';
 import { ToolbarVisibility } from "./components/Toolbar/index.js";
 import DragBar from "./components/DragBar/index.js";
@@ -50,6 +50,18 @@ export function createMDEditor(options) {
       _ref$previewOptions = _ref.previewOptions,
       previewOptions = _ref$previewOptions === void 0 ? {} : _ref$previewOptions,
       textareaProps = _ref.textareaProps,
+      id = _ref.id,
+      name = _ref.name,
+      required = _ref.required,
+      disabled = _ref.disabled,
+      readOnly = _ref.readOnly,
+      placeholder = _ref.placeholder,
+      ariaLabel = _ref['aria-label'],
+      ariaLabelledBy = _ref['aria-labelledby'],
+      ariaDescribedBy = _ref['aria-describedby'],
+      ariaInvalid = _ref['aria-invalid'],
+      ariaRequired = _ref['aria-required'],
+      ariaErrorMessage = _ref['aria-errormessage'],
       _ref$maxHeight = _ref.maxHeight,
       maxHeight = _ref$maxHeight === void 0 ? 1200 : _ref$maxHeight,
       _ref$minHeight = _ref.minHeight,
@@ -256,7 +268,19 @@ export function createMDEditor(options) {
           children: [/(edit|live)/.test(state.preview || '') && /*#__PURE__*/_jsx(TextAreaComponent, _extends({
             className: prefixCls + "-input",
             prefixCls: prefixCls,
-            autoFocus: autoFocus
+            autoFocus: autoFocus,
+            id: id,
+            name: name,
+            required: required,
+            disabled: disabled,
+            readOnly: readOnly,
+            placeholder: placeholder,
+            "aria-label": ariaLabel,
+            "aria-labelledby": ariaLabelledBy,
+            "aria-describedby": ariaDescribedBy,
+            "aria-invalid": ariaInvalid,
+            "aria-required": ariaRequired,
+            "aria-errormessage": ariaErrorMessage
           }, textareaProps, {
             onChange: changeHandle,
             renderTextarea: (components == null ? void 0 : components.textarea) || renderTextarea,

package/esm/Types.d.ts

@@ -18,6 +18,12 @@ export interface MDEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>
      * The Markdown value.
      */
     value?: string;
+    /** Native textarea form attributes. */
+    name?: React.TextareaHTMLAttributes<HTMLTextAreaElement>['name'];
+    required?: React.TextareaHTMLAttributes<HTMLTextAreaElement>['required'];
+    disabled?: React.TextareaHTMLAttributes<HTMLTextAreaElement>['disabled'];
+    readOnly?: React.TextareaHTMLAttributes<HTMLTextAreaElement>['readOnly'];
+    placeholder?: React.TextareaHTMLAttributes<HTMLTextAreaElement>['placeholder'];
     /**
      * Event handler for the `onChange` event.
      */

package/esm/commands/index.cn.d.ts

@@ -1,6 +1,7 @@
 import { type ICommand } from './';
 import { divider } from './divider';
 import { group } from './group';
+import { makeList } from './list';
 declare let bold: ICommand;
 declare let code: ICommand;
 declare let codeBlock: ICommand;
@@ -30,4 +31,4 @@ declare let table: ICommand;
 declare let help: ICommand;
 export declare const getCommands: () => ICommand[];
 export declare const getExtraCommands: () => ICommand[];
-export { title, title1, title2, title3, title4, title5, title6, bold, codeBlock, comment, italic, strikethrough, hr, group, divider, link, quote, code, image, unorderedListCommand, orderedListCommand, checkedListCommand, table, issue, help, codeEdit, codeLive, codePreview, fullscreen, };
+export { title, title1, title2, title3, title4, title5, title6, bold, codeBlock, comment, italic, strikethrough, hr, group, divider, link, quote, code, image, unorderedListCommand, orderedListCommand, checkedListCommand, makeList, table, issue, help, codeEdit, codeLive, codePreview, fullscreen, };

package/esm/commands/index.cn.js

@@ -9,7 +9,7 @@ import { hr as hrInit } from "./hr.js";
 import { image as imageInit } from "./image.js";
 import { italic as italicInit } from "./italic.js";
 import { link as linkInit } from "./link.js";
-import { checkedListCommand as checkedListCommandInit, orderedListCommand as orderedListCommandInit, unorderedListCommand as unorderedListCommandInit } from "./list.js";
+import { checkedListCommand as checkedListCommandInit, makeList, orderedListCommand as orderedListCommandInit, unorderedListCommand as unorderedListCommandInit } from "./list.js";
 import { codeEdit as codeEditInit, codeLive as codeLiveInit, codePreview as codePreviewInit } from "./preview.js";
 import { quote as quoteInit } from "./quote.js";
 import { strikethrough as strikethroughInit } from "./strikeThrough.js";
@@ -194,4 +194,4 @@ export var getCommands = () => [bold, italic, strikethrough, hr, group([title1,
   }
 }), divider, link, quote, code, codeBlock, comment, image, table, divider, unorderedListCommand, orderedListCommand, checkedListCommand, divider, help];
 export var getExtraCommands = () => [codeEdit, codeLive, codePreview, divider, fullscreen];
-export { title, title1, title2, title3, title4, title5, title6, bold, codeBlock, comment, italic, strikethrough, hr, group, divider, link, quote, code, image, unorderedListCommand, orderedListCommand, checkedListCommand, table, issue, help, codeEdit, codeLive, codePreview, fullscreen };
+export { title, title1, title2, title3, title4, title5, title6, bold, codeBlock, comment, italic, strikethrough, hr, group, divider, link, quote, code, image, unorderedListCommand, orderedListCommand, checkedListCommand, makeList, table, issue, help, codeEdit, codeLive, codePreview, fullscreen };

package/esm/commands/index.d.ts

@@ -10,7 +10,7 @@ import { hr } from './hr';
 import { image } from './image';
 import { italic } from './italic';
 import { link } from './link';
-import { checkedListCommand, orderedListCommand, unorderedListCommand } from './list';
+import { checkedListCommand, makeList, orderedListCommand, unorderedListCommand } from './list';
 import { codeEdit, codeLive, codePreview } from './preview';
 import { quote } from './quote';
 import { strikethrough } from './strikeThrough';
@@ -93,4 +93,4 @@ declare class TextAreaCommandOrchestrator implements CommandOrchestrator {
     getState(): false | TextState;
     executeCommand(command: ICommand<string>, dispatch?: React.Dispatch<ContextStore>, state?: ExecuteCommandState, shortcuts?: string[]): void;
 }
-export { title, title1, title2, title3, title4, title5, title6, heading, heading1, heading2, heading3, heading4, heading5, heading6, bold, codeBlock, comment, italic, strikethrough, hr, group, divider, link, quote, code, image, unorderedListCommand, orderedListCommand, checkedListCommand, table, issue, help, codeEdit, codeLive, codePreview, fullscreen, getCommands, getExtraCommands, getStateFromTextArea, TextAreaCommandOrchestrator, TextAreaTextApi, };
+export { title, title1, title2, title3, title4, title5, title6, heading, heading1, heading2, heading3, heading4, heading5, heading6, bold, codeBlock, comment, italic, strikethrough, hr, group, divider, link, quote, code, image, unorderedListCommand, orderedListCommand, checkedListCommand, makeList, table, issue, help, codeEdit, codeLive, codePreview, fullscreen, getCommands, getExtraCommands, getStateFromTextArea, TextAreaCommandOrchestrator, TextAreaTextApi, };

package/esm/commands/index.js

@@ -10,7 +10,7 @@ import { hr } from "./hr.js";
 import { image } from "./image.js";
 import { italic } from "./italic.js";
 import { link } from "./link.js";
-import { checkedListCommand, orderedListCommand, unorderedListCommand } from "./list.js";
+import { checkedListCommand, makeList, orderedListCommand, unorderedListCommand } from "./list.js";
 import { codeEdit, codeLive, codePreview } from "./preview.js";
 import { quote } from "./quote.js";
 import { strikethrough } from "./strikeThrough.js";
@@ -88,6 +88,6 @@ class TextAreaCommandOrchestrator {
     }, getStateFromTextArea(this.textArea)), this.textApi, dispatch, state, shortcuts);
   }
 }
-export { title, title1, title2, title3, title4, title5, title6, heading, heading1, heading2, heading3, heading4, heading5, heading6, bold, codeBlock, comment, italic, strikethrough, hr, group, divider, link, quote, code, image, unorderedListCommand, orderedListCommand, checkedListCommand, table, issue, help, codeEdit, codeLive, codePreview, fullscreen,
+export { title, title1, title2, title3, title4, title5, title6, heading, heading1, heading2, heading3, heading4, heading5, heading6, bold, codeBlock, comment, italic, strikethrough, hr, group, divider, link, quote, code, image, unorderedListCommand, orderedListCommand, checkedListCommand, makeList, table, issue, help, codeEdit, codeLive, codePreview, fullscreen,
 // Tool method.
 getCommands, getExtraCommands, getStateFromTextArea, TextAreaCommandOrchestrator, TextAreaTextApi };

package/esm/commands/list.d.ts

@@ -1,6 +1,6 @@
 import { type ICommand, type ExecuteState, TextAreaTextApi } from './';
 import { AlterLineFunction } from '../utils/markdownUtils';
-export declare const makeList: (state: ExecuteState, api: TextAreaTextApi, insertBefore: string | AlterLineFunction) => void;
+export declare const makeList: (state: ExecuteState, api: TextAreaTextApi, insertBefore: string | AlterLineFunction, selectionStrategy?: "word" | "line") => void;
 export declare const unorderedListCommand: ICommand;
 export declare const orderedListCommand: ICommand;
 export declare const checkedListCommand: ICommand;

package/esm/commands/list.js

@@ -1,8 +1,14 @@
 import React from 'react';
-import { selectWord, getBreaksNeededForEmptyLineBefore, getBreaksNeededForEmptyLineAfter, insertBeforeEachLine } from "../utils/markdownUtils.js";
+import { selectWord, selectLine, getBreaksNeededForEmptyLineBefore, getBreaksNeededForEmptyLineAfter, insertBeforeEachLine } from "../utils/markdownUtils.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-export var makeList = (state, api, insertBefore) => {
-  var newSelectionRange = selectWord({
+export var makeList = function makeList(state, api, insertBefore, selectionStrategy) {
+  if (selectionStrategy === void 0) {
+    selectionStrategy = 'word';
+  }
+  var newSelectionRange = selectionStrategy === 'line' ? selectLine({
+    text: state.text,
+    selection: state.selection
+  }) : selectWord({
     text: state.text,
     selection: state.selection,
     prefix: state.command.prefix

package/esm/components/TextArea/Textarea.js

@@ -83,7 +83,6 @@ export default function Textarea(props) {
   }, []);
   return /*#__PURE__*/_jsx("textarea", _extends({
     autoComplete: "off",
-    autoCorrect: "off",
     autoCapitalize: "off",
     spellCheck: false
   }, other, {

package/esm/components/TextArea/factory.js

@@ -56,6 +56,10 @@ export function createTextArea(options) {
       WebkitTextFillColor: 'initial',
       overflow: 'auto'
     };
+    var inputProps = _extends({}, otherProps);
+    if (!inputProps['aria-label'] && !inputProps['aria-labelledby'] && !inputProps.id && !inputProps.title) {
+      inputProps['aria-label'] = 'Markdown editor';
+    }
     return /*#__PURE__*/_jsx("div", {
       ref: warp,
       className: prefixCls + "-area " + (className || ''),
@@ -65,10 +69,9 @@ export function createTextArea(options) {
         style: useMinHeight ? {
           minHeight
         } : undefined,
-        children: renderTextarea ? (/*#__PURE__*/React.cloneElement(renderTextarea(_extends({}, otherProps, {
+        children: renderTextarea ? (/*#__PURE__*/React.cloneElement(renderTextarea(_extends({}, inputProps, {
           value: markdown,
           autoComplete: 'off',
-          autoCorrect: 'off',
           spellCheck: 'false',
           autoCapitalize: 'off',
           className: prefixCls + "-text-input",
@@ -92,7 +95,7 @@ export function createTextArea(options) {
             prefixCls: prefixCls
           }), /*#__PURE__*/_jsx(Textarea, _extends({
             prefixCls: prefixCls
-          }, otherProps, {
+          }, inputProps, {
             style: textStyle
           }))]
         })

package/lib/Editor.factory.js

@@ -15,7 +15,7 @@ var _DragBar = _interopRequireDefault(require("./components/DragBar/"));
 var _commands = require("./commands/");
 var _Context = require("./Context");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["prefixCls", "className", "value", "commands", "commandsFilter", "direction", "extraCommands", "height", "enableScroll", "visibleDragbar", "highlightEnable", "preview", "fullscreen", "overflow", "previewOptions", "textareaProps", "maxHeight", "minHeight", "autoFocus", "autoFocusEnd", "tabSize", "defaultTabEnable", "onChange", "onStatistics", "onHeightChange", "hideToolbar", "toolbarBottom", "components", "renderTextarea"];
+var _excluded = ["prefixCls", "className", "value", "commands", "commandsFilter", "direction", "extraCommands", "height", "enableScroll", "visibleDragbar", "highlightEnable", "preview", "fullscreen", "overflow", "previewOptions", "textareaProps", "id", "name", "required", "disabled", "readOnly", "placeholder", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid", "aria-required", "aria-errormessage", "maxHeight", "minHeight", "autoFocus", "autoFocusEnd", "tabSize", "defaultTabEnable", "onChange", "onStatistics", "onHeightChange", "hideToolbar", "toolbarBottom", "components", "renderTextarea"];
 function setGroupPopFalse() {
   var data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   Object.keys(data).forEach(function (keyname) {
@@ -57,6 +57,18 @@ function createMDEditor(options) {
       _ref$previewOptions = _ref.previewOptions,
       previewOptions = _ref$previewOptions === void 0 ? {} : _ref$previewOptions,
       textareaProps = _ref.textareaProps,
+      id = _ref.id,
+      name = _ref.name,
+      required = _ref.required,
+      disabled = _ref.disabled,
+      readOnly = _ref.readOnly,
+      placeholder = _ref.placeholder,
+      ariaLabel = _ref['aria-label'],
+      ariaLabelledBy = _ref['aria-labelledby'],
+      ariaDescribedBy = _ref['aria-describedby'],
+      ariaInvalid = _ref['aria-invalid'],
+      ariaRequired = _ref['aria-required'],
+      ariaErrorMessage = _ref['aria-errormessage'],
       _ref$maxHeight = _ref.maxHeight,
       maxHeight = _ref$maxHeight === void 0 ? 1200 : _ref$maxHeight,
       _ref$minHeight = _ref.minHeight,
@@ -302,7 +314,19 @@ function createMDEditor(options) {
           children: [/(edit|live)/.test(state.preview || '') && /*#__PURE__*/(0, _jsxRuntime.jsx)(TextAreaComponent, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
             className: "".concat(prefixCls, "-input"),
             prefixCls: prefixCls,
-            autoFocus: autoFocus
+            autoFocus: autoFocus,
+            id: id,
+            name: name,
+            required: required,
+            disabled: disabled,
+            readOnly: readOnly,
+            placeholder: placeholder,
+            "aria-label": ariaLabel,
+            "aria-labelledby": ariaLabelledBy,
+            "aria-describedby": ariaDescribedBy,
+            "aria-invalid": ariaInvalid,
+            "aria-required": ariaRequired,
+            "aria-errormessage": ariaErrorMessage
           }, textareaProps), {}, {
             onChange: changeHandle,
             renderTextarea: (components === null || components === void 0 ? void 0 : components.textarea) || renderTextarea,

package/lib/Types.d.ts

@@ -18,6 +18,12 @@ export interface MDEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>
      * The Markdown value.
      */
     value?: string;
+    /** Native textarea form attributes. */
+    name?: React.TextareaHTMLAttributes<HTMLTextAreaElement>['name'];
+    required?: React.TextareaHTMLAttributes<HTMLTextAreaElement>['required'];
+    disabled?: React.TextareaHTMLAttributes<HTMLTextAreaElement>['disabled'];
+    readOnly?: React.TextareaHTMLAttributes<HTMLTextAreaElement>['readOnly'];
+    placeholder?: React.TextareaHTMLAttributes<HTMLTextAreaElement>['placeholder'];
     /**
      * Event handler for the `onChange` event.
      */

package/lib/commands/index.cn.d.ts

@@ -1,6 +1,7 @@
 import { type ICommand } from './';
 import { divider } from './divider';
 import { group } from './group';
+import { makeList } from './list';
 declare let bold: ICommand;
 declare let code: ICommand;
 declare let codeBlock: ICommand;
@@ -30,4 +31,4 @@ declare let table: ICommand;
 declare let help: ICommand;
 export declare const getCommands: () => ICommand[];
 export declare const getExtraCommands: () => ICommand[];
-export { title, title1, title2, title3, title4, title5, title6, bold, codeBlock, comment, italic, strikethrough, hr, group, divider, link, quote, code, image, unorderedListCommand, orderedListCommand, checkedListCommand, table, issue, help, codeEdit, codeLive, codePreview, fullscreen, };
+export { title, title1, title2, title3, title4, title5, title6, bold, codeBlock, comment, italic, strikethrough, hr, group, divider, link, quote, code, image, unorderedListCommand, orderedListCommand, checkedListCommand, makeList, table, issue, help, codeEdit, codeLive, codePreview, fullscreen, };

package/lib/commands/index.cn.js

@@ -18,7 +18,14 @@ Object.defineProperty(exports, "group", {
     return _group.group;
   }
 });
-exports.unorderedListCommand = exports.title6 = exports.title5 = exports.title4 = exports.title3 = exports.title2 = exports.title1 = exports.title = exports.table = exports.strikethrough = exports.quote = exports.orderedListCommand = exports.link = exports.italic = exports.issue = exports.image = exports.hr = exports.help = void 0;
+exports.link = exports.italic = exports.issue = exports.image = exports.hr = exports.help = void 0;
+Object.defineProperty(exports, "makeList", {
+  enumerable: true,
+  get: function get() {
+    return _list.makeList;
+  }
+});
+exports.unorderedListCommand = exports.title6 = exports.title5 = exports.title4 = exports.title3 = exports.title2 = exports.title1 = exports.title = exports.table = exports.strikethrough = exports.quote = exports.orderedListCommand = void 0;
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _divider = require("./divider");
 var _group = require("./group");

package/lib/commands/index.d.ts

@@ -10,7 +10,7 @@ import { hr } from './hr';
 import { image } from './image';
 import { italic } from './italic';
 import { link } from './link';
-import { checkedListCommand, orderedListCommand, unorderedListCommand } from './list';
+import { checkedListCommand, makeList, orderedListCommand, unorderedListCommand } from './list';
 import { codeEdit, codeLive, codePreview } from './preview';
 import { quote } from './quote';
 import { strikethrough } from './strikeThrough';
@@ -93,4 +93,4 @@ declare class TextAreaCommandOrchestrator implements CommandOrchestrator {
     getState(): false | TextState;
     executeCommand(command: ICommand<string>, dispatch?: React.Dispatch<ContextStore>, state?: ExecuteCommandState, shortcuts?: string[]): void;
 }
-export { title, title1, title2, title3, title4, title5, title6, heading, heading1, heading2, heading3, heading4, heading5, heading6, bold, codeBlock, comment, italic, strikethrough, hr, group, divider, link, quote, code, image, unorderedListCommand, orderedListCommand, checkedListCommand, table, issue, help, codeEdit, codeLive, codePreview, fullscreen, getCommands, getExtraCommands, getStateFromTextArea, TextAreaCommandOrchestrator, TextAreaTextApi, };
+export { title, title1, title2, title3, title4, title5, title6, heading, heading1, heading2, heading3, heading4, heading5, heading6, bold, codeBlock, comment, italic, strikethrough, hr, group, divider, link, quote, code, image, unorderedListCommand, orderedListCommand, checkedListCommand, makeList, table, issue, help, codeEdit, codeLive, codePreview, fullscreen, getCommands, getExtraCommands, getStateFromTextArea, TextAreaCommandOrchestrator, TextAreaTextApi, };

package/lib/commands/index.js

@@ -151,6 +151,12 @@ Object.defineProperty(exports, "link", {
     return _link.link;
   }
 });
+Object.defineProperty(exports, "makeList", {
+  enumerable: true,
+  get: function get() {
+    return _list.makeList;
+  }
+});
 Object.defineProperty(exports, "orderedListCommand", {
   enumerable: true,
   get: function get() {

package/lib/commands/list.d.ts

@@ -1,6 +1,6 @@
 import { type ICommand, type ExecuteState, TextAreaTextApi } from './';
 import { AlterLineFunction } from '../utils/markdownUtils';
-export declare const makeList: (state: ExecuteState, api: TextAreaTextApi, insertBefore: string | AlterLineFunction) => void;
+export declare const makeList: (state: ExecuteState, api: TextAreaTextApi, insertBefore: string | AlterLineFunction, selectionStrategy?: "word" | "line") => void;
 export declare const unorderedListCommand: ICommand;
 export declare const orderedListCommand: ICommand;
 export declare const checkedListCommand: ICommand;

package/lib/commands/list.js

@@ -9,7 +9,11 @@ var _react = _interopRequireDefault(require("react"));
 var _markdownUtils = require("../utils/markdownUtils");
 var _jsxRuntime = require("react/jsx-runtime");
 var makeList = exports.makeList = function makeList(state, api, insertBefore) {
-  var newSelectionRange = (0, _markdownUtils.selectWord)({
+  var selectionStrategy = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'word';
+  var newSelectionRange = selectionStrategy === 'line' ? (0, _markdownUtils.selectLine)({
+    text: state.text,
+    selection: state.selection
+  }) : (0, _markdownUtils.selectWord)({
     text: state.text,
     selection: state.selection,
     prefix: state.command.prefix

package/lib/components/TextArea/Textarea.js

@@ -91,7 +91,6 @@ function Textarea(props) {
   }, []);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("textarea", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
     autoComplete: "off",
-    autoCorrect: "off",
     autoCapitalize: "off",
     spellCheck: false
   }, other), {}, {

package/lib/components/TextArea/factory.js

@@ -63,6 +63,10 @@ function createTextArea(options) {
       WebkitTextFillColor: 'initial',
       overflow: 'auto'
     };
+    var inputProps = (0, _objectSpread2["default"])({}, otherProps);
+    if (!inputProps['aria-label'] && !inputProps['aria-labelledby'] && !inputProps.id && !inputProps.title) {
+      inputProps['aria-label'] = 'Markdown editor';
+    }
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       ref: warp,
       className: "".concat(prefixCls, "-area ").concat(className || ''),
@@ -72,10 +76,9 @@ function createTextArea(options) {
         style: useMinHeight ? {
           minHeight: minHeight
         } : undefined,
-        children: renderTextarea ? (/*#__PURE__*/_react["default"].cloneElement(renderTextarea((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, otherProps), {}, {
+        children: renderTextarea ? (/*#__PURE__*/_react["default"].cloneElement(renderTextarea((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, inputProps), {}, {
           value: markdown,
           autoComplete: 'off',
-          autoCorrect: 'off',
           spellCheck: 'false',
           autoCapitalize: 'off',
           className: "".concat(prefixCls, "-text-input"),
@@ -99,7 +102,7 @@ function createTextArea(options) {
             prefixCls: prefixCls
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Textarea["default"], (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
             prefixCls: prefixCls
-          }, otherProps), {}, {
+          }, inputProps), {}, {
             style: textStyle
           }))]
         })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uiw/react-md-editor",
-  "version": "4.1.4",
+  "version": "4.1.6",
   "description": "A markdown editor with preview, implemented with React.js and TypeScript.",
   "homepage": "https://uiwjs.github.io/react-md-editor/",
   "funding": "https://jaywcjlove.github.io/#/sponsor",

package/src/Editor.factory.tsx

@@ -44,6 +44,18 @@ export function createMDEditor<
         overflow = true,
         previewOptions = {},
         textareaProps,
+        id,
+        name,
+        required,
+        disabled,
+        readOnly,
+        placeholder,
+        'aria-label': ariaLabel,
+        'aria-labelledby': ariaLabelledBy,
+        'aria-describedby': ariaDescribedBy,
+        'aria-invalid': ariaInvalid,
+        'aria-required': ariaRequired,
+        'aria-errormessage': ariaErrorMessage,
         maxHeight = 1200,
         minHeight = 100,
         autoFocus,
@@ -244,6 +256,18 @@ export function createMDEditor<
                   className={`${prefixCls}-input`}
                   prefixCls={prefixCls}
                   autoFocus={autoFocus}
+                  id={id}
+                  name={name}
+                  required={required}
+                  disabled={disabled}
+                  readOnly={readOnly}
+                  placeholder={placeholder}
+                  aria-label={ariaLabel}
+                  aria-labelledby={ariaLabelledBy}
+                  aria-describedby={ariaDescribedBy}
+                  aria-invalid={ariaInvalid}
+                  aria-required={ariaRequired}
+                  aria-errormessage={ariaErrorMessage}
                   {...textareaProps}
                   onChange={changeHandle}
                   renderTextarea={components?.textarea || renderTextarea}

package/src/Types.ts

@@ -21,6 +21,12 @@ export interface MDEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>
    * The Markdown value.
    */
   value?: string;
+  /** Native textarea form attributes. */
+  name?: React.TextareaHTMLAttributes<HTMLTextAreaElement>['name'];
+  required?: React.TextareaHTMLAttributes<HTMLTextAreaElement>['required'];
+  disabled?: React.TextareaHTMLAttributes<HTMLTextAreaElement>['disabled'];
+  readOnly?: React.TextareaHTMLAttributes<HTMLTextAreaElement>['readOnly'];
+  placeholder?: React.TextareaHTMLAttributes<HTMLTextAreaElement>['placeholder'];
   /**
    * Event handler for the `onChange` event.
    */

package/src/commands/index.cn.ts

@@ -12,6 +12,7 @@ import { italic as italicInit } from './italic';
 import { link as linkInit } from './link';
 import {
   checkedListCommand as checkedListCommandInit,
+  makeList,
   orderedListCommand as orderedListCommandInit,
   unorderedListCommand as unorderedListCommandInit,
 } from './list';
@@ -177,6 +178,7 @@ export {
   unorderedListCommand,
   orderedListCommand,
   checkedListCommand,
+  makeList,
   table,
   issue,
   help,

package/src/commands/index.ts

@@ -11,7 +11,7 @@ import { hr } from './hr';
 import { image } from './image';
 import { italic } from './italic';
 import { link } from './link';
-import { checkedListCommand, orderedListCommand, unorderedListCommand } from './list';
+import { checkedListCommand, makeList, orderedListCommand, unorderedListCommand } from './list';
 import { codeEdit, codeLive, codePreview } from './preview';
 import { quote } from './quote';
 import { strikethrough } from './strikeThrough';
@@ -210,6 +210,7 @@ export {
   unorderedListCommand,
   orderedListCommand,
   checkedListCommand,
+  makeList,
   table,
   issue,
   help,

package/src/commands/list.tsx

@@ -2,14 +2,23 @@ import React from 'react';
 import { type ICommand, type ExecuteState, TextAreaTextApi } from './';
 import {
   selectWord,
+  selectLine,
   getBreaksNeededForEmptyLineBefore,
   getBreaksNeededForEmptyLineAfter,
   insertBeforeEachLine,
   AlterLineFunction,
 } from '../utils/markdownUtils';
 
-export const makeList = (state: ExecuteState, api: TextAreaTextApi, insertBefore: string | AlterLineFunction) => {
-  const newSelectionRange = selectWord({ text: state.text, selection: state.selection, prefix: state.command.prefix! });
+export const makeList = (
+  state: ExecuteState,
+  api: TextAreaTextApi,
+  insertBefore: string | AlterLineFunction,
+  selectionStrategy: 'word' | 'line' = 'word',
+) => {
+  const newSelectionRange =
+    selectionStrategy === 'line'
+      ? selectLine({ text: state.text, selection: state.selection })
+      : selectWord({ text: state.text, selection: state.selection, prefix: state.command.prefix! });
   const state1 = api.setSelectionRange(newSelectionRange);
 
   const breaksBeforeCount = getBreaksNeededForEmptyLineBefore(state1.text, state1.selection.start);

package/src/components/TextArea/Textarea.tsx

@@ -77,7 +77,6 @@ export default function Textarea(props: TextAreaProps) {
   return (
     <textarea
       autoComplete="off"
-      autoCorrect="off"
       autoCapitalize="off"
       spellCheck={false}
       {...other}

package/src/components/TextArea/factory.tsx

@@ -25,8 +25,7 @@ export type RenderTextareaHandle = {
 };
 
 export interface ITextAreaProps
-  extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'onScroll'>,
-    IProps {
+  extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'onScroll'>, IProps {
   value?: string;
   onScroll?: (e: React.UIEvent<HTMLDivElement>) => void;
   renderTextarea?: (
@@ -76,6 +75,10 @@ export function createTextArea(options?: { Markdown?: MarkdownComponent; useMinH
 
     const textStyle: CSS.Properties =
       MarkdownComponent && highlightEnable ? {} : { WebkitTextFillColor: 'initial', overflow: 'auto' };
+    const inputProps = { ...otherProps };
+    if (!inputProps['aria-label'] && !inputProps['aria-labelledby'] && !inputProps.id && !inputProps.title) {
+      inputProps['aria-label'] = 'Markdown editor';
+    }
 
     return (
       <div ref={warp} className={`${prefixCls}-area ${className || ''}`} onScroll={onScroll}>
@@ -84,10 +87,9 @@ export function createTextArea(options?: { Markdown?: MarkdownComponent; useMinH
             React.cloneElement(
               renderTextarea(
                 {
-                  ...otherProps,
+                  ...inputProps,
                   value: markdown,
                   autoComplete: 'off',
-                  autoCorrect: 'off',
                   spellCheck: 'false',
                   autoCapitalize: 'off',
                   className: `${prefixCls}-text-input`,
@@ -110,7 +112,7 @@ export function createTextArea(options?: { Markdown?: MarkdownComponent; useMinH
           ) : (
             <Fragment>
               {MarkdownComponent && highlightEnable && <MarkdownComponent prefixCls={prefixCls} />}
-              <Textarea prefixCls={prefixCls} {...otherProps} style={textStyle} />
+              <Textarea prefixCls={prefixCls} {...inputProps} style={textStyle} />
             </Fragment>
           )}
         </div>