@uiw/react-md-editor 4.1.5 → 4.1.7

package/esm/components/TextArea/splitBlocks.js

@@ -0,0 +1,111 @@
+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.
+ */
+export 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(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/esm/package.json

@@ -0,0 +1 @@
+{"type":"module"}

package/lib/Editor.factory.js

@@ -7,15 +7,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.createMDEditor = createMDEditor;
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _Toolbar = require("./components/Toolbar/");
 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 = ["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"];
 function setGroupPopFalse() {
   var data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   Object.keys(data).forEach(function (keyname) {
@@ -23,11 +24,64 @@ function setGroupPopFalse() {
   });
   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["default"].useDeferredValue || function (value) {
+  return value;
+};
+var useIsomorphicLayoutEffect = typeof window === 'undefined' ? _react.useEffect : _react.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 = (0, _react.useReducer)(function (count) {
+      return count + 1;
+    }, 0),
+    _useReducer2 = (0, _slicedToArray2["default"])(_useReducer, 2),
+    rerender = _useReducer2[1];
+  var shownRef = (0, _react.useRef)(markdown);
+  if (previewRenderMs.current < SLOW_PREVIEW_MS) {
+    shownRef.current = markdown;
+  }
+  (0, _react.useEffect)(function () {
+    if (shownRef.current === markdown) {
+      return;
+    }
+    var delay = Math.min(previewRenderMs.current, MAX_PREVIEW_DELAY_MS);
+    var timer = setTimeout(function () {
+      shownRef.current = markdown;
+      rerender();
+    }, delay);
+    return function () {
+      return clearTimeout(timer);
+    };
+  }, [markdown, previewRenderMs]);
+  return shownRef.current;
+}
 function createMDEditor(options) {
   var MarkdownPreview = options.MarkdownPreview,
     TextArea = options.TextArea;
   var PreviewComponent = MarkdownPreview;
   var TextAreaComponent = TextArea;
+  function TimedPreview(props) {
+    var renderMsRef = props.renderMsRef,
+      previewProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
+    var renderStart = performance.now();
+    useIsomorphicLayoutEffect(function () {
+      renderMsRef.current = performance.now() - renderStart;
+    });
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(PreviewComponent, (0, _objectSpread2["default"])({}, previewProps));
+  }
   var InternalMDEditor = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
     var _ref = props || {},
       _ref$prefixCls = _ref.prefixCls,
@@ -55,8 +109,20 @@ 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,
@@ -76,14 +142,14 @@ function createMDEditor(options) {
       toolbarBottom = _ref$toolbarBottom === void 0 ? false : _ref$toolbarBottom,
       components = _ref.components,
       renderTextarea = _ref.renderTextarea,
-      other = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+      other = (0, _objectWithoutProperties2["default"])(_ref, _excluded2);
     var cmds = commands.map(function (item) {
       return commandsFilter ? commandsFilter(item, false) : item;
     }).filter(Boolean);
     var extraCmds = extraCommands.map(function (item) {
       return commandsFilter ? commandsFilter(item, true) : item;
     }).filter(Boolean);
-    var _useReducer = (0, _react.useReducer)(_Context.reducer, {
+    var _useReducer3 = (0, _react.useReducer)(_Context.reducer, {
         markdown: propsValue,
         preview: previewType,
         components: components,
@@ -99,9 +165,9 @@ function createMDEditor(options) {
         fullscreen: fullscreen,
         barPopup: {}
       }),
-      _useReducer2 = (0, _slicedToArray2["default"])(_useReducer, 2),
-      state = _useReducer2[0],
-      dispatch = _useReducer2[1];
+      _useReducer4 = (0, _slicedToArray2["default"])(_useReducer3, 2),
+      state = _useReducer4[0],
+      dispatch = _useReducer4[1];
     var container = (0, _react.useRef)(null);
     var previewRef = (0, _react.useRef)(null);
     var enableScrollRef = (0, _react.useRef)(enableScroll);
@@ -235,16 +301,19 @@ function createMDEditor(options) {
     var handlePreviewScroll = function handlePreviewScroll(e) {
       return handleScroll(e, 'preview');
     };
+    var previewRenderMs = (0, _react.useRef)(0);
+    var previewMarkdown = useDeferredValue(usePreviewSource(state.markdown || '', previewRenderMs));
     var mdPreview = (0, _react.useMemo)(function () {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         ref: previewRef,
         className: previewClassName,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PreviewComponent, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, previewOptions), {}, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(TimedPreview, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, previewOptions), {}, {
+          renderMsRef: previewRenderMs,
           onScroll: handlePreviewScroll,
-          source: state.markdown || ''
+          source: previewMarkdown
         }))
       });
-    }, [previewClassName, previewOptions, state.markdown]);
+    }, [previewClassName, previewOptions, previewMarkdown]);
     var preview = (components === null || components === void 0 ? void 0 : components.preview) && (components === null || components === void 0 ? void 0 : components.preview(state.markdown || '', state, dispatch));
     if (preview && /*#__PURE__*/_react["default"].isValidElement(preview)) {
       mdPreview = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -302,7 +371,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/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/lib/components/TextArea/Markdown.common.js

@@ -1,68 +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 _common = _interopRequireDefault(require("rehype-prism-plus/common"));
-var _Context = require("../../Context");
-var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject;
-function html2Escape(sHtml) {
-  return sHtml.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(_common["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)(_common["default"]);
 module.exports = exports.default;

package/lib/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/lib/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/lib/components/TextArea/Markdown.factory.js

@@ -0,0 +1,148 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createMarkdown = createMarkdown;
+var _react = _interopRequireWildcard(require("react"));
+var _rehype = require("rehype");
+var _Context = require("../../Context");
+var _splitBlocks = require("./splitBlocks");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * 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.
+ */var MAX_HIGHLIGHT_LINE_LENGTH = 1000;
+function html2Escape(sHtml) {
+  return sHtml.replace(/[<&"]/g, function (c) {
+    return {
+      '<': '&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["default"].memo(function MarkdownBlock(props) {
+  return /*#__PURE__*/_react["default"].createElement('span', {
+    dangerouslySetInnerHTML: {
+      __html: props.html
+    }
+  });
+});
+function createMarkdown(rehypePrism) {
+  var processor = (0, _rehype.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\">".concat(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 = (0, _react.useContext)(_Context.EditorContext),
+      _useContext$markdown = _useContext.markdown,
+      markdown = _useContext$markdown === void 0 ? '' : _useContext$markdown,
+      highlightEnable = _useContext.highlightEnable,
+      dispatch = _useContext.dispatch;
+    var preRef = (0, _react.useRef)(null);
+    var cacheRef = (0, _react.useRef)(new Map());
+    var nextIdRef = (0, _react.useRef)(0);
+    (0, _react.useEffect)(function () {
+      if (preRef.current && dispatch) {
+        dispatch({
+          textareaPre: preRef.current
+        });
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    var blocks = (0, _react.useMemo)(function () {
+      if (!highlightEnable) {
+        cacheRef.current = new Map();
+        return [];
+      }
+      var cache = new Map();
+      var occurrences = new Map();
+      var result = (0, _splitBlocks.splitBlocks)(markdown).map(function (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: "".concat(highlighted.id, "-").concat(occurrence),
+          html: highlighted.html
+        };
+      });
+      cacheRef.current = cache;
+      return result;
+    }, [markdown, highlightEnable]);
+    if (!markdown) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("pre", {
+        ref: preRef,
+        className: "".concat(prefixCls, "-text-pre wmde-markdown-color")
+      });
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "wmde-markdown-color",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("pre", {
+        ref: preRef,
+        className: "language-markdown ".concat(prefixCls, "-text-pre wmde-markdown-color"),
+        children: highlightEnable ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("code", {
+          className: "language-markdown code-highlight",
+          children: [blocks.map(function (block) {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(MarkdownBlock, {
+              html: block.html
+            }, block.key);
+          }), '\n']
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
+          className: "language-markdown",
+          children: "".concat(markdown, "\n")
+        })
+      })
+    });
+  };
+}