@uiw/react-md-editor 4.1.5 → 4.1.7

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/factory.tsx

@@ -25,8 +25,7 @@ export type RenderTextareaHandle = {
 };
 
 export interface ITextAreaProps
-  extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'onScroll'>,
-    IProps {
+  extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'onScroll'>, IProps {
   value?: string;
   onScroll?: (e: React.UIEvent<HTMLDivElement>) => void;
   renderTextarea?: (
@@ -76,6 +75,10 @@ export function createTextArea(options?: { Markdown?: MarkdownComponent; useMinH
 
     const textStyle: CSS.Properties =
       MarkdownComponent && highlightEnable ? {} : { WebkitTextFillColor: 'initial', overflow: 'auto' };
+    const inputProps = { ...otherProps };
+    if (!inputProps['aria-label'] && !inputProps['aria-labelledby'] && !inputProps.id && !inputProps.title) {
+      inputProps['aria-label'] = 'Markdown editor';
+    }
 
     return (
       <div ref={warp} className={`${prefixCls}-area ${className || ''}`} onScroll={onScroll}>
@@ -84,7 +87,7 @@ export function createTextArea(options?: { Markdown?: MarkdownComponent; useMinH
             React.cloneElement(
               renderTextarea(
                 {
-                  ...otherProps,
+                  ...inputProps,
                   value: markdown,
                   autoComplete: 'off',
                   spellCheck: 'false',
@@ -109,7 +112,7 @@ export function createTextArea(options?: { Markdown?: MarkdownComponent; useMinH
           ) : (
             <Fragment>
               {MarkdownComponent && highlightEnable && <MarkdownComponent prefixCls={prefixCls} />}
-              <Textarea prefixCls={prefixCls} {...otherProps} style={textStyle} />
+              <Textarea prefixCls={prefixCls} {...inputProps} style={textStyle} />
             </Fragment>
           )}
         </div>

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