@lyra/form-builder/lib/inputs/BlockEditor/Toolbar/ToolbarClickAction.js

Lyra form builder

'use strict';

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

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

/*:: import type {SlateValue} from '../typeDefs'*/
/*:: import type {Node} from 'react'*/


// The purpose of this component is to prevent the editor of loosing
// focus when the toolbarbuttons are clicked, because this makes selecting
// bold etc difficult. We want to keep the cursor blinking in the editor...

/*:: type Props = {
  children: Node,
  editorValue: SlateValue,
  onAction: void => void
}*/
function ToolBarClickAction(props /*: Props*/) {
  const originalSelection = props.editorValue.selection;
  let executed = false;
  const onMouseDown = (event /*: SyntheticMouseEvent<*>*/) => {
    // Only for left button
    if (event.buttons !== 1) {
      return;
    }
    executed = true;
    event.preventDefault();
    event.stopPropagation();
    // This is a workaround to prevent other mousehandlers to pick up this action
    // To illustrate the problem, try to remove the timeout and try to create an annotation
    // This event will then trigg the CaptureOutsideClicks handler for the popover.
    // Not sure why this happens exactly when the event is set to preventDefault og stopPropagation
    // TODO: maybe find a more elegant solution
    setTimeout(() => {
      props.onAction(originalSelection);
    }, 300);
  };

  // Fallback for button click events with keyboard
  const onClick = (event /*: SyntheticMouseEvent<*>*/) => {
    if (executed) {
      return;
    }
    props.onAction(originalSelection);
  };

  return _react2.default.createElement(
    'span',
    { onMouseDown: onMouseDown, onClick: onClick },
    props.children
  );
}