@uiw/react-md-editor 4.1.6 → 4.2.0

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", "id", "name", "required", "disabled", "readOnly", "placeholder", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid", "aria-required", "aria-errormessage", "maxHeight", "minHeight", "autoFocus", "autoFocusEnd", "tabSize", "defaultTabEnable", "onChange", "onStatistics", "onHeightChange", "hideToolbar", "toolbarBottom", "components", "renderTextarea"];
-import React, { useEffect, useReducer, useMemo, useRef, useImperativeHandle } from 'react';
+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,7 +95,7 @@ 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,
@@ -81,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,
@@ -100,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);
@@ -187,12 +234,15 @@ export 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') {
@@ -207,14 +257,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, {
-        onScroll: handlePreviewScroll,
-        source: state.markdown || ''
+      onScroll: handlePreviewScroll,
+      children: /*#__PURE__*/_jsx(TimedPreview, _extends({}, previewOptions, {
+        renderMsRef: previewRenderMs,
+        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", {

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

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"}