@uiw/react-md-editor 3.20.1 → 3.20.3

package/lib/components/TextArea/index.js.map

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

package/lib/components/TextArea/index.less

@@ -1,7 +1,7 @@
 @md-editor:~ "w-md-editor";
 
 .@{md-editor} {
-  &-aree {
+  &-area {
     overflow: auto;
     border-radius: 5px;
   }

package/markdown-editor.css

@@ -16,7 +16,7 @@
   display: block;
   margin: 0 auto;
 }
-.w-md-editor-aree {
+.w-md-editor-area {
   overflow: auto;
   border-radius: 5px;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uiw/react-md-editor",
-  "version": "3.20.1",
+  "version": "3.20.3",
   "description": "A markdown editor with preview, implemented with React.js and TypeScript.",
   "homepage": "https://uiwjs.github.io/react-md-editor/",
   "author": "kenny wang <wowohoo@qq.com>",

package/src/Context.tsx

@@ -4,7 +4,7 @@ import { MDEditorProps } from './Editor';
 
 export type PreviewType = 'live' | 'edit' | 'preview';
 
-export type ContextStore = {
+export interface ContextStore {
   components?: MDEditorProps['components'];
   commands?: ICommand<string>[];
   extraCommands?: ICommand<string>[];
@@ -25,7 +25,7 @@ export type ContextStore = {
   scrollTopPreview?: number;
   tabSize?: number;
   defaultTabEnable?: boolean;
-};
+}
 
 export type ExecuteCommandState = Pick<ContextStore, 'fullscreen' | 'preview' | 'highlightEnable'>;
 

package/src/Editor.tsx

@@ -35,7 +35,7 @@ export interface MDEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>
    * The height of the editor.
    * ⚠️ `Dragbar` is invalid when **`height`** parameter percentage.
    */
-  height?: CSSProperties['height'];
+  height?: number;
   /**
    * Custom toolbar heigth
    * @default 29px
@@ -151,9 +151,11 @@ function setGroupPopFalse(data: Record<string, boolean> = {}) {
   return data;
 }
 
+export interface RefMDEditor extends ContextStore {}
+
 const InternalMDEditor = (
   props: MDEditorProps,
-  ref?: ((instance: ContextStore) => void) | React.RefObject<ContextStore> | null,
+  ref?: ((instance: RefMDEditor) => void) | React.RefObject<RefMDEditor> | null,
 ) => {
   const {
     prefixCls = 'w-md-editor',
@@ -210,7 +212,7 @@ const InternalMDEditor = (
   const previewRef = useRef<HTMLDivElement>(null);
   const enableScrollRef = useRef(enableScroll);
 
-  useImperativeHandle(ref, () => ({ ...state }));
+  useImperativeHandle(ref, () => ({ ...state, container: container.current, dispatch }));
   useMemo(() => (enableScrollRef.current = enableScroll), [enableScroll]);
   useEffect(() => {
     const stateInit: ContextStore = {};

package/src/components/TextArea/index.less

@@ -1,7 +1,7 @@
 @md-editor:~ "w-md-editor";
 
 .@{md-editor} {
-  &-aree {
+  &-area {
     overflow: auto;
     border-radius: 5px;
   }

package/src/components/TextArea/index.tsx

@@ -70,7 +70,7 @@ export default function TextArea(props: ITextAreaProps) {
   const textStyle: React.CSSProperties = highlightEnable ? {} : { WebkitTextFillColor: 'initial', overflow: 'auto' };
 
   return (
-    <div ref={warp} className={`${prefixCls}-aree ${className || ''}`} onScroll={onScroll}>
+    <div ref={warp} className={`${prefixCls}-area ${className || ''}`} onScroll={onScroll}>
       <div className={`${prefixCls}-text`}>
         {renderTextarea ? (
           React.cloneElement(