@uiw/react-markdown-editor/cjs/commands/fullscreen.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
});
exports.fullscreen = exports.FullscreenButton = 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 _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireWildcard(require("react"));
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["editorProps", "command", "onClick"];
var FullscreenButton = exports.FullscreenButton = function FullscreenButton(props) {
  var editorProps = props.editorProps,
    command = props.command,
    onClick = props.onClick,
    reset = (0, _objectWithoutProperties2["default"])(props, _excluded);
  var $height = (0, _react.useRef)(0);
  var _useState = (0, _react.useState)(false),
    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
    full = _useState2[0],
    setFull = _useState2[1];
  var fullRef = (0, _react.useRef)(full);
  var entriesHandle = function entriesHandle(entries) {
    var _robserver$current;
    var _iterator = (0, _createForOfIteratorHelper2["default"])(entries),
      _step;
    try {
      for (_iterator.s(); !(_step = _iterator.n()).done;) {
        var _editorProps$editor;
        var entry = _step.value;
        if (!$height.current) {
          $height.current = entry.target.clientHeight;
        }
        if ((_editorProps$editor = editorProps.editor) !== null && _editorProps$editor !== void 0 && (_editorProps$editor = _editorProps$editor.current) !== null && _editorProps$editor !== void 0 && (_editorProps$editor = _editorProps$editor.view) !== null && _editorProps$editor !== void 0 && _editorProps$editor.dom) {
          if (fullRef.current) {
            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$current = robserver.current) === null || _robserver$current === void 0 || _robserver$current.disconnect();
    robserver.current = undefined;
  };
  var robserver = (0, _react.useRef)(new ResizeObserver(entriesHandle));
  (0, _react.useEffect)(function () {
    if (!robserver.current) {
      robserver.current = new ResizeObserver(entriesHandle);
    }
    if (editorProps.containerEditor && editorProps.containerEditor.current && editorProps.containerEditor.current.parentElement && robserver.current) {
      var parentElement = editorProps.containerEditor.current.parentElement;
      robserver.current.observe(parentElement);
    }
    return function () {
      if (robserver.current) {
        robserver.current.disconnect();
        robserver.current = undefined;
      }
    };
  }, [editorProps.containerEditor, entriesHandle, editorProps.editor, full, robserver]);
  (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';
      full ? document.body.classList.add("".concat(editorProps.prefixCls, "-fullscreen")) : document.body.classList.remove("".concat(editorProps.prefixCls, "-fullscreen"));
      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]);
  var click = function click(evn) {
    var isFull = !full;
    fullRef.current = isFull;
    setFull(isFull);
    onClick === null || onClick === void 0 || onClick(evn, isFull);
  };
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("button", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
    onClick: click,
    type: "button",
    className: full ? 'active' : '',
    children: command.icon
  }));
};
var fullscreen = exports.fullscreen = {
  name: 'fullscreen',
  keyCommand: 'fullscreen',
  button: function button(command, props, opts) {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(FullscreenButton, {
      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"
    })
  })
};