@wordpress/block-library/build/paragraph/edit.js

Block library for the WordPress editor.

"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 _i18n = require("@wordpress/i18n");
var _components = require("@wordpress/components");
var _blockEditor = require("@wordpress/block-editor");
var _blocks = require("@wordpress/blocks");
var _icons = require("@wordpress/icons");
var _useEnter = require("./use-enter");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

function ParagraphRTLControl({
  direction,
  setDirection
}) {
  return (0, _i18n.isRTL)() && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToolbarButton, {
    icon: _icons.formatLtr,
    title: (0, _i18n._x)('Left to right', 'editor button'),
    isActive: direction === 'ltr',
    onClick: () => {
      setDirection(direction === 'ltr' ? undefined : 'ltr');
    }
  });
}
function hasDropCapDisabled(align) {
  return align === ((0, _i18n.isRTL)() ? 'left' : 'right') || align === 'center';
}
function DropCapControl({
  clientId,
  attributes,
  setAttributes,
  name
}) {
  // Please do not add a useSelect call to the paragraph block unconditionally.
  // Every useSelect added to a (frequently used) block will degrade load
  // and type performance. By moving it within InspectorControls, the subscription is
  // now only added for the selected block(s).
  const [isDropCapFeatureEnabled] = (0, _blockEditor.useSettings)('typography.dropCap');
  if (!isDropCapFeatureEnabled) {
    return null;
  }
  const {
    align,
    dropCap
  } = attributes;
  let helpText;
  if (hasDropCapDisabled(align)) {
    helpText = (0, _i18n.__)('Not available for aligned text.');
  } else if (dropCap) {
    helpText = (0, _i18n.__)('Showing large initial letter.');
  } else {
    helpText = (0, _i18n.__)('Show a large initial letter.');
  }
  const isDropCapControlEnabledByDefault = (0, _blocks.getBlockSupport)(name, 'typography.defaultControls.dropCap', false);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.InspectorControls, {
    group: "typography",
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
      hasValue: () => !!dropCap,
      label: (0, _i18n.__)('Drop cap'),
      isShownByDefault: isDropCapControlEnabledByDefault,
      onDeselect: () => setAttributes({
        dropCap: undefined
      }),
      resetAllFilter: () => ({
        dropCap: undefined
      }),
      panelId: clientId,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToggleControl, {
        __nextHasNoMarginBottom: true,
        label: (0, _i18n.__)('Drop cap'),
        checked: !!dropCap,
        onChange: () => setAttributes({
          dropCap: !dropCap
        }),
        help: helpText,
        disabled: hasDropCapDisabled(align)
      })
    })
  });
}
function ParagraphBlock({
  attributes,
  mergeBlocks,
  onReplace,
  onRemove,
  setAttributes,
  clientId,
  isSelected: isSingleSelected,
  name
}) {
  const {
    align,
    content,
    direction,
    dropCap,
    placeholder
  } = attributes;
  const blockProps = (0, _blockEditor.useBlockProps)({
    ref: (0, _useEnter.useOnEnter)({
      clientId,
      content
    }),
    className: (0, _clsx.default)({
      'has-drop-cap': hasDropCapDisabled(align) ? false : dropCap,
      [`has-text-align-${align}`]: align
    }),
    style: {
      direction
    }
  });
  const blockEditingMode = (0, _blockEditor.useBlockEditingMode)();
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [blockEditingMode === 'default' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_blockEditor.BlockControls, {
      group: "block",
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.AlignmentControl, {
        value: align,
        onChange: newAlign => setAttributes({
          align: newAlign,
          dropCap: hasDropCapDisabled(newAlign) ? false : dropCap
        })
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ParagraphRTLControl, {
        direction: direction,
        setDirection: newDirection => setAttributes({
          direction: newDirection
        })
      })]
    }), isSingleSelected && /*#__PURE__*/(0, _jsxRuntime.jsx)(DropCapControl, {
      name: name,
      clientId: clientId,
      attributes: attributes,
      setAttributes: setAttributes
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.RichText, {
      identifier: "content",
      tagName: "p",
      ...blockProps,
      value: content,
      onChange: newContent => setAttributes({
        content: newContent
      }),
      onMerge: mergeBlocks,
      onReplace: onReplace,
      onRemove: onRemove,
      "aria-label": _blockEditor.RichText.isEmpty(content) ? (0, _i18n.__)('Empty block; start writing or type forward slash to choose a block') : (0, _i18n.__)('Block: Paragraph'),
      "data-empty": _blockEditor.RichText.isEmpty(content),
      placeholder: placeholder || (0, _i18n.__)('Type / to choose a block'),
      "data-custom-placeholder": placeholder ? true : undefined,
      __unstableEmbedURLOnPaste: true,
      __unstableAllowPrefixTransformations: true
    })]
  });
}
var _default = exports.default = ParagraphBlock;
//# sourceMappingURL=edit.js.map