Take over enhancements to render Draft.js in an iframe (facebookarchive#1938)

Summary:
**Summary**

Takes over and applies requested PR feedback to facebookarchive#1877 by haikyuu.

Refer to original PR for context and discussion.

**Test Plan**

Run some manual smoke tests on the editor running in an iframe as follows:

```
yarn
python3 -m http.server 8080 .
open http://localhost:8080/examples/draft-0-10-0/iframe/iframe.html
```
Pull Request resolved: facebookarchive#1938

Reviewed By: claudiopro

Differential Revision: D13137413

Pulled By: jack-arms

fbshipit-source-id: efcdbabc7d8d2aff4fbebc8b06c22d57756ebc12

Author: Claudio Procida

meta/bundle-size-stats/Draft.js.json

@@ -38,6 +38,7 @@ const getDefaultKeyBinding = require('getDefaultKeyBinding');
 const getScrollPosition = require('getScrollPosition');
 const gkx = require('gkx');
 const invariant = require('invariant');
+const isHTMLElement = require('isHTMLElement');
 const nullthrows = require('nullthrows');
 
 const isIE = UserAgent.isBrowser('IE');
@@ -457,7 +458,13 @@ class DraftEditor extends React.Component<DraftEditorProps, State> {
      * ie9-beta-minor-change-list.aspx
      */
     if (isIE) {
-      document.execCommand('AutoUrlDetect', false, false);
+      // editor can be null after mounting
+      // https://stackoverflow.com/questions/44074747/componentdidmount-called-before-ref-callback
+      if (!this.editor) {
+        global.execCommand('AutoUrlDetect', false, false);
+      } else {
+        this.editor.ownerDocument.execCommand('AutoUrlDetect', false, false);
+      }
     }
   }
 
@@ -492,10 +499,7 @@ class DraftEditor extends React.Component<DraftEditorProps, State> {
     const scrollParent = Style.getScrollParent(editorNode);
     const {x, y} = scrollPosition || getScrollPosition(scrollParent);
 
-    invariant(
-      editorNode instanceof HTMLElement,
-      'editorNode is not an HTMLElement',
-    );
+    invariant(isHTMLElement(editorNode), 'editorNode is not an HTMLElement');
 
     editorNode.focus();
 
@@ -519,10 +523,10 @@ class DraftEditor extends React.Component<DraftEditorProps, State> {
 
   blur: () => void = (): void => {
     const editorNode = this.editor;
-    invariant(
-      editorNode instanceof HTMLElement,
-      'editorNode is not an HTMLElement',
-    );
+    if (!editorNode) {
+      return;
+    }
+    invariant(isHTMLElement(editorNode), 'editorNode is not an HTMLElement');
     editorNode.blur();
   };
 

meta/bundle-size-stats/Draft.min.js.json

@@ -33,6 +33,7 @@ const getElementPosition = require('getElementPosition');
 const getScrollPosition = require('getScrollPosition');
 const getViewportDimensions = require('getViewportDimensions');
 const invariant = require('invariant');
+const isHTMLElement = require('isHTMLElement');
 const nullthrows = require('nullthrows');
 
 const SCROLL_BUFFER = 10;
@@ -121,10 +122,7 @@ class DraftEditorBlock extends React.Component<Props> {
         );
       }
     } else {
-      invariant(
-        blockNode instanceof HTMLElement,
-        'blockNode is not an HTMLElement',
-      );
+      invariant(isHTMLElement(blockNode), 'blockNode is not an HTMLElement');
       const blockBottom = blockNode.offsetHeight + blockNode.offsetTop;
       const pOffset = scrollParent.offsetTop + scrollParent.offsetHeight;
       const scrollBottom = pOffset + scrollPosition.y;

src/component/base/DraftEditor.react.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  * @format
- * @flow strict-local
+ * @flow
  * @emails oncall+draft_js
  */
 
@@ -15,6 +15,7 @@ const React = require('React');
 const UserAgent = require('UserAgent');
 
 const invariant = require('invariant');
+const isElement = require('isElement');
 
 // In IE, spans with <br> tags render as two newlines. By rendering a span
 // with only a newline character, we can be sure to render a single line.
@@ -81,11 +82,13 @@ class DraftEditorTextNode extends React.Component<Props> {
   shouldComponentUpdate(nextProps: Props): boolean {
     const node = this._node;
     const shouldBeNewline = nextProps.children === '';
-    invariant(node instanceof Element, 'node is not an Element');
+
+    invariant(isElement(node), 'node is not an Element');
+    const elementNode: Element = (node: any);
     if (shouldBeNewline) {
-      return !isNewline(node);
+      return !isNewline(elementNode);
     }
-    return node.textContent !== nextProps.children;
+    return elementNode.textContent !== nextProps.children;
   }
 
   componentDidMount(): void {

src/component/contents/DraftEditorBlock.react.js

@@ -37,6 +37,7 @@ const getScrollPosition = require('getScrollPosition');
 const getViewportDimensions = require('getViewportDimensions');
 const Immutable = require('immutable');
 const invariant = require('invariant');
+const isHTMLElement = require('isHTMLElement');
 
 const SCROLL_BUFFER = 10;
 
@@ -251,11 +252,9 @@ class DraftEditorBlockNode extends React.Component<Props> {
         );
       }
     } else {
-      invariant(
-        blockNode instanceof HTMLElement,
-        'blockNode is not an HTMLElement',
-      );
-      const blockBottom = blockNode.offsetHeight + blockNode.offsetTop;
+      invariant(isHTMLElement(blockNode), 'blockNode is not an HTMLElement');
+      const htmlBlockNode: HTMLElement = (blockNode: any);
+      const blockBottom = htmlBlockNode.offsetHeight + htmlBlockNode.offsetTop;
       const scrollBottom = scrollParent.offsetHeight + scrollPosition.y;
       scrollDelta = blockBottom - scrollBottom;
       if (scrollDelta > 0) {

src/component/contents/DraftEditorTextNode.react.js

@@ -14,6 +14,7 @@
 const UserAgent = require('UserAgent');
 
 const findAncestorOffsetKey = require('findAncestorOffsetKey');
+const getWindowForNode = require('getWindowForNode');
 const Immutable = require('immutable');
 const invariant = require('invariant');
 const nullthrows = require('nullthrows');
@@ -45,8 +46,9 @@ class DOMObserver {
   constructor(container: HTMLElement) {
     this.container = container;
     this.mutations = Map();
-    if (window.MutationObserver && !USE_CHAR_DATA) {
-      this.observer = new window.MutationObserver(mutations =>
+    const containerWindow = getWindowForNode(container);
+    if (containerWindow.MutationObserver && !USE_CHAR_DATA) {
+      this.observer = new containerWindow.MutationObserver(mutations =>
         this.registerMutations(mutations),
       );
     } else {

src/component/contents/exploration/DraftEditorBlockNode.react.js

@@ -22,6 +22,7 @@ const ReactDOM = require('ReactDOM');
 const findAncestorOffsetKey = require('findAncestorOffsetKey');
 const getTextContentFromFiles = require('getTextContentFromFiles');
 const getUpdatedSelectionState = require('getUpdatedSelectionState');
+const getWindowForNode = require('getWindowForNode');
 const isEventHandled = require('isEventHandled');
 const nullthrows = require('nullthrows');
 
@@ -38,8 +39,10 @@ function getSelectionForEvent(
   /* $FlowFixMe(>=0.68.0 site=www,mobile) This comment suppresses an error
    * found when Flow v0.68 was deployed. To see the error delete this comment
    * and run Flow. */
-  if (typeof document.caretRangeFromPoint === 'function') {
-    const dropRange = document.caretRangeFromPoint(event.x, event.y);
+  const {ownerDocument} = event.currentTarget;
+
+  if (typeof ownerDocument.caretRangeFromPoint === 'function') {
+    const dropRange = ownerDocument.caretRangeFromPoint(event.x, event.y);
     node = dropRange.startContainer;
     offset = dropRange.startOffset;
   } else if (event.rangeParent) {
@@ -142,7 +145,7 @@ function endDrag(editor) {
   const editorNode = ReactDOM.findDOMNode(editor);
   if (editorNode) {
     const mouseUpEvent = new MouseEvent('mouseup', {
-      view: window,
+      view: getWindowForNode(editorNode),
       bubbles: true,
       cancelable: true,
     });

src/component/handlers/composition/DOMObserver.js

@@ -55,7 +55,7 @@ const getEditorState = (text: string = 'Arsenal') => {
 
 const getDraftEditor = (obj): DraftEditor => (obj: any);
 
-const getInputEvent = (data): SyntheticInputEvent<> =>
+const getInputEvent = (data): SyntheticInputEvent<HTMLElement> =>
   ({
     data,
     preventDefault: jest.fn(),

src/component/handlers/drag/DraftEditorDragHandler.js

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  * @emails oncall+draft_js
+ * @flow strict-local
  * @format
  */
 
@@ -29,8 +30,8 @@ const getEditorState = (text: string = 'Arsenal') => {
   );
 };
 
-const getBlurEvent = data => ({
-  data,
+const getBlurEvent = currentTarget => ({
+  currentTarget,
 });
 
 function withGlobalGetSelectionAs(getSelectionValue = {}, callback) {
@@ -68,7 +69,8 @@ test('editor removes selection on blur (default behaviour)', () => {
       editor: editorNode,
     };
 
-    onBlur(editor, getBlurEvent());
+    // $FlowExpectedError
+    onBlur(editor, getBlurEvent(editorNode));
 
     expect(globalSelection.removeAllRanges).toHaveBeenCalledTimes(1);
   });
@@ -97,7 +99,8 @@ test('editor preserves selection on blur', () => {
       editor: editorNode,
     };
 
-    onBlur(editor, getBlurEvent());
+    // $FlowExpectedError
+    onBlur(editor, getBlurEvent(editorNode));
 
     expect(globalSelection.removeAllRanges).toHaveBeenCalledTimes(0);
   });