@uiw/react-md-editor 3.24.1 → 3.25.0

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