@wordpress/format-library/build/language/index.js

Format library for the WordPress editor.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.language = void 0;
var _i18n = require("@wordpress/i18n");
var _blockEditor = require("@wordpress/block-editor");
var _components = require("@wordpress/components");
var _element = require("@wordpress/element");
var _richText = require("@wordpress/rich-text");
var _icons = require("@wordpress/icons");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * WordPress dependencies
 */

const name = 'core/language';
const title = (0, _i18n.__)('Language');
const language = exports.language = {
  name,
  tagName: 'bdo',
  className: null,
  edit: Edit,
  title
};
function Edit({
  isActive,
  value,
  onChange,
  contentRef
}) {
  const [isPopoverVisible, setIsPopoverVisible] = (0, _element.useState)(false);
  const togglePopover = () => {
    setIsPopoverVisible(state => !state);
  };
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.RichTextToolbarButton, {
      icon: _icons.language,
      label: title,
      title: title,
      onClick: () => {
        if (isActive) {
          onChange((0, _richText.removeFormat)(value, name));
        } else {
          togglePopover();
        }
      },
      isActive: isActive,
      role: "menuitemcheckbox"
    }), isPopoverVisible && /*#__PURE__*/(0, _jsxRuntime.jsx)(InlineLanguageUI, {
      value: value,
      onChange: onChange,
      onClose: togglePopover,
      contentRef: contentRef
    })]
  });
}
function InlineLanguageUI({
  value,
  contentRef,
  onChange,
  onClose
}) {
  const popoverAnchor = (0, _richText.useAnchor)({
    editableContentElement: contentRef.current,
    settings: language
  });
  const [lang, setLang] = (0, _element.useState)('');
  const [dir, setDir] = (0, _element.useState)('ltr');
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Popover, {
    className: "block-editor-format-toolbar__language-popover",
    anchor: popoverAnchor,
    onClose: onClose,
    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
      as: "form",
      spacing: 4,
      className: "block-editor-format-toolbar__language-container-content",
      onSubmit: event => {
        event.preventDefault();
        onChange((0, _richText.applyFormat)(value, {
          type: name,
          attributes: {
            lang,
            dir
          }
        }));
        onClose();
      },
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.TextControl, {
        __next40pxDefaultSize: true,
        __nextHasNoMarginBottom: true,
        label: title,
        value: lang,
        onChange: val => setLang(val),
        help: (0, _i18n.__)('A valid language attribute, like "en" or "fr".')
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.SelectControl, {
        __next40pxDefaultSize: true,
        __nextHasNoMarginBottom: true,
        label: (0, _i18n.__)('Text direction'),
        value: dir,
        options: [{
          label: (0, _i18n.__)('Left to right'),
          value: 'ltr'
        }, {
          label: (0, _i18n.__)('Right to left'),
          value: 'rtl'
        }],
        onChange: val => setDir(val)
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalHStack, {
        alignment: "right",
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
          __next40pxDefaultSize: true,
          variant: "primary",
          type: "submit",
          text: (0, _i18n.__)('Apply')
        })
      })]
    })
  });
}
//# sourceMappingURL=index.js.map