@uiw/react-md-editor 3.24.1 → 3.25.1

package/lib/Types.d.ts

@@ -0,0 +1,148 @@
+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/lib/Types.js

@@ -0,0 +1 @@
+"use strict";

package/lib/components/DragBar/index.d.ts

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

package/lib/components/TextArea/Markdown.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { IProps } from '../../Editor';
+import { IProps } from '../../Types';
 export interface MarkdownProps extends IProps, React.HTMLAttributes<HTMLPreElement> {
 }
 export default function Markdown(props: MarkdownProps): import("react/jsx-runtime").JSX.Element;

package/lib/components/TextArea/Textarea.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { IProps } from '../../Editor';
+import { IProps } from '../../Types';
 import './index.less';
 export interface TextAreaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'value'>, IProps {
 }

package/lib/components/TextArea/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ContextStore, ExecuteCommandState } from '../../Context';
 import { TextAreaProps } from './Textarea';
-import { IProps } from '../../Editor';
+import { IProps } from '../../Types';
 import { TextAreaCommandOrchestrator, ICommand } from '../../commands';
 import './index.less';
 type RenderTextareaHandle = {

package/lib/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/lib/components/TextArea/index.nohighlight.js

@@ -0,0 +1,98 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = TextArea;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _Context = require("../../Context");
+var _shortcuts = _interopRequireDefault(require("./shortcuts"));
+var _Textarea = _interopRequireDefault(require("./Textarea"));
+var _commands = require("../../commands");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["prefixCls", "className", "onScroll", "renderTextarea"];
+function TextArea(props) {
+  var _ref = props || {},
+    prefixCls = _ref.prefixCls,
+    className = _ref.className,
+    onScroll = _ref.onScroll,
+    renderTextarea = _ref.renderTextarea,
+    otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var _useContext = (0, _react.useContext)(_Context.EditorContext),
+    markdown = _useContext.markdown,
+    scrollTop = _useContext.scrollTop,
+    commands = _useContext.commands,
+    extraCommands = _useContext.extraCommands,
+    dispatch = _useContext.dispatch;
+  var textRef = _react["default"].useRef(null);
+  var executeRef = _react["default"].useRef();
+  var warp = /*#__PURE__*/_react["default"].createRef();
+  (0, _react.useEffect)(function () {
+    var state = {};
+    if (warp.current) {
+      state.textareaWarp = warp.current || undefined;
+      warp.current.scrollTop = scrollTop || 0;
+    }
+    if (dispatch) {
+      dispatch((0, _objectSpread2["default"])({}, state));
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  (0, _react.useEffect)(function () {
+    if (textRef.current && dispatch) {
+      var _commandOrchestrator = new _commands.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__*/(0, _jsxRuntime.jsx)("div", {
+    ref: warp,
+    className: "".concat(prefixCls, "-area ").concat(className || ''),
+    onScroll: onScroll,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "".concat(prefixCls, "-text"),
+      children: renderTextarea ? /*#__PURE__*/_react["default"].cloneElement(renderTextarea((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, otherProps), {}, {
+        value: markdown,
+        autoComplete: 'off',
+        autoCorrect: 'off',
+        spellCheck: 'false',
+        autoCapitalize: 'off',
+        className: "".concat(prefixCls, "-text-input"),
+        style: {
+          WebkitTextFillColor: 'inherit',
+          overflow: 'auto'
+        }
+      }), {
+        dispatch: dispatch,
+        onChange: otherProps.onChange,
+        shortcuts: _shortcuts["default"],
+        useContext: {
+          commands: commands,
+          extraCommands: extraCommands,
+          commandOrchestrator: executeRef.current
+        }
+      }), {
+        ref: textRef
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Textarea["default"], (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
+          prefixCls: prefixCls
+        }, otherProps), {}, {
+          style: textStyle
+        }))
+      })
+    })
+  });
+}
+module.exports = exports.default;

package/lib/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/lib/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/lib/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/lib/index.js

@@ -83,4 +83,16 @@ Object.keys(_Context).forEach(function (key) {
     }
   });
 });
