@wordpress/block-editor/build/components/rich-text/multiline.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 _deprecated = _interopRequireDefault(require("@wordpress/deprecated"));
var _data = require("@wordpress/data");
var _keycodes = require("@wordpress/keycodes");
var _richText = require("@wordpress/rich-text");
var _ = require("./");
var _store = require("../../store");
var _blockEdit = require("../block-edit");
var _utils = require("./utils");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

function RichTextMultiline({
  children,
  identifier,
  tagName: TagName = 'div',
  value = '',
  onChange,
  multiline,
  ...props
}, forwardedRef) {
  (0, _deprecated.default)('wp.blockEditor.RichText multiline prop', {
    since: '6.1',
    version: '6.3',
    alternative: 'nested blocks (InnerBlocks)',
    link: 'https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/nested-blocks-inner-blocks/'
  });
  const {
    clientId
  } = (0, _blockEdit.useBlockEditContext)();
  const {
    getSelectionStart,
    getSelectionEnd
  } = (0, _data.useSelect)(_store.store);
  const {
    selectionChange
  } = (0, _data.useDispatch)(_store.store);
  const multilineTagName = (0, _utils.getMultilineTag)(multiline);
  value = value || `<${multilineTagName}></${multilineTagName}>`;
  const padded = `</${multilineTagName}>${value}<${multilineTagName}>`;
  const values = padded.split(`</${multilineTagName}><${multilineTagName}>`);
  values.shift();
  values.pop();
  function _onChange(newValues) {
    onChange(`<${multilineTagName}>${newValues.join(`</${multilineTagName}><${multilineTagName}>`)}</${multilineTagName}>`);
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(TagName, {
    ref: forwardedRef,
    children: values.map((_value, index) => {
      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.RichTextWrapper, {
        identifier: `${identifier}-${index}`,
        tagName: multilineTagName,
        value: _value,
        onChange: newValue => {
          const newValues = values.slice();
          newValues[index] = newValue;
          _onChange(newValues);
        },
        isSelected: undefined,
        onKeyDown: event => {
          if (event.keyCode !== _keycodes.ENTER) {
            return;
          }
          event.preventDefault();
          const {
            offset: start
          } = getSelectionStart();
          const {
            offset: end
          } = getSelectionEnd();

          // Cannot split if there is no selection.
          if (typeof start !== 'number' || typeof end !== 'number') {
            return;
          }
          const richTextValue = (0, _richText.create)({
            html: _value
          });
          richTextValue.start = start;
          richTextValue.end = end;
          const array = (0, _richText.split)(richTextValue).map(v => (0, _richText.toHTMLString)({
            value: v
          }));
          const newValues = values.slice();
          newValues.splice(index, 1, ...array);
          _onChange(newValues);
          selectionChange(clientId, `${identifier}-${index + 1}`, 0, 0);
        },
        onMerge: forward => {
          const newValues = values.slice();
          let offset = 0;
          if (forward) {
            if (!newValues[index + 1]) {
              return;
            }
            newValues.splice(index, 2, newValues[index] + newValues[index + 1]);
            offset = newValues[index].length - 1;
          } else {
            if (!newValues[index - 1]) {
              return;
            }
            newValues.splice(index - 1, 2, newValues[index - 1] + newValues[index]);
            offset = newValues[index - 1].length - 1;
          }
          _onChange(newValues);
          selectionChange(clientId, `${identifier}-${index - (forward ? 0 : 1)}`, offset, offset);
        },
        ...props
      }, index);
    })
  });
}
var _default = exports.default = (0, _element.forwardRef)(RichTextMultiline);
//# sourceMappingURL=multiline.js.map