@uiw/react-md-editor 4.1.5 → 4.1.7

package/esm/Editor.factory.js

@@ -1,7 +1,8 @@
 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"];
-import React, { useEffect, useReducer, useMemo, useRef, useImperativeHandle } from 'react';
+var _excluded = ["renderMsRef"],
+  _excluded2 = ["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, useLayoutEffect, useReducer, useMemo, useRef, useImperativeHandle } from 'react';
 import { ToolbarVisibility } from "./components/Toolbar/index.js";
 import DragBar from "./components/DragBar/index.js";
 import { getCommands, getExtraCommands, TextAreaCommandOrchestrator } from "./commands/index.js";
@@ -16,11 +17,57 @@ function setGroupPopFalse(data) {
   });
   return data;
 }
+var DEFAULT_PREVIEW_OPTIONS = {};
+
+/**
+ * Lets the preview render after the textarea on React 18+, so typing in a large
+ * document stays responsive. Older React versions render it right away, as before.
+ */
+var useDeferredValue = React.useDeferredValue || (value => value);
+var useIsomorphicLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;
+var SLOW_PREVIEW_MS = 50;
+var MAX_PREVIEW_DELAY_MS = 500;
+
+/**
+ * Keeps the preview in step with every keystroke while it renders fast. Once a preview
+ * render takes longer than SLOW_PREVIEW_MS, it waits for a pause in typing as long as
+ * that render (at most MAX_PREVIEW_DELAY_MS) before updating.
+ * https://github.com/uiwjs/react-md-editor/issues/620
+ */
+function usePreviewSource(markdown, previewRenderMs) {
+  var _useReducer = useReducer(count => count + 1, 0),
+    rerender = _useReducer[1];
+  var shownRef = useRef(markdown);
+  if (previewRenderMs.current < SLOW_PREVIEW_MS) {
+    shownRef.current = markdown;
+  }
+  useEffect(() => {
+    if (shownRef.current === markdown) {
+      return;
+    }
+    var delay = Math.min(previewRenderMs.current, MAX_PREVIEW_DELAY_MS);
+    var timer = setTimeout(() => {
+      shownRef.current = markdown;
+      rerender();
+    }, delay);
+    return () => clearTimeout(timer);
+  }, [markdown, previewRenderMs]);
+  return shownRef.current;
+}
 export function createMDEditor(options) {
   var MarkdownPreview = options.MarkdownPreview,
     TextArea = options.TextArea;
   var PreviewComponent = MarkdownPreview;
   var TextAreaComponent = TextArea;
+  function TimedPreview(props) {
+    var renderMsRef = props.renderMsRef,
+      previewProps = _objectWithoutPropertiesLoose(props, _excluded);
+    var renderStart = performance.now();
+    useIsomorphicLayoutEffect(() => {
+      renderMsRef.current = performance.now() - renderStart;
+    });
+    return /*#__PURE__*/_jsx(PreviewComponent, _extends({}, previewProps));
+  }
   var InternalMDEditor = /*#__PURE__*/React.forwardRef((props, ref) => {
     var _ref = props || {},
       _ref$prefixCls = _ref.prefixCls,
@@ -48,8 +95,20 @@ export function createMDEditor(options) {
       _ref$overflow = _ref.overflow,
       overflow = _ref$overflow === void 0 ? true : _ref$overflow,
       _ref$previewOptions = _ref.previewOptions,
-      previewOptions = _ref$previewOptions === void 0 ? {} : _ref$previewOptions,
+      previewOptions = _ref$previewOptions === void 0 ? DEFAULT_PREVIEW_OPTIONS : _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,
@@ -69,10 +128,10 @@ export function createMDEditor(options) {
       toolbarBottom = _ref$toolbarBottom === void 0 ? false : _ref$toolbarBottom,
       components = _ref.components,
       renderTextarea = _ref.renderTextarea,
-      other = _objectWithoutPropertiesLoose(_ref, _excluded);
+      other = _objectWithoutPropertiesLoose(_ref, _excluded2);
     var cmds = commands.map(item => commandsFilter ? commandsFilter(item, false) : item).filter(Boolean);
     var extraCmds = extraCommands.map(item => commandsFilter ? commandsFilter(item, true) : item).filter(Boolean);
-    var _useReducer = useReducer(reducer, {
+    var _useReducer2 = useReducer(reducer, {
         markdown: propsValue,
         preview: previewType,
         components,
@@ -88,8 +147,8 @@ export function createMDEditor(options) {
         fullscreen,
         barPopup: {}
       }),
-      state = _useReducer[0],
-      dispatch = _useReducer[1];
+      state = _useReducer2[0],
+      dispatch = _useReducer2[1];
     var container = useRef(null);
     var previewRef = useRef(null);
     var enableScrollRef = useRef(enableScroll);
@@ -195,14 +254,17 @@ export function createMDEditor(options) {
     };
     var previewClassName = prefixCls + "-preview " + (previewOptions.className || '');
     var handlePreviewScroll = e => handleScroll(e, 'preview');
+    var previewRenderMs = useRef(0);
+    var previewMarkdown = useDeferredValue(usePreviewSource(state.markdown || '', previewRenderMs));
     var mdPreview = useMemo(() => /*#__PURE__*/_jsx("div", {
       ref: previewRef,
       className: previewClassName,
-      children: /*#__PURE__*/_jsx(PreviewComponent, _extends({}, previewOptions, {
+      children: /*#__PURE__*/_jsx(TimedPreview, _extends({}, previewOptions, {
+        renderMsRef: previewRenderMs,
         onScroll: handlePreviewScroll,
-        source: state.markdown || ''
+        source: previewMarkdown
       }))
-    }), [previewClassName, previewOptions, state.markdown]);
+    }), [previewClassName, previewOptions, previewMarkdown]);
     var preview = (components == null ? void 0 : components.preview) && (components == null ? void 0 : components.preview(state.markdown || '', state, dispatch));
     if (preview && /*#__PURE__*/React.isValidElement(preview)) {
       mdPreview = /*#__PURE__*/_jsx("div", {
@@ -256,7 +318,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/Markdown.common.d.ts

@@ -1,5 +1,3 @@
-import React from 'react';
-import { type IProps } from '../../Types';
-export interface MarkdownProps extends IProps, React.HTMLAttributes<HTMLPreElement> {
-}
-export default function Markdown(props: MarkdownProps): import("react/jsx-runtime").JSX.Element;
+export type { MarkdownProps } from './Markdown.factory';
+declare const _default: (props: import("./Markdown.factory").MarkdownProps) => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/esm/components/TextArea/Markdown.common.js

@@ -1,57 +1,3 @@
-import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/taggedTemplateLiteralLoose";
-var _templateObject;
-import React, { useContext, useEffect } from 'react';
-import { rehype } from 'rehype';
 import rehypePrism from 'rehype-prism-plus/common';
-import { EditorContext } from "../../Context.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-function html2Escape(sHtml) {
-  return sHtml.replace(/[<&"]/g, c => ({
-    '<': '&lt;',
-    '>': '&gt;',
-    '&': '&amp;',
-    '"': '&quot;'
-  })[c]);
-}
-export default function Markdown(props) {
-  var prefixCls = props.prefixCls;
-  var _useContext = useContext(EditorContext),
-    _useContext$markdown = _useContext.markdown,
-    markdown = _useContext$markdown === void 0 ? '' : _useContext$markdown,
-    highlightEnable = _useContext.highlightEnable,
-    dispatch = _useContext.dispatch;
-  var preRef = /*#__PURE__*/React.createRef();
-  useEffect(() => {
-    if (preRef.current && dispatch) {
-      dispatch({
-        textareaPre: preRef.current
-      });
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  if (!markdown) {
-    return /*#__PURE__*/_jsx("pre", {
-      ref: preRef,
-      className: prefixCls + "-text-pre wmde-markdown-color"
-    });
-  }
-  var mdStr = "<pre class=\"language-markdown " + prefixCls + "-text-pre wmde-markdown-color\"><code class=\"language-markdown\">" + html2Escape(String.raw(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["", ""])), markdown)) + "\n</code></pre>";
-  if (highlightEnable) {
-    try {
-      mdStr = rehype().data('settings', {
-        fragment: true
-      })
-      // https://github.com/uiwjs/react-md-editor/issues/593
-      // @ts-ignore
-      .use(rehypePrism, {
-        ignoreMissing: true
-      }).processSync(mdStr).toString();
-    } catch (error) {}
-  }
-  return /*#__PURE__*/React.createElement('div', {
-    className: 'wmde-markdown-color',
-    dangerouslySetInnerHTML: {
-      __html: mdStr || ''
-    }
-  });
-}
+import { createMarkdown } from './Markdown.factory';
+export default createMarkdown(rehypePrism);

package/esm/components/TextArea/Markdown.d.ts

@@ -1,5 +1,3 @@
-import React from 'react';
-import { type IProps } from '../../Types';
-export interface MarkdownProps extends IProps, React.HTMLAttributes<HTMLPreElement> {
-}
-export default function Markdown(props: MarkdownProps): import("react/jsx-runtime").JSX.Element;
+export type { MarkdownProps } from './Markdown.factory';
+declare const _default: (props: import("./Markdown.factory").MarkdownProps) => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/esm/components/TextArea/Markdown.factory.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type rehypePrismPlus from 'rehype-prism-plus';
+import { type IProps } from '../../Types';
+export interface MarkdownProps extends IProps, React.HTMLAttributes<HTMLPreElement> {
+}
+export declare function createMarkdown(rehypePrism: typeof rehypePrismPlus): (props: MarkdownProps) => import("react/jsx-runtime").JSX.Element;

package/esm/components/TextArea/Markdown.factory.js

@@ -0,0 +1,138 @@
+import React, { useContext, useEffect, useMemo, useRef } from 'react';
+import { rehype } from 'rehype';
+import { EditorContext } from "../../Context.js";
+import { splitBlocks } from "./splitBlocks.js";
+/**
+ * Prism's markdown grammar takes quadratic time on long lines, so a single base64 image
+ * line can block the editor for minutes. Blocks with such a line are shown uncoloured.
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var MAX_HIGHLIGHT_LINE_LENGTH = 1000;
+function html2Escape(sHtml) {
+  return sHtml.replace(/[<&"]/g, c => ({
+    '<': '&lt;',
+    '>': '&gt;',
+    '&': '&amp;',
+    '"': '&quot;'
+  })[c]);
+}
+function hasLongLine(text) {
+  var lineStart = 0;
+  while (lineStart <= text.length) {
+    var lineEnd = text.indexOf('\n', lineStart);
+    var end = lineEnd === -1 ? text.length : lineEnd;
+    if (end - lineStart > MAX_HIGHLIGHT_LINE_LENGTH) {
+      return true;
+    }
+    lineStart = end + 1;
+  }
+  return false;
+}
+function getCodeInnerHtml(html) {
+  var codeStart = html.indexOf('<code');
+  var contentStart = html.indexOf('>', codeStart) + 1;
+  var contentEnd = html.lastIndexOf('</code>');
+  return html.slice(contentStart, contentEnd);
+}
+var MarkdownBlock = /*#__PURE__*/React.memo(function MarkdownBlock(props) {
+  return /*#__PURE__*/React.createElement('span', {
+    dangerouslySetInnerHTML: {
+      __html: props.html
+    }
+  });
+});
+export function createMarkdown(rehypePrism) {
+  var processor = rehype().data('settings', {
+    fragment: true
+  })
+  // https://github.com/uiwjs/react-md-editor/issues/593
+  // @ts-ignore
+  .use(rehypePrism, {
+    ignoreMissing: true
+  });
+  function highlightBlock(block) {
+    var escaped = html2Escape(block);
+    if (hasLongLine(block)) {
+      return escaped;
+    }
+    try {
+      var html = processor.processSync("<pre><code class=\"language-markdown\">" + escaped + "</code></pre>").toString();
+      return getCodeInnerHtml(html);
+    } catch (error) {
+      return escaped;
+    }
+  }
+
+  /**
+   * Highlighting runs per block, and blocks whose text did not change reuse their cached
+   * HTML and DOM, so typing in a large document only re-highlights the edited block.
+   * https://github.com/uiwjs/react-md-editor/issues/620
+   */
+  return function Markdown(props) {
+    var prefixCls = props.prefixCls;
+    var _useContext = useContext(EditorContext),
+      _useContext$markdown = _useContext.markdown,
+      markdown = _useContext$markdown === void 0 ? '' : _useContext$markdown,
+      highlightEnable = _useContext.highlightEnable,
+      dispatch = _useContext.dispatch;
+    var preRef = useRef(null);
+    var cacheRef = useRef(new Map());
+    var nextIdRef = useRef(0);
+    useEffect(() => {
+      if (preRef.current && dispatch) {
+        dispatch({
+          textareaPre: preRef.current
+        });
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    var blocks = useMemo(() => {
+      if (!highlightEnable) {
+        cacheRef.current = new Map();
+        return [];
+      }
+      var cache = new Map();
+      var occurrences = new Map();
+      var result = splitBlocks(markdown).map(block => {
+        var highlighted = cacheRef.current.get(block) || cache.get(block);
+        if (!highlighted) {
+          highlighted = {
+            id: nextIdRef.current++,
+            html: highlightBlock(block)
+          };
+        }
+        cache.set(block, highlighted);
+        var occurrence = occurrences.get(block) || 0;
+        occurrences.set(block, occurrence + 1);
+        return {
+          key: highlighted.id + "-" + occurrence,
+          html: highlighted.html
+        };
+      });
+      cacheRef.current = cache;
+      return result;
+    }, [markdown, highlightEnable]);
+    if (!markdown) {
+      return /*#__PURE__*/_jsx("pre", {
+        ref: preRef,
+        className: prefixCls + "-text-pre wmde-markdown-color"
+      });
+    }
+    return /*#__PURE__*/_jsx("div", {
+      className: "wmde-markdown-color",
+      children: /*#__PURE__*/_jsx("pre", {
+        ref: preRef,
+        className: "language-markdown " + prefixCls + "-text-pre wmde-markdown-color",
+        children: highlightEnable ? /*#__PURE__*/_jsxs("code", {
+          className: "language-markdown code-highlight",
+          children: [blocks.map(block => /*#__PURE__*/_jsx(MarkdownBlock, {
+            html: block.html
+          }, block.key)), '\n']
+        }) : /*#__PURE__*/_jsx("code", {
+          className: "language-markdown",
+          children: markdown + "\n"
+        })
+      })
+    });
+  };
+}

package/esm/components/TextArea/Markdown.js

@@ -1,64 +1,3 @@
-import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/taggedTemplateLiteralLoose";
-var _templateObject;
-import React, { useContext, useEffect } from 'react';
-import { rehype } from 'rehype';
 import rehypePrism from 'rehype-prism-plus';
-import { EditorContext } from "../../Context.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-function html2Escape(sHtml) {
-  return sHtml
-  // .replace(/```(\w+)?([\s\S]*?)(\s.+)?```/g, (str: string) => {
-  //   return str.replace(
-  //     /[<&"]/g,
-  //     (c: string) => (({ '<': '&lt;', '>': '&gt;', '&': '&amp;', '"': '&quot;' } as Record<string, string>)[c]),
-  //   );
-  // })
-  .replace(/[<&"]/g, c => ({
-    '<': '&lt;',
-    '>': '&gt;',
-    '&': '&amp;',
-    '"': '&quot;'
-  })[c]);
-}
-export default function Markdown(props) {
-  var prefixCls = props.prefixCls;
-  var _useContext = useContext(EditorContext),
-    _useContext$markdown = _useContext.markdown,
-    markdown = _useContext$markdown === void 0 ? '' : _useContext$markdown,
-    highlightEnable = _useContext.highlightEnable,
-    dispatch = _useContext.dispatch;
-  var preRef = /*#__PURE__*/React.createRef();
-  useEffect(() => {
-    if (preRef.current && dispatch) {
-      dispatch({
-        textareaPre: preRef.current
-      });
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  if (!markdown) {
-    return /*#__PURE__*/_jsx("pre", {
-      ref: preRef,
-      className: prefixCls + "-text-pre wmde-markdown-color"
-    });
-  }
-  var mdStr = "<pre class=\"language-markdown " + prefixCls + "-text-pre wmde-markdown-color\"><code class=\"language-markdown\">" + html2Escape(String.raw(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["", ""])), markdown)) + "\n</code></pre>";
-  if (highlightEnable) {
-    try {
-      mdStr = rehype().data('settings', {
-        fragment: true
-      })
-      // https://github.com/uiwjs/react-md-editor/issues/593
-      // @ts-ignore
-      .use(rehypePrism, {
-        ignoreMissing: true
-      }).processSync(mdStr).toString();
-    } catch (error) {}
-  }
-  return /*#__PURE__*/React.createElement('div', {
-    className: 'wmde-markdown-color',
-    dangerouslySetInnerHTML: {
-      __html: mdStr || ''
-    }
-  });
-}
+import { createMarkdown } from './Markdown.factory';
+export default createMarkdown(rehypePrism);

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,7 +69,7 @@ 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',
           spellCheck: 'false',
@@ -91,7 +95,7 @@ export function createTextArea(options) {
             prefixCls: prefixCls
           }), /*#__PURE__*/_jsx(Textarea, _extends({
             prefixCls: prefixCls
-          }, otherProps, {
+          }, inputProps, {
             style: textStyle
           }))]
         })

package/esm/components/TextArea/index.css

@@ -113,6 +113,11 @@
 .w-md-editor-text-pre .token.bold {
   font-weight: unset !important;
 }
+.w-md-editor-text-pre .token.list,
+.w-md-editor-text-pre .token.table {
+  display: inline;
+  font-size: inherit;
+}
 .w-md-editor-text-pre .token.title {
   line-height: unset !important;
   font-size: unset !important;

package/esm/components/TextArea/index.less

@@ -119,6 +119,11 @@
   .token.bold {
     font-weight: unset !important;
   }
+  .token.list,
+  .token.table {
+    display: inline;
+    font-size: inherit;
+  }
   .token.title {
     line-height: unset !important;
     font-size: unset !important;

package/esm/components/TextArea/splitBlocks.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Splits markdown into blocks that Prism's markdown grammar highlights the same way
+ * on their own as it does in the full document, so unchanged blocks can be cached.
+ * Joining the returned blocks always yields the original string.
+ *
+ * A block ends where a run of blank lines starts, so each block keeps its leading blank
+ * lines (indented code needs them). No split happens inside a ``` fence, front matter or
+ * multiline markup or link references, or right before a `---` line, which Prism
+ * would read as front matter. Whitespace-only lines stay in their block because
+ * Prism's inline emphasis can span them.
+ * Fences follow Prism's rule, not CommonMark's, so the split matches what Prism sees.
+ */
+export declare function splitBlocks(markdown: string): string[];