@uiw/react-markdown-editor/cjs/commands/preview.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.preview = void 0;

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

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

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

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

var Preview = function Preview(props) {
  var editorProps = props.editorProps;
  var preview = editorProps.preview,
      containerEditor = editorProps.containerEditor;

  var _useState = (0, _react.useState)(props.editorProps.visible),
      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
      visible = _useState2[0],
      setVisible = _useState2[1];

  (0, _react.useEffect)(function () {
    return setVisible(props.editorProps.visible);
  }, [props.editorProps.visible]);
  (0, _react.useEffect)(function () {
    if (editorProps && editorProps.preview.current) {
      var _preview = editorProps.preview.current.mdp.current;

      if (_preview) {
        _preview.style.borderBottomRightRadius = '3px';
      }

      if (_preview && visible) {
        _preview.style.width = '50%';
        _preview.style.overflow = 'auto';
        _preview.style.borderLeft = '1px solid var(--color-border-muted)';
        _preview.style.padding = '20px';

        if (containerEditor.current) {
          containerEditor.current.style.width = '50%';
        }
      } else if (_preview) {
        _preview.style.width = '0%';
        _preview.style.overflow = 'hidden';
        _preview.style.borderLeft = '0px';
        _preview.style.padding = '0';

        if (containerEditor.current) {
          containerEditor.current.style.width = '100%';
        }
      }
    }
  }, [preview, editorProps, visible, containerEditor]);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
    onClick: function onClick() {
      return setVisible(!visible);
    },
    type: "button",
    className: visible ? 'active' : '',
    children: props.command.icon
  });
};

var preview = {
  name: 'preview',
  keyCommand: 'preview',
  button: function button(command, props, opts) {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(Preview, {
      command: command,
      editorProps: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), opts)
    });
  },
  icon: /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
    width: "16",
    height: "16",
    viewBox: "0 0 32 32",
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
      fill: "currentColor",
      d: "M0 16c3.037-5.864 9.058-9.802 16-9.802s12.963 3.938 15.953 9.703l0.047 0.1c-3.037 5.864-9.058 9.802-16 9.802s-12.963-3.938-15.953-9.703l-0.047-0.1zM16 22.531c3.607 0 6.531-2.924 6.531-6.531s-2.924-6.531-6.531-6.531v0c-3.607 0-6.531 2.924-6.531 6.531s2.924 6.531 6.531 6.531v0zM16 19.265c-1.804 0-3.265-1.461-3.265-3.265s1.461-3.265 3.265-3.265v0c1.804 0 3.265 1.461 3.265 3.265s-1.461 3.265-3.265 3.265v0z"
    })
  })
};
exports.preview = preview;
//# sourceMappingURL=preview.js.map