[WIP] Moving entities into content state #185 (#376)

* Initial demo changeset for entities in content state

* lowercase string

* add entity methods to content state

* remove `DraftEntity` module

* remove some `DraftEntity` requires

* fix linting issues

* fix flow issues

* update `DraftPasteProcessor` and `convertFromHTMLtoContentBlocks` to work with passed-in `ContentState` instance

* remove last traces of `DraftEntity` module

* allow second argument for `createFromBlockArray`

* use `contentState.getEntity` instead of pulling out entity map first

* match exported function name

* re-sort requires/imports to: classes, functions, types

* respect 80 char limit

* switch from random entity key to number

* pass around `EntityMap` instance instead of `ContentState` when creating new html fragment

* set new `entityMap` when regenerating block tree during editor state update, as the "current" content does not yet contain it

* change entity key to be a numerical string to prevent enity-not-found error  when using stringified key

* fix flow errors

examples/entity/entity.html

@@ -149,14 +149,14 @@
       }
 
       function getEntityStrategy(mutability) {
-        return function(contentBlock, callback) {
+        return function(contentState, contentBlock, callback) {
           contentBlock.findEntityRanges(
             (character) => {
               const entityKey = character.getEntity();
               if (entityKey === null) {
                 return false;
               }
-              return Entity.get(entityKey).getMutability() === mutability;
+              return contentState.getEntity(entityKey).getMutability() === mutability;
             },
             callback
           );
@@ -174,7 +174,7 @@
 
       const TokenSpan = (props) => {
         const style = getDecoratedStyle(
-          Entity.get(props.entityKey).getMutability()
+          props.contentState.getEntity(props.entityKey).getMutability()
         );
         return (
           <span {...props} style={style}>

examples/link/link.html

@@ -87,11 +87,14 @@
         _confirmLink(e) {
           e.preventDefault();
           const {editorState, urlValue} = this.state;
-          const entityKey = Entity.create('LINK', 'MUTABLE', {url: urlValue});
+          const contentState = editorState.getCurrentContent();
+          const contentStateWithEntity = Entity.create(contentState, 'LINK', 'MUTABLE', {url: urlValue});
+          const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
+          const newEditorState = EditorState.set(editorState, { currentContent: contentStateWithEntity });
           this.setState({
             editorState: RichUtils.toggleLink(
-              editorState,
-              editorState.getSelection(),
+              newEditorState,
+              newEditorState.getSelection(),
               entityKey
             ),
             showURLInput: false,
@@ -173,21 +176,21 @@
         }
       }
 
-      function findLinkEntities(contentBlock, callback) {
+      function findLinkEntities(contentState, contentBlock, callback) {
         contentBlock.findEntityRanges(
           (character) => {
             const entityKey = character.getEntity();
             return (
               entityKey !== null &&
-              Entity.get(entityKey).getType() === 'LINK'
+              contentState.getEntity(entityKey).getType() === 'LINK'
             );
           },
           callback
         );
       }
 
       const Link = (props) => {
-        const {url} = Entity.get(props.entityKey).getData();
+        const {url} = props.contentState.getEntity(props.entityKey).getData();
         return (
           <a href={url} style={styles.link}>
             {props.children}

src/Draft.js

@@ -22,7 +22,6 @@ const DefaultDraftInlineStyle = require('DefaultDraftInlineStyle');
 const DraftEditor = require('DraftEditor.react');
 const DraftEditorBlock = require('DraftEditorBlock.react');
 const DraftModifier = require('DraftModifier');
-const DraftEntity = require('DraftEntity');
 const DraftEntityInstance = require('DraftEntityInstance');
 const EditorState = require('EditorState');
 const KeyBindingUtil = require('KeyBindingUtil');
@@ -43,7 +42,6 @@ const DraftPublic = {
   EditorState,
 
   CompositeDecorator: CompositeDraftDecorator,
-  Entity: DraftEntity,
   EntityInstance: DraftEntityInstance,
 
   BlockMapBuilder,

src/component/contents/DraftEditorBlock.react.js

@@ -14,6 +14,7 @@
 'use strict';
 
 const ContentBlock = require('ContentBlock');
+const ContentState = require('ContentState');
 const DraftEditorLeaf = require('DraftEditorLeaf.react');
 const DraftOffsetKey = require('DraftOffsetKey');
 const React = require('React');
@@ -37,6 +38,7 @@ import type {List} from 'immutable';
 const SCROLL_BUFFER = 10;
 
 type Props = {
+  contentState: ContentState,
   block: ContentBlock,
   customStyleMap: Object,
   customStyleFn: Function,
@@ -184,6 +186,7 @@ class DraftEditorBlock extends React.Component {
       return (
         <DecoratorComponent
           {...decoratorProps}
+          contentState={this.props.contentState}
           decoratedText={decoratedText}
           dir={dir}
           key={decoratorOffsetKey}

src/component/contents/DraftEditorContents.react.js

@@ -126,6 +126,7 @@ class DraftEditorContents extends React.Component {
       const direction = directionMap.get(key);
       const offsetKey = DraftOffsetKey.encode(key, 0, 0);
       const componentProps = {
+        contentState: content,
         block,
         blockProps: customProps,
         customStyleMap,

src/component/contents/__tests__/DraftEditorBlock.react-test.js

@@ -18,6 +18,7 @@ jest.disableAutomock()
   .mock('getScrollPosition')
   .mock('getViewportDimensions');
 
+var ContentState = require('ContentState');
 var BlockTree = require('BlockTree');
 var CharacterMetadata = require('CharacterMetadata');
 var ContentBlock = require('ContentBlock');
@@ -100,7 +101,7 @@ function getSelection() {
 function getProps(block, decorator) {
   return {
     block,
-    tree: BlockTree.generate(block, decorator),
+    tree: BlockTree.generate(ContentState.createFromText(''), block, decorator),
     selection: getSelection(),
     decorator: decorator || null,
     forceSelection: false,
@@ -249,7 +250,11 @@ describe('DraftEditorBlock.react', () => {
       );
       var decorator = new Decorator();
 
-      var newTree = BlockTree.generate(helloBlock, decorator);
+      var newTree = BlockTree.generate(
+        ContentState.createFromText(helloBlock.getText()),
+        helloBlock,
+        decorator
+      );
       var nextProps = {...props, tree: newTree, decorator};
 
       expect(props.tree).not.toBe(nextProps.tree);

src/component/handlers/edit/editOnInput.js

@@ -15,7 +15,6 @@
 var DraftModifier = require('DraftModifier');
 var DraftOffsetKey = require('DraftOffsetKey');
 var EditorState = require('EditorState');
-var Entity = require('DraftEntity');
 var UserAgent = require('UserAgent');
 
 var findAncestorOffsetKey = require('findAncestorOffsetKey');
@@ -81,7 +80,7 @@ function editOnInput(): void {
   });
 
   const entityKey = block.getEntityAt(start);
-  const entity = entityKey && Entity.get(entityKey);
+  const entity = entityKey && content.getEntity(entityKey);
   const entityType = entity && entity.getMutability();
   const preserveEntity = entityType === 'MUTABLE';
 

src/component/handlers/edit/editOnPaste.js

@@ -21,11 +21,11 @@ var EditorState = require('EditorState');
 
 var getEntityKeyForSelection = require('getEntityKeyForSelection');
 var getTextContentFromFiles = require('getTextContentFromFiles');
+const isEventHandled = require('isEventHandled');
 var splitTextIntoTextBlocks = require('splitTextIntoTextBlocks');
 
 import type {BlockMap} from 'BlockMap';
-const isEventHandled = require('isEventHandled');
-
+import type {EntityMap} from 'EntityMap';
 /**
  * Paste content.
  */
@@ -150,9 +150,14 @@ function editOnPaste(e: SyntheticClipboardEvent): void {
         this.props.blockRenderMap
       );
       if (htmlFragment) {
-        var htmlMap = BlockMapBuilder.createFromArray(htmlFragment);
-        this.update(insertFragment(this.props.editorState, htmlMap));
-        return;
+        const { contentBlocks, entityMap } = htmlFragment;
+        if (contentBlocks) {
+          var htmlMap = BlockMapBuilder.createFromArray(contentBlocks);
+          this.update(
+            insertFragment(this.props.editorState, htmlMap, entityMap)
+          );
+          return;
+        }
       }
     }
 
@@ -183,16 +188,19 @@ function editOnPaste(e: SyntheticClipboardEvent): void {
 
 function insertFragment(
   editorState: EditorState,
-  fragment: BlockMap
+  fragment: BlockMap,
+  entityMap: ?EntityMap,
 ): EditorState {
   var newContent = DraftModifier.replaceWithFragment(
     editorState.getCurrentContent(),
     editorState.getSelection(),
     fragment
   );
+  const mergedEntityMap = newContent.getEntityMap().merge(entityMap);
+
   return EditorState.push(
     editorState,
-    newContent,
+    newContent.set('entityMap', mergedEntityMap),
     'insert-fragment'
   );
 }

src/model/decorators/CompositeDraftDecorator.js

@@ -17,6 +17,7 @@ var Immutable = require('immutable');
 
 import type ContentBlock from 'ContentBlock';
 import type {DraftDecorator} from 'DraftDecorator';
+import type ContentState from 'ContentState';
 
 var {List} = Immutable;
 
@@ -51,14 +52,14 @@ class CompositeDraftDecorator {
     this._decorators = decorators.slice();
   }
 
-  getDecorations(block: ContentBlock): List<?string> {
+  getDecorations(contentState: ContentState, block: ContentBlock): List<?string> {
     var decorations = Array(block.getText().length).fill(null);
 
     this._decorators.forEach(
       (/*object*/ decorator, /*number*/ ii) => {
         var counter = 0;
         var strategy = decorator.strategy;
-        strategy(block, (/*number*/ start, /*number*/ end) => {
+        strategy(contentState, block, (/*number*/ start, /*number*/ end) => {
           // Find out if any of our matching range is already occupied
           // by another decorator. If so, discard the match. Otherwise, store
           // the component key for rendering.

src/model/decorators/DraftDecorator.js

@@ -13,6 +13,7 @@
 'use strict';
 
 import type ContentBlock from 'ContentBlock';
+import type ContentState from 'ContentState';
 
 /**
  * A DraftDecorator is a strategy-component pair intended for use when
@@ -31,6 +32,7 @@ import type ContentBlock from 'ContentBlock';
  */
 export type DraftDecorator = {
   strategy: (
+    contentState: ContentState,
     block: ContentBlock,
     callback: (start: number, end: number) => void
   ) => void,

src/model/decorators/DraftDecoratorType.js

@@ -13,6 +13,7 @@
 'use strict';
 
 import type ContentBlock from 'ContentBlock';
+import type ContentState from 'ContentState';
 import type {List} from 'immutable';
 
 /**
@@ -25,7 +26,7 @@ export type DraftDecoratorType = {
   /**
    * Given a `ContentBlock`, return an immutable List of decorator keys.
    */
-  getDecorations(block: ContentBlock): List<?string>,
+  getDecorations(contentState: ContentState, block: ContentBlock): List<?string>,
 
   /**
    * Given a decorator key, return the component to use when rendering

src/model/decorators/__tests__/CompositeDraftDecorator-test.js

@@ -13,6 +13,7 @@
 jest.unmock('CompositeDraftDecorator');
 
 var CompositeDraftDecorator = require('CompositeDraftDecorator');
+const ContentState = require('ContentState');
 
 describe('CompositeDraftDecorator', () => {
   class ContentBlock {
@@ -25,7 +26,7 @@ describe('CompositeDraftDecorator', () => {
   }
 
   function searchWith(regex) {
-    return function(block, callback) {
+    return function(contentState, block, callback) {
       var text = block.getText();
       text.replace(
         regex,
@@ -81,7 +82,8 @@ describe('CompositeDraftDecorator', () => {
     var composite = getCompositeDecorator();
     var text = 'take a sad song and make it better';
     var content = new ContentBlock(text);
-    var decorations = composite.getDecorations(content).toArray();
+    var contentState = ContentState.createFromText(text);
+    var decorations = composite.getDecorations(contentState, content).toArray();
     expect(decorations.length).toBe(text.length);
     expect(decorations).toEqual(Array(text.length).fill(null));
   });
@@ -90,7 +92,8 @@ describe('CompositeDraftDecorator', () => {
     var composite = getCompositeDecorator();
     var text = 'a footballing fool';
     var content = new ContentBlock(text);
-    var decorations = composite.getDecorations(content).toArray();
+    var contentState = ContentState.createFromText(text);
+    var decorations = composite.getDecorations(contentState, content).toArray();
     expect(decorations.length).toBe(text.length);
 
     expect(isOccupied(decorations.slice(2, 5))).toBe(true);
@@ -108,7 +111,8 @@ describe('CompositeDraftDecorator', () => {
     var composite = getCompositeDecorator();
     var text = 'a foosball bar';
     var content = new ContentBlock(text);
-    var decorations = composite.getDecorations(content).toArray();
+    var contentState = ContentState.createFromText(text);
+    var decorations = composite.getDecorations(contentState, content).toArray();
 
     // Match the "Foo" decorator.
     expect(isOccupied(decorations.slice(2, 5))).toBe(true);
@@ -129,7 +133,8 @@ describe('CompositeDraftDecorator', () => {
     var composite = getCompositeDecorator();
     var text = 'some bar food';
     var content = new ContentBlock(text);
-    var decorations = composite.getDecorations(content).toArray();
+    var contentState = ContentState.createFromText(text);
+    var decorations = composite.getDecorations(contentState, content).toArray();
 
     // Match the "Foo" decorator.
     expect(isOccupied(decorations.slice(9, 12))).toBe(true);
@@ -148,7 +153,8 @@ describe('CompositeDraftDecorator', () => {
 
     var text = 'bart has a bar';
     var content = new ContentBlock(text);
-    var decorations = composite.getDecorations(content).toArray();
+    var contentState = ContentState.createFromText(text);
+    var decorations = composite.getDecorations(contentState, content).toArray();
 
     // Even though "bart" matches our "bar" strategy, "bart" comes first
     // in our decoration order and will claim those letters first.
@@ -172,7 +178,8 @@ describe('CompositeDraftDecorator', () => {
 
     var text = 'bart has a bar';
     var content = new ContentBlock(text);
-    var decorations = composite.getDecorations(content).toArray();
+    var contentState = ContentState.createFromText(text);
+    var decorations = composite.getDecorations(contentState, content).toArray();
 
     // "bar" comes first and claims two strings.
     expect(isOccupied(decorations.slice(0, 3))).toBe(true);
@@ -194,7 +201,8 @@ describe('CompositeDraftDecorator', () => {
 
     var text = 'barbarbar';
     var content = new ContentBlock(text);
-    var decorations = composite.getDecorations(content).toArray();
+    var contentState = ContentState.createFromText(text);
+    var decorations = composite.getDecorations(contentState, content).toArray();
 
     expect(isOccupied(decorations.slice(0, 3))).toBe(true);
     expect(decorations[0]).toEqual(decorations[2]);

src/model/encoding/convertFromDraftStateToRaw.js

@@ -12,7 +12,6 @@
 
 'use strict';
 
-var DraftEntity = require('DraftEntity');
 var DraftStringKey = require('DraftStringKey');
 
 var encodeEntityRanges = require('encodeEntityRanges');
@@ -58,7 +57,7 @@ function convertFromDraftStateToRaw(
   var entityKeys = Object.keys(entityStorageMap);
   var flippedStorageMap = {};
   entityKeys.forEach((key, jj) => {
-    var entity = DraftEntity.get(DraftStringKey.unstringify(key));
+    var entity = contentState.getEntity(DraftStringKey.unstringify(key));
     flippedStorageMap[jj] = {
       type: entity.getType(),
       mutability: entity.getMutability(),