diff --git a/src/component/base/DraftEditor.react.js b/src/component/base/DraftEditor.react.js index 6cd686977b..c4cbad4da2 100644 --- a/src/component/base/DraftEditor.react.js +++ b/src/component/base/DraftEditor.react.js @@ -467,7 +467,7 @@ class DraftEditor extends React.Component { ): 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 { }; blur: () => void = (): void => { - const editorNode = ReactDOM.findDOMNode(this.editor); + const editorNode = this.editor; invariant( editorNode instanceof HTMLElement, 'editorNode is not an HTMLElement', diff --git a/src/component/contents/DraftEditorBlock.react.js b/src/component/contents/DraftEditorBlock.react.js index d78aa7003d..6c61cb5b30 100644 --- a/src/component/contents/DraftEditorBlock.react.js +++ b/src/component/contents/DraftEditorBlock.react.js @@ -71,6 +71,8 @@ const isBlockOnSelectionEdge = ( * appropriate decorator and inline style components. */ class DraftEditorBlock extends React.Component { + _node: ?HTMLDivElement; + shouldComponentUpdate(nextProps: Props): boolean { return ( this.props.block !== nextProps.block || @@ -100,7 +102,10 @@ class DraftEditorBlock extends React.Component { 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 { }); return ( -
+
(this._node = ref)}> {this._renderChildren()}
); diff --git a/src/component/contents/DraftEditorLeaf.react.js b/src/component/contents/DraftEditorLeaf.react.js index a2f29e66fd..61dcf82620 100644 --- a/src/component/contents/DraftEditorLeaf.react.js +++ b/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,7 +93,7 @@ class DraftEditorLeaf extends React.Component { // Determine the appropriate target node for selection. If the child // is not a text node, it is a
spacer. In this case, use the // 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'); @@ -102,10 +101,7 @@ class DraftEditorLeaf extends React.Component { 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 { } shouldComponentUpdate(nextProps: Props): boolean { - const leafNode = ReactDOM.findDOMNode(this.leaf); + const leafNode = this.leaf; invariant(leafNode, 'Missing leafNode'); const shouldUpdate = leafNode.textContent !== nextProps.text || diff --git a/src/component/contents/DraftEditorTextNode.react.js b/src/component/contents/DraftEditorTextNode.react.js index c5a3f2d897..918aa785af 100644 --- a/src/component/contents/DraftEditorTextNode.react.js +++ b/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 ? ( - - {'\n'} - -) : ( -
-); +const NEWLINE_A = ref => + useNewlineChar ? ( + + {'\n'} + + ) : ( +
+ ); -const NEWLINE_B = useNewlineChar ? ( - - {'\n'} - -) : ( -
-); +const NEWLINE_B = ref => + useNewlineChar ? ( + + {'\n'} + + ) : ( +
+ ); type Props = { children: string, @@ -68,6 +69,7 @@ type Props = { */ class DraftEditorTextNode extends React.Component { _forceFlag: boolean; + _node: ?(HTMLSpanElement | HTMLBRElement); constructor(props: Props) { super(props); @@ -77,7 +79,7 @@ class DraftEditorTextNode extends React.Component { } 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 { 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 ( - + (this._node = ref)}> {this.props.children} );