@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 React, { useEffect, useRef, useState } from 'react';
import { jsx as _jsx } from "react/jsx-runtime";
var Fullscreen = props => {
  var {
    editorProps
  } = props;
  var $height = useRef(0);
  var [full, setFull] = useState(false);
  var robserver = useRef();
  useEffect(() => {
    robserver.current = new ResizeObserver(entries => {
      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 (full) {
            editorProps.editor.current.view.dom.style.height = entry.target.clientHeight + "px";
          } else {
            editorProps.editor.current.view.dom.removeAttribute('style');
          }
        }
      }
    });
  }, []);
  useEffect(() => {
    if (editorProps.containerEditor && editorProps.containerEditor.current && editorProps.containerEditor.current.parentElement && robserver.current) {
      var parentElement = editorProps.containerEditor.current.parentElement;
      robserver.current.observe(parentElement);
    }
  }, [editorProps.containerEditor, 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';
      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__*/_jsx("button", {
    onClick: () => setFull(!full),
    type: "button",
    className: full ? 'active' : '',
    children: props.command.icon
  });
};
export var fullscreen = {
  name: 'fullscreen',
  keyCommand: 'fullscreen',
  button: (command, props, opts) => /*#__PURE__*/_jsx(Fullscreen, {
    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"
    })
  })
};