@wordpress/edit-post/build/components/visual-editor/index.js

Edit Post module for WordPress.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = VisualEditor;

var _element = require("@wordpress/element");

var _classnames = _interopRequireDefault(require("classnames"));

var _framerMotion = require("framer-motion");

var _editor = require("@wordpress/editor");

var _blockEditor = require("@wordpress/block-editor");

var _components = require("@wordpress/components");

var _data = require("@wordpress/data");

var _compose = require("@wordpress/compose");

var _icons = require("@wordpress/icons");

var _i18n = require("@wordpress/i18n");

var _blockInspectorButton = _interopRequireDefault(require("./block-inspector-button"));

var _store = require("../../store");

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
function MaybeIframe({
  children,
  contentRef,
  isTemplateMode,
  styles,
  style
}) {
  const ref = (0, _blockEditor.__unstableUseMouseMoveTypingReset)();

  if (!isTemplateMode) {
    return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_blockEditor.__unstableEditorStyles, {
      styles: styles
    }), (0, _element.createElement)("div", {
      ref: contentRef,
      className: "editor-styles-wrapper",
      style: {
        width: '100%',
        height: '100%',
        ...style
      }
    }, children));
  }

  return (0, _element.createElement)(_blockEditor.__unstableIframe, {
    headHTML: window.__editorStyles.html,
    head: (0, _element.createElement)(_blockEditor.__unstableEditorStyles, {
      styles: styles
    }),
    ref: ref,
    contentRef: contentRef,
    style: {
      width: '100%',
      height: '100%',
      display: 'block'
    }
  }, children);
}

function VisualEditor({
  styles
}) {
  const {
    deviceType,
    isTemplateMode
  } = (0, _data.useSelect)(select => {
    const {
      isEditingTemplate,
      __experimentalGetPreviewDeviceType
    } = select(_store.store);
    return {
      deviceType: __experimentalGetPreviewDeviceType(),
      isTemplateMode: isEditingTemplate()
    };
  }, []);
  const hasMetaBoxes = (0, _data.useSelect)(select => select(_store.store).hasMetaBoxes(), []);
  const themeSupportsLayout = (0, _data.useSelect)(select => {
    const {
      getSettings
    } = select(_blockEditor.store);
    return getSettings().supportsLayout;
  }, []);
  const {
    clearSelectedBlock
  } = (0, _data.useDispatch)(_blockEditor.store);
  const {
    setIsEditingTemplate
  } = (0, _data.useDispatch)(_store.store);
  const desktopCanvasStyles = {
    height: '100%',
    width: '100%',
    margin: 0
  };
  const templateModeStyles = { ...desktopCanvasStyles,
    borderRadius: '2px 2px 0 0',
    border: '1px solid #ddd',
    borderBottom: 0
  };
  const resizedCanvasStyles = (0, _blockEditor.__experimentalUseResizeCanvas)(deviceType, isTemplateMode);
  const defaultLayout = (0, _blockEditor.__experimentalUseEditorFeature)('layout');
  const {
    contentSize,
    wideSize
  } = defaultLayout || {};
  const alignments = contentSize || wideSize ? ['wide', 'full'] : ['left', 'center', 'right'];
  let animatedStyles = isTemplateMode ? templateModeStyles : desktopCanvasStyles;

  if (resizedCanvasStyles) {
    animatedStyles = resizedCanvasStyles;
  }

  let paddingBottom; // Add a constant padding for the typewritter effect. When typing at the
  // bottom, there needs to be room to scroll up.

  if (!hasMetaBoxes && !resizedCanvasStyles && !isTemplateMode) {
    paddingBottom = '40vh';
  }

  const ref = (0, _element.useRef)();
  const contentRef = (0, _compose.useMergeRefs)([ref, (0, _blockEditor.__unstableUseClipboardHandler)(), (0, _blockEditor.__unstableUseCanvasClickRedirect)(), (0, _blockEditor.__unstableUseTypewriter)(), (0, _blockEditor.__unstableUseTypingObserver)(), (0, _blockEditor.__unstableUseBlockSelectionClearer)()]);
  const blockSelectionClearerRef = (0, _blockEditor.__unstableUseBlockSelectionClearer)(true); // Allow scrolling "through" popovers over the canvas. This is only called
  // for as long as the pointer is over a popover. Do not use React events
  // because it will bubble through portals.

  const toolWrapperRef = (0, _compose.useRefEffect)(node => {
    function onWheel({
      deltaX,
      deltaY
    }) {
      ref.current.scrollBy(deltaX, deltaY);
    }

    node.addEventListener('wheel', onWheel);
    return () => {
      node.removeEventListener('wheel', onWheel);
    };
  }, []);
  return (0, _element.createElement)(_framerMotion.motion.div, {
    className: (0, _classnames.default)('edit-post-visual-editor', {
      'is-template-mode': isTemplateMode
    }),
    animate: isTemplateMode ? {
      padding: '48px 48px 0'
    } : {
      padding: 0
    },
    ref: blockSelectionClearerRef
  }, themeSupportsLayout && (0, _element.createElement)(_blockEditor.__experimentalLayoutStyle, {
    selector: ".edit-post-visual-editor__post-title-wrapper, .block-editor-block-list__layout.is-root-container",
    layout: defaultLayout
  }), (0, _element.createElement)(_editor.VisualEditorGlobalKeyboardShortcuts, null), isTemplateMode && (0, _element.createElement)(_components.Button, {
    className: "edit-post-visual-editor__exit-template-mode",
    icon: _icons.arrowLeft,
    onClick: () => {
      clearSelectedBlock();
      setIsEditingTemplate(false);
    }
  }, (0, _i18n.__)('Back')), (0, _element.createElement)(_framerMotion.motion.div, {
    ref: toolWrapperRef,
    animate: animatedStyles,
    initial: desktopCanvasStyles
  }, (0, _element.createElement)(_components.Popover.Slot, {
    name: "block-toolbar"
  }), (0, _element.createElement)(MaybeIframe, {
    isTemplateMode: isTemplateMode,
    contentRef: contentRef,
    styles: styles,
    style: {
      paddingBottom
    }
  }, (0, _element.createElement)(_framerMotion.AnimatePresence, null, (0, _element.createElement)(_framerMotion.motion.div, {
    key: isTemplateMode ? 'template' : 'post',
    initial: {
      opacity: 0
    },
    animate: {
      opacity: 1
    }
  }, (0, _element.createElement)(_blockEditor.WritingFlow, null, !isTemplateMode && (0, _element.createElement)("div", {
    className: "edit-post-visual-editor__post-title-wrapper"
  }, (0, _element.createElement)(_editor.PostTitle, null)), (0, _element.createElement)(_blockEditor.BlockList, {
    __experimentalLayout: themeSupportsLayout ? {
      type: 'default',
      // Find a way to inject this in the support flag code (hooks).
      alignments: themeSupportsLayout ? alignments : undefined
    } : undefined
  })))))), (0, _element.createElement)(_blockEditor.__unstableBlockSettingsMenuFirstItem, null, ({
    onClose
  }) => (0, _element.createElement)(_blockInspectorButton.default, {
    onClick: onClose
  })));
}
//# sourceMappingURL=index.js.map