@uiw/react-md-editor 4.1.6 → 4.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uiw/react-md-editor",
-  "version": "4.1.6",
+  "version": "4.2.0",
   "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,7 +90,7 @@ export function createMDEditor<
         preview: previewType = 'live',
         fullscreen = false,
         overflow = true,
-        previewOptions = {},
+        previewOptions = DEFAULT_PREVIEW_OPTIONS,
         textareaProps,
         id,
         name,
@@ -184,13 +232,15 @@ export function createMDEditor<
           initScroll.current = true;
         }
         if (textareaDom && previewDom) {
-          const 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;
+          const inputRange = Math.max(0, textareaDom.scrollHeight - textareaDom.offsetHeight);
+          const 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;
+            }
           }
           let scrollTop = 0;
           if (active.current === 'text') {
@@ -204,13 +254,15 @@ 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 || ''} />
+          <div ref={previewRef} className={previewClassName} onScroll={handlePreviewScroll}>
+            <TimedPreview {...previewOptions} renderMsRef={previewRenderMs} 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)) {

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

package/src/components/TextArea/Markdown.factory.tsx

@@ -0,0 +1,132 @@
+import React, { useContext, useEffect, useMemo, useRef } from 'react';
+import { rehype } from 'rehype';
+import type rehypePrismPlus from 'rehype-prism-plus';
+import { type IProps } from '../../Types';
+import { EditorContext } from '../../Context';
+import { splitBlocks } from './splitBlocks';
+
+/**
+ * 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.
+ */
+const MAX_HIGHLIGHT_LINE_LENGTH = 1000;
+
+export interface MarkdownProps extends IProps, React.HTMLAttributes<HTMLPreElement> {}
+
+type HighlightedBlock = {
+  id: number;
+  html: string;
+};
+
+function html2Escape(sHtml: string) {
+  return sHtml.replace(
+    /[<&"]/g,
+    (c: string) => (({ '<': '&lt;', '>': '&gt;', '&': '&amp;', '"': '&quot;' }) as Record<string, string>)[c],
+  );
+}
+
+function hasLongLine(text: string) {
+  let lineStart = 0;
+  while (lineStart <= text.length) {
+    const lineEnd = text.indexOf('\n', lineStart);
+    const end = lineEnd === -1 ? text.length : lineEnd;
+    if (end - lineStart > MAX_HIGHLIGHT_LINE_LENGTH) {
+      return true;
+    }
+    lineStart = end + 1;
+  }
+  return false;
+}
+
+function getCodeInnerHtml(html: string) {
+  const codeStart = html.indexOf('<code');
+  const contentStart = html.indexOf('>', codeStart) + 1;
+  const contentEnd = html.lastIndexOf('</code>');
+  return html.slice(contentStart, contentEnd);
+}
+
+const MarkdownBlock = React.memo(function MarkdownBlock(props: { html: string }) {
+  return React.createElement('span', { dangerouslySetInnerHTML: { __html: props.html } });
+});
+
+export function createMarkdown(rehypePrism: typeof rehypePrismPlus) {
+  const processor = rehype()
+    .data('settings', { fragment: true })
+    // https://github.com/uiwjs/react-md-editor/issues/593
+    // @ts-ignore
+    .use(rehypePrism, { ignoreMissing: true });
+
+  function highlightBlock(block: string) {
+    const escaped = html2Escape(block);
+    if (hasLongLine(block)) {
+      return escaped;
+    }
+    try {
+      const 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: MarkdownProps) {
+    const { prefixCls } = props;
+    const { markdown = '', highlightEnable, dispatch } = useContext(EditorContext);
+    const preRef = useRef<HTMLPreElement>(null);
+    const cacheRef = useRef(new Map<string, HighlightedBlock>());
+    const nextIdRef = useRef(0);
+    useEffect(() => {
+      if (preRef.current && dispatch) {
+        dispatch({ textareaPre: preRef.current });
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    const blocks = useMemo(() => {
+      if (!highlightEnable) {
+        cacheRef.current = new Map();
+        return [];
+      }
+      const cache = new Map<string, HighlightedBlock>();
+      const occurrences = new Map<string, number>();
+      const result = splitBlocks(markdown).map((block) => {
+        let highlighted = cacheRef.current.get(block) || cache.get(block);
+        if (!highlighted) {
+          highlighted = { id: nextIdRef.current++, html: highlightBlock(block) };
+        }
+        cache.set(block, highlighted);
+        const 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 <pre ref={preRef} className={`${prefixCls}-text-pre wmde-markdown-color`} />;
+    }
+
+    return (
+      <div className="wmde-markdown-color">
+        <pre ref={preRef} className={`language-markdown ${prefixCls}-text-pre wmde-markdown-color`}>
+          {highlightEnable ? (
+            <code className="language-markdown code-highlight">
+              {blocks.map((block) => (
+                <MarkdownBlock key={block.key} html={block.html} />
+              ))}
+              {'\n'}
+            </code>
+          ) : (
+            <code className="language-markdown">{`${markdown}\n`}</code>
+          )}
+        </pre>
+      </div>
+    );
+  };
+}

package/src/components/TextArea/Markdown.tsx

@@ -1,58 +1,6 @@
-import React, { useContext, useEffect } from 'react';
-import { rehype } from 'rehype';
 import rehypePrism from 'rehype-prism-plus';
-import { type IProps } from '../../Types';
-import { EditorContext } from '../../Context';
+import { createMarkdown } from './Markdown.factory';
 
-function html2Escape(sHtml: string) {
-  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: 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);

package/src/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/src/components/TextArea/splitBlocks.ts

@@ -0,0 +1,114 @@
+const FENCE_OPEN = /^```/;
+const FENCE_CLOSE = /^```\r?\n?$/;
+const BLANK_LINE = /^[ \t]*\r?\n?$/;
+const 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: string): string[] {
+  const lines: string[] = markdown.match(/[^\n]*\n|[^\n]+$/g) || [];
+  const blocks: string[] = [];
+  let current = '';
+  let pendingSplit = -1;
+  let inFence = false;
+  let inFrontMatter = /^(?:\s*[\r\n])?---(?:\r?\n|$)/.test(markdown);
+  let frontMatterStarted = false;
+  const syntax = { end: '', quote: '', brackets: 0, subset: 0 };
+  let previousIsBlank = true;
+
+  lines.forEach((line) => {
+    const isBlank = BLANK_LINE.test(line);
+    const 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: string, state: { end: string; quote: string; brackets: number; subset: number }) {
+  let reference = false;
+  for (let i = 0; i < line.length; i++) {
+    const char = line[i];
+    if (state.end && state.end !== '>') {
+      const 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;
+    }
+  }
+}