@uiw/react-md-editor 4.1.5 → 4.1.7

package/lib/components/TextArea/Markdown.js

@@ -1,75 +1,11 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = Markdown;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _react = _interopRequireWildcard(require("react"));
-var _rehype = require("rehype");
+exports["default"] = void 0;
 var _rehypePrismPlus = _interopRequireDefault(require("rehype-prism-plus"));
-var _Context = require("../../Context");
-var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject;
-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, function (c) {
-    return {
-      '<': '&lt;',
-      '>': '&gt;',
-      '&': '&amp;',
-      '"': '&quot;'
-    }[c];
-  });
-}
-function Markdown(props) {
-  var prefixCls = props.prefixCls;
-  var _useContext = (0, _react.useContext)(_Context.EditorContext),
-    _useContext$markdown = _useContext.markdown,
-    markdown = _useContext$markdown === void 0 ? '' : _useContext$markdown,
-    highlightEnable = _useContext.highlightEnable,
-    dispatch = _useContext.dispatch;
-  var preRef = /*#__PURE__*/_react["default"].createRef();
-  (0, _react.useEffect)(function () {
-    if (preRef.current && dispatch) {
-      dispatch({
-        textareaPre: preRef.current
-      });
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  if (!markdown) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)("pre", {
-      ref: preRef,
-      className: "".concat(prefixCls, "-text-pre wmde-markdown-color")
-    });
-  }
-  var mdStr = "<pre class=\"language-markdown ".concat(prefixCls, "-text-pre wmde-markdown-color\"><code class=\"language-markdown\">").concat(html2Escape(String.raw(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["", ""])), markdown)), "\n</code></pre>");
-  if (highlightEnable) {
-    try {
-      mdStr = (0, _rehype.rehype)().data('settings', {
-        fragment: true
-      })
-      // https://github.com/uiwjs/react-md-editor/issues/593
-      // @ts-ignore
-      .use(_rehypePrismPlus["default"], {
-        ignoreMissing: true
-      }).processSync(mdStr).toString();
-    } catch (error) {}
-  }
-  return /*#__PURE__*/_react["default"].createElement('div', {
-    className: 'wmde-markdown-color',
-    dangerouslySetInnerHTML: {
-      __html: mdStr || ''
-    }
-  });
-}
+var _Markdown = require("./Markdown.factory");
+var _default = exports["default"] = (0, _Markdown.createMarkdown)(_rehypePrismPlus["default"]);
 module.exports = exports.default;

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,7 +76,7 @@ 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',
           spellCheck: 'false',
@@ -98,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/lib/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/lib/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[];

package/lib/components/TextArea/splitBlocks.js

@@ -0,0 +1,117 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.splitBlocks = splitBlocks;
+var FENCE_OPEN = /^```/;
+var FENCE_CLOSE = /^```\r?\n?$/;
+var BLANK_LINE = /^[ \t]*\r?\n?$/;
+var FRONT_MATTER_FENCE = /^---\r?\n?$/;
+
+/**
+ * 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.
+ */
+function splitBlocks(markdown) {
+  var lines = markdown.match(/[^\n]*\n|[^\n]+$/g) || [];
+  var blocks = [];
+  var current = '';
+  var pendingSplit = -1;
+  var inFence = false;
+  var inFrontMatter = /^(?:\s*[\r\n])?---(?:\r?\n|$)/.test(markdown);
+  var frontMatterStarted = false;
+  var syntax = {
+    end: '',
+    quote: '',
+    brackets: 0,
+    subset: 0
+  };
+  var previousIsBlank = true;
+  lines.forEach(function (line) {
+    var isBlank = BLANK_LINE.test(line);
+    var canSplit = !inFence && !inFrontMatter && !syntax.end && !syntax.brackets;
+    if (/^\r?\n$/.test(line) && !previousIsBlank && canSplit) {
+      pendingSplit = current.length;
+    }
+    if (!isBlank && pendingSplit > 0) {
+      if (!FRONT_MATTER_FENCE.test(line)) {
+        blocks.push(current.slice(0, pendingSplit));
+        current = current.slice(pendingSplit);
+      }
+      pendingSplit = -1;
+    }
+    current += line;
+    previousIsBlank = isBlank;
+    if (inFrontMatter) {
+      if (FRONT_MATTER_FENCE.test(line)) {
+        inFrontMatter = !frontMatterStarted;
+        frontMatterStarted = true;
+      }
+      return;
+    }
+    if (inFence) {
+      inFence = !FENCE_CLOSE.test(line);
+      return;
+    }
+    if (!syntax.end && FENCE_OPEN.test(line)) {
+      inFence = true;
+      return;
+    }
+    updateSyntax(line, syntax);
+  });
+  if (current) {
+    blocks.push(current);
+  }
+  return blocks;
+}
+
+// Keep potential multiline Prism tokens together. Unclosed syntax conservatively
+// keeps the rest of the document in one block until the user closes it.
+function updateSyntax(line, state) {
+  var reference = false;
+  for (var i = 0; i < line.length; i++) {
+    var _char = line[i];
+    if (state.end && state.end !== '>') {
+      var end = line.indexOf(state.end, i);
+      if (end === -1) return;
+      i = end + state.end.length - 1;
+      state.end = '';
+      continue;
+    }
+    if (state.end === '>') {
+      if (state.quote) {
+        if (_char === state.quote) state.quote = '';
+      } else if (_char === '"' || _char === "'") {
+        state.quote = _char;
+      } else if (_char === '[') {
+        state.subset++;
+      } else if (_char === ']' && state.subset) {
+        state.subset--;
+      } else if (_char === '>' && !state.subset) {
+        state.end = '';
+      }
+      continue;
+    }
+    if (_char === '\\') {
+      i++;
+    } else if (_char === '<' && /[a-z!?/]/i.test(line[i + 1] || '')) {
+      state.end = line.startsWith('<!--', i) ? '-->' : line.startsWith('<![CDATA[', i) ? ']]>' : line.startsWith('<?', i) ? '?>' : '>';
+    } else if (_char === '[') {
+      state.brackets++;
+    } else if (_char === ']') {
+      state.brackets = Math.max(0, state.brackets - 1);
+      reference = line[i + 1] === ':';
+    } else if (reference && (_char === '"' || _char === "'" || _char === '(')) {
+      state.end = _char === '(' ? ')' : _char;
+    }
+  }
+}

