@uiw/react-md-editor 3.24.0 → 3.25.0

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/package.json

@@ -1,11 +1,25 @@
 {
   "name": "@uiw/react-md-editor",
-  "version": "3.24.0",
+  "version": "3.25.0",
   "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"
@@ -27,7 +41,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';
 

package/src/Editor.nohighlight.tsx

@@ -0,0 +1,264 @@
+import React, { useEffect, useReducer, useMemo, useRef, useImperativeHandle } from 'react';
+import MarkdownPreview from '@uiw/react-markdown-preview/nohighlight';
+import TextArea from './components/TextArea/index.nohighlight';
+import Toolbar from './components/Toolbar';
+import DragBar from './components/DragBar';
+import { getCommands, getExtraCommands, ICommand, TextState, TextAreaCommandOrchestrator } from './commands';
+import { reducer, EditorContext, ContextStore } from './Context';
+import type { MDEditorProps } from './Types';
+
+function setGroupPopFalse(data: Record<string, boolean> = {}) {
+  Object.keys(data).forEach((keyname) => {
+    data[keyname] = false;
+  });
+  return data;
+}
+
+export interface RefMDEditor extends ContextStore {}
+
+const InternalMDEditor = React.forwardRef<RefMDEditor, MDEditorProps>(
+  (props: MDEditorProps, ref: React.ForwardedRef<RefMDEditor>) => {
+    const {
+      prefixCls = 'w-md-editor',
+      className,
+      value: propsValue,
+      commands = getCommands(),
+      commandsFilter,
+      direction,
+      extraCommands = getExtraCommands(),
+      height = 200,
+      enableScroll = true,
+      visibleDragbar = typeof props.visiableDragbar === 'boolean' ? props.visiableDragbar : true,
+      highlightEnable = true,
+      preview: previewType = 'live',
+      fullscreen = false,
+      overflow = true,
+      previewOptions = {},
+      textareaProps,
+      maxHeight = 1200,
+      minHeight = 100,
+      autoFocus,
+      tabSize = 2,
+      defaultTabEnable = false,
+      onChange,
+      onStatistics,
+      onHeightChange,
+      hideToolbar,
+      toolbarBottom = false,
+      components,
+      renderTextarea,
+      ...other
+    } = props || {};
+    const cmds = commands
+      .map((item) => (commandsFilter ? commandsFilter(item, false) : item))
+      .filter(Boolean) as ICommand[];
+    const extraCmds = extraCommands
+      .map((item) => (commandsFilter ? commandsFilter(item, true) : item))
+      .filter(Boolean) as ICommand[];
+    let [state, dispatch] = useReducer(reducer, {
+      markdown: propsValue,
+      preview: previewType,
+      components,
+      height,
+      highlightEnable,
+      tabSize,
+      defaultTabEnable,
+      scrollTop: 0,
+      scrollTopPreview: 0,
+      commands: cmds,
+      extraCommands: extraCmds,
+      fullscreen,
+      barPopup: {},
+    });
+    const container = useRef<HTMLDivElement>(null);
+    const previewRef = useRef<HTMLDivElement>(null);
+    const enableScrollRef = useRef(enableScroll);
+
+    useImperativeHandle(ref, () => ({ ...state, container: container.current, dispatch }));
+    useMemo(() => (enableScrollRef.current = enableScroll), [enableScroll]);
+    useEffect(() => {
+      const stateInit: ContextStore = {};
+      if (container.current) {
+        stateInit.container = container.current || undefined;
+      }
+      stateInit.markdown = propsValue || '';
+      stateInit.barPopup = {};
+      if (dispatch) {
+        dispatch({ ...state, ...stateInit });
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    const cls = [
+      className,
+      'wmde-markdown-var',
+      direction ? `${prefixCls}-${direction}` : null,
+      prefixCls,
+      state.preview ? `${prefixCls}-show-${state.preview}` : null,
+      state.fullscreen ? `${prefixCls}-fullscreen` : null,
+    ]
+      .filter(Boolean)
+      .join(' ')
+      .trim();
+
+    useMemo(
+      () => propsValue !== state.markdown && dispatch({ markdown: propsValue || '' }),
+      [propsValue, state.markdown],
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useMemo(() => previewType !== state.preview && dispatch({ preview: previewType }), [previewType]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useMemo(() => tabSize !== state.tabSize && dispatch({ tabSize }), [tabSize]);
+    useMemo(
+      () => highlightEnable !== state.highlightEnable && dispatch({ highlightEnable }),
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [highlightEnable],
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useMemo(() => autoFocus !== state.autoFocus && dispatch({ autoFocus: autoFocus }), [autoFocus]);
+    useMemo(
+      () => fullscreen !== state.fullscreen && dispatch({ fullscreen: fullscreen }),
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [fullscreen],
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useMemo(() => height !== state.height && dispatch({ height: height }), [height]);
+    useMemo(
+      () => height !== state.height && onHeightChange && onHeightChange(state.height, height, state),
+      [height, onHeightChange, state],
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useMemo(() => commands !== state.commands && dispatch({ commands: cmds }), [props.commands]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useMemo(
+      () => extraCommands !== state.extraCommands && dispatch({ extraCommands: extraCmds }),
+      [props.extraCommands],
+    );
+
+    const textareaDomRef = useRef<HTMLDivElement>();
+    const active = useRef<'text' | 'preview'>('preview');
+    const initScroll = useRef(false);
+
+    useMemo(() => {
+      textareaDomRef.current = state.textareaWarp;
+      if (state.textareaWarp) {
+        state.textareaWarp.addEventListener('mouseover', () => {
+          active.current = 'text';
+        });
+        state.textareaWarp.addEventListener('mouseleave', () => {
+          active.current = 'preview';
+        });
+      }
+    }, [state.textareaWarp]);
+
+    const handleScroll = (e: React.UIEvent<HTMLDivElement>, type: 'text' | 'preview') => {
+      if (!enableScrollRef.current) return;
+      const textareaDom = textareaDomRef.current;
+      const previewDom = previewRef.current ? previewRef.current : undefined;
+      if (!initScroll.current) {
+        active.current = type;
+        initScroll.current = true;
+      }
+      if (textareaDom && previewDom) {
+        const scale =
+          (textareaDom.scrollHeight - textareaDom.offsetHeight) / (previewDom.scrollHeight - previewDom.offsetHeight);
+        if (e.target === textareaDom && active.current === 'text') {
+          previewDom.scrollTop = textareaDom.scrollTop / scale;
+        }
+        if (e.target === previewDom && active.current === 'preview') {
+          textareaDom.scrollTop = previewDom.scrollTop * scale;
+        }
+        let scrollTop = 0;
+        if (active.current === 'text') {
+          scrollTop = textareaDom.scrollTop || 0;
+        } else if (active.current === 'preview') {
+          scrollTop = previewDom.scrollTop || 0;
+        }
+        dispatch({ scrollTop });
+      }
+    };
+
+    const previewClassName = `${prefixCls}-preview ${previewOptions.className || ''}`;
+    const handlePreviewScroll = (e: React.UIEvent<HTMLDivElement, UIEvent>) => handleScroll(e, 'preview');
+    let mdPreview = useMemo(
+      () => (
+        <div ref={previewRef} className={previewClassName}>
+          <MarkdownPreview {...previewOptions} onScroll={handlePreviewScroll} source={state.markdown || ''} />
+        </div>
+      ),
+      [previewClassName, previewOptions, state.markdown],
+    );
+    const preview = components?.preview && components?.preview(state.markdown || '', state, dispatch);
+    if (preview && React.isValidElement(preview)) {
+      mdPreview = (
+        <div className={previewClassName} ref={previewRef} onScroll={handlePreviewScroll}>
+          {preview}
+        </div>
+      );
+    }
+
+    const containerStyle = { ...other.style, height: state.height || '100%' };
+    const containerClick = () => dispatch({ barPopup: { ...setGroupPopFalse(state.barPopup) } });
+    const dragBarChange = (newHeight: number) => dispatch({ height: newHeight });
+
+    const changeHandle = (evn: React.ChangeEvent<HTMLTextAreaElement>) => {
+      onChange && onChange(evn.target.value, evn, state);
+      if (textareaProps && textareaProps.onChange) {
+        textareaProps.onChange(evn);
+      }
+      if (state.textarea && state.textarea instanceof HTMLTextAreaElement && onStatistics) {
+        const obj = new TextAreaCommandOrchestrator(state.textarea!);
+        const objState = (obj.getState() || {}) as TextState;
+        onStatistics({
+          ...objState,
+          lineCount: evn.target.value.split('\n').length,
+          length: evn.target.value.length,
+        });
+      }
+    };
+    return (
+      <EditorContext.Provider value={{ ...state, dispatch }}>
+        <div ref={container} className={cls} {...other} onClick={containerClick} style={containerStyle}>
+          {!hideToolbar && !toolbarBottom && (
+            <Toolbar prefixCls={prefixCls} overflow={overflow} toolbarBottom={toolbarBottom} />
+          )}
+          <div className={`${prefixCls}-content`}>
+            {/(edit|live)/.test(state.preview || '') && (
+              <TextArea
+                className={`${prefixCls}-input`}
+                prefixCls={prefixCls}
+                autoFocus={autoFocus}
+                {...textareaProps}
+                onChange={changeHandle}
+                renderTextarea={components?.textarea || renderTextarea}
+                onScroll={(e) => handleScroll(e, 'text')}
+              />
+            )}
+            {/(live|preview)/.test(state.preview || '') && mdPreview}
+          </div>
+          {visibleDragbar && !state.fullscreen && (
+            <DragBar
+              prefixCls={prefixCls}
+              height={state.height as number}
+              maxHeight={maxHeight!}
+              minHeight={minHeight!}
+              onChange={dragBarChange}
+            />
+          )}
+          {!hideToolbar && toolbarBottom && (
+            <Toolbar prefixCls={prefixCls} overflow={overflow} toolbarBottom={toolbarBottom} />
+          )}
+        </div>
+      </EditorContext.Provider>
+    );
+  },
+);
+
+type EditorComponent = typeof InternalMDEditor & {
+  Markdown: typeof MarkdownPreview;
+};
+
+const Editor = InternalMDEditor as EditorComponent;
+Editor.Markdown = MarkdownPreview;
+
+export default Editor;