WIP Fixup diff for enabling 'ship-it' and 'import-it'

docs/APIReference-Editor.md

@@ -249,7 +249,6 @@ onUpArrow?: (e: SyntheticKeyboardEvent) => void
 ```
 onDownArrow?: (e: SyntheticKeyboardEvent) => void
 ```
-
 ### Mouse events
 
 ### onFocus

src/component/base/DraftEditor.react.js

@@ -15,8 +15,8 @@
 'use strict';
 
 import type {BlockMap} from 'BlockMap';
-import type {DraftEditorDefaultProps, DraftEditorProps} from 'DraftEditorProps';
 import type {DraftEditorModes} from 'DraftEditorModes';
+import type {DraftEditorDefaultProps, DraftEditorProps} from 'DraftEditorProps';
 import type {DraftScrollPosition} from 'DraftScrollPosition';
 
 const DefaultDraftBlockRenderMap = require('DefaultDraftBlockRenderMap');
@@ -26,7 +26,6 @@ const DraftEditorContents = require('DraftEditorContents.react');
 const DraftEditorDragHandler = require('DraftEditorDragHandler');
 const DraftEditorEditHandler = require('DraftEditorEditHandler');
 const DraftEditorPlaceholder = require('DraftEditorPlaceholder.react');
-
 const EditorState = require('EditorState');
 const React = require('React');
 const ReactDOM = require('ReactDOM');
@@ -38,7 +37,6 @@ const cx = require('cx');
 const emptyFunction = require('emptyFunction');
 const generateRandomKey = require('generateRandomKey');
 const getDefaultKeyBinding = require('getDefaultKeyBinding');
-
 const getScrollPosition = require('getScrollPosition');
 const invariant = require('invariant');
 const nullthrows = require('nullthrows');
