@uiw/react-markdown-editor/esm/commands/fullscreen.js

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

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
var _excluded = ["editorProps", "command", "onClick"];
import React, { useEffect, useRef, useState } from 'react';
import { jsx as _jsx } from "react/jsx-runtime";
export var FullscreenButton = props => {
  var {
      editorProps,
      command,
      onClick
    } = props,
    reset = _objectWithoutPropertiesLoose(props, _excluded);
  var $height = useRef(0);
  var [full, setFull] = useState(false);
  var fullRef = useRef(full);
  var entriesHandle = entries => {
    var _robserver$current;
    for (var entry of entries) {
      var _editorProps$editor;
      if (!$height.current) {
        $height.current = entry.target.clientHeight;
      }
      if ((_editorProps$editor = editorProps.editor) != null && (_editorProps$editor = _editorProps$editor.current) != null && (_editorProps$editor = _editorProps$editor.view) != null && _editorProps$editor.dom) {
        if (fullRef.current) {
          editorProps.editor.current.view.dom.style.height = entry.target.clientHeight + "px";
        } else {
          editorProps.editor.current.view.dom.removeAttribute('style');
        }
      }
    }
    (_robserver$current = robserver.current) == null || _robserver$current.disconnect();
    robserver.current = undefined;
  };
  var robserver = useRef(new ResizeObserver(entriesHandle));
  useEffect(() => {
    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 () => {
      if (robserver.current) {
        robserver.current.disconnect();
        robserver.current = undefined;
      }
    };
  }, [editorProps.containerEditor, entriesHandle, editorProps.editor, full, robserver]);
  useEffect(() => {
    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(editorProps.prefixCls + "-fullscreen") : document.body.classList.remove(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 = evn => {
    var isFull = !full;
    fullRef.current = isFull;
    setFull(isFull);
    onClick == null || onClick(evn, isFull);
  };
  return /*#__PURE__*/_jsx("button", _extends({}, reset, {
    onClick: click,
    type: "button",
    className: full ? 'active' : '',
    children: command.icon
  }));
};
export var fullscreen = {
  name: 'fullscreen',
  keyCommand: 'fullscreen',
  button: (command, props, opts) => /*#__PURE__*/_jsx(FullscreenButton, {
    command: command,
    editorProps: _extends({}, props, opts)
  }),
  icon: /*#__PURE__*/_jsx("svg", {
    fill: "currentColor",
    viewBox: "0 0 448 512",
    height: "15",
    width: "15",
    children: /*#__PURE__*/_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"
    })
  })
};