+var _Types = require("./Types");
+Object.keys(_Types).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Types[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Types[key];
+    }
+  });
+});
 var _default = exports["default"] = _Editor["default"];

package/lib/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/lib/index.nohighlight.js

@@ -0,0 +1,98 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  commands: true,
+  MarkdownUtil: true
+};
+exports["default"] = exports.commands = exports.MarkdownUtil = void 0;
+var _Editor = _interopRequireWildcard(require("./Editor.nohighlight"));
+Object.keys(_Editor).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Editor[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Editor[key];
+    }
+  });
+});
+var commands = _interopRequireWildcard(require("./commands"));
+exports.commands = commands;
+Object.keys(commands).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === commands[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return commands[key];
+    }
+  });
+});
+var MarkdownUtil = _interopRequireWildcard(require("./utils/markdownUtils"));
+exports.MarkdownUtil = MarkdownUtil;
+Object.keys(MarkdownUtil).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === MarkdownUtil[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return MarkdownUtil[key];
+    }
+  });
+});
+var _group = require("./commands/group");
+Object.keys(_group).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _group[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _group[key];
+    }
+  });
+});
+var _InsertTextAtPosition = require("./utils/InsertTextAtPosition");
+Object.keys(_InsertTextAtPosition).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _InsertTextAtPosition[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _InsertTextAtPosition[key];
+    }
+  });
+});
+var _Context = require("./Context");
+Object.keys(_Context).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Context[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Context[key];
+    }
+  });
+});
+var _Types = require("./Types");
+Object.keys(_Types).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Types[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Types[key];
+    }
+  });
+});
+var _default = exports["default"] = _Editor["default"];

package/nohighlight.d.ts

@@ -0,0 +1,13 @@
+declare module '@uiw/react-md-editor/nohighlight' {
+  import MDEditor from '@uiw/react-md-editor/esm/Editor.nohighlight';
+  import * as commands from '@uiw/react-md-editor/esm/commands';
+  import * as MarkdownUtil from '@uiw/react-md-editor/esm/utils/markdownUtils';
+  export * from '@uiw/react-md-editor/esm/commands';
+  export * from '@uiw/react-md-editor/esm/commands/group';
+  export * from '@uiw/react-md-editor/esm/utils/markdownUtils';
+  export * from '@uiw/react-md-editor/esm/utils/InsertTextAtPosition';
+  export * from '@uiw/react-md-editor/esm/Editor.nohighlight';
+  export * from '@uiw/react-md-editor/esm/Context';
+  export { MarkdownUtil, commands };
+  export default MDEditor;
+}

package/package.json

@@ -1,11 +1,25 @@
 {
   "name": "@uiw/react-md-editor",
-  "version": "3.24.1",
+  "version": "3.25.1",
   "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>",
   "main": "lib/index.js",
   "module": "esm/index.js",
+  "exports": {
+    "./README.md": "./README.md",
+    "./package.json": "./package.json",
+    ".": {
+      "import": "./esm/index.js",
+      "types": "./lib/index.d.ts",
+      "require": "./lib/index.js"
+    },
+    "./nohighlight": {
+      "import": "./esm/index.nohighlight.js",
+      "types": "./lib/index.nohighlight.d.ts",
+      "require": "./lib/index.nohighlight.js"
+    }
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/uiwjs/react-md-editor"
@@ -15,6 +29,7 @@
   },
   "files": [
     "markdown-editor.css",
+    "nohighlight.d.ts",
     "lib",
     "dist",
     "esm",
@@ -27,7 +42,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.14.6",
-    "@uiw/react-markdown-preview": "^4.1.14",
+    "@uiw/react-markdown-preview": "^4.2.1",
     "rehype": "~12.0.1",
     "rehype-prism-plus": "~1.6.1"
   },

package/src/Context.tsx

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