@wordpress/editor/build/components/resizable-editor/index.js

Enhanced block editor for WordPress posts.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _clsx = _interopRequireDefault(require("clsx"));
var _element = require("@wordpress/element");
var _components = require("@wordpress/components");
var _resizeHandle = _interopRequireDefault(require("./resize-handle"));
var _jsxRuntime = require("react/jsx-runtime");
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

// Removes the inline styles in the drag handles.
const HANDLE_STYLES_OVERRIDE = {
  position: undefined,
  userSelect: undefined,
  cursor: undefined,
  width: undefined,
  height: undefined,
  top: undefined,
  right: undefined,
  bottom: undefined,
  left: undefined
};
function ResizableEditor({
  className,
  enableResizing,
  height,
  children
}) {
  const [width, setWidth] = (0, _element.useState)('100%');
  const resizableRef = (0, _element.useRef)();
  const resizeWidthBy = (0, _element.useCallback)(deltaPixels => {
    if (resizableRef.current) {
      setWidth(resizableRef.current.offsetWidth + deltaPixels);
    }
  }, []);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ResizableBox, {
    className: (0, _clsx.default)('editor-resizable-editor', className, {
      'is-resizable': enableResizing
    }),
    ref: api => {
      resizableRef.current = api?.resizable;
    },
    size: {
      width: enableResizing ? width : '100%',
      height: enableResizing && height ? height : '100%'
    },
    onResizeStop: (event, direction, element) => {
      setWidth(element.style.width);
    },
    minWidth: 300,
    maxWidth: "100%",
    maxHeight: "100%",
    enable: {
      left: enableResizing,
      right: enableResizing
    },
    showHandle: enableResizing
    // The editor is centered horizontally, resizing it only
    // moves half the distance. Hence double the ratio to correctly
    // align the cursor to the resizer handle.
    ,
    resizeRatio: 2,
    handleComponent: {
      left: /*#__PURE__*/(0, _jsxRuntime.jsx)(_resizeHandle.default, {
        direction: "left",
        resizeWidthBy: resizeWidthBy
      }),
      right: /*#__PURE__*/(0, _jsxRuntime.jsx)(_resizeHandle.default, {
        direction: "right",
        resizeWidthBy: resizeWidthBy
      })
    },
    handleClasses: undefined,
    handleStyles: {
      left: HANDLE_STYLES_OVERRIDE,
      right: HANDLE_STYLES_OVERRIDE
    },
    children: children
  });
}
var _default = exports.default = ResizableEditor;
//# sourceMappingURL=index.js.map