package/markdown-editor.css

@@ -131,6 +131,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uiw/react-md-editor",
-  "version": "4.1.5",
+  "version": "4.1.7",
   "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",
@@ -12,29 +12,34 @@
     "./package.json": "./package.json",
     "./markdown-editor.css": "./markdown-editor.css",
     ".": {
-      "import": "./esm/index.js",
       "types": "./lib/index.d.ts",
-      "require": "./lib/index.js"
+      "import": "./esm/index.js",
+      "require": "./lib/index.js",
+      "default": "./esm/index.js"
     },
     "./common": {
-      "import": "./esm/index.common.js",
       "types": "./lib/index.common.d.ts",
-      "require": "./lib/index.common.js"
+      "import": "./esm/index.common.js",
+      "require": "./lib/index.common.js",
+      "default": "./esm/index.common.js"
     },
     "./nohighlight": {
-      "import": "./esm/index.nohighlight.js",
       "types": "./lib/index.nohighlight.d.ts",
-      "require": "./lib/index.nohighlight.js"
+      "import": "./esm/index.nohighlight.js",
+      "require": "./lib/index.nohighlight.js",
+      "default": "./esm/index.nohighlight.js"
     },
     "./commands": {
-      "import": "./esm/commands/index.js",
       "types": "./lib/commands/index.d.ts",
-      "require": "./lib/commands/index.js"
+      "import": "./esm/commands/index.js",
+      "require": "./lib/commands/index.js",
+      "default": "./esm/commands/index.js"
     },
     "./commands-cn": {
-      "import": "./esm/commands/index.cn.js",
       "types": "./lib/commands/index.cn.d.ts",
-      "require": "./lib/commands/index.cn.js"
+      "import": "./esm/commands/index.cn.js",
+      "require": "./lib/commands/index.cn.js",
+      "default": "./esm/commands/index.cn.js"
     }
   },
   "repository": {
@@ -79,5 +84,6 @@
     "uiw",
     "uiwjs",
     "code"
-  ]
+  ],
+  "types": "lib/index.d.ts"
 }

package/src/Editor.factory.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useReducer, useMemo, useRef, useImperativeHandle } from 'react';
+import React, { useEffect, useLayoutEffect, useReducer, useMemo, useRef, useImperativeHandle } from 'react';
 import { ToolbarVisibility } from './components/Toolbar/';
 import DragBar from './components/DragBar/';
 import { getCommands, getExtraCommands, type ICommand, type TextState, TextAreaCommandOrchestrator } from './commands/';
@@ -12,6 +12,45 @@ function setGroupPopFalse(data: Record<string, boolean> = {}) {
   return data;
 }
 
