@wordpress/block-editor/build/components/plain-text/index.native.js

Generic block editor.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _reactNative = require("react-native");
var _element = require("@wordpress/element");
var _components = require("@wordpress/components");
var _richText = _interopRequireDefault(require("../rich-text"));
var _style = _interopRequireDefault(require("./style.scss"));
var _jsxRuntime = require("react/jsx-runtime");
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

/**
 * Internal dependencies
 */

class PlainText extends _element.Component {
  constructor() {
    super(...arguments);
    this.isAndroid = _reactNative.Platform.OS === 'android';
    this.onChangeTextInput = this.onChangeTextInput.bind(this);
    this.onChangeRichText = this.onChangeRichText.bind(this);
  }
  componentDidMount() {
    // If isSelected is true, we should request the focus on this TextInput.
    if (this._input && this._input.isFocused() === false && this.props.isSelected) {
      if (this.isAndroid) {
        /*
         * There seems to be an issue in React Native where the keyboard doesn't show if called shortly after rendering.
         * As a common work around this delay is used.
         * https://github.com/facebook/react-native/issues/19366#issuecomment-400603928
         */
        this.timeoutID = setTimeout(() => {
          this._input.focus();
        }, 100);
      } else {
        this._input.focus();
      }
    }
  }
  componentDidUpdate(prevProps) {
    if (!this.props.isSelected && prevProps.isSelected) {
      this._input?.blur();
    }
  }
  componentWillUnmount() {
    if (this.isAndroid) {
      clearTimeout(this.timeoutID);
    }
  }
  focus() {
    this._input?.focus();
  }
  blur() {
    this._input?.blur();
  }
  getFontSize() {
    const {
      style
    } = this.props;
    if (!style?.fontSize) {
      return;
    }
    const {
      width,
      height
    } = _reactNative.Dimensions.get('window');
    const cssUnitOptions = {
      height,
      width
    };
    return {
      fontSize: parseFloat((0, _components.getPxFromCssUnit)(style.fontSize, cssUnitOptions))
    };
  }
  replaceLineBreakTags(value) {
    return value?.replace(RegExp('<br>', 'gim'), '\n');
  }
  onChangeTextInput(event) {
    const {
      onChange
    } = this.props;
    onChange(event.nativeEvent.text);
  }
  onChangeRichText(value) {
    const {
      onChange
    } = this.props;
    // The <br> tags have to be replaced with new line characters
    // as the content of plain text shouldn't contain HTML tags.
    onChange(this.replaceLineBreakTags(value));
  }
  render() {
    const {
      style,
      __experimentalVersion,
      onFocus,
      ...otherProps
    } = this.props;
    const textStyles = [style || _style.default['block-editor-plain-text'], this.getFontSize()];
    if (__experimentalVersion === 2) {
      const disableFormattingProps = {
        withoutInteractiveFormatting: true,
        disableEditingMenu: true,
        __unstableDisableFormats: true,
        disableSuggestions: true
      };
      const forcePlainTextProps = {
        preserveWhiteSpace: true,
        __unstablePastePlainText: true,
        multiline: false
      };
      const fontProps = {
        fontFamily: style?.fontFamily,
        fontSize: style?.fontSize,
        fontWeight: style?.fontWeight
      };
      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_richText.default, {
        ...otherProps,
        ...disableFormattingProps,
        ...forcePlainTextProps,
        ...fontProps,
        identifier: "content",
        style: style,
        onChange: this.onChangeRichText,
        unstableOnFocus: onFocus
      });
    }
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
      ...this.props,
      ref: x => this._input = x,
      onChange: this.onChangeTextInput,
      onFocus: this.props.onFocus // Always assign onFocus as a props.
      ,
      onBlur: this.props.onBlur // Always assign onBlur as a props.
      ,
      fontFamily: this.props.style && this.props.style.fontFamily || _style.default['block-editor-plain-text'].fontFamily,
      style: textStyles,
      scrollEnabled: false
    });
  }
}
exports.default = PlainText;
//# sourceMappingURL=index.native.js.map