@uiw/react-markdown-editor/cjs/index.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
});
var _exportNames = {
  scrollerStyle: true
};
exports.scrollerStyle = exports.default = void 0;

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

var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));

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

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

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

var _langMarkdown = require("@codemirror/lang-markdown");

var _languageData = require("@codemirror/language-data");

var _view = require("@codemirror/view");

var _reactCodemirror = _interopRequireDefault(require("@uiw/react-codemirror"));

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

var _ToolBar = _interopRequireDefault(require("./components/ToolBar"));

var _commands = require("./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 _theme = require("./theme");

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

var _excluded = ["prefixCls", "className", "onChange", "toolbars", "toolbarsMode", "visible", "renderPreview", "visibleEditor", "hideToolbar", "previewProps", "extensions"];

var scrollerStyle = _view.EditorView.theme({
  '&.cm-editor, & .cm-scroller': {
    borderBottomRightRadius: '3px',
    borderBottomLeftRadius: '3px'
  }
});

exports.scrollerStyle = scrollerStyle;

var _default = /*#__PURE__*/_react.default.forwardRef(MarkdownEditor);

exports.default = _default;

function MarkdownEditor(props, ref) {
  var _props$prefixCls = props.prefixCls,
      prefixCls = _props$prefixCls === void 0 ? 'md-editor' : _props$prefixCls,
      className = props.className,
      _onChange = props.onChange,
      _props$toolbars = props.toolbars,
      toolbars = _props$toolbars === void 0 ? (0, _commands.getCommands)() : _props$toolbars,
      _props$toolbarsMode = props.toolbarsMode,
      toolbarsMode = _props$toolbarsMode === void 0 ? (0, _commands.getModeCommands)() : _props$toolbarsMode,
      _props$visible = props.visible,
      visible = _props$visible === void 0 ? true : _props$visible,
      renderPreview = props.renderPreview,
      _props$visibleEditor = props.visibleEditor,
      visibleEditor = _props$visibleEditor === void 0 ? true : _props$visibleEditor,
      _props$hideToolbar = props.hideToolbar,
      hideToolbar = _props$hideToolbar === void 0 ? true : _props$hideToolbar,
      _props$previewProps = props.previewProps,
      previewProps = _props$previewProps === void 0 ? {} : _props$previewProps,
      _props$extensions = props.extensions,
      extensions = _props$extensions === void 0 ? [] : _props$extensions,
      codemirrorProps = (0, _objectWithoutProperties2.default)(props, _excluded);

  var _useState = (0, _react.useState)(props.value || ''),
      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
      value = _useState2[0],
      setValue = _useState2[1];

  var codeMirror = (0, _react.useRef)(null);
  var previewContainer = (0, _react.useRef)(null);
  var container = (0, _react.useRef)(null);
  var containerEditor = (0, _react.useRef)(null);
  (0, _react.useImperativeHandle)(ref, function () {
    return {
      editor: codeMirror,
      preview: previewContainer
    };
  }, [codeMirror, previewContainer]);
  var toolBarProps = {
    editor: codeMirror,
    preview: previewContainer,
    container: container,
    containerEditor: containerEditor,
    editorProps: props
  };
  var height = typeof codemirrorProps.height === 'number' ? "".concat(codemirrorProps.height, "px") : codemirrorProps.height;
  var extensionsData = [(0, _langMarkdown.markdown)({
    base: _langMarkdown.markdownLanguage,
    codeLanguages: _languageData.languages
  }), scrollerStyle].concat((0, _toConsumableArray2.default)(extensions));
  previewProps['className'] = "".concat(prefixCls, "-preview");
  previewProps['source'] = value;
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    className: "".concat(prefixCls || '', " wmde-markdown-var ").concat(className || ''),
    ref: container,
    children: [hideToolbar && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ToolBar.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, toolBarProps), {}, {
        toolbars: toolbarsMode,
        mode: true
      })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ToolBar.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, toolBarProps), {}, {
        toolbars: toolbars
      }))]
    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      className: "".concat(prefixCls, "-content"),
      style: {
        height: codemirrorProps.height
      },
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        className: "".concat(prefixCls, "-content-editor"),
        ref: containerEditor,
        children: visibleEditor && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactCodemirror.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({
          theme: _theme.defaultTheme
        }, codemirrorProps), {}, {
          extensions: extensionsData,
          height: height,
          ref: codeMirror,
          onChange: function onChange(value, viewUpdate) {
            setValue(value);
            _onChange && _onChange(value, viewUpdate);
          }
        }))
      }), renderPreview ? renderPreview(previewProps, !!visible) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactMarkdownPreview.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, previewProps), {}, {
        "data-visible": !!visible,
        ref: previewContainer
      }))]
    })]
  });
}
//# sourceMappingURL=index.js.map