Convert some of draftjs' ReactDOM.findDOMNode to refs (#2051)

Summary:
Pull Request resolved: #2051

ReactDOM.findDOMNode is deprecated and need to remove instances of it in draftjs, so React can be in strict mode.

Reviewed By: bennyhobart

Differential Revision: D14716519

fbshipit-source-id: b1bb4ab73f70a8b4e8429077a0b6b2c180724ee8

Author: Dennis Wilkins

src/component/base/DraftEditor.react.js

@@ -467,7 +467,7 @@ class DraftEditor extends React.Component<DraftEditorProps, State> {
   ): void => {
     const {editorState} = this.props;
     const alreadyHasFocus = editorState.getSelection().getHasFocus();
-    const editorNode = ReactDOM.findDOMNode(this.editor);
+    const editorNode = this.editor;
 
     if (!editorNode) {
       // once in a while people call 'focus' in a setTimeout, and the node has
@@ -504,7 +504,7 @@ class DraftEditor extends React.Component<DraftEditorProps, State> {
   };
 
   blur: () => void = (): void => {
-    const editorNode = ReactDOM.findDOMNode(this.editor);
+    const editorNode = this.editor;
     invariant(
       editorNode instanceof HTMLElement,
       'editorNode is not an HTMLElement',

src/component/contents/DraftEditorBlock.react.js

@@ -71,6 +71,8 @@ const isBlockOnSelectionEdge = (
  * appropriate decorator and inline style components.
  */
 class DraftEditorBlock extends React.Component<Props> {
+  _node: ?HTMLDivElement;
+
   shouldComponentUpdate(nextProps: Props): boolean {
     return (
       this.props.block !== nextProps.block ||
@@ -100,7 +102,10 @@ class DraftEditorBlock extends React.Component<Props> {
       return;
     }
 
-    const blockNode = ReactDOM.findDOMNode(this);
+    const blockNode = this._node;
+    if (blockNode == null) {
+      return;
+    }
     const scrollParent = Style.getScrollParent(blockNode);
     const scrollPosition = getScrollPosition(scrollParent);
     let scrollDelta;
@@ -227,7 +232,10 @@ class DraftEditorBlock extends React.Component<Props> {
     });
 
     return (
-      <div data-offset-key={offsetKey} className={className}>
+      <div
+        data-offset-key={offsetKey}
+        className={className}
+        ref={ref => (this._node = ref)}>
         {this._renderChildren()}
       </div>
     );

src/component/contents/DraftEditorLeaf.react.js

@@ -17,7 +17,6 @@ import type SelectionState from 'SelectionState';
 
 const DraftEditorTextNode = require('DraftEditorTextNode.react');
 const React = require('React');
-const ReactDOM = require('ReactDOM');
 
 const invariant = require('invariant');
 const setDraftEditorSelection = require('setDraftEditorSelection');
@@ -94,18 +93,15 @@ class DraftEditorLeaf extends React.Component<Props> {
     // Determine the appropriate target node for selection. If the child
     // is not a text node, it is a <br /> spacer. In this case, use the
     // <span> itself as the selection target.
-    const node = ReactDOM.findDOMNode(this);
+    const node = this.leaf;
     invariant(node, 'Missing node');
     const child = node.firstChild;
     invariant(child, 'Missing child');
     let targetNode;
 
     if (child.nodeType === Node.TEXT_NODE) {
       targetNode = child;
-      /* $FlowFixMe(>=0.79.1 site=www) This comment suppresses an error found
-     * when Flow v0.79 was deployed. To see the error delete this comment and
-     * run Flow. */
-    } else if (child.tagName === 'BR') {
+    } else if (child instanceof Element && child.tagName === 'BR') {
       targetNode = node;
     } else {
       targetNode = child.firstChild;
@@ -116,7 +112,7 @@ class DraftEditorLeaf extends React.Component<Props> {
   }
 
   shouldComponentUpdate(nextProps: Props): boolean {
-    const leafNode = ReactDOM.findDOMNode(this.leaf);
+    const leafNode = this.leaf;
     invariant(leafNode, 'Missing leafNode');
     const shouldUpdate =
       leafNode.textContent !== nextProps.text ||

src/component/contents/DraftEditorTextNode.react.js

@@ -12,7 +12,6 @@
 'use strict';
 
 const React = require('React');
-const ReactDOM = require('ReactDOM');
 const UserAgent = require('UserAgent');
 
 const invariant = require('invariant');
@@ -39,21 +38,23 @@ function isNewline(node: Element): boolean {
  * See http://jsfiddle.net/9khdavod/ for the failure case, and
  * http://jsfiddle.net/7pg143f7/ for the fixed case.
  */
-const NEWLINE_A = useNewlineChar ? (
-  <span key="A" data-text="true">
-    {'\n'}
-  </span>
-) : (
-  <br key="A" data-text="true" />
-);
+const NEWLINE_A = ref =>
+  useNewlineChar ? (
+    <span key="A" data-text="true" ref={ref}>
+      {'\n'}
+    </span>
+  ) : (
+    <br key="A" data-text="true" ref={ref} />
+  );
 
-const NEWLINE_B = useNewlineChar ? (
-  <span key="B" data-text="true">
-    {'\n'}
-  </span>
-) : (
-  <br key="B" data-text="true" />
-);
+const NEWLINE_B = ref =>
+  useNewlineChar ? (
+    <span key="B" data-text="true" ref={ref}>
+      {'\n'}
+    </span>
+  ) : (
+    <br key="B" data-text="true" ref={ref} />
+  );
 
 type Props = {
   children: string,
@@ -68,6 +69,7 @@ type Props = {
  */
 class DraftEditorTextNode extends React.Component<Props> {
   _forceFlag: boolean;
+  _node: ?(HTMLSpanElement | HTMLBRElement);
 
   constructor(props: Props) {
     super(props);
@@ -77,7 +79,7 @@ class DraftEditorTextNode extends React.Component<Props> {
   }
 
   shouldComponentUpdate(nextProps: Props): boolean {
-    const node = ReactDOM.findDOMNode(this);
+    const node = this._node;
     const shouldBeNewline = nextProps.children === '';
     invariant(node instanceof Element, 'node is not an Element');
     if (shouldBeNewline) {
@@ -96,10 +98,15 @@ class DraftEditorTextNode extends React.Component<Props> {
 
   render(): React.Node {
     if (this.props.children === '') {
-      return this._forceFlag ? NEWLINE_A : NEWLINE_B;
+      return this._forceFlag
+        ? NEWLINE_A(ref => (this._node = ref))
+        : NEWLINE_B(ref => (this._node = ref));
     }
     return (
-      <span key={this._forceFlag ? 'A' : 'B'} data-text="true">
+      <span
+        key={this._forceFlag ? 'A' : 'B'}
+        data-text="true"
+        ref={ref => (this._node = ref)}>
         {this.props.children}
       </span>
     );