From 0dd3978104fea042e6cc01f00b62e5bbef764c0c Mon Sep 17 00:00:00 2001
From: Sebastian Markbage <sema@fb.com>
Date: Fri, 24 Jan 2020 17:11:43 -0800
Subject: [PATCH] Remove findDOMNode from DraftEditorBlockNode

Summary:
This is part of DraftEditorContentsExperimental which is not actually rolled out anywhere.

It's only used on some test pages for specific users:

https://our.intern.facebook.com/intern/gatekeeper/projects/draft_tree_data_support/

I don't know if we have plans of actually rolling this out further. So I'll give it a benefit of a doubt that maybe we'll want to get back to it.

We have to 100% get rid of findDOMNode uses in React though and this is technically reachable from Comet if the GK turns on. So I have to fix it or remove it.

This diff fixes it by attaching a ref to the wrapper element created by blocks.

However, if this is rendered in a parent a wrapper is not created.

https://github.com/facebook/draft-js/blob/bafe30ab702c10b463fc7ee60bc2d6d9d4f7aef3/src/component/contents/exploration/DraftEditorBlockNode.react.js#L370

The non-experimental version uses a permanent wrapper div for this (D14716519):

https://github.com/facebook/draft-js/blob/dceddf552006ea607bc5c15ce3d1b629eca1cb70/src/component/contents/DraftEditorBlock.react.js#L241

However, I'm not sure how you can even create a nested custom block and if scrolling is even relevant in that case. So my fix disables the auto-scrolling in that edge case. Seems good enough to me given that nobody is currently using this. I defer to the Draft.js team for a more permanent fix if we're rolling this out further.

Reviewed By: gaearon

Differential Revision: D19564783

fbshipit-source-id: f8250133334824f130a4214999a4768f39d49f4b
---
 .../exploration/DraftEditorBlockNode.react.js       | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/component/contents/exploration/DraftEditorBlockNode.react.js b/src/component/contents/exploration/DraftEditorBlockNode.react.js
index 817e53fcd5..0c162815b5 100644
--- a/src/component/contents/exploration/DraftEditorBlockNode.react.js
+++ b/src/component/contents/exploration/DraftEditorBlockNode.react.js
@@ -28,7 +28,6 @@ import type {BidiDirection} from 'UnicodeBidiDirection';
 const DraftEditorNode = require('DraftEditorNode.react');
 const DraftOffsetKey = require('DraftOffsetKey');
 const React = require('React');
-const ReactDOM = require('ReactDOM');
 const Scroll = require('Scroll');
 const Style = require('Style');
 
@@ -177,12 +176,14 @@ const getElementPropsConfig = (
   offsetKey: string,
   blockStyleFn: BlockStyleFn,
   customConfig: *,
+  ref: null | {|current: null | Element|},
 ): Object => {
   let elementProps: Object = {
     'data-block': true,
     'data-editor': editorKey,
     'data-offset-key': offsetKey,
     key: block.getKey(),
+    ref,
   };
   const customClass = blockStyleFn(block);
 
@@ -202,6 +203,8 @@ const getElementPropsConfig = (
 };
 
 class DraftEditorBlockNode extends React.Component<Props> {
+  wrapperRef: {|current: null | Element|} = React.createRef<Element>();
+
   shouldComponentUpdate(nextProps: Props): boolean {
     const {block, direction, tree} = this.props;
     const isContainerNode = !block.getChildKeys().isEmpty();
@@ -236,7 +239,11 @@ class DraftEditorBlockNode extends React.Component<Props> {
       return;
     }
 
-    const blockNode = ReactDOM.findDOMNode(this);
+    const blockNode = this.wrapperRef.current;
+    if (!blockNode) {
+      // This Block Node was rendered without a wrapper element.
+      return;
+    }
     const scrollParent = Style.getScrollParent(blockNode);
     const scrollPosition = getScrollPosition(scrollParent);
     let scrollDelta;
@@ -303,6 +310,7 @@ class DraftEditorBlockNode extends React.Component<Props> {
           offsetKey,
           blockStyleFn,
           customConfig,
+          null,
         );
         const childProps = {
           ...this.props,
@@ -377,6 +385,7 @@ class DraftEditorBlockNode extends React.Component<Props> {
       offsetKey,
       blockStyleFn,
       customConfig,
+      this.wrapperRef,
     );
 
     // root block nodes needs to be wrapped