Update lint rules, flow version, and inline documentation

.eslintignore

@@ -5,5 +5,6 @@ node_modules/
 website/
 gulpfile.js
 scripts/module-map.js
+scripts/jest/preprocessor.js
 examples/draft-0-10-0/universal/static/bundle.js
 examples/draft-0-9-1/universal/static/bundle.js

.eslintrc.js

@@ -7,6 +7,11 @@
  * of patent rights can be found in the PATENTS file in the same directory.
  */
 
+ const variableNamePattern = String.raw`\s*[a-zA-Z_$][a-zA-Z_$\d]*\s*`;
+ const maxLenIgnorePattern = String.raw`^(?:var|let|const|import type)\s+` +
+   '{?' + variableNamePattern + '(?:,' + variableNamePattern + ')*}?' +
+   String.raw`\s*(?:=\s*require\(|from)[a-zA-Z_+./"'\s\d\-]+\)?[^;\n]*[;\n]`;
+
 module.exports = {
   extends: 'fbjs/strict',
   rules: {
@@ -17,5 +22,9 @@ module.exports = {
       exports: 'always-multiline',
       functions: 'always-multiline',
     }],
+    'max-len': [2, 80, 2, {
+      'ignorePattern': maxLenIgnorePattern,
+      'ignoreUrls': true,
+    }],
   },
 };

examples/draft-0-10-0/tex/js/components/TeXBlock.js