+const DEFAULT_PREVIEW_OPTIONS: NonNullable<MDEditorProps['previewOptions']> = {};
+
+/**
+ * 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.
+ */
+const useDeferredValue: <T>(value: T) => T = (React as any).useDeferredValue || ((value) => value);
+
+const useIsomorphicLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;
+
+const SLOW_PREVIEW_MS = 50;
+const 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: string, previewRenderMs: React.MutableRefObject<number>) {
+  const [, rerender] = useReducer((count: number) => count + 1, 0);
+  const shownRef = useRef(markdown);
+  if (previewRenderMs.current < SLOW_PREVIEW_MS) {
+    shownRef.current = markdown;
+  }
+  useEffect(() => {
+    if (shownRef.current === markdown) {
+      return;
+    }
+    const delay = Math.min(previewRenderMs.current, MAX_PREVIEW_DELAY_MS);
+    const timer = setTimeout(() => {
+      shownRef.current = markdown;
+      rerender();
+    }, delay);
+    return () => clearTimeout(timer);
+  }, [markdown, previewRenderMs]);
+  return shownRef.current;
+}
+
 export interface RefMDEditor extends ContextStore {}
 
 type PreviewComponent = React.ComponentType<any>;
@@ -25,6 +64,15 @@ export function createMDEditor<
   const PreviewComponent = MarkdownPreview as React.ComponentType<any>;
   const TextAreaComponent = TextArea as React.ComponentType<any>;
 
+  function TimedPreview(props: { renderMsRef: React.MutableRefObject<number>; [key: string]: any }) {
+    const { renderMsRef, ...previewProps } = props;
+    const renderStart = performance.now();
+    useIsomorphicLayoutEffect(() => {
+      renderMsRef.current = performance.now() - renderStart;
+    });
+    return <PreviewComponent {...previewProps} />;
+  }
+
   const InternalMDEditor = React.forwardRef<RefMDEditor, MDEditorProps>(
     (props: MDEditorProps, ref: React.ForwardedRef<RefMDEditor>) => {
       const {
@@ -42,8 +90,20 @@ export function createMDEditor<
         preview: previewType = 'live',
         fullscreen = false,
         overflow = true,
-        previewOptions = {},
+        previewOptions = DEFAULT_PREVIEW_OPTIONS,
         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,
@@ -192,13 +252,20 @@ export function createMDEditor<
 
       const previewClassName = `${prefixCls}-preview ${previewOptions.className || ''}`;
       const handlePreviewScroll = (e: React.UIEvent<HTMLDivElement, UIEvent>) => handleScroll(e, 'preview');
+      const previewRenderMs = useRef(0);
+      const previewMarkdown = useDeferredValue(usePreviewSource(state.markdown || '', previewRenderMs));
       let mdPreview = useMemo(
         () => (
           <div ref={previewRef} className={previewClassName}>
-            <PreviewComponent {...previewOptions} onScroll={handlePreviewScroll} source={state.markdown || ''} />
+            <TimedPreview
+              {...previewOptions}
+              renderMsRef={previewRenderMs}
+              onScroll={handlePreviewScroll}
+              source={previewMarkdown}
+            />
           </div>
         ),
-        [previewClassName, previewOptions, state.markdown],
+        [previewClassName, previewOptions, previewMarkdown],
       );
       const preview = components?.preview && components?.preview(state.markdown || '', state, dispatch);
       if (preview && React.isValidElement(preview)) {
@@ -244,6 +311,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/Markdown.common.tsx

@@ -1,49 +1,6 @@
-import React, { useContext, useEffect } from 'react';
-import { rehype } from 'rehype';
 import rehypePrism from 'rehype-prism-plus/common';
-import { type IProps } from '../../Types';
-import { EditorContext } from '../../Context';
+import { createMarkdown } from './Markdown.factory';
 
-function html2Escape(sHtml: string) {
-  return sHtml.replace(
-    /[<&"]/g,
-    (c: string) => (({ '<': '&lt;', '>': '&gt;', '&': '&amp;', '"': '&quot;' }) as Record<string, string>)[c],
-  );
-}
+export type { MarkdownProps } from './Markdown.factory';
 
-export interface MarkdownProps extends IProps, React.HTMLAttributes<HTMLPreElement> {}
-
-export default function Markdown(props: MarkdownProps) {
-  const { prefixCls } = props;
-  const { markdown = '', highlightEnable, dispatch } = useContext(EditorContext);
-  const preRef = React.createRef<HTMLPreElement>();
-  useEffect(() => {
-    if (preRef.current && dispatch) {
-      dispatch({ textareaPre: preRef.current });
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  if (!markdown) {
-    return <pre ref={preRef} className={`${prefixCls}-text-pre wmde-markdown-color`} />;
-  }
-  let mdStr = `<pre class="language-markdown ${prefixCls}-text-pre wmde-markdown-color"><code class="language-markdown">${html2Escape(
-    String.raw`${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 React.createElement('div', {
-    className: 'wmde-markdown-color',
-    dangerouslySetInnerHTML: { __html: mdStr || '' },
-  });
-}
+export default createMarkdown(rehypePrism);