fix verifying that nodes are instances of Element/HTMLElement

src/component/base/DraftEditor.react.js

@@ -28,6 +28,7 @@ const DraftEditorEditHandler = require('DraftEditorEditHandler');
 const DraftEditorPlaceholder = require('DraftEditorPlaceholder.react');
 const DraftEffects = require('DraftEffects');
 const EditorState = require('EditorState');
+const isHTMLElement = require('isHTMLElement');
 const React = require('React');
 const ReactDOM = require('ReactDOM');
 const Scroll = require('Scroll');
@@ -486,7 +487,7 @@ class DraftEditor extends React.Component<DraftEditorProps, State> {
     const {x, y} = scrollPosition || getScrollPosition(scrollParent);
 
     invariant(
-      editorNode instanceof HTMLElement,
+      isHTMLElement(editorNode),
       'editorNode is not an HTMLElement',
     );
 
@@ -513,7 +514,7 @@ class DraftEditor extends React.Component<DraftEditorProps, State> {
   blur = (): void => {
     const editorNode = ReactDOM.findDOMNode(this.editor);
     invariant(
-      editorNode instanceof HTMLElement,
+      isHTMLElement(editorNode),
       'editorNode is not an HTMLElement',
     );
     editorNode.blur();

src/component/contents/DraftEditorBlock.react.js

@@ -35,6 +35,7 @@ const cx = require('cx');
 const getElementPosition = require('getElementPosition');
 const getScrollPosition = require('getScrollPosition');
 const getViewportDimensions = require('getViewportDimensions');
+const isHTMLElement = require('isHTMLElement');
 const invariant = require('invariant');
 const nullthrows = require('nullthrows');
 
@@ -119,10 +120,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 scrollBottom = scrollParent.offsetHeight + scrollPosition.y;
       scrollDelta = blockBottom - scrollBottom;

src/component/contents/DraftEditorTextNode.react.js

@@ -17,6 +17,7 @@ const React = require('React');
 const ReactDOM = require('ReactDOM');
 const UserAgent = require('UserAgent');
 
+const isElement = require('isElement');
 const invariant = require('invariant');
 
 // In IE, spans with <br> tags render as two newlines. By rendering a span
@@ -81,7 +82,8 @@ class DraftEditorTextNode extends React.Component<Props> {
   shouldComponentUpdate(nextProps: Props): boolean {
     const node = ReactDOM.findDOMNode(this);
     const shouldBeNewline = nextProps.children === '';
-    invariant(node instanceof Element, 'node is not an Element');
+
+    invariant(isElement(node), 'node is not an Element');
     if (shouldBeNewline) {
       return !isNewline(node);
     }

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

@@ -36,6 +36,7 @@ const Style = require('Style');
 
 const getElementPosition = require('getElementPosition');
 const getScrollPosition = require('getScrollPosition');
+const isHTMLElement = require('isHTMLElement');
 const getViewportDimensions = require('getViewportDimensions');
 const Immutable = require('immutable');
 const invariant = require('invariant');
@@ -253,10 +254,7 @@ class DraftEditorBlockNode 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 scrollBottom = scrollParent.offsetHeight + scrollPosition.y;
       scrollDelta = blockBottom - scrollBottom;

src/component/handlers/edit/editOnSelect.js

@@ -21,6 +21,7 @@ const ReactDOM = require('ReactDOM');
 
 const getDraftEditorSelection = require('getDraftEditorSelection');
 const invariant = require('invariant');
+const isHTMLElement = require('isHTMLElement');
 
 function editOnSelect(editor: DraftEditor): void {
   if (
@@ -43,11 +44,8 @@ function editOnSelect(editor: DraftEditor): void {
   let editorState = editor.props.editorState;
   const editorNode = ReactDOM.findDOMNode(editor.editorContainer);
   invariant(editorNode, 'Missing editorNode');
-  const windowHTMLElement = editor.props.iframeWindow
-    ? editor.props.iframeWindow.HTMLElement
-    : HTMLElement;
   invariant(
-    editorNode.firstChild instanceof windowHTMLElement,
+    isHTMLElement(editorNode.firstChild),
     'editorNode.firstChild is not an HTMLElement',
   );
   const documentSelection = getDraftEditorSelection(

src/component/selection/getDraftEditorSelectionWithNodes.js

@@ -19,6 +19,7 @@ import type EditorState from 'EditorState';
 const findAncestorOffsetKey = require('findAncestorOffsetKey');
 const getSelectionOffsetKeyForNode = require('getSelectionOffsetKeyForNode');
 const getUpdatedSelectionState = require('getUpdatedSelectionState');
+const isElement = require('isElement');
 const invariant = require('invariant');
 const nullthrows = require('nullthrows');
 
@@ -125,7 +126,7 @@ function getFirstLeaf(node: any): Node {
   while (
     node.firstChild &&
     // data-blocks has no offset
-    ((node.firstChild instanceof Element &&
+    ((isElement(node.firstChild) &&
       node.firstChild.getAttribute('data-blocks') === 'true') ||
       getSelectionOffsetKeyForNode(node.firstChild))
   ) {
@@ -141,7 +142,7 @@ function getLastLeaf(node: any): Node {
   while (
     node.lastChild &&
     // data-blocks has no offset
-    ((node.lastChild instanceof Element &&
+    ((isElement(node.lastChild) &&
       node.lastChild.getAttribute('data-blocks') === 'true') ||
       getSelectionOffsetKeyForNode(node.lastChild))
   ) {
@@ -169,7 +170,7 @@ function getPointForNonTextNode(
   if (editorRoot === node) {
     node = node.firstChild;
     invariant(
-      node instanceof Element && node.getAttribute('data-contents') === 'true',
+      isElement(node) && node.getAttribute('data-contents') === 'true',
       'Invalid DraftEditorContents structure.',
     );
     if (childOffset > 0) {

src/component/selection/getSelectionOffsetKeyForNode.js

@@ -17,8 +17,10 @@
  * Get offset key from a node or it's child nodes. Return the first offset key
  * found on the DOM tree of given node.
  */
+const isElement = require('isElement');
+
 function getSelectionOffsetKeyForNode(node: Node): ?string {
-  if (node instanceof Element) {
+  if (isElement(node)) {
     const offsetKey = node.getAttribute('data-offset-key');
     if (offsetKey) {
       return offsetKey;

src/component/selection/setDraftEditorSelection.js

@@ -20,6 +20,7 @@ const DraftJsDebugLogging = require('DraftJsDebugLogging');
 
 const containsNode = require('containsNode');
 const getActiveElement = require('getActiveElement');
+const isElement = require('isElement');
 const invariant = require('invariant');
 
 function getAnonymizedDOM(
@@ -36,7 +37,7 @@ function getAnonymizedDOM(
   }
 
   invariant(
-    anonymized instanceof Element,
+    isElement(anonymized),
     'Node must be an Element if it is not a text node.',
   );
   return anonymized.outerHTML;
@@ -77,10 +78,7 @@ function getAnonymizedEditorDOM(
   // grabbing the DOM content of the Draft editor
   let currentNode = node;
   while (currentNode) {
-    if (
-      currentNode instanceof Element &&
-      currentNode.hasAttribute('contenteditable')
-    ) {
+    if (isElement(currentNode) && currentNode.hasAttribute('contenteditable')) {
       // found the Draft editor container
       return getAnonymizedDOM(currentNode, getNodeLabels);
     } else {

src/component/utils/isElement.js

@@ -0,0 +1,8 @@
+function isElement(node) {
+  if (!node || !node.ownerDocument || !node.ownerDocument.defaultView) {
+    return false;
+  }
+  return node instanceof node.ownerDocument.defaultView.Element;
+}
+
+module.exports = isElement;

src/component/utils/isHTMLElement.js

@@ -0,0 +1,9 @@
+function isHTMLElement(node) {
+  // the third case happens when pasting content
+  if (!node || !node.ownerDocument || !node.ownerDocument.defaultView) {
+    return false;
+  }
+  return node instanceof node.ownerDocument.defaultView.HTMLElement;
+}
+
+module.exports = isHTMLElement;

src/model/encoding/convertFromHTMLToContentBlocks.js

@@ -32,6 +32,7 @@ const URI = require('URI');
 const cx = require('cx');
 const generateRandomKey = require('generateRandomKey');
 const getSafeBodyFromHTML = require('getSafeBodyFromHTML');
+const isHTMLElement = require('isHTMLElement');
 const gkx = require('gkx');
 const invariant = require('invariant');
 const sanitizeDraftText = require('sanitizeDraftText');
@@ -198,7 +199,7 @@ const processInlineTag = (
   const styleToCheck = inlineTags[tag];
   if (styleToCheck) {
     currentStyle = currentStyle.add(styleToCheck).toOrderedSet();
-  } else if (node instanceof HTMLElement) {
+  } else if (isHTMLElement(node)) {
     const htmlElement = node;
     currentStyle = currentStyle
       .withMutations(style => {
@@ -475,7 +476,7 @@ const genFragment = (
   if (
     !experimentalTreeDataSupport &&
     nodeName === 'li' &&
-    node instanceof HTMLElement
+    isHTMLElement(node)
   ) {
     depth = getListItemDepth(node, depth);
   }

src/model/encoding/convertFromHTMLToContentBlocks2.js

@@ -21,6 +21,7 @@ import type {EntityMap} from 'EntityMap';
 const CharacterMetadata = require('CharacterMetadata');
 const ContentBlock = require('ContentBlock');
 const ContentBlockNode = require('ContentBlockNode');
+const isHTMLElement = require('isHTMLElement');
 const DefaultDraftBlockRenderMap = require('DefaultDraftBlockRenderMap');
 const DraftEntity = require('DraftEntity');
 const {List, Map, OrderedSet} = require('immutable');
@@ -392,7 +393,7 @@ class ContentBlocksBuilder {
 
         if (
           !experimentalTreeDataSupport &&
-          node instanceof HTMLElement &&
+          isHTMLElement(node) &&
           (blockType === 'unordered-list-item' ||
             blockType === 'ordered-list-item')
         ) {
@@ -586,7 +587,7 @@ class ContentBlocksBuilder {
    * styles (font-weight, font-style and text-decoration).
    */
   _updateStyleFromNodeAttributes(node: Node) {
-    if (!(node instanceof HTMLElement)) {
+    if (!isHTMLElement(node)) {
       return;
     }