@@ -90,6 +88,7 @@ class DraftEditor extends React.Component {
   _editorKey: string;
   _placeholderAccessibilityID: string;
   _latestEditorState: EditorState;
+  _latestCommittedEditorState: EditorState;
   _pendingStateFromBeforeInput: void | EditorState;
 
   /**
@@ -138,6 +137,7 @@ class DraftEditor extends React.Component {
     this._editorKey = props.editorKey || generateRandomKey();
     this._placeholderAccessibilityID = 'placeholder-' + this._editorKey;
     this._latestEditorState = props.editorState;
+    this._latestCommittedEditorState = props.editorState;
 
     this._onBeforeInput = this._buildHandler('onBeforeInput');
     this._onBlur = this._buildHandler('onBlur');
@@ -333,6 +333,7 @@ class DraftEditor extends React.Component {
 
   componentDidUpdate(): void {
     this._blockSelectEvents = false;
+    this._latestCommittedEditorState = this.props.editorState;
   }
 
   /**

src/component/base/DraftEditorPlaceholder.css

@@ -6,7 +6,7 @@
 .public/DraftEditorPlaceholder/root {
   color: var(fig-secondary-text);
   position: absolute;
-  z-index: 0;
+  z-index: 1;
 }
 
 .public/DraftEditorPlaceholder/hasFocus {

src/component/base/DraftEditorPlaceholder.react.js

@@ -13,13 +13,13 @@
 
 'use strict';
 
+import type {DraftTextAlignment} from 'DraftTextAlignment';
+import type EditorState from 'EditorState';
+
 const React = require('React');
 
 const cx = require('cx');
 
-import type {DraftTextAlignment} from 'DraftTextAlignment';
-import type EditorState from 'EditorState';
-
 type Props = {
   accessibilityID: string,
   editorState: EditorState,

src/component/base/DraftEditorProps.js

@@ -12,16 +12,16 @@
 
 'use strict';
 
-import type {BidiDirection} from 'UnicodeBidiDirection';
 import type ContentBlock from 'ContentBlock';
 import type {DraftBlockRenderMap} from 'DraftBlockRenderMap';
 import type {DraftDragType} from 'DraftDragType';
 import type {DraftEditorCommand} from 'DraftEditorCommand';
-import type {DraftTextAlignment} from 'DraftTextAlignment';
-import type {DraftInlineStyle} from 'DraftInlineStyle';
 import type {DraftHandleValue} from 'DraftHandleValue';
+import type {DraftInlineStyle} from 'DraftInlineStyle';
+import type {DraftTextAlignment} from 'DraftTextAlignment';
 import type EditorState from 'EditorState';
 import type SelectionState from 'SelectionState';
+import type {BidiDirection} from 'UnicodeBidiDirection';
 
 export type DraftEditorProps = {
   /**

src/component/base/__tests__/DraftEditor.react-test.js

@@ -17,10 +17,10 @@ jest
   .unmock('react-test-renderer/shallow')
   .unmock('generateRandomKey');
 
+var DraftEditor = require('DraftEditor.react');
 var React = require('React');
-var ReactShallowRenderer = require('react-test-renderer/shallow');
 
-var DraftEditor = require('DraftEditor.react');
+var ReactShallowRenderer = require('react-test-renderer/shallow');
 
 describe('DraftEditor.react', () => {
   var shallow;

src/component/contents/DraftEditorBlock.react.js

@@ -13,19 +13,18 @@
 
 'use strict';
 
-import type {BidiDirection} from 'UnicodeBidiDirection';
 import type ContentBlock from 'ContentBlock';
 import type ContentState from 'ContentState';
 import type {DraftDecoratorType} from 'DraftDecoratorType';
-import type {List} from 'immutable';
 import type SelectionState from 'SelectionState';
+import type {BidiDirection} from 'UnicodeBidiDirection';
+import type {List} from 'immutable';
 
 const DraftEditorLeaf = require('DraftEditorLeaf.react');
 const DraftOffsetKey = require('DraftOffsetKey');
 const React = require('React');
 const ReactDOM = require('ReactDOM');
 const Scroll = require('Scroll');
-
 const Style = require('Style');
 const UnicodeBidi = require('UnicodeBidi');
 const UnicodeBidiDirection = require('UnicodeBidiDirection');

src/component/contents/DraftEditorContents.react.js

@@ -13,6 +13,9 @@
 
 'use strict';
 
+import type ContentBlock from 'ContentBlock';
+import type {BidiDirection} from 'UnicodeBidiDirection';
+
 const DraftEditorBlock = require('DraftEditorBlock.react');
 const DraftOffsetKey = require('DraftOffsetKey');
 const EditorState = require('EditorState');
@@ -22,9 +25,6 @@ const cx = require('cx');
 const joinClasses = require('joinClasses');
 const nullthrows = require('nullthrows');
 
-import type {BidiDirection} from 'UnicodeBidiDirection';
-import type ContentBlock from 'ContentBlock';
-
 type Props = {
   blockRendererFn: Function,
   blockStyleFn: (block: ContentBlock) => string,

src/component/contents/__tests__/DraftEditorBlock.react-test.js

@@ -18,10 +18,10 @@ jest.disableAutomock()
   .mock('getScrollPosition')
   .mock('getViewportDimensions');
 
-var ContentState = require('ContentState');
 var BlockTree = require('BlockTree');
 var CharacterMetadata = require('CharacterMetadata');
 var ContentBlock = require('ContentBlock');
+var ContentState = require('ContentState');
 var Immutable = require('immutable');
 var React = require('React');
 var ReactDOM = require('ReactDOM');

src/component/contents/__tests__/DraftEditorTextNode-test.js

@@ -11,7 +11,8 @@
 
 'use strict';
 
-jest.disableAutomock().mock('UserAgent');
+jest.disableAutomock().mock('UserAgent')
+  .mock('UserAgent');
 
 var BLOCK_DELIMITER_CHAR = '\n';
 var TEST_A = 'Hello';

src/component/handlers/composition/DraftEditorCompositionHandler.js

@@ -12,15 +12,15 @@
 
 'use strict';
 
+import type DraftEditor from 'DraftEditor.react';
+
 const DraftModifier = require('DraftModifier');
 const EditorState = require('EditorState');
 const Keys = require('Keys');
 
 const getEntityKeyForSelection = require('getEntityKeyForSelection');
 const isSelectionAtLeafStart = require('isSelectionAtLeafStart');
 
-import type DraftEditor from 'DraftEditor.react';
-
 /**
  * Millisecond delay to allow `compositionstart` to fire again upon
  * `compositionend`.

src/component/handlers/drag/DraftEditorDragHandler.js

@@ -13,18 +13,18 @@
 
 'use strict';
 
+import type DraftEditor from 'DraftEditor.react';
+import type SelectionState from 'SelectionState';
+
 const DataTransfer = require('DataTransfer');
 const DraftModifier = require('DraftModifier');
 const EditorState = require('EditorState');
 
 const findAncestorOffsetKey = require('findAncestorOffsetKey');
 const getTextContentFromFiles = require('getTextContentFromFiles');
 const getUpdatedSelectionState = require('getUpdatedSelectionState');
-const nullthrows = require('nullthrows');
-
-import type DraftEditor from 'DraftEditor.react';
-import type SelectionState from 'SelectionState';
 const isEventHandled = require('isEventHandled');
+const nullthrows = require('nullthrows');
 
 /**
  * Get a SelectionState for the supplied mouse event.

src/component/handlers/edit/commands/SecondaryClipboard.js

@@ -12,15 +12,15 @@
 
 'use strict';
 
+import type {BlockMap} from 'BlockMap';
+import type SelectionState from 'SelectionState';
+
 var DraftModifier = require('DraftModifier');
 var EditorState = require('EditorState');
 
 var getContentStateFragment = require('getContentStateFragment');
 var nullthrows = require('nullthrows');
 
-import type {BlockMap} from 'BlockMap';
-import type SelectionState from 'SelectionState';
-
 var clipboard: ?BlockMap = null;
 
 /**

src/component/handlers/edit/commands/removeTextWithStrategy.js

@@ -12,13 +12,13 @@
 
 'use strict';
 
-var DraftModifier = require('DraftModifier');
-
 import type ContentState from 'ContentState';
 import type {DraftRemovalDirection} from 'DraftRemovalDirection';
 import type EditorState from 'EditorState';
 import type SelectionState from 'SelectionState';
 
+var DraftModifier = require('DraftModifier');
+
 /**
  * For a collapsed selection state, remove text based on the specified strategy.
  * If the selection state is not collapsed, remove the entire selected range.

src/component/handlers/edit/editOnBeforeInput.js

@@ -12,20 +12,20 @@
 
 'use strict';
 
+import type DraftEditor from 'DraftEditor.react';
+import type {DraftInlineStyle} from 'DraftInlineStyle';
+
 var BlockTree = require('BlockTree');
 var DraftModifier = require('DraftModifier');
 var EditorState = require('EditorState');
 var UserAgent = require('UserAgent');
 
 var getEntityKeyForSelection = require('getEntityKeyForSelection');
+const isEventHandled = require('isEventHandled');
 var isSelectionAtLeafStart = require('isSelectionAtLeafStart');
 var nullthrows = require('nullthrows');
 var setImmediate = require('setImmediate');
 
-import type DraftEditor from 'DraftEditor.react';
-import type {DraftInlineStyle} from 'DraftInlineStyle';
-const isEventHandled = require('isEventHandled');
-
 // When nothing is focused, Firefox regards two characters, `'` and `/`, as
 // commands that should open and focus the "quickfind" search bar. This should
 // *never* happen while a contenteditable is focused, but as of v28, it
@@ -125,7 +125,9 @@ function editOnBeforeInput(editor: DraftEditor, e: SyntheticInputEvent): void {
     return;
   }
 
-  var mayAllowNative = !isSelectionAtLeafStart(editorState);
+  var mayAllowNative = !isSelectionAtLeafStart(
+    editor._latestCommittedEditorState,
+  );
   var newEditorState = replaceText(
     editorState,
     chars,

src/component/handlers/edit/editOnBlur.js

@@ -12,13 +12,13 @@
 
 'use strict';
 
+import type DraftEditor from 'DraftEditor.react';
+
 var EditorState = require('EditorState');
 var UserAgent = require('UserAgent');
 
 var getActiveElement = require('getActiveElement');
 
-import type DraftEditor from 'DraftEditor.react';
-
 var isWebKit = UserAgent.isEngine('WebKit');
 
 function editOnBlur(editor: DraftEditor, e: SyntheticEvent): void {

src/component/handlers/edit/editOnCompositionStart.js

@@ -12,10 +12,10 @@
 
 'use strict';
 
-var EditorState = require('EditorState');
-
 import type DraftEditor from 'DraftEditor.react';
 
+var EditorState = require('EditorState');
+
 /**
  * The user has begun using an IME input system. Switching to `composite` mode
  * allows handling composition input and disables other edit behavior.

src/component/handlers/edit/editOnCopy.js

@@ -12,10 +12,10 @@
 
 'use strict';
 
-var getFragmentFromSelection = require('getFragmentFromSelection');
-
 import type DraftEditor from 'DraftEditor.react';
 
+var getFragmentFromSelection = require('getFragmentFromSelection');
+
 /**
  * If we have a selection, create a ContentState fragment and store
  * it in our internal clipboard. Subsequent paste events will use this

src/component/handlers/edit/editOnCut.js

@@ -12,15 +12,15 @@
 
 'use strict';
 
+import type DraftEditor from 'DraftEditor.react';
+
 const DraftModifier = require('DraftModifier');
 const EditorState = require('EditorState');
 const Style = require('Style');
 
 const getFragmentFromSelection = require('getFragmentFromSelection');
 const getScrollPosition = require('getScrollPosition');
 
-import type DraftEditor from 'DraftEditor.react';
-
 /**
  * On `cut` events, native behavior is allowed to occur so that the system
  * clipboard is set properly. This means that we need to take steps to recover

src/component/handlers/edit/editOnFocus.js

@@ -12,10 +12,11 @@
 
 'use strict';
 
-var EditorState = require('EditorState');
-
 import type DraftEditor from 'DraftEditor.react';
 
+var DraftFeatureFlags = require('DraftFeatureFlags');
+var EditorState = require('EditorState');
+
 function editOnFocus(editor: DraftEditor, e: SyntheticFocusEvent): void {
   var editorState = editor._latestEditorState;
   var currentSelection = editorState.getSelection();
@@ -32,7 +33,12 @@ function editOnFocus(editor: DraftEditor, e: SyntheticFocusEvent): void {
   // moves the cursor back to the beginning of the editor, so we force the
   // selection here instead of simply accepting it in order to preserve the
   // old cursor position. See https://crbug.com/540004.
-  editor.update(EditorState.forceSelection(editorState, selection));
+  // But it looks like this is fixed in Chrome 60.0.3081.0.
+  if (DraftFeatureFlags.draft_accept_selection_after_refocus) {
+    editor.update(EditorState.acceptSelection(editorState, selection));
+  } else {
+    editor.update(EditorState.forceSelection(editorState, selection));
+  }
 }
 
 module.exports = editOnFocus;

src/component/handlers/edit/editOnInput.js

@@ -12,6 +12,8 @@
 
 'use strict';
 
+import type DraftEditor from 'DraftEditor.react';
+
 const DraftFeatureFlags = require('DraftFeatureFlags');
 var DraftModifier = require('DraftModifier');
 var DraftOffsetKey = require('DraftOffsetKey');
@@ -21,8 +23,6 @@ var UserAgent = require('UserAgent');
 var findAncestorOffsetKey = require('findAncestorOffsetKey');
 var nullthrows = require('nullthrows');
 
-import type DraftEditor from 'DraftEditor.react';
-
 var isGecko = UserAgent.isEngine('Gecko');
 
 var DOUBLE_NEWLINE = '\n\n';