@uiw/react-markdown-editor/cjs/commands/fullscreen.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.fullscreen = void 0;
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _createForOfIteratorHelper2 = _interopRequireDefault(require("@babel/runtime/helpers/createForOfIteratorHelper"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _jsxRuntime = require("react/jsx-runtime");
var Fullscreen = function Fullscreen(props) {
  var editorProps = props.editorProps;
  var $height = (0, _react.useRef)(0);
  var _useState = (0, _react.useState)(false),
    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
    full = _useState2[0],
    setFull = _useState2[1];
  (0, _react.useEffect)(function () {
    if (editorProps.containerEditor && editorProps.containerEditor.current && editorProps.containerEditor.current.parentElement) {
      var parentElement = editorProps.containerEditor.current.parentElement;
      var robserver = new ResizeObserver(function (entries) {
        var _iterator = (0, _createForOfIteratorHelper2.default)(entries),
          _step;
        try {
          for (_iterator.s(); !(_step = _iterator.n()).done;) {
            var _editorProps$editor, _editorProps$editor$c, _editorProps$editor$c2;
            var entry = _step.value;
            if (!$height.current) {
              $height.current = entry.target.clientHeight;
            }
            if ((_editorProps$editor = editorProps.editor) !== null && _editorProps$editor !== void 0 && (_editorProps$editor$c = _editorProps$editor.current) !== null && _editorProps$editor$c !== void 0 && (_editorProps$editor$c2 = _editorProps$editor$c.view) !== null && _editorProps$editor$c2 !== void 0 && _editorProps$editor$c2.dom) {
              if (full) {
                editorProps.editor.current.view.dom.style.height = "".concat(entry.target.clientHeight, "px");
              } else {
                editorProps.editor.current.view.dom.removeAttribute('style');
              }
            }
          }
        } catch (err) {
          _iterator.e(err);
        } finally {
          _iterator.f();
        }
      });
      robserver.observe(parentElement);
    }
  }, [editorProps.containerEditor, editorProps.editor, full]);
  (0, _react.useEffect)(function () {
    if (!document) return;
    if (editorProps && editorProps.container && editorProps.container.current && editorProps.editor) {
      var container = editorProps.container.current;
      document.body.style.overflow = full ? 'hidden' : 'initial';
      if (container && full) {
        container.style.zIndex = '999';
        container.style.position = 'fixed';
        container.style.top = '0px';
        container.style.bottom = '0px';
        container.style.left = '0px';
        container.style.right = '0px';
      } else if (container) {
        container.style.position = 'initial';
        container.style.top = 'initial';
        container.style.bottom = 'initial';
        container.style.left = 'initial';
        container.style.right = 'initial';
      }
    }
  }, [full, editorProps]);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
    onClick: function onClick() {
      return setFull(!full);
    },
    type: "button",
    className: full ? 'active' : '',
    children: props.command.icon
  });
};
var fullscreen = {
  name: 'fullscreen',
  keyCommand: 'fullscreen',
  button: function button(command, props, opts) {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(Fullscreen, {
      command: command,
      editorProps: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), opts)
    });
  },
  icon: /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
    fill: "currentColor",
    viewBox: "0 0 448 512",
    height: "15",
    width: "15",
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
      d: "M128 32H32C14.31 32 0 46.31 0 64v96c0 17.69 14.31 32 32 32s32-14.31 32-32V96h64c17.69 0 32-14.31 32-32s-14.3-32-32-32zm288 0h-96c-17.69 0-32 14.31-32 32s14.31 32 32 32h64v64c0 17.69 14.31 32 32 32s32-14.31 32-32V64c0-17.69-14.3-32-32-32zM128 416H64v-64c0-17.69-14.31-32-32-32S0 334.31 0 352v96c0 17.69 14.31 32 32 32h96c17.69 0 32-14.31 32-32s-14.3-32-32-32zm288-96c-17.69 0-32 14.31-32 32v64h-64c-17.69 0-32 14.31-32 32s14.31 32 32 32h96c17.69 0 32-14.31 32-32v-96c0-17.7-14.3-32-32-32z"
    })
  })
};
exports.fullscreen = fullscreen;
//# sourceMappingURL=fullscreen.js.map