@uiw/react-md-editor/lib/components/Toolbar/index.js

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

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ToolbarItems = ToolbarItems;
exports.default = Toolbar;

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

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

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

var _Child = _interopRequireDefault(require("./Child"));

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

function ToolbarItems(props) {
  var prefixCls = props.prefixCls;

  var _useContext = (0, _react.useContext)(_Context.EditorContext),
      fullscreen = _useContext.fullscreen,
      preview = _useContext.preview,
      _useContext$barPopup = _useContext.barPopup,
      barPopup = _useContext$barPopup === void 0 ? {} : _useContext$barPopup,
      commandOrchestrator = _useContext.commandOrchestrator,
      dispatch = _useContext.dispatch;

  function handleClick(command, name) {
    if (!dispatch) return;
    var state = {
      barPopup: (0, _objectSpread2.default)({}, barPopup)
    };

    if (command.keyCommand === 'preview') {
      state.preview = command.value;
    }

    if (command.keyCommand === 'fullscreen') {
      state.fullscreen = !fullscreen;
    }

    if (props.commands && command.keyCommand === 'group') {
      props.commands.forEach(function (item) {
        if (name === item.groupName) {
          state.barPopup[name] = true;
        } else if (item.keyCommand) {
          state.barPopup[item.groupName] = false;
        }
      });
    } else if (name || command.parent) {
      Object.keys(state.barPopup || {}).forEach(function (keyName) {
        state.barPopup[keyName] = false;
      });
    }

    if (Object.keys(state).length) {
      dispatch((0, _objectSpread2.default)({}, state));
    }

    commandOrchestrator && commandOrchestrator.executeCommand(command);
  }

  (0, _react.useEffect)(function () {
    if (document) {
      document.body.style.overflow = !fullscreen ? 'initial' : 'hidden';
    }
  }, [fullscreen]);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
    children: (props.commands || []).map(function (item, idx) {
      if (item.keyCommand === 'divider') {
        return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item.liProps), {}, {
          className: "".concat(prefixCls, "-toolbar-divider")
        }), idx);
      }

      if (!item.keyCommand) return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {});
      var activeBtn = fullscreen && item.keyCommand === 'fullscreen' || item.keyCommand === 'preview' && preview === item.value;
      var childNode = item.children && typeof item.children === 'function' ? item.children({
        getState: function getState() {
          return commandOrchestrator.getState();
        },
        textApi: commandOrchestrator ? commandOrchestrator.textApi : undefined,
        close: function close() {
          return handleClick({}, item.groupName);
        },
        execute: function execute() {
          return handleClick({
            execute: item.execute
          });
        }
      }) : undefined;
      var disabled = barPopup && preview && preview === 'preview' && !/(preview|fullscreen)/.test(item.keyCommand);
      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item.liProps), {}, {
        className: activeBtn ? "active" : '',
        children: [!item.buttonProps && item.icon, item.buttonProps && /*#__PURE__*/_react.default.createElement('button', (0, _objectSpread2.default)((0, _objectSpread2.default)({
          type: 'button',
          disabled: disabled,
          'data-name': item.name
        }, item.buttonProps), {}, {
          onClick: function onClick(evn) {
            evn.stopPropagation();
            handleClick(item, item.groupName);
          }
        }), item.icon), item.children && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Child.default, {
          groupName: item.groupName,
          prefixCls: prefixCls,
          children: childNode,
          commands: Array.isArray(item.children) ? item.children : undefined
        })]
      }), idx);
    })
  });
}

function Toolbar() {
  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
  var prefixCls = props.prefixCls,
      _props$height = props.height,
      height = _props$height === void 0 ? 29 : _props$height,
      isChild = props.isChild;

  var _useContext2 = (0, _react.useContext)(_Context.EditorContext),
      commands = _useContext2.commands,
      extraCommands = _useContext2.extraCommands;

  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    className: "".concat(prefixCls, "-toolbar"),
    style: {
      height: height
    },
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ToolbarItems, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
      commands: props.commands || commands || []
    })), !isChild && /*#__PURE__*/(0, _jsxRuntime.jsx)(ToolbarItems, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
      commands: extraCommands || []
    }))]
  });
}
//# sourceMappingURL=index.js.map