@uiw/react-md-editor 3.24.0 → 3.25.0

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/commands/index.ts

@@ -23,6 +23,7 @@ import { title4 } from './title4';
 import { title5 } from './title5';
 import { title6 } from './title6';
 import { table } from './table';
+import { issue } from './issue';
 import { help } from './help';
 
 export interface CommandOrchestrator {
@@ -202,6 +203,9 @@ export {
   unorderedListCommand,
   orderedListCommand,
   checkedListCommand,
+  table,
+  issue,
+  help,
   codeEdit,
   codeLive,
   codePreview,

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

package/src/components/TextArea/handleKeyDown.tsx

@@ -115,10 +115,12 @@ export default function handleKeyDown(
       startStr = '\n* ';
     }
 
-    if (currentLineStr.startsWith('- [ ]')) {
+    if (
+      currentLineStr.startsWith('- [ ]') ||
+      currentLineStr.startsWith('- [X]') ||
+      currentLineStr.startsWith('- [x]')
+    ) {
       startStr = '\n- [ ] ';
-    } else if (currentLineStr.startsWith('- [X]') || currentLineStr.startsWith('- [x]')) {
-      startStr = '\n- [X] ';
     }
 
     if (/^\d+.\s/.test(currentLineStr)) {

package/src/components/TextArea/index.nohighlight.tsx

@@ -0,0 +1,109 @@
+import React, { useEffect, Fragment, useContext } from 'react';
+import { EditorContext, ContextStore, ExecuteCommandState } from '../../Context';
+import shortcuts from './shortcuts';
+import Textarea, { TextAreaProps } from './Textarea';
+import { IProps } from '../../Types';
+import { TextAreaCommandOrchestrator, ICommand } from '../../commands';
+import './index.less';
+
+type RenderTextareaHandle = {
+  dispatch: ContextStore['dispatch'];
+  onChange?: TextAreaProps['onChange'];
+  useContext?: {
+    commands: ContextStore['commands'];
+    extraCommands: ContextStore['extraCommands'];
+    commandOrchestrator?: TextAreaCommandOrchestrator;
+  };
+  shortcuts?: (
+    e: KeyboardEvent | React.KeyboardEvent<HTMLTextAreaElement>,
+    commands: ICommand[],
+    commandOrchestrator?: TextAreaCommandOrchestrator,
+    dispatch?: React.Dispatch<ContextStore>,
+    state?: ExecuteCommandState,
+  ) => void;
+};
+
+export interface ITextAreaProps
+  extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'onScroll'>,
+    IProps {
+  value?: string;
+  onScroll?: (e: React.UIEvent<HTMLDivElement>) => void;
+  renderTextarea?: (
+    props: React.TextareaHTMLAttributes<HTMLTextAreaElement> | React.HTMLAttributes<HTMLDivElement>,
+    opts: RenderTextareaHandle,
+  ) => JSX.Element;
+}
+
+export type TextAreaRef = {
+  text?: HTMLTextAreaElement;
+  warp?: HTMLDivElement;
+};
+
+export default function TextArea(props: ITextAreaProps) {
+  const { prefixCls, className, onScroll, renderTextarea, ...otherProps } = props || {};
+  const { markdown, scrollTop, commands, extraCommands, dispatch } = useContext(EditorContext);
+  const textRef = React.useRef<HTMLTextAreaElement>(null);
+  const executeRef = React.useRef<TextAreaCommandOrchestrator>();
+  const warp = React.createRef<HTMLDivElement>();
+  useEffect(() => {
+    const state: ContextStore = {};
+    if (warp.current) {
+      state.textareaWarp = warp.current || undefined;
+      warp.current.scrollTop = scrollTop || 0;
+    }
+    if (dispatch) {
+      dispatch({ ...state });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    if (textRef.current && dispatch) {
+      const commandOrchestrator = new TextAreaCommandOrchestrator(textRef.current);
+      executeRef.current = commandOrchestrator;
+      dispatch({ textarea: textRef.current, commandOrchestrator });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const textStyle: React.CSSProperties = { WebkitTextFillColor: 'initial', overflow: 'auto' };
+
+  return (
+    <div ref={warp} className={`${prefixCls}-area ${className || ''}`} onScroll={onScroll}>
+      <div className={`${prefixCls}-text`}>
+        {renderTextarea ? (
+          React.cloneElement(
+            renderTextarea(
+              {
+                ...otherProps,
+                value: markdown,
+                autoComplete: 'off',
+                autoCorrect: 'off',
+                spellCheck: 'false',
+                autoCapitalize: 'off',
+                className: `${prefixCls}-text-input`,
+                style: {
+                  WebkitTextFillColor: 'inherit',
+                  overflow: 'auto',
+                },
+              },
+              {
+                dispatch,
+                onChange: otherProps.onChange,
+                shortcuts,
+                useContext: { commands, extraCommands, commandOrchestrator: executeRef.current },
+              },
+            ),
+            {
+              ref: textRef,
+            },
+          )
+        ) : (
+          <Fragment>
+            <Textarea prefixCls={prefixCls} {...otherProps} style={textStyle} />
+          </Fragment>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/TextArea/index.tsx

@@ -3,7 +3,7 @@ import { EditorContext, ContextStore, ExecuteCommandState } from '../../Context'
 import shortcuts from './shortcuts';
 import Markdown from './Markdown';
 import Textarea, { TextAreaProps } from './Textarea';
-import { IProps } from '../../Editor';
+import { IProps } from '../../Types';
 import { TextAreaCommandOrchestrator, ICommand } from '../../commands';
 import './index.less';
 

package/src/components/Toolbar/Child.tsx

@@ -1,6 +1,6 @@
 import React, { useContext, useMemo } from 'react';
 import './Child.less';
-import Toolbar, { IToolbarProps } from './';
+import Toolbar, { type IToolbarProps } from './';
 import { EditorContext } from '../../Context';
 
 export type ChildProps = IToolbarProps & {

package/src/components/Toolbar/index.tsx

@@ -1,5 +1,5 @@
 import React, { Fragment, useContext, useEffect, useRef } from 'react';
-import { IProps } from '../../Editor';
+import { IProps } from '../../Types';
 import { EditorContext, PreviewType, ContextStore } from '../../Context';
 import { ICommand } from '../../commands';
 import Child from './Child';

package/src/index.nohighlight.tsx

@@ -0,0 +1,16 @@
+import MDEditor from './Editor.nohighlight';
+import * as commands from './commands';
+import * as MarkdownUtil from './utils/markdownUtils';
+import './index.less';
+
+export * from './commands';
+export * from './commands/group';
+export * from './utils/markdownUtils';
+export * from './utils/InsertTextAtPosition';
+export * from './Editor.nohighlight';
+export * from './Context';
+export * from './Types';
+
+export { MarkdownUtil, commands };
+
+export default MDEditor;

package/src/index.tsx

@@ -1,6 +1,7 @@
 import MDEditor from './Editor';
 import * as commands from './commands';
 import * as MarkdownUtil from './utils/markdownUtils';
+import './index.less';
 
 export * from './commands';
 export * from './commands/group';
@@ -8,6 +9,7 @@ export * from './utils/markdownUtils';
 export * from './utils/InsertTextAtPosition';
 export * from './Editor';
 export * from './Context';
+export * from './Types';
 
 export { MarkdownUtil, commands };