@@ -92,7 +92,10 @@ export default class TeXBlock extends React.Component {
 
     this._save = () => {
       var entityKey = this.props.block.getEntityAt(0);
-      var newContentState = this.props.contentState.mergeEntityData(entityKey, {content: this.state.texValue});
+      var newContentState = this.props.contentState.mergeEntityData(
+        entityKey,
+        {content: this.state.texValue},
+      );
       this.setState({
         invalidTeX: false,
         editMode: false,
@@ -107,7 +110,10 @@ export default class TeXBlock extends React.Component {
       this.props.blockProps.onStartEdit(this.props.block.getKey());
     };
     this._finishEdit = (newContentState) => {
-      this.props.blockProps.onFinishEdit(this.props.block.getKey(), newContentState);
+      this.props.blockProps.onFinishEdit(
+        this.props.block.getKey(),
+        newContentState,
+      );
     };
   }
 

examples/draft-0-10-0/universal/editor.js

@@ -18,13 +18,22 @@ class SimpleEditor extends React.Component {
   constructor(props) {
     super(props);
 
-    this.state = {editorState: Draft.EditorState.createWithContent(emptyContentState)};
+    this.state = {
+      editorState: Draft.EditorState.createWithContent(emptyContentState),
+    };
     this.onChange = (editorState) => this.setState({editorState});
   }
   render() {
     const Editor = Draft.Editor;
     const editorState = this.state.editorState;
-    return <Editor placeholder="heyyyyy" editorKey="foobaz" editorState={editorState} onChange={this.onChange} />;
+    return (
+      <Editor
+        placeholder="heyyyyy"
+        editorKey="foobaz"
+        editorState={editorState}
+        onChange={this.onChange}
+      />
+    );
   }
 }
 module.exports = {

examples/draft-0-9-1/universal/editor.js

@@ -18,13 +18,22 @@ class SimpleEditor extends React.Component {
   constructor(props) {
     super(props);
 
-    this.state = {editorState: Draft.EditorState.createWithContent(emptyContentState)};
+    this.state = {
+      editorState: Draft.EditorState.createWithContent(emptyContentState),
+    };
     this.onChange = (editorState) => this.setState({editorState});
   }
   render() {
     const Editor = Draft.Editor;
     const editorState = this.state.editorState;
-    return <Editor placeholder="heyyyyy" editorKey="foobaz" editorState={editorState} onChange={this.onChange} />;
+    return (
+      <Editor
+        placeholder="heyyyyy"
+        editorKey="foobaz"
+        editorState={editorState}
+        onChange={this.onChange}
+      />
+    );
   }
 }
 module.exports = {

package.json

@@ -51,7 +51,7 @@
     "eslint-plugin-flowtype": "^2.17.1",
     "eslint-plugin-react": "^5.2.2",
     "fbjs-scripts": "^0.7.0",
-    "flow-bin": "^0.38.0",
+    "flow-bin": "^0.42.0",
     "gulp": "^3.9.0",
     "gulp-babel": "^6.1.2",
     "gulp-browserify-thin": "^0.1.5",

scripts/jest/preprocessor.js

@@ -25,9 +25,34 @@ module.exports = {
 
   getCacheKey: createCacheKeyFunction([
     __filename,
-    path.join(__dirname, '..', '..', 'node_modules', 'fbjs', 'package.json'),
-    path.join(__dirname, '..', '..', 'node_modules', 'fbjs-scripts', 'package.json'),
-    path.join(__dirname, '..', '..', 'node_modules', 'babel-preset-fbjs', 'package.json'),
-    path.join(__dirname, '..', 'module-map.js'),
+    path.join(
+      __dirname,
+      '..',
+      '..',
+      'node_modules',
+      'fbjs',
+      'package.json'
+    ),
+    path.join(
+      __dirname,
+      '..',
+      '..',
+      'node_modules',
+      'fbjs-scripts',
+      'package.json'
+    ),
+    path.join(
+      __dirname,
+      '..',
+      '..',
+      'node_modules',
+      'babel-preset-fbjs',
+      'package.json'
+    ),
+    path.join(
+      __dirname,
+      '..',
+      'module-map.js'
+    ),
   ]),
 };

src/.flowconfig

@@ -22,4 +22,4 @@ module.name_mapper='ReactDOM' -> 'react-dom'
 module.name_mapper='setImmediate' -> 'fbjs/lib/setImmediate'
 
 [version]
-0.38.0
+^0.42.0

src/component/base/DraftEditor.react.js

@@ -14,13 +14,19 @@
 
 'use strict';
 
+import type {BlockMap} from 'BlockMap';
+import type {DraftEditorDefaultProps, DraftEditorProps} from 'DraftEditorProps';
+import type {DraftEditorModes} from 'DraftEditorModes';
+import type {DraftScrollPosition} from 'DraftScrollPosition';
+
 const DefaultDraftBlockRenderMap = require('DefaultDraftBlockRenderMap');
 const DefaultDraftInlineStyle = require('DefaultDraftInlineStyle');
 const DraftEditorCompositionHandler = require('DraftEditorCompositionHandler');
 const DraftEditorContents = require('DraftEditorContents.react');
 const DraftEditorDragHandler = require('DraftEditorDragHandler');
 const DraftEditorEditHandler = require('DraftEditorEditHandler');
 const DraftEditorPlaceholder = require('DraftEditorPlaceholder.react');
+
 const EditorState = require('EditorState');
 const React = require('React');
 const ReactDOM = require('ReactDOM');
@@ -32,13 +38,10 @@ const cx = require('cx');
 const emptyFunction = require('emptyFunction');
 const generateRandomKey = require('generateRandomKey');
 const getDefaultKeyBinding = require('getDefaultKeyBinding');
-const nullthrows = require('nullthrows');
-const getScrollPosition = require('getScrollPosition');
 
-import type {BlockMap} from 'BlockMap';
-import type {DraftEditorModes} from 'DraftEditorModes';
-import type {DraftEditorProps, DraftEditorDefaultProps} from 'DraftEditorProps';
-import type {DraftScrollPosition} from 'DraftScrollPosition';
+const getScrollPosition = require('getScrollPosition');
+const invariant = require('invariant');
+const nullthrows = require('nullthrows');
 
 const isIE = UserAgent.isBrowser('IE');
 
@@ -344,6 +347,11 @@ class DraftEditor extends React.Component {
     const scrollParent = Style.getScrollParent(editorNode);
     const {x, y} = scrollPosition || getScrollPosition(scrollParent);
 
+    invariant(editorNode, 'Missing editorNode');
+    invariant(
+      editorNode instanceof HTMLElement,
+      'editorNode is not an HTMLElement',
+    );
     editorNode.focus();
     if (scrollParent === window) {
       window.scrollTo(x, y);
@@ -366,7 +374,13 @@ class DraftEditor extends React.Component {
   }
 
   _blur(): void {
-    ReactDOM.findDOMNode(this.refs.editor).blur();
+    const editorNode = ReactDOM.findDOMNode(this.refs.editor);
+    invariant(editorNode, 'Missing editorNode');
+    invariant(
+      editorNode instanceof HTMLElement,
+      'editorNode is not an HTMLElement',
+    );
+    editorNode.blur();
   }
 
   /**

src/component/base/DraftEditorProps.js

@@ -58,7 +58,7 @@ export type DraftEditorProps = {
 
   // For a given `ContentBlock` object, return an object that specifies
   // a custom block component and/or props. If no object is returned,
-  // the default `TextEditorBlock` is used.
+  // the default `DraftEditorBlock` is used.
   blockRendererFn?: (block: ContentBlock) => ?Object,
 
   // Function that returns a cx map corresponding to block-level styles.

src/component/contents/DraftEditorBlock.react.js

@@ -13,14 +13,19 @@
 
 'use strict';
 
-const ContentBlock = require('ContentBlock');
-const ContentState = require('ContentState');
+import type {BidiDirection} from 'UnicodeBidiDirection';
+import type ContentBlock from 'ContentBlock';
+import type ContentState from 'ContentState';
+import type {DraftDecoratorType} from 'DraftDecoratorType';
+import type {List} from 'immutable';
+import type SelectionState from 'SelectionState';
+
 const DraftEditorLeaf = require('DraftEditorLeaf.react');
 const DraftOffsetKey = require('DraftOffsetKey');
 const React = require('React');
 const ReactDOM = require('ReactDOM');
 const Scroll = require('Scroll');
-const SelectionState = require('SelectionState');
+
 const Style = require('Style');
 const UnicodeBidi = require('UnicodeBidi');
 const UnicodeBidiDirection = require('UnicodeBidiDirection');
@@ -29,12 +34,9 @@ const cx = require('cx');
 const getElementPosition = require('getElementPosition');
 const getScrollPosition = require('getScrollPosition');
 const getViewportDimensions = require('getViewportDimensions');
+const invariant = require('invariant');
 const nullthrows = require('nullthrows');
 
-import type {BidiDirection} from 'UnicodeBidiDirection';
-import type {DraftDecoratorType} from 'DraftDecoratorType';
-import type {List} from 'immutable';
-
 const SCROLL_BUFFER = 10;
 
 type Props = {
@@ -110,6 +112,11 @@ class DraftEditorBlock extends React.Component {
         );
       }
     } else {
+      invariant(blockNode, 'Missing blockNode');
+      invariant(
+        blockNode instanceof HTMLElement,
+        'blockNode is not an HTMLElement',
+      );
       var blockBottom = blockNode.offsetHeight + blockNode.offsetTop;
       var scrollBottom = scrollParent.offsetHeight + scrollPosition.y;
       scrollDelta = blockBottom - scrollBottom;

src/component/contents/DraftEditorLeaf.react.js

@@ -13,16 +13,17 @@
 
 'use strict';
 
+import type {DraftInlineStyle} from 'DraftInlineStyle';
+import type SelectionState from 'SelectionState';
+
 var ContentBlock = require('ContentBlock');
-var DraftEditorTextNode = require('DraftEditorTextNode.react');
+const DraftEditorTextNode = require('DraftEditorTextNode.react');
 var React = require('React');
 var ReactDOM = require('ReactDOM');
-var SelectionState = require('SelectionState');
 
+const invariant = require('invariant');
 var setDraftEditorSelection = require('setDraftEditorSelection');
 
-import type {DraftInlineStyle} from 'DraftInlineStyle';
-
 type Props = {
   // The block that contains this leaf.
   block: ContentBlock,
@@ -41,7 +42,8 @@ type Props = {
 
   offsetKey: string,
 
-  // The current `SelectionState`, used to
+  // The current `SelectionState`, used to represent a selection range in the
+  // editor
   selection: SelectionState,
 
   // The offset of this string within its block.
@@ -70,7 +72,7 @@ class DraftEditorLeaf extends React.Component {
    * easily than we could in the non-React world.
    *
    * Note that this depends on our maintaining tight control over the
-   * DOM structure of the TextEditor component. If leaves had multiple
+   * DOM structure of the DraftEditor component. If leaves had multiple
    * text nodes, this would be harder.
    */
   _setSelection(): void {
@@ -92,7 +94,9 @@ class DraftEditorLeaf extends React.Component {
     // 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);
+    invariant(node, 'Missing node');
     const child = node.firstChild;
+    invariant(child, 'Missing child');
     let targetNode;
 
     if (child.nodeType === Node.TEXT_NODE) {
@@ -101,14 +105,17 @@ class DraftEditorLeaf extends React.Component {
       targetNode = node;
     } else {
       targetNode = child.firstChild;
+      invariant(targetNode, 'Missing targetNode');
     }
 
     setDraftEditorSelection(selection, targetNode, blockKey, start, end);
   }
 
   shouldComponentUpdate(nextProps: Props): boolean {
+    const leafNode = ReactDOM.findDOMNode(this.refs.leaf);
+    invariant(leafNode, 'Missing leafNode');
     return (
-      ReactDOM.findDOMNode(this.refs.leaf).textContent !== nextProps.text ||
+      leafNode.textContent !== nextProps.text ||
       nextProps.styleSet !== this.props.styleSet ||
       nextProps.forceSelection
     );

src/component/contents/DraftEditorTextNode.react.js

@@ -17,6 +17,8 @@ const React = require('React');
 const ReactDOM = require('ReactDOM');
 const UserAgent = require('UserAgent');
 
+const invariant = require('invariant');
+
 // In IE, spans with <br> tags render as two newlines. By rendering a span
 // with only a newline character, we can be sure to render a single line.
 const useNewlineChar = UserAgent.isBrowser('IE <= 11');
@@ -69,6 +71,8 @@ class DraftEditorTextNode extends React.Component {
   shouldComponentUpdate(nextProps: Props): boolean {
     const node = ReactDOM.findDOMNode(this);
     const shouldBeNewline = nextProps.children === '';
+    invariant(node, 'Missing node');
+    invariant(node instanceof Element, 'node is not an Element');
     if (shouldBeNewline) {
       return !isNewline(node);
     }

src/component/handlers/drag/DraftEditorDragHandler.js

@@ -100,7 +100,7 @@ var DraftEditorDragHandler = {
         fileText && editor.update(
           insertTextAtSelection(
             editorState,
-            nullthrows(dropSelection), // flow wtf
+            dropSelection,
             fileText,
           ),
         );