/**
 * 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';

const onBeforeInput = require('editOnBeforeInput');
const onBlur = require('editOnBlur');
const onCompositionStart = require('editOnCompositionStart');
const onCopy = require('editOnCopy');
const onCut = require('editOnCut');
const onDragOver = require('editOnDragOver');
const onDragStart = require('editOnDragStart');
const onFocus = require('editOnFocus');
const onInput = require('editOnInput');
const onKeyDown = require('editOnKeyDown');
const onPaste = require('editOnPaste');
const onSelect = require('editOnSelect');

const DraftEditorEditHandler = {
  onBeforeInput,
  onBlur,
  onCompositionStart,
  onCopy,
  onCut,
  onDragOver,
  onDragStart,
  onFocus,
  onInput,
  onKeyDown,
  onPaste,
  onSelect,
};

module.exports = DraftEditorEditHandler;

/**
 * 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 DraftEditor from 'DraftEditor.react';

const UserAgent = require('UserAgent');

const onBeforeInput = require('editOnBeforeInput');
const onBlur = require('editOnBlur');
const onCompositionStart = require('editOnCompositionStart');
const onCopy = require('editOnCopy');
const onCut = require('editOnCut');
const onDragOver = require('editOnDragOver');
const onDragStart = require('editOnDragStart');
const onFocus = require('editOnFocus');
const onInput = require('editOnInput');
const onKeyDown = require('editOnKeyDown');
const onPaste = require('editOnPaste');
const onSelect = require('editOnSelect');

const isChrome = UserAgent.isBrowser('Chrome');

const selectionHandler: (e: DraftEditor) => void = isChrome
  ? onSelect
  : e => {};

const DraftEditorEditHandler = {
  onBeforeInput,
  onBlur,
  onCompositionStart,
  onCopy,
  onCut,
  onDragOver,
  onDragStart,
  onFocus,
  onInput,
  onKeyDown,
  onPaste,
  onSelect,
  // In certain cases, contenteditable on chrome does not fire the onSelect
  // event, causing problems with cursor positioning. Therefore, the selection
  // state update handler is added to more events to ensure that the selection
  // state is always synced with the actual cursor positions.
  onMouseUp: selectionHandler,
  onKeyUp: selectionHandler,
};

module.exports = DraftEditorEditHandler;

Fix for workchat composer cursor jumping
Fix for workchat composer cursor jumping

Summary:
As figured out in T47552048, the issue of cursor jumping is happening because the draft editor's selection state is not in the correct state. After digging in, I discovered that the draft editor manages this state through the contenteditable div's onSelect event, but it is not being fired in certain cases. So I am changing the code to update the selection state when mouseUp and keyUp events are fired, and this fixes the issue as these events are fired even in those cases where onSelect is not. Although this means that there are some redundant updates to the selection state, this shouldn't cause any bugs.

I suspect this is happening because of some change/bug on how chrome is firing events on contenteditable, since it doesn't repro on firefox and also I couldn't find any code changes that match the bug timeline.

Reviewed By: claudiopro

Differential Revision: D17054885

fbshipit-source-id: 06b1e96629828d4cb1c9cab36c2711c6464f1f3c
