@wordpress/block-editor/build/components/rich-text/format-toolbar-container.js

Generic block editor.

"use strict";

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

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

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

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

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

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

var _richText = require("@wordpress/rich-text");

var _blockControls = _interopRequireDefault(require("../block-controls"));

var _formatToolbar = _interopRequireDefault(require("./format-toolbar"));

var _navigableToolbar = _interopRequireDefault(require("../navigable-toolbar"));

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

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
function InlineSelectionToolbar({
  editableContentElement,
  activeFormats
}) {
  const lastFormat = activeFormats[activeFormats.length - 1];
  const lastFormatType = lastFormat?.type;
  const settings = (0, _data.useSelect)(select => select(_richText.store).getFormatType(lastFormatType), [lastFormatType]);
  const popoverAnchor = (0, _richText.useAnchor)({
    editableContentElement,
    settings
  });
  return (0, _element.createElement)(InlineToolbar, {
    popoverAnchor: popoverAnchor
  });
}

function InlineToolbar({
  popoverAnchor
}) {
  return (0, _element.createElement)(_components.Popover, {
    placement: "top",
    focusOnMount: false,
    anchor: popoverAnchor,
    className: "block-editor-rich-text__inline-format-toolbar",
    __unstableSlotName: "block-toolbar"
  }, (0, _element.createElement)(_navigableToolbar.default, {
    className: "block-editor-rich-text__inline-format-toolbar-group"
    /* translators: accessibility text for the inline format toolbar */
    ,
    "aria-label": (0, _i18n.__)('Format tools')
  }, (0, _element.createElement)(_components.ToolbarGroup, null, (0, _element.createElement)(_formatToolbar.default, null))));
}

const FormatToolbarContainer = ({
  inline,
  editableContentElement,
  value
}) => {
  const hasInlineToolbar = (0, _data.useSelect)(select => select(_store.store).getSettings().hasInlineToolbar, []);

  if (inline) {
    return (0, _element.createElement)(InlineToolbar, {
      popoverAnchor: editableContentElement
    });
  }

  if (hasInlineToolbar) {
    const activeFormats = (0, _richText.getActiveFormats)(value);

    if ((0, _richText.isCollapsed)(value) && !activeFormats.length) {
      return null;
    }

    return (0, _element.createElement)(InlineSelectionToolbar, {
      editableContentElement: editableContentElement,
      activeFormats: activeFormats
    });
  } // Render regular toolbar.


  return (0, _element.createElement)(_blockControls.default, {
    group: "inline"
  }, (0, _element.createElement)(_formatToolbar.default, null));
};

var _default = FormatToolbarContainer;
exports.default = _default;
//# sourceMappingURL=format-toolbar-container.js.map