@uiw/react-md-editor 3.24.1 → 3.25.0

package/src/Editor.nohighlight.tsx

@@ -0,0 +1,264 @@
+import React, { useEffect, useReducer, useMemo, useRef, useImperativeHandle } from 'react';
+import MarkdownPreview from '@uiw/react-markdown-preview/nohighlight';
+import TextArea from './components/TextArea/index.nohighlight';
+import Toolbar from './components/Toolbar';
+import DragBar from './components/DragBar';
+import { getCommands, getExtraCommands, ICommand, TextState, TextAreaCommandOrchestrator } from './commands';
+import { reducer, EditorContext, ContextStore } from './Context';
+import type { MDEditorProps } from './Types';
+
+function setGroupPopFalse(data: Record<string, boolean> = {}) {
+  Object.keys(data).forEach((keyname) => {
+    data[keyname] = false;
+  });
+  return data;
+}
+
+export interface RefMDEditor extends ContextStore {}
+
+const InternalMDEditor = React.forwardRef<RefMDEditor, MDEditorProps>(
+  (props: MDEditorProps, ref: React.ForwardedRef<RefMDEditor>) => {
+    const {
+      prefixCls = 'w-md-editor',
+      className,
+      value: propsValue,
+      commands = getCommands(),
+      commandsFilter,
+      direction,
+      extraCommands = getExtraCommands(),
+      height = 200,
+      enableScroll = true,
+      visibleDragbar = typeof props.visiableDragbar === 'boolean' ? props.visiableDragbar : true,
+      highlightEnable = true,
+      preview: previewType = 'live',
+      fullscreen = false,
+      overflow = true,
+      previewOptions = {},
+      textareaProps,
+      maxHeight = 1200,
+      minHeight = 100,
+      autoFocus,
+      tabSize = 2,
+      defaultTabEnable = false,
+      onChange,
+      onStatistics,
+      onHeightChange,
+      hideToolbar,
+      toolbarBottom = false,
+      components,
+      renderTextarea,
+      ...other
+    } = props || {};
+    const cmds = commands
+      .map((item) => (commandsFilter ? commandsFilter(item, false) : item))
+      .filter(Boolean) as ICommand[];
+    const extraCmds = extraCommands
+      .map((item) => (commandsFilter ? commandsFilter(item, true) : item))
+      .filter(Boolean) as ICommand[];
+    let [state, dispatch] = useReducer(reducer, {
+      markdown: propsValue,
+      preview: previewType,
+      components,
+      height,
+      highlightEnable,
+      tabSize,
+      defaultTabEnable,
+      scrollTop: 0,
+      scrollTopPreview: 0,
+      commands: cmds,
+      extraCommands: extraCmds,
+      fullscreen,
+      barPopup: {},
+    });
+    const container = useRef<HTMLDivElement>(null);
+    const previewRef = useRef<HTMLDivElement>(null);
+    const enableScrollRef = useRef(enableScroll);
+
+    useImperativeHandle(ref, () => ({ ...state, container: container.current, dispatch }));
+    useMemo(() => (enableScrollRef.current = enableScroll), [enableScroll]);
+    useEffect(() => {
+      const stateInit: ContextStore = {};
+      if (container.current) {
+        stateInit.container = container.current || undefined;
+      }
+      stateInit.markdown = propsValue || '';
+      stateInit.barPopup = {};
+      if (dispatch) {
+        dispatch({ ...state, ...stateInit });
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    const cls = [
+      className,
+      'wmde-markdown-var',
+      direction ? `${prefixCls}-${direction}` : null,
+      prefixCls,
+      state.preview ? `${prefixCls}-show-${state.preview}` : null,
+      state.fullscreen ? `${prefixCls}-fullscreen` : null,
+    ]
+      .filter(Boolean)
+      .join(' ')
+      .trim();
+
+    useMemo(
+      () => propsValue !== state.markdown && dispatch({ markdown: propsValue || '' }),
+      [propsValue, state.markdown],
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useMemo(() => previewType !== state.preview && dispatch({ preview: previewType }), [previewType]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useMemo(() => tabSize !== state.tabSize && dispatch({ tabSize }), [tabSize]);
+    useMemo(
+      () => highlightEnable !== state.highlightEnable && dispatch({ highlightEnable }),
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [highlightEnable],
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useMemo(() => autoFocus !== state.autoFocus && dispatch({ autoFocus: autoFocus }), [autoFocus]);
+    useMemo(
+      () => fullscreen !== state.fullscreen && dispatch({ fullscreen: fullscreen }),
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [fullscreen],
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useMemo(() => height !== state.height && dispatch({ height: height }), [height]);
+    useMemo(
+      () => height !== state.height && onHeightChange && onHeightChange(state.height, height, state),
+      [height, onHeightChange, state],
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useMemo(() => commands !== state.commands && dispatch({ commands: cmds }), [props.commands]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useMemo(
+      () => extraCommands !== state.extraCommands && dispatch({ extraCommands: extraCmds }),
+      [props.extraCommands],
+    );
+
+    const textareaDomRef = useRef<HTMLDivElement>();
+    const active = useRef<'text' | 'preview'>('preview');
+    const initScroll = useRef(false);
+
+    useMemo(() => {
+      textareaDomRef.current = state.textareaWarp;
+      if (state.textareaWarp) {
+        state.textareaWarp.addEventListener('mouseover', () => {
+          active.current = 'text';
+        });
+        state.textareaWarp.addEventListener('mouseleave', () => {
+          active.current = 'preview';
+        });
+      }
+    }, [state.textareaWarp]);
+
+    const handleScroll = (e: React.UIEvent<HTMLDivElement>, type: 'text' | 'preview') => {
+      if (!enableScrollRef.current) return;
+      const textareaDom = textareaDomRef.current;
+      const previewDom = previewRef.current ? previewRef.current : undefined;
+      if (!initScroll.current) {
+        active.current = type;
+        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;
+        }
+        let scrollTop = 0;
+        if (active.current === 'text') {
+          scrollTop = textareaDom.scrollTop || 0;
+        } else if (active.current === 'preview') {
+          scrollTop = previewDom.scrollTop || 0;
+        }
+        dispatch({ scrollTop });
+      }
+    };
+
+    const previewClassName = `${prefixCls}-preview ${previewOptions.className || ''}`;
+    const handlePreviewScroll = (e: React.UIEvent<HTMLDivElement, UIEvent>) => handleScroll(e, 'preview');
+    let mdPreview = useMemo(
+      () => (
+        <div ref={previewRef} className={previewClassName}>
+          <MarkdownPreview {...previewOptions} onScroll={handlePreviewScroll} source={state.markdown || ''} />
+        </div>
+      ),
+      [previewClassName, previewOptions, state.markdown],
+    );
+    const preview = components?.preview && components?.preview(state.markdown || '', state, dispatch);
+    if (preview && React.isValidElement(preview)) {
+      mdPreview = (
+        <div className={previewClassName} ref={previewRef} onScroll={handlePreviewScroll}>
+          {preview}
+        </div>
+      );
+    }
+
+    const containerStyle = { ...other.style, height: state.height || '100%' };
+    const containerClick = () => dispatch({ barPopup: { ...setGroupPopFalse(state.barPopup) } });
+    const dragBarChange = (newHeight: number) => dispatch({ height: newHeight });
+
+    const changeHandle = (evn: React.ChangeEvent<HTMLTextAreaElement>) => {
+      onChange && onChange(evn.target.value, evn, state);
+      if (textareaProps && textareaProps.onChange) {
+        textareaProps.onChange(evn);
+      }
+      if (state.textarea && state.textarea instanceof HTMLTextAreaElement && onStatistics) {
+        const obj = new TextAreaCommandOrchestrator(state.textarea!);
+        const objState = (obj.getState() || {}) as TextState;
+        onStatistics({
+          ...objState,
+          lineCount: evn.target.value.split('\n').length,
+          length: evn.target.value.length,
+        });
+      }
+    };
+    return (
+      <EditorContext.Provider value={{ ...state, dispatch }}>
+        <div ref={container} className={cls} {...other} onClick={containerClick} style={containerStyle}>
+          {!hideToolbar && !toolbarBottom && (
+            <Toolbar prefixCls={prefixCls} overflow={overflow} toolbarBottom={toolbarBottom} />
+          )}
+          <div className={`${prefixCls}-content`}>
+            {/(edit|live)/.test(state.preview || '') && (
+              <TextArea
+                className={`${prefixCls}-input`}
+                prefixCls={prefixCls}
+                autoFocus={autoFocus}
+                {...textareaProps}
+                onChange={changeHandle}
+                renderTextarea={components?.textarea || renderTextarea}
+                onScroll={(e) => handleScroll(e, 'text')}
+              />
+            )}
+            {/(live|preview)/.test(state.preview || '') && mdPreview}
+          </div>
+          {visibleDragbar && !state.fullscreen && (
+            <DragBar
+              prefixCls={prefixCls}
+              height={state.height as number}
+              maxHeight={maxHeight!}
+              minHeight={minHeight!}
+              onChange={dragBarChange}
+            />
+          )}
+          {!hideToolbar && toolbarBottom && (
+            <Toolbar prefixCls={prefixCls} overflow={overflow} toolbarBottom={toolbarBottom} />
+          )}
+        </div>
+      </EditorContext.Provider>
+    );
+  },
+);
+
+type EditorComponent = typeof InternalMDEditor & {
+  Markdown: typeof MarkdownPreview;
+};
+
+const Editor = InternalMDEditor as EditorComponent;
+Editor.Markdown = MarkdownPreview;
+
+export default Editor;

package/src/Editor.tsx

@@ -1,157 +1,11 @@
-import React, { useEffect, useReducer, useMemo, useRef, useImperativeHandle, CSSProperties } from 'react';
-import MarkdownPreview, { MarkdownPreviewProps } from '@uiw/react-markdown-preview';
-import TextArea, { ITextAreaProps } from './components/TextArea';
+import React, { useEffect, useReducer, useMemo, useRef, useImperativeHandle } from 'react';
+import MarkdownPreview from '@uiw/react-markdown-preview';
+import TextArea from './components/TextArea';
 import Toolbar from './components/Toolbar';
 import DragBar from './components/DragBar';
 import { getCommands, getExtraCommands, ICommand, TextState, TextAreaCommandOrchestrator } from './commands';
-import { reducer, EditorContext, ContextStore, PreviewType } from './Context';
-import './index.less';
-
-export interface IProps {
-  prefixCls?: string;
-  className?: string;
-}
-
-export interface Statistics extends TextState {
-  /** total length of the document */
-  length: number;
-  /** Get the number of lines in the editor. */
-  lineCount: number;
-}
-
-export interface MDEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>, IProps {
-  /**
-   * The Markdown value.
-   */
-  value?: string;
-  /**
-   * Event handler for the `onChange` event.
-   */
-  onChange?: (value?: string, event?: React.ChangeEvent<HTMLTextAreaElement>, state?: ContextStore) => void;
-  /**
-   * editor height change listener
-   */
-  onHeightChange?: (value?: CSSProperties['height'], oldValue?: CSSProperties['height'], state?: ContextStore) => void;
-  /** Some data on the statistics editor. */
-  onStatistics?: (data: Statistics) => void;
-  /**
-   * Can be used to make `Markdown Editor` focus itself on initialization. Defaults to on.
-   * it will be set to true when either the source `textarea` is focused,
-   * or it has an `autofocus` attribute and no other element is focused.
-   */
-  autoFocus?: ITextAreaProps['autoFocus'];
-  /**
-   * The height of the editor.
-   * ⚠️ `Dragbar` is invalid when **`height`** parameter percentage.
-   */
-  height?: CSSProperties['height'];
-  /**
-   * Custom toolbar heigth
-   * @default 29px
-   *
-   * @deprecated toolbar height adaptive: https://github.com/uiwjs/react-md-editor/issues/427
-   *
-   */
-  toolbarHeight?: number;
-  /**
-   * Show drag and drop tool. Set the height of the editor.
-   */
-  visibleDragbar?: boolean;
-  /**
-   * @deprecated use `visibleDragbar`
-   */
-  visiableDragbar?: boolean;
-  /**
-   * Show markdown preview.
-   */
-  preview?: PreviewType;
-  /**
-   * Full screen display editor.
-   */
-  fullscreen?: boolean;
-  /**
-   * Disable `fullscreen` setting body styles
-   */
-  overflow?: boolean;
-  /**
-   * Maximum drag height. `visibleDragbar=true`
-   */
-  maxHeight?: number;
-  /**
-   * Minimum drag height. `visibleDragbar=true`
-   */
-  minHeight?: number;
-  /**
-   * This is reset [react-markdown](https://github.com/rexxars/react-markdown) settings.
-   */
-  previewOptions?: Omit<MarkdownPreviewProps, 'source'>;
-  /**
-   * Set the `textarea` related props.
-   */
-  textareaProps?: ITextAreaProps;
-  /**
-   * Use div to replace TextArea or re-render TextArea
-   * @deprecated Please use ~~`renderTextarea`~~ -> `components`
-   */
-  renderTextarea?: ITextAreaProps['renderTextarea'];
-  /**
-   * re-render element
-   */
-  components?: {
-    /** Use div to replace TextArea or re-render TextArea */
-    textarea?: ITextAreaProps['renderTextarea'];
-    /**
-     * Override the default command element
-     * _`toolbar`_ < _`command[].render`_
-     */
-    toolbar?: ICommand['render'];
-    /** Custom markdown preview */
-    preview?: (source: string, state: ContextStore, dispath: React.Dispatch<ContextStore>) => JSX.Element;
-  };
-  /** Theme configuration */
-  'data-color-mode'?: 'light' | 'dark';
-  /**
-   * Disable editing area code highlighting. The value is `false`, which increases the editing speed.
-   * @default true
-   */
-  highlightEnable?: boolean;
-  /**
-   * The number of characters to insert when pressing tab key.
-   * Default `2` spaces.
-   */
-  tabSize?: number;
-  /**
-   * If `false`, the `tab` key inserts a tab character into the textarea. If `true`, the `tab` key executes default behavior e.g. focus shifts to next element.
-   */
-  defaultTabEnable?: boolean;
-  /**
-   * You can create your own commands or reuse existing commands.
-   */
-  commands?: ICommand[];
-  /**
-   * Filter or modify your commands.
-   * https://github.com/uiwjs/react-md-editor/issues/296
-   */
-  commandsFilter?: (command: ICommand, isExtra: boolean) => false | ICommand;
-  /**
-   * You can create your own commands or reuse existing commands.
-   */
-  extraCommands?: ICommand[];
-  /**
-   * Hide the tool bar
-   */
-  hideToolbar?: boolean;
-  /** Whether to enable scrolling */
-  enableScroll?: boolean;
-  /** Toolbar on bottom */
-  toolbarBottom?: boolean;
-  /**
-   * The **`direction`** property sets the direction of text, table columns, and horizontal overflow. Use `rtl` for languages written from right to left (like Hebrew or Arabic), and `ltr` for those written from left to right (like English and most other languages).
-   *
-   * https://github.com/uiwjs/react-md-editor/issues/462
-   */
-  direction?: CSSProperties['direction'];
-}
+import { reducer, EditorContext, ContextStore } from './Context';
+import type { MDEditorProps } from './Types';
 
 function setGroupPopFalse(data: Record<string, boolean> = {}) {
   Object.keys(data).forEach((keyname) => {

package/src/Types.ts

@@ -0,0 +1,151 @@
+import type { CSSProperties } from 'react';
+import type { MarkdownPreviewProps } from '@uiw/react-markdown-preview/nohighlight';
+import type { ITextAreaProps } from './components/TextArea/index.nohighlight';
+import type { ICommand, TextState } from './commands';
+import type { ContextStore, PreviewType } from './Context';
+
+export interface IProps {
+  prefixCls?: string;
+  className?: string;
+}
+
+export interface Statistics extends TextState {
+  /** total length of the document */
+  length: number;
+  /** Get the number of lines in the editor. */
+  lineCount: number;
+}
+
+export interface MDEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>, IProps {
+  /**
+   * The Markdown value.
+   */
+  value?: string;
+  /**
+   * Event handler for the `onChange` event.
+   */
+  onChange?: (value?: string, event?: React.ChangeEvent<HTMLTextAreaElement>, state?: ContextStore) => void;
+  /**
+   * editor height change listener
+   */
+  onHeightChange?: (value?: CSSProperties['height'], oldValue?: CSSProperties['height'], state?: ContextStore) => void;
+  /** Some data on the statistics editor. */
+  onStatistics?: (data: Statistics) => void;
+  /**
+   * Can be used to make `Markdown Editor` focus itself on initialization. Defaults to on.
+   * it will be set to true when either the source `textarea` is focused,
+   * or it has an `autofocus` attribute and no other element is focused.
+   */
+  autoFocus?: ITextAreaProps['autoFocus'];
+  /**
+   * The height of the editor.
+   * ⚠️ `Dragbar` is invalid when **`height`** parameter percentage.
+   */
+  height?: CSSProperties['height'];
+  /**
+   * Custom toolbar heigth
+   * @default 29px
+   *
+   * @deprecated toolbar height adaptive: https://github.com/uiwjs/react-md-editor/issues/427
+   *
+   */
+  toolbarHeight?: number;
+  /**
+   * Show drag and drop tool. Set the height of the editor.
+   */
+  visibleDragbar?: boolean;
+  /**
+   * @deprecated use `visibleDragbar`
+   */
+  visiableDragbar?: boolean;
+  /**
+   * Show markdown preview.
+   */
+  preview?: PreviewType;
+  /**
+   * Full screen display editor.
+   */
+  fullscreen?: boolean;
+  /**
+   * Disable `fullscreen` setting body styles
+   */
+  overflow?: boolean;
+  /**
+   * Maximum drag height. `visibleDragbar=true`
+   */
+  maxHeight?: number;
+  /**
+   * Minimum drag height. `visibleDragbar=true`
+   */
+  minHeight?: number;
+  /**
+   * This is reset [react-markdown](https://github.com/rexxars/react-markdown) settings.
+   */
+  previewOptions?: Omit<MarkdownPreviewProps, 'source'>;
+  /**
+   * Set the `textarea` related props.
+   */
+  textareaProps?: ITextAreaProps;
+  /**
+   * Use div to replace TextArea or re-render TextArea
+   * @deprecated Please use ~~`renderTextarea`~~ -> `components`
+   */
+  renderTextarea?: ITextAreaProps['renderTextarea'];
+  /**
+   * re-render element
+   */
+  components?: {
+    /** Use div to replace TextArea or re-render TextArea */
+    textarea?: ITextAreaProps['renderTextarea'];
+    /**
+     * Override the default command element
+     * _`toolbar`_ < _`command[].render`_
+     */
+    toolbar?: ICommand['render'];
+    /** Custom markdown preview */
+    preview?: (source: string, state: ContextStore, dispath: React.Dispatch<ContextStore>) => JSX.Element;
+  };
+  /** Theme configuration */
+  'data-color-mode'?: 'light' | 'dark';
+  /**
+   * Disable editing area code highlighting. The value is `false`, which increases the editing speed.
+   * @default true
+   */
+  highlightEnable?: boolean;
+  /**
+   * The number of characters to insert when pressing tab key.
+   * Default `2` spaces.
+   */
+  tabSize?: number;
+  /**
+   * If `false`, the `tab` key inserts a tab character into the textarea. If `true`, the `tab` key executes default behavior e.g. focus shifts to next element.
+   */
+  defaultTabEnable?: boolean;
+  /**
+   * You can create your own commands or reuse existing commands.
+   */
+  commands?: ICommand[];
+  /**
+   * Filter or modify your commands.
+   * https://github.com/uiwjs/react-md-editor/issues/296
+   */
+  commandsFilter?: (command: ICommand, isExtra: boolean) => false | ICommand;
+  /**
+   * You can create your own commands or reuse existing commands.
+   */
+  extraCommands?: ICommand[];
+  /**
+   * Hide the tool bar
+   */
+  hideToolbar?: boolean;
+  /** Whether to enable scrolling */
+  enableScroll?: boolean;
+  /** Toolbar on bottom */
+  toolbarBottom?: boolean;
+  /**
+   * The **`direction`** property sets the direction of text, table columns, and horizontal overflow. Use `rtl` for languages written from right to left (like Hebrew or Arabic), and `ltr` for those written from left to right (like English and most other languages).
+   *
+   * https://github.com/uiwjs/react-md-editor/issues/462
+   */
+  direction?: CSSProperties['direction'];
+}

package/src/components/DragBar/index.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useRef } from 'react';
-import { IProps } from '../../Editor';
+import { IProps } from '../../Types';
 import './index.less';
 
 export interface IDragBarProps extends IProps {

package/src/components/TextArea/Markdown.tsx

@@ -1,7 +1,7 @@
 import React, { useContext, useEffect } from 'react';
 import { rehype } from 'rehype';
 import rehypePrism from 'rehype-prism-plus';
-import { IProps } from '../../Editor';
+import { IProps } from '../../Types';
 import { EditorContext } from '../../Context';
 
 function html2Escape(sHtml: string) {
@@ -15,7 +15,7 @@ function html2Escape(sHtml: string) {
       // })
       .replace(
         /[<&"]/g,
-        (c: string) => (({ '<': '&lt;', '>': '&gt;', '&': '&amp;', '"': '&quot;' } as Record<string, string>)[c]),
+        (c: string) => (({ '<': '&lt;', '>': '&gt;', '&': '&amp;', '"': '&quot;' }) as Record<string, string>)[c],
       )
   );
 }

package/src/components/TextArea/Textarea.tsx

@@ -1,5 +1,5 @@
 import React, { useContext, useEffect } from 'react';
-import { IProps } from '../../Editor';
+import { IProps } from '../../Types';
 import { EditorContext, ExecuteCommandState } from '../../Context';
 import { TextAreaCommandOrchestrator } from '../../commands';
 import handleKeyDown from './handleKeyDown';