@uiw/react-md-editor/lib/Editor.js

A markdown editor with preview, implemented with React.js and TypeScript.

"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 = void 0;

var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _react = _interopRequireWildcard(require("react"));

var _reactMarkdownPreview = _interopRequireDefault(require("@uiw/react-markdown-preview"));

var _TextArea = _interopRequireDefault(require("./components/TextArea"));

var _Toolbar = _interopRequireDefault(require("./components/Toolbar"));

var _DragBar = _interopRequireDefault(require("./components/DragBar"));

var _commands = require("./commands");

var _Context = require("./Context");

var _jsxRuntime = require("react/jsx-runtime");

var _excluded = ["prefixCls", "className", "value", "commands", "commandsFilter", "extraCommands", "height", "toolbarHeight", "enableScroll", "visiableDragbar", "highlightEnable", "preview", "fullscreen", "previewOptions", "textareaProps", "maxHeight", "minHeight", "autoFocus", "tabSize", "onChange", "hideToolbar", "renderTextarea"];

function setGroupPopFalse() {
  var data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
  Object.keys(data).forEach(function (keyname) {
    data[keyname] = false;
  });
  return data;
}

var InternalMDEditor = function InternalMDEditor(props, ref) {
  var _ref = props || {},
      _ref$prefixCls = _ref.prefixCls,
      prefixCls = _ref$prefixCls === void 0 ? 'w-md-editor' : _ref$prefixCls,
      className = _ref.className,
      propsValue = _ref.value,
      _ref$commands = _ref.commands,
      commands = _ref$commands === void 0 ? (0, _commands.getCommands)() : _ref$commands,
      commandsFilter = _ref.commandsFilter,
      _ref$extraCommands = _ref.extraCommands,
      extraCommands = _ref$extraCommands === void 0 ? (0, _commands.getExtraCommands)() : _ref$extraCommands,
      _ref$height = _ref.height,
      height = _ref$height === void 0 ? 200 : _ref$height,
      _ref$toolbarHeight = _ref.toolbarHeight,
      toolbarHeight = _ref$toolbarHeight === void 0 ? 29 : _ref$toolbarHeight,
      _ref$enableScroll = _ref.enableScroll,
      enableScroll = _ref$enableScroll === void 0 ? true : _ref$enableScroll,
      _ref$visiableDragbar = _ref.visiableDragbar,
      visiableDragbar = _ref$visiableDragbar === void 0 ? true : _ref$visiableDragbar,
      _ref$highlightEnable = _ref.highlightEnable,
      highlightEnable = _ref$highlightEnable === void 0 ? true : _ref$highlightEnable,
      _ref$preview = _ref.preview,
      previewType = _ref$preview === void 0 ? 'live' : _ref$preview,
      _ref$fullscreen = _ref.fullscreen,
      fullscreen = _ref$fullscreen === void 0 ? false : _ref$fullscreen,
      _ref$previewOptions = _ref.previewOptions,
      previewOptions = _ref$previewOptions === void 0 ? {} : _ref$previewOptions,
      textareaProps = _ref.textareaProps,
      _ref$maxHeight = _ref.maxHeight,
      maxHeight = _ref$maxHeight === void 0 ? 1200 : _ref$maxHeight,
      _ref$minHeight = _ref.minHeight,
      minHeight = _ref$minHeight === void 0 ? 100 : _ref$minHeight,
      autoFocus = _ref.autoFocus,
      _ref$tabSize = _ref.tabSize,
      tabSize = _ref$tabSize === void 0 ? 2 : _ref$tabSize,
      onChange = _ref.onChange,
      hideToolbar = _ref.hideToolbar,
      renderTextarea = _ref.renderTextarea,
      other = (0, _objectWithoutProperties2.default)(_ref, _excluded);

  var cmds = commands.map(function (item) {
    return commandsFilter ? commandsFilter(item) : item;
  }).filter(Boolean);

  var _useReducer = (0, _react.useReducer)(_Context.reducer, {
    markdown: propsValue,
    preview: previewType,
    height: height,
    highlightEnable: highlightEnable,
    tabSize: tabSize,
    scrollTop: 0,
    scrollTopPreview: 0,
    commands: cmds,
    extraCommands: extraCommands,
    fullscreen: fullscreen,
    onChange: onChange,
    barPopup: {}
  }),
      _useReducer2 = (0, _slicedToArray2.default)(_useReducer, 2),
      state = _useReducer2[0],
      dispatch = _useReducer2[1];

  var container = (0, _react.useRef)(null);
  var previewRef = (0, _react.useRef)(null);
  var enableScrollRef = (0, _react.useRef)(enableScroll);
  (0, _react.useImperativeHandle)(ref, function () {
    return (0, _objectSpread2.default)({}, state);
  });
  (0, _react.useMemo)(function () {
    return enableScrollRef.current = enableScroll;
  }, [enableScroll]);
  (0, _react.useEffect)(function () {
    var stateInit = {};

    if (container.current) {
      stateInit.container = container.current || undefined;
    }

    stateInit.markdown = propsValue || '';
    stateInit.barPopup = {};

    if (dispatch) {
      dispatch((0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), stateInit));
    } // eslint-disable-next-line react-hooks/exhaustive-deps

  }, []);
  var cls = [className, prefixCls, state.preview ? "".concat(prefixCls, "-show-").concat(state.preview) : null, state.fullscreen ? "".concat(prefixCls, "-fullscreen") : null].filter(Boolean).join(' ').trim();
  (0, _react.useMemo)(function () {
    return propsValue !== state.markdown && dispatch({
      markdown: propsValue || ''
    });
  }, [propsValue, state.markdown]); // eslint-disable-next-line react-hooks/exhaustive-deps

  (0, _react.useMemo)(function () {
    return previewType !== state.preview && dispatch({
      preview: previewType
    });
  }, [previewType]); // eslint-disable-next-line react-hooks/exhaustive-deps

  (0, _react.useMemo)(function () {
    return height !== state.height && dispatch({
      height: height
    });
  }, [height]); // eslint-disable-next-line react-hooks/exhaustive-deps

  (0, _react.useMemo)(function () {
    return tabSize !== state.tabSize && dispatch({
      tabSize: tabSize
    });
  }, [tabSize]);
  (0, _react.useMemo)(function () {
    return highlightEnable !== state.highlightEnable && dispatch({
      highlightEnable: highlightEnable
    });
  }, // eslint-disable-next-line react-hooks/exhaustive-deps
  [highlightEnable]); // eslint-disable-next-line react-hooks/exhaustive-deps

  (0, _react.useMemo)(function () {
    return autoFocus !== state.autoFocus && dispatch({
      autoFocus: autoFocus
    });
  }, [autoFocus]);
  (0, _react.useMemo)(function () {
    return fullscreen !== state.fullscreen && dispatch({
      fullscreen: fullscreen
    });
  }, // eslint-disable-next-line react-hooks/exhaustive-deps
  [fullscreen]);
  var textareaDomRef = (0, _react.useRef)();
  var active = (0, _react.useRef)('preview');
  var initScroll = (0, _react.useRef)(false);
  (0, _react.useMemo)(function () {
    textareaDomRef.current = state.textareaWarp;

    if (state.textareaWarp) {
      state.textareaWarp.addEventListener('mouseover', function () {
        active.current = 'text';
      });
      state.textareaWarp.addEventListener('mouseleave', function () {
        active.current = 'preview';
      });
    }
  }, [state.textareaWarp]);

  var handleScroll = function handleScroll(e, type) {
    if (!enableScrollRef.current) return;
    var textareaDom = textareaDomRef.current;
    var previewDom = previewRef.current ? previewRef.current.mdp.current : undefined;

    if (!initScroll.current) {
      active.current = type;
      initScroll.current = true;
    }

    if (textareaDom && previewDom) {
      var 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;
      }

      var scrollTop = 0;

      if (active.current === 'text') {
        scrollTop = textareaDom.scrollTop || 0;
      } else if (active.current === 'preview') {
        scrollTop = previewDom.scrollTop || 0;
      }

      dispatch({
        scrollTop: scrollTop
      });
    }
  };

  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Context.EditorContext.Provider, {
    value: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), {}, {
      dispatch: dispatch
    }),
    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _objectSpread2.default)((0, _objectSpread2.default)({
      ref: container,
      className: cls
    }, other), {}, {
      onClick: function onClick() {
        dispatch({
          barPopup: (0, _objectSpread2.default)({}, setGroupPopFalse(state.barPopup))
        });
      },
      style: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, other.style), {}, {
        height: state.fullscreen ? '100%' : hideToolbar ? Number(state.height) - toolbarHeight : state.height
      }),
      children: [!hideToolbar && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toolbar.default, {
        prefixCls: prefixCls,
        height: toolbarHeight
      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
        className: "".concat(prefixCls, "-content"),
        style: {
          height: state.fullscreen ? "calc(100% - ".concat(toolbarHeight, "px)") : Number(state.height) - toolbarHeight
        },
        children: [/(edit|live)/.test(state.preview || '') && /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextArea.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({
          className: "".concat(prefixCls, "-input"),
          prefixCls: prefixCls,
          autoFocus: autoFocus
        }, textareaProps), {}, {
          renderTextarea: renderTextarea,
          onScroll: function onScroll(e) {
            return handleScroll(e, 'text');
          }
        })), /(live|preview)/.test(state.preview || '') && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactMarkdownPreview.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, previewOptions), {}, {
          onScroll: function onScroll(e) {
            return handleScroll(e, 'preview');
          },
          ref: previewRef,
          source: state.markdown || '',
          className: "".concat(prefixCls, "-preview ").concat(previewOptions.className || '')
        }))]
      }), visiableDragbar && !state.fullscreen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DragBar.default, {
        prefixCls: prefixCls,
        height: state.height,
        maxHeight: maxHeight,
        minHeight: minHeight,
        onChange: function onChange(newHeight) {
          dispatch({
            height: newHeight
          });
        }
      })]
    }))
  });
};

var mdEditor = /*#__PURE__*/_react.default.forwardRef(InternalMDEditor);

mdEditor.Markdown = _reactMarkdownPreview.default;
var _default = mdEditor;
exports.default = _default;
module.exports = exports.default;
//# sourceMappingURL=Editor.js.map