support editorKey prop on <Editor />

allows callers of <Editor /> to pass a custom `editorKey` to a draft
instance. This fixes universal rendering mismatches between client and
the server.

Instead of generating a random key when the component initializes, it
waits for a custom one. If one is not passed, its key is empty until it
renders and then it receives a random one when mounted if one was not
passed in as a prop.

src/component/base/DraftEditor.react.js

@@ -58,6 +58,7 @@ const handlerMap = {
 
 type State = {
   containerKey: number,
+  editorKey: string,
 };
 
 /**
@@ -84,7 +85,7 @@ class DraftEditor extends React.Component {
   _handler: ?Object;
   _dragCount: number;
   _editorKey: string;
-  _placeholderAccessibilityID: string;
+  _placeholderAccessibilityPrefix: string;
   _latestEditorState: EditorState;
 
   /**
@@ -119,6 +120,7 @@ class DraftEditor extends React.Component {
   setClipboard: (clipboard?: BlockMap) => void;
   getClipboard: () => ?BlockMap;
   getEditorKey: () => string;
+  getAccessibilityId: () => string;
   update: (editorState: EditorState) => void;
   onDragEnter: () => void;
   onDragLeave: () => void;
@@ -130,8 +132,8 @@ class DraftEditor extends React.Component {
     this._clipboard = null;
     this._handler = null;
     this._dragCount = 0;
-    this._editorKey = generateRandomKey();
-    this._placeholderAccessibilityID = 'placeholder-' + this._editorKey;
+
+    this._placeholderAccessibilityPrefix = 'placeholder-';
     this._latestEditorState = props.editorState;
 
     this._onBeforeInput = this._buildHandler('onBeforeInput');
@@ -163,13 +165,17 @@ class DraftEditor extends React.Component {
     this.restoreEditorDOM = this._restoreEditorDOM.bind(this);
     this.setClipboard = this._setClipboard.bind(this);
     this.getClipboard = this._getClipboard.bind(this);
-    this.getEditorKey = () => this._editorKey;
+    this.getEditorKey = () => this.state.editorKey || this.state.editorKey;
+    this.getAccessibilityId = () => this._placeholderAccessibilityPrefix + this.state.editorKey;
     this.update = this._update.bind(this);
     this.onDragEnter = this._onDragEnter.bind(this);
     this.onDragLeave = this._onDragLeave.bind(this);
 
     // See `_restoreEditorDOM()`.
-    this.state = {containerKey: 0};
+    this.state = {
+      containerKey: 0,
+      editorKey: props.editorKey || '',
+    };
   }
 
   /**
@@ -201,7 +207,7 @@ class DraftEditor extends React.Component {
           text={nullthrows(this.props.placeholder)}
           editorState={this.props.editorState}
           textAlignment={this.props.textAlignment}
-          accessibilityID={this._placeholderAccessibilityID}
+          accessibilityID={this.getAccessibilityId()}
         />
       );
     }
@@ -236,7 +242,7 @@ class DraftEditor extends React.Component {
             }
             aria-autocomplete={readOnly ? null : this.props.ariaAutoComplete}
             aria-describedby={
-              this._showPlaceholder() ? this._placeholderAccessibilityID : null
+              this._showPlaceholder() ? this.getAccessibilityId() : null
             }
             aria-expanded={readOnly ? null : this.props.ariaExpanded}
             aria-haspopup={readOnly ? null : this.props.ariaHasPopup}
@@ -279,7 +285,7 @@ class DraftEditor extends React.Component {
                 {...DefaultDraftInlineStyle, ...this.props.customStyleMap}
               }
               customStyleFn={this.props.customStyleFn}
-              editorKey={this._editorKey}
+              editorKey={this.state.editorKey}
               editorState={this.props.editorState}
             />
           </div>
@@ -301,6 +307,7 @@ class DraftEditor extends React.Component {
     if (isIE) {
       document.execCommand('AutoUrlDetect', false, false);
     }
+    this.setState({editorKey: generateRandomKey()});
   }
 
   /**

src/component/base/DraftEditorProps.js

@@ -140,5 +140,10 @@ export type DraftEditorProps = {
   // Provide a map of block rendering configurations. Each block type maps to
   // an element tag and an optional react element wrapper. This configuration
   // is used for both rendering and paste processing.
-  blockRenderMap: DraftBlockRenderMap
+  blockRenderMap: DraftBlockRenderMap,
+
+  // Provide a custom key for this editor instance.
+  // If you have multiple draft-js instances, you should set this key so that
+  // aria-attributes will be able to uniquely identify the correct editor.
+  editorKey?: string
 };