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

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

import _extends from "@babel/runtime/helpers/extends";
import React, { Fragment, useContext, useEffect } from 'react';
import { EditorContext } from '../../Context';
import Child from './Child';
import "./index.css";
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
export function ToolbarItems(props) {
  var {
    prefixCls
  } = props;
  var {
    fullscreen,
    preview,
    barPopup = {},
    commandOrchestrator,
    dispatch
  } = useContext(EditorContext);

  function handleClick(command, name) {
    if (!dispatch) return;
    var state = {
      barPopup: _extends({}, 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(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(keyName => {
        state.barPopup[keyName] = false;
      });
    }

    if (Object.keys(state).length) {
      dispatch(_extends({}, state));
    }

    commandOrchestrator && commandOrchestrator.executeCommand(command);
  }

  useEffect(() => {
    if (document) {
      document.body.style.overflow = !fullscreen ? 'initial' : 'hidden';
    }
  }, [fullscreen]);
  return /*#__PURE__*/_jsx("ul", {
    children: (props.commands || []).map((item, idx) => {
      if (item.keyCommand === 'divider') {
        return /*#__PURE__*/_jsx("li", _extends({}, item.liProps, {
          className: prefixCls + "-toolbar-divider"
        }), idx);
      }

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

  var {
    prefixCls,
    height = 29,
    isChild
  } = props;
  var {
    commands,
    extraCommands
  } = useContext(EditorContext);
  return /*#__PURE__*/_jsxs("div", {
    className: prefixCls + "-toolbar",
    style: {
      height
    },
    children: [/*#__PURE__*/_jsx(ToolbarItems, _extends({}, props, {
      commands: props.commands || commands || []
    })), !isChild && /*#__PURE__*/_jsx(ToolbarItems, _extends({}, props, {
      commands: extraCommands || []
    }))]
  });
}
//# sourceMappingURL=index.js.map