@uiw/react-md-editor 4.1.6 → 4.2.0

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", "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"];
+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,7 +109,7 @@ 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,
@@ -88,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,
@@ -111,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);
@@ -225,12 +279,15 @@ function createMDEditor(options) {
         initScroll.current = true;
       }
       if (textareaDom && previewDom) {
-        var scale = (textareaDom.scrollHeight - textareaDom.offsetHeight) / (previewDom.scrollHeight - previewDom.offsetHeight);
-        if (e.target === textareaDom && active.current === 'text') {
-          previewDom.scrollTop = textareaDom.scrollTop / scale;
-        }
-        if (e.target === previewDom && active.current === 'preview') {
-          textareaDom.scrollTop = previewDom.scrollTop * scale;
+        var inputRange = Math.max(0, textareaDom.scrollHeight - textareaDom.offsetHeight);
+        var previewRange = Math.max(0, previewDom.scrollHeight - previewDom.offsetHeight);
+        if (inputRange > 0 && previewRange > 0) {
+          if (e.target === textareaDom && active.current === 'text') {
+            previewDom.scrollTop = textareaDom.scrollTop / inputRange * previewRange;
+          }
+          if (e.target === previewDom && active.current === 'preview') {
+            textareaDom.scrollTop = previewDom.scrollTop / previewRange * inputRange;
+          }
         }
         var scrollTop = 0;
         if (active.current === 'text') {
@@ -247,16 +304,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), {}, {
-          onScroll: handlePreviewScroll,
-          source: state.markdown || ''
+        onScroll: handlePreviewScroll,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(TimedPreview, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, previewOptions), {}, {
+          renderMsRef: previewRenderMs,
+          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", {

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")
+        })
+      })
+    });
+  };
+}

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/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;