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

Block library for the WordPress editor.

import _extends from "@babel/runtime/helpers/esm/extends";
import { createElement, Fragment } from "@wordpress/element";

/**
 * External dependencies
 */
import classnames from 'classnames';
/**
 * WordPress dependencies
 */

import { __, _x, isRTL } from '@wordpress/i18n';
import { ToolbarButton, ToggleControl, __experimentalToolsPanelItem as ToolsPanelItem } from '@wordpress/components';
import { AlignmentControl, BlockControls, InspectorControls, RichText, useBlockProps, useSetting } from '@wordpress/block-editor';
import { createBlock } from '@wordpress/blocks';
import { formatLtr } from '@wordpress/icons';
/**
 * Internal dependencies
 */

import { useOnEnter } from './use-enter';
const name = 'core/paragraph';

function ParagraphRTLControl(_ref) {
  let {
    direction,
    setDirection
  } = _ref;
  return isRTL() && createElement(ToolbarButton, {
    icon: formatLtr,
    title: _x('Left to right', 'editor button'),
    isActive: direction === 'ltr',
    onClick: () => {
      setDirection(direction === 'ltr' ? undefined : 'ltr');
    }
  });
}

function ParagraphBlock(_ref2) {
  let {
    attributes,
    mergeBlocks,
    onReplace,
    onRemove,
    setAttributes,
    clientId
  } = _ref2;
  const {
    align,
    content,
    direction,
    dropCap,
    placeholder
  } = attributes;
  const isDropCapFeatureEnabled = useSetting('typography.dropCap');
  const blockProps = useBlockProps({
    ref: useOnEnter({
      clientId,
      content
    }),
    className: classnames({
      'has-drop-cap': dropCap,
      [`has-text-align-${align}`]: align
    }),
    style: {
      direction
    }
  });
  return createElement(Fragment, null, createElement(BlockControls, {
    group: "block"
  }, createElement(AlignmentControl, {
    value: align,
    onChange: newAlign => setAttributes({
      align: newAlign
    })
  }), createElement(ParagraphRTLControl, {
    direction: direction,
    setDirection: newDirection => setAttributes({
      direction: newDirection
    })
  })), isDropCapFeatureEnabled && createElement(InspectorControls, {
    __experimentalGroup: "typography"
  }, createElement(ToolsPanelItem, {
    hasValue: () => !!dropCap,
    label: __('Drop cap'),
    onDeselect: () => setAttributes({
      dropCap: undefined
    }),
    resetAllFilter: () => ({
      dropCap: undefined
    }),
    panelId: clientId
  }, createElement(ToggleControl, {
    label: __('Drop cap'),
    checked: !!dropCap,
    onChange: () => setAttributes({
      dropCap: !dropCap
    }),
    help: dropCap ? __('Showing large initial letter.') : __('Toggle to show a large initial letter.')
  }))), createElement(RichText, _extends({
    identifier: "content",
    tagName: "p"
  }, blockProps, {
    value: content,
    onChange: newContent => setAttributes({
      content: newContent
    }),
    onSplit: (value, isOriginal) => {
      let newAttributes;

      if (isOriginal || value) {
        newAttributes = { ...attributes,
          content: value
        };
      }

      const block = createBlock(name, newAttributes);

      if (isOriginal) {
        block.clientId = clientId;
      }

      return block;
    },
    onMerge: mergeBlocks,
    onReplace: onReplace,
    onRemove: onRemove,
    "aria-label": content ? __('Paragraph block') : __('Empty block; start writing or type forward slash to choose a block'),
    "data-empty": content ? false : true,
    placeholder: placeholder || __('Type / to choose a block'),
    "data-custom-placeholder": placeholder ? true : undefined,
    __unstableEmbedURLOnPaste: true,
    __unstableAllowPrefixTransformations: true
  })));
}

export default ParagraphBlock;
//# sourceMappingURL=edit.js.map