@uiw/react-md-editor 3.24.0 → 3.25.0

package/esm/components/TextArea/index.nohighlight.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import { ContextStore, ExecuteCommandState } from '../../Context';
+import { 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): import("react/jsx-runtime").JSX.Element;
+export {};

package/esm/components/TextArea/index.nohighlight.js

@@ -0,0 +1,93 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["prefixCls", "className", "onScroll", "renderTextarea"];
+import React, { useEffect, Fragment, useContext } from 'react';
+import { EditorContext } from '../../Context';
+import shortcuts from './shortcuts';
+import Textarea from './Textarea';
+import { TextAreaCommandOrchestrator } from '../../commands';
+import "./index.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function TextArea(props) {
+  var _ref = props || {},
+    {
+      prefixCls,
+      className,
+      onScroll,
+      renderTextarea
+    } = _ref,
+    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var {
+    markdown,
+    scrollTop,
+    commands,
+    extraCommands,
+    dispatch
+  } = useContext(EditorContext);
+  var textRef = React.useRef(null);
+  var executeRef = React.useRef();
+  var warp = /*#__PURE__*/React.createRef();
+  useEffect(() => {
+    var state = {};
+    if (warp.current) {
+      state.textareaWarp = warp.current || undefined;
+      warp.current.scrollTop = scrollTop || 0;
+    }
+    if (dispatch) {
+      dispatch(_extends({}, state));
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  useEffect(() => {
+    if (textRef.current && dispatch) {
+      var _commandOrchestrator = new TextAreaCommandOrchestrator(textRef.current);
+      executeRef.current = _commandOrchestrator;
+      dispatch({
+        textarea: textRef.current,
+        commandOrchestrator: _commandOrchestrator
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  var textStyle = {
+    WebkitTextFillColor: 'initial',
+    overflow: 'auto'
+  };
+  return /*#__PURE__*/_jsx("div", {
+    ref: warp,
+    className: prefixCls + "-area " + (className || ''),
+    onScroll: onScroll,
+    children: /*#__PURE__*/_jsx("div", {
+      className: prefixCls + "-text",
+      children: renderTextarea ? /*#__PURE__*/React.cloneElement(renderTextarea(_extends({}, 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
+      }) : /*#__PURE__*/_jsx(Fragment, {
+        children: /*#__PURE__*/_jsx(Textarea, _extends({
+          prefixCls: prefixCls
+        }, otherProps, {
+          style: textStyle
+        }))
+      })
+    })
+  });
+}

package/esm/components/Toolbar/Child.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import './Child.less';
-import { IToolbarProps } from './';
+import { type IToolbarProps } from './';
 export type ChildProps = IToolbarProps & {
     children?: JSX.Element;
     groupName?: string;

package/esm/components/Toolbar/index.d.ts

@@ -1,4 +1,4 @@
-import { IProps } from '../../Editor';
+import { IProps } from '../../Types';
 import { ICommand } from '../../commands';
 import './index.less';
 export interface IToolbarProps extends IProps {

package/esm/index.d.ts

@@ -1,11 +1,13 @@
 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';
 export * from './utils/markdownUtils';
 export * from './utils/InsertTextAtPosition';
 export * from './Editor';
 export * from './Context';
+export * from './Types';
 export { MarkdownUtil, commands };
 export default MDEditor;

package/esm/index.js

@@ -1,11 +1,13 @@
 import MDEditor from './Editor';
 import * as commands from './commands';
 import * as MarkdownUtil from './utils/markdownUtils';
+import "./index.css";
 export * from './commands';
 export * from './commands/group';
 export * from './utils/markdownUtils';
 export * from './utils/InsertTextAtPosition';
 export * from './Editor';
 export * from './Context';
+export * from './Types';
 export { MarkdownUtil, commands };
 export default MDEditor;

package/esm/index.nohighlight.d.ts

@@ -0,0 +1,13 @@
+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/esm/index.nohighlight.js

@@ -0,0 +1,13 @@
+import MDEditor from './Editor.nohighlight';
+import * as commands from './commands';
+import * as MarkdownUtil from './utils/markdownUtils';
+import "./index.css";
+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/lib/Context.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ICommand, TextAreaCommandOrchestrator } from './commands';
-import { MDEditorProps } from './Editor';
+import { MDEditorProps } from './Types';
 export type PreviewType = 'live' | 'edit' | 'preview';
 export interface ContextStore {
     components?: MDEditorProps['components'];

package/lib/Editor.d.ts

@@ -1,152 +1,7 @@
-import React, { CSSProperties } from 'react';
-import MarkdownPreview, { MarkdownPreviewProps } from '@uiw/react-markdown-preview';
-import { ITextAreaProps } from './components/TextArea';
-import { ICommand, TextState } from './commands';
-import { 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 React from 'react';
+import MarkdownPreview from '@uiw/react-markdown-preview';
+import { ContextStore } from './Context';
+import type { MDEditorProps } from './Types';
 export interface RefMDEditor extends ContextStore {
 }
 declare const InternalMDEditor: React.ForwardRefExoticComponent<MDEditorProps & React.RefAttributes<RefMDEditor>>;

package/lib/Editor.nohighlight.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import MarkdownPreview from '@uiw/react-markdown-preview/nohighlight';
+import { ContextStore } from './Context';
+import type { MDEditorProps } from './Types';
+export interface RefMDEditor extends ContextStore {
+}
+declare const InternalMDEditor: React.ForwardRefExoticComponent<MDEditorProps & React.RefAttributes<RefMDEditor>>;
+type EditorComponent = typeof InternalMDEditor & {
+    Markdown: typeof MarkdownPreview;
+};
+declare const Editor: EditorComponent;
+export default Editor;