@wordpress/block-editor/build/components/rich-text/use-firefox-compat.js

Generic block editor.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useFirefoxCompat = useFirefoxCompat;

var _element = require("@wordpress/element");

var _compose = require("@wordpress/compose");

var _data = require("@wordpress/data");

var _keycodes = require("@wordpress/keycodes");

var _richText = require("@wordpress/rich-text");

var _store = require("../../store");

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
function useFirefoxCompat(props) {
  const propsRef = (0, _element.useRef)(props);
  propsRef.current = props;
  const {
    isMultiSelecting
  } = (0, _data.useSelect)(_store.store);
  return (0, _compose.useRefEffect)(element => {
    function onFocus() {
      if (!isMultiSelecting()) {
        return;
      } // This is a little hack to work around focus issues with nested
      // editable elements in Firefox. For some reason the editable child
      // element sometimes regains focus, while it should not be focusable
      // and focus should remain on the editable parent element.
      // To do: try to find the cause of the shifting focus.


      const parentEditable = element.parentElement.closest('[contenteditable="true"]');

      if (parentEditable) {
        parentEditable.focus();
      }
    } // If a contenteditable element is inside a button/summary element,
    // it is not possible to type a space in Firefox. Therefore, cancel
    // the default event and insert a space explicitly.
    // See: https://bugzilla.mozilla.org/show_bug.cgi?id=1822860


    function onKeyDown(event) {
      if (event.keyCode !== _keycodes.SPACE) {
        return;
      }

      if (element.closest('button, summary') === null) {
        return;
      }

      const {
        value,
        onChange
      } = propsRef.current;
      onChange((0, _richText.insert)(value, ' '));
      event.preventDefault();
    }

    element.addEventListener('focus', onFocus);
    element.addEventListener('keydown', onKeyDown);
    return () => {
      element.removeEventListener('focus', onFocus);
      element.removeEventListener('keydown', onKeyDown);
    };
  }, []);
}
//# sourceMappingURL=use-firefox-compat.js.map