DONE-7429: add onCopy, onCut, fix onBlur handler commands order

lib/DraftEditorProps.js.flow

@@ -143,7 +143,9 @@ export type DraftEditorProps = {
   onLeftArrow?: (e: SyntheticKeyboardEvent<>) => void;
 
   onBlur?: (e: SyntheticEvent<>) => void;
-  onFocus?: (e: SyntheticEvent<>) => void
+  onFocus?: (e: SyntheticEvent<>) => void;
+  onCopy?: (e: SyntheticEvent<>) => void;
+  onCut?: (e: SyntheticEvent<>) => void
 
   // Provide a map of inline style names corresponding to CSS style objects
   // that will be rendered for matching ranges.

lib/editOnBlur.js

@@ -18,7 +18,7 @@ var EditorState = require('./EditorState');
 var containsNode = require('fbjs/lib/containsNode');
 var getActiveElement = require('fbjs/lib/getActiveElement');
 
-function editOnBlur(editor, e) {
+function editOnBlur(editor, event) {
   // 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.
@@ -42,8 +42,9 @@ function editOnBlur(editor, e) {
   }
 
   var selection = currentSelection.set('hasFocus', false);
-  editor.props.onBlur && editor.props.onBlur(e);
-  editor.update(EditorState.acceptSelection(editorState, selection));
+  var updatedEditorState = EditorState.acceptSelection(editorState, selection);
+  editor.update(updatedEditorState);
+  editor.props.onBlur && editor.props.onBlur(event);
 }
 
 module.exports = editOnBlur;

lib/editOnBlur.js.flow

@@ -20,7 +20,7 @@ const EditorState = require('./EditorState');
 const containsNode = require('fbjs/lib/containsNode');
 const getActiveElement = require('fbjs/lib/getActiveElement');
 
-function editOnBlur(editor: DraftEditor, e: SyntheticEvent<>): void {
+function editOnBlur(editor: DraftEditor, event: SyntheticEvent<>): 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.
@@ -44,8 +44,9 @@ function editOnBlur(editor: DraftEditor, e: SyntheticEvent<>): void {
   }
 
   var selection = currentSelection.set('hasFocus', false);
-  editor.props.onBlur && editor.props.onBlur(e);
-  editor.update(EditorState.acceptSelection(editorState, selection));
+  var updatedEditorState = EditorState.acceptSelection(editorState, selection);
+  editor.update(updatedEditorState);
+  editor.props.onBlur && editor.props.onBlur(event);
 }
 
 module.exports = editOnBlur;

lib/editOnCopy.js

@@ -14,19 +14,26 @@
 'use strict';
 
 var getFragmentFromSelection = require('./getFragmentFromSelection');
+var isEventHandled = require('./isEventHandled');
 
 /**
  * If we have a selection, create a ContentState fragment and store
  * it in our internal clipboard. Subsequent paste events will use this
  * fragment if no external clipboard data is supplied.
  */
-function editOnCopy(editor, e) {
+function editOnCopy(editor, event) {
+  var shouldPreventDefault = editor.props.onCopy && isEventHandled(editor.props.onCopy(event));
+
+  if (shouldPreventDefault) {
+    return;
+  }
+
   var editorState = editor._latestEditorState;
   var selection = editorState.getSelection();
 
   // No selection, so there's nothing to copy.
   if (selection.isCollapsed()) {
-    e.preventDefault();
+    event.preventDefault();
     return;
   }
 

lib/editOnCopy.js.flow

@@ -14,21 +14,27 @@
 'use strict';
 
 import type DraftEditor from './DraftEditor.react';
-
-var getFragmentFromSelection = require('./getFragmentFromSelection');
+const getFragmentFromSelection = require('./getFragmentFromSelection');
+const isEventHandled = require('./isEventHandled');
 
 /**
  * If we have a selection, create a ContentState fragment and store
  * it in our internal clipboard. Subsequent paste events will use this
  * fragment if no external clipboard data is supplied.
  */
-function editOnCopy(editor: DraftEditor, e: SyntheticClipboardEvent<>): void {
+function editOnCopy(editor: DraftEditor, event: SyntheticClipboardEvent<>): void {
+  const shouldPreventDefault = editor.props.onCopy && isEventHandled(editor.props.onCopy(event));
+
+  if (shouldPreventDefault) {
+    return;
+  }
+
   var editorState = editor._latestEditorState;
   var selection = editorState.getSelection();
 
   // No selection, so there's nothing to copy.
   if (selection.isCollapsed()) {
-    e.preventDefault();
+    event.preventDefault();
     return;
   }
 

lib/editOnCut.js

@@ -19,6 +19,7 @@ var Style = require('fbjs/lib/Style');
 
 var getFragmentFromSelection = require('./getFragmentFromSelection');
 var getScrollPosition = require('fbjs/lib/getScrollPosition');
+var isEventHandled = require('./isEventHandled');
 
 /**
  * On `cut` events, native behavior is allowed to occur so that the system
@@ -29,15 +30,21 @@ var getScrollPosition = require('fbjs/lib/getScrollPosition');
  * In addition, we can keep a copy of the removed fragment, including all
  * styles and entities, for use as an internal paste.
  */
-function editOnCut(editor, e) {
+function editOnCut(editor, event) {
+  var shouldPreventDefault = editor.props.onCut && isEventHandled(editor.props.onCut(event));
+
+  if (shouldPreventDefault) {
+    return;
+  }
+
   var editorState = editor._latestEditorState;
   var selection = editorState.getSelection();
-  var element = e.target;
+  var element = event.target;
   var scrollPosition = void 0;
 
   // No selection, so there's nothing to cut.
   if (selection.isCollapsed()) {
-    e.preventDefault();
+    event.preventDefault();
     return;
   }
 
@@ -63,6 +70,7 @@ function editOnCut(editor, e) {
 
 function removeFragment(editorState) {
   var newContent = DraftModifier.removeRange(editorState.getCurrentContent(), editorState.getSelection(), 'forward');
+
   return EditorState.push(editorState, newContent, 'remove-range');
 }
 

lib/editOnCut.js.flow

@@ -21,6 +21,7 @@ const Style = require('fbjs/lib/Style');
 
 const getFragmentFromSelection = require('./getFragmentFromSelection');
 const getScrollPosition = require('fbjs/lib/getScrollPosition');
+const isEventHandled = require('./isEventHandled');
 
 /**
  * On `cut` events, native behavior is allowed to occur so that the system
@@ -31,15 +32,21 @@ const getScrollPosition = require('fbjs/lib/getScrollPosition');
  * In addition, we can keep a copy of the removed fragment, including all
  * styles and entities, for use as an internal paste.
  */
-function editOnCut(editor: DraftEditor, e: SyntheticClipboardEvent<>): void {
+function editOnCut(editor: DraftEditor, event: SyntheticClipboardEvent<>): void {
+  const shouldPreventDefault = editor.props.onCut && isEventHandled(editor.props.onCut(event));
+
+  if (shouldPreventDefault) {
+    return;
+  }
+
   const editorState = editor._latestEditorState;
   const selection = editorState.getSelection();
-  const element = e.target;
+  const element = event.target;
   let scrollPosition;
 
   // No selection, so there's nothing to cut.
   if (selection.isCollapsed()) {
-    e.preventDefault();
+    event.preventDefault();
     return;
   }
 
@@ -65,6 +72,7 @@ function editOnCut(editor: DraftEditor, e: SyntheticClipboardEvent<>): void {
 
 function removeFragment(editorState: EditorState): EditorState {
   const newContent = DraftModifier.removeRange(editorState.getCurrentContent(), editorState.getSelection(), 'forward');
+
   return EditorState.push(editorState, newContent, 'remove-range');
 }
 

lib/editOnPaste.js

@@ -29,9 +29,9 @@ var splitTextIntoTextBlocks = require('./splitTextIntoTextBlocks');
 /**
  * Paste content.
  */
-function editOnPaste(editor, e) {
-  e.preventDefault();
-  var data = new DataTransfer(e.clipboardData);
+function editOnPaste(editor, event) {
+  event.preventDefault();
+  var data = new DataTransfer(event.clipboardData);
 
   // Get files, unless this is likely to be a string the user wants inline.
   if (!data.isRichText()) {
@@ -75,7 +75,9 @@ function editOnPaste(editor, e) {
   var html = data.getHTML();
   var editorState = editor._latestEditorState;
 
-  if (editor.props.handlePastedText && isEventHandled(editor.props.handlePastedText(text, html, editorState))) {
+  var shouldPreventDefault = editor.props.handlePastedText && isEventHandled(editor.props.handlePastedText(text, html, editorState));
+
+  if (shouldPreventDefault) {
     return;
   }
 

lib/editOnPaste.js.flow

@@ -33,9 +33,9 @@ var splitTextIntoTextBlocks = require('./splitTextIntoTextBlocks');
 /**
  * Paste content.
  */
-function editOnPaste(editor: DraftEditor, e: SyntheticClipboardEvent<>): void {
-  e.preventDefault();
-  var data = new DataTransfer(e.clipboardData);
+function editOnPaste(editor: DraftEditor, event: SyntheticClipboardEvent<>): void {
+  event.preventDefault();
+  var data = new DataTransfer(event.clipboardData);
 
   // Get files, unless this is likely to be a string the user wants inline.
   if (!data.isRichText()) {
@@ -79,7 +79,9 @@ function editOnPaste(editor: DraftEditor, e: SyntheticClipboardEvent<>): void {
   const html = data.getHTML();
   const editorState = editor._latestEditorState;
 
-  if (editor.props.handlePastedText && isEventHandled(editor.props.handlePastedText(text, html, editorState))) {
+  const shouldPreventDefault = editor.props.handlePastedText && isEventHandled(editor.props.handlePastedText(text, html, editorState));
+
+  if (shouldPreventDefault) {
     return;
   }
 

src/component/base/DraftEditorProps.js

@@ -164,6 +164,8 @@ export type DraftEditorProps = {
 
   onBlur?: (e: SyntheticEvent<>) => void,
   onFocus?: (e: SyntheticEvent<>) => void,
+  onCopy?: (e: SyntheticEvent<>) => void,
+  onCut?: (e: SyntheticEvent<>) => void,
 
   // Provide a map of inline style names corresponding to CSS style objects
   // that will be rendered for matching ranges.

src/component/handlers/edit/editOnBlur.js

@@ -20,7 +20,7 @@ const EditorState = require('EditorState');
 const containsNode = require('containsNode');
 const getActiveElement = require('getActiveElement');
 
-function editOnBlur(editor: DraftEditor, e: SyntheticEvent<>): void {
+function editOnBlur(editor: DraftEditor, event: SyntheticEvent<>): 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.
@@ -48,8 +48,9 @@ function editOnBlur(editor: DraftEditor, e: SyntheticEvent<>): void {
   }
 
   var selection = currentSelection.set('hasFocus', false);
-  editor.props.onBlur && editor.props.onBlur(e);
-  editor.update(EditorState.acceptSelection(editorState, selection));
+  var updatedEditorState = EditorState.acceptSelection(editorState, selection);
+  editor.update(updatedEditorState);
+  editor.props.onBlur && editor.props.onBlur(event);
 }
 
 module.exports = editOnBlur;

src/component/handlers/edit/editOnCopy.js

@@ -14,21 +14,28 @@
 'use strict';
 
 import type DraftEditor from 'DraftEditor.react';
-
-var getFragmentFromSelection = require('getFragmentFromSelection');
+const getFragmentFromSelection = require('getFragmentFromSelection');
+const isEventHandled = require('isEventHandled');
 
 /**
  * If we have a selection, create a ContentState fragment and store
  * it in our internal clipboard. Subsequent paste events will use this
  * fragment if no external clipboard data is supplied.
  */
-function editOnCopy(editor: DraftEditor, e: SyntheticClipboardEvent<>): void {
+function editOnCopy(editor: DraftEditor, event: SyntheticClipboardEvent<>): void {
+  const shouldPreventDefault = editor.props.onCopy &&
+    isEventHandled(editor.props.onCopy(event));
+
+  if (shouldPreventDefault) {
+    return;
+  }
+
   var editorState = editor._latestEditorState;
   var selection = editorState.getSelection();
 
   // No selection, so there's nothing to copy.
   if (selection.isCollapsed()) {
-    e.preventDefault();
+    event.preventDefault();
     return;
   }
 

src/component/handlers/edit/editOnCut.js

@@ -21,6 +21,7 @@ const Style = require('Style');
 
 const getFragmentFromSelection = require('getFragmentFromSelection');
 const getScrollPosition = require('getScrollPosition');
+const isEventHandled = require('isEventHandled');
 
 /**
  * On `cut` events, native behavior is allowed to occur so that the system
@@ -31,15 +32,22 @@ const getScrollPosition = require('getScrollPosition');
  * In addition, we can keep a copy of the removed fragment, including all
  * styles and entities, for use as an internal paste.
  */
-function editOnCut(editor: DraftEditor, e: SyntheticClipboardEvent<>): void {
+function editOnCut(editor: DraftEditor, event: SyntheticClipboardEvent<>): void {
+  const shouldPreventDefault = editor.props.onCut &&
+    isEventHandled(editor.props.onCut(event));
+
+  if (shouldPreventDefault) {
+    return;
+  }
+
   const editorState = editor._latestEditorState;
   const selection = editorState.getSelection();
-  const element = e.target;
+  const element = event.target;
   let scrollPosition;
 
   // No selection, so there's nothing to cut.
   if (selection.isCollapsed()) {
-    e.preventDefault();
+    event.preventDefault();
     return;
   }
 
@@ -69,6 +77,7 @@ function removeFragment(editorState: EditorState): EditorState {
     editorState.getSelection(),
     'forward',
   );
+
   return EditorState.push(editorState, newContent, 'remove-range');
 }
 

src/component/handlers/edit/editOnPaste.js

@@ -33,9 +33,9 @@ var splitTextIntoTextBlocks = require('splitTextIntoTextBlocks');
 /**
  * Paste content.
  */
-function editOnPaste(editor: DraftEditor, e: SyntheticClipboardEvent<>): void {
-  e.preventDefault();
-  var data = new DataTransfer(e.clipboardData);
+function editOnPaste(editor: DraftEditor, event: SyntheticClipboardEvent<>): void {
+  event.preventDefault();
+  var data = new DataTransfer(event.clipboardData);
 
   // Get files, unless this is likely to be a string the user wants inline.
   if (!data.isRichText()) {
@@ -97,10 +97,10 @@ function editOnPaste(editor: DraftEditor, e: SyntheticClipboardEvent<>): void {
   const html = data.getHTML();
   const editorState = editor._latestEditorState;
 
-  if (
-    editor.props.handlePastedText &&
-    isEventHandled(editor.props.handlePastedText(text, html, editorState))
-  ) {
+  const shouldPreventDefault = editor.props.handlePastedText &&
+    isEventHandled(editor.props.handlePastedText(text, html, editorState));
+
+  if (shouldPreventDefault) {
     return;
   }