draft-js/lib/editOnBlur.js.flow

A React framework for building text editors.

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @format
 * @flow strict-local
 * @emails oncall+draft_js
 */
'use strict';

import type { SelectionObject } from "./DraftDOMTypes";
import type DraftEditor from "./DraftEditor.react";

const EditorState = require("./EditorState");

const containsNode = require("fbjs/lib/containsNode");

const getActiveElement = require("fbjs/lib/getActiveElement");

function editOnBlur(editor: DraftEditor, e: SyntheticEvent<HTMLElement>): void {
  // In a contentEditable element, when you select a range and then click
  // another active element, this does trigger a `blur` event but will not
  // remove the DOM selection from the contenteditable.
  // This is consistent across all browsers, but we prefer that the editor
  // behave like a textarea, where a `blur` event clears the DOM selection.
  // We therefore force the issue to be certain, checking whether the active
  // element is `body` to force it when blurring occurs within the window (as
  // opposed to clicking to another tab or window).
  const {
    ownerDocument
  } = e.currentTarget;

  if ( // This ESLint rule conflicts with `sketchy-null-bool` flow check
  // eslint-disable-next-line no-extra-boolean-cast
  !Boolean(editor.props.preserveSelectionOnBlur) && getActiveElement(ownerDocument) === ownerDocument.body) {
    const selection: SelectionObject = ownerDocument.defaultView.getSelection();
    const editorNode = editor.editor;

    if (selection.rangeCount === 1 && containsNode(editorNode, selection.anchorNode) && containsNode(editorNode, selection.focusNode)) {
      selection.removeAllRanges();
    }
  }

  const editorState = editor._latestEditorState;
  const currentSelection = editorState.getSelection();

  if (!currentSelection.getHasFocus()) {
    return;
  }

  const selection = currentSelection.set('hasFocus', false);
  editor.props.onBlur && editor.props.onBlur(e);
  editor.update(EditorState.acceptSelection(editorState, selection));
}

module.exports = editOnBlur;