draft-js-plugins-editor - npm Package Compare versions

Comparing version 2.0.0-beta.2 to 2.0.0-beta.4

CHANGELOG.md

@@ -11,2 +11,3 @@ # Change Log
 - `onChange` & and all handlers now also receive: `getPlugins`, `getProps`, `getReadOnly`, `setReadOnly`.
+- 'defaultBlockRenderMap' option, by default it set to true. If set to false the defaultBlockRenderMap from Draft.js is not used as base for the generated blockRenderMap.
 
@@ -13,0 +14,0 @@ ### Removed

lib/Editor/__test__/index.js

@@ -13,6 +13,2 @@ 'use strict';
 
-var _index = require('../../index');
-
-var _index2 = _interopRequireDefault(_index);
-
 var _chai = require('chai');
@@ -22,2 +18,4 @@
 
+var _immutable = require('immutable');
+
 var _sinon = require('sinon');
@@ -27,2 +25,6 @@
 
+var _index = require('../../index');
+
+var _index2 = _interopRequireDefault(_index);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -38,3 +40,2 @@
  * Editor component as well */
-
 var TestEditor = function (_Component) {
@@ -44,3 +45,3 @@ _inherits(TestEditor, _Component);
   function TestEditor() {
-    var _Object$getPrototypeO;
+    var _ref;
 
@@ -55,3 +56,3 @@ var _temp, _this, _ret;
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(TestEditor)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {}, _this.onChange = function (editorState) {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = TestEditor.__proto__ || Object.getPrototypeOf(TestEditor)).call.apply(_ref, [this].concat(args))), _this), _this.state = {}, _this.onChange = function (editorState) {
       _this.setState({
@@ -96,3 +97,4 @@ editorState: editorState
       }));
-      (0, _chai.expect)(result).to.have.ref('editor');
+      (0, _chai.expect)(result.node.props.onChange).to.eq(changeSpy);
+      (0, _chai.expect)(result.node.props.editorState).to.eq(editorState);
     });
@@ -105,3 +107,4 @@
       }));
-      (0, _chai.expect)(result).to.have.ref('editor');
+      (0, _chai.expect)(result.node.props.onChange).to.eq(changeSpy);
+      (0, _chai.expect)(result.node.props.editorState).to.eq(editorState);
     });
@@ -120,3 +123,4 @@
       }));
-      (0, _chai.expect)(result).to.have.ref('editor');
+      (0, _chai.expect)(result.node.props.onChange).to.eq(changeSpy);
+      (0, _chai.expect)(result.node.props.editorState).to.eq(editorState);
     });
@@ -399,2 +403,89 @@
     });
+
+    it('combines customStyleMap props from plugins and the editor', function () {
+      var plugins = [{
+        customStyleMap: {
+          orange: {
+            color: 'rgba(255, 127, 0, 1.0)'
+          }
+        }
+      }, {
+        customStyleMap: {
+          yellow: {
+            color: 'rgba(180, 180, 0, 1.0)'
+          }
+        }
+      }];
+
+      var customStyleMap = {
+        blue: {
+          color: 'blue'
+        }
+      };
+
+      var result = (0, _enzyme.mount)(_react2.default.createElement(_index2.default, {
+        editorState: editorState,
+        customStyleMap: customStyleMap,
+        onChange: changeSpy,
+        plugins: plugins
+      }));
+
+      var expected = {
+        orange: {
+          color: 'rgba(255, 127, 0, 1.0)'
+        },
+        yellow: {
+          color: 'rgba(180, 180, 0, 1.0)'
+        },
+        blue: {
+          color: 'blue'
+        }
+      };
+      var pluginEditor = result.instance();
+      (0, _chai.expect)(pluginEditor.resolveCustomStyleMap()).to.deep.equal(expected);
+    });
+
+    it('combines the blockRenderMap from all plugins', function () {
+      var plugins = [{
+        blockRenderMap: (0, _immutable.Map)({ sticker: { element: 'div' } })
+      }, {
+        blockRenderMap: (0, _immutable.Map)({ test: { element: 'test' } })
+      }];
+      var result = (0, _enzyme.mount)(_react2.default.createElement(_index2.default, {
+        editorState: editorState,
+        onChange: changeSpy,
+        plugins: plugins
+      }));
+      var expected = _draftJs.DefaultDraftBlockRenderMap.merge((0, _immutable.Map)({
+        sticker: { element: 'div' },
+        test: { element: 'test' }
+      }));
+      var pluginEditor = result.instance();
+      (0, _chai.expect)(pluginEditor.resolveblockRenderMap()).to.deep.equal(expected);
+    });
+
+    it('combines blockRenderMap props from plugins and the editor', function () {
+      var plugins = [{
+        blockRenderMap: (0, _immutable.Map)({ sticker: { element: 'div' } })
+      }, {
+        blockRenderMap: (0, _immutable.Map)({ test: { element: 'test' } })
+      }];
+
+      var customBlockRenderMap = (0, _immutable.Map)({ sticker: { element: 'customDiv' } });
+
+      var result = (0, _enzyme.mount)(_react2.default.createElement(_index2.default, {
+        editorState: editorState,
+        blockRenderMap: customBlockRenderMap,
+        onChange: changeSpy,
+        plugins: plugins
+      }));
+
+      var expected = _draftJs.DefaultDraftBlockRenderMap.merge((0, _immutable.Map)({
+        sticker: { element: 'customDiv' },
+        test: { element: 'test' }
+      }));
+
+      var pluginEditor = result.instance();
+      (0, _chai.expect)(pluginEditor.resolveblockRenderMap()).to.deep.equal(expected);
+    });
   });
@@ -401,0 +492,0 @@

lib/Editor/index.js

@@ -17,2 +17,4 @@ 'use strict';
 
+var _immutable = require('immutable');
+
 var _createCompositeDecorator = require('./createCompositeDecorator');
@@ -34,4 +36,2 @@
 
-var _immutable = require('immutable');
-
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
@@ -49,8 +49,8 @@
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /* eslint-disable no-continue */
 
+
 /**
  * The main editor component
  */
-
 var PluginEditor = function (_Component) {
@@ -62,3 +62,3 @@ _inherits(PluginEditor, _Component);
 
-    var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(PluginEditor).call(this, props));
+    var _this = _possibleConstructorReturn(this, (PluginEditor.__proto__ || Object.getPrototypeOf(PluginEditor)).call(this, props));
 
@@ -105,5 +105,5 @@ _initialiseProps.call(_this);
         _this[method] = function () {
-          var _this$refs$editor;
+          var _this$editor;
 
-          return (_this$refs$editor = _this.refs.editor)[method].apply(_this$refs$editor, arguments);
+          return (_this$editor = _this.editor)[method].apply(_this$editor, arguments);
         };
@@ -165,11 +165,17 @@ };
     value: function render() {
+      var _this3 = this;
+
       var pluginHooks = this.createPluginHooks();
       var customStyleMap = this.resolveCustomStyleMap();
       var accessibilityProps = this.resolveAccessibilityProps();
+      var blockRenderMap = this.resolveblockRenderMap();
       return _react2.default.createElement(_draftJs.Editor, _extends({}, this.props, accessibilityProps, pluginHooks, {
         readOnly: this.props.readOnly || this.state.readOnly,
         customStyleMap: customStyleMap,
+        blockRenderMap: blockRenderMap,
         onChange: this.onChange,
         editorState: this.props.editorState,
-        ref: 'editor'
+        ref: function ref(element) {
+          _this3.editor = element;
+        }
       }));
@@ -187,2 +193,3 @@ }
   defaultKeyBindings: _react2.default.PropTypes.bool,
+  defaultBlockRenderMap: _react2.default.PropTypes.bool,
   customStyleMap: _react2.default.PropTypes.object,
@@ -192,2 +199,3 @@ decorators: _react2.default.PropTypes.array
 PluginEditor.defaultProps = {
+  defaultBlockRenderMap: true,
   defaultKeyBindings: true,
@@ -200,14 +208,14 @@ customStyleMap: {},
 var _initialiseProps = function _initialiseProps() {
-  var _this3 = this;
+  var _this4 = this;
 
   this.onChange = function (editorState) {
     var newEditorState = editorState;
-    _this3.resolvePlugins().forEach(function (plugin) {
+    _this4.resolvePlugins().forEach(function (plugin) {
       if (plugin.onChange) {
-        newEditorState = plugin.onChange(newEditorState, _this3.getPluginMethods());
+        newEditorState = plugin.onChange(newEditorState, _this4.getPluginMethods());
       }
     });
 
-    if (_this3.props.onChange) {
-      _this3.props.onChange(newEditorState, _this3.getPluginMethods());
+    if (_this4.props.onChange) {
+      _this4.props.onChange(newEditorState, _this4.getPluginMethods());
     }
@@ -217,19 +225,19 @@ };
   this.getPlugins = function () {
-    return _this3.props.plugins.slice(0);
+    return _this4.props.plugins.slice(0);
   };
 
   this.getProps = function () {
-    return _extends({}, _this3.props);
+    return _extends({}, _this4.props);
   };
 
   this.getReadOnly = function () {
-    return _this3.props.readOnly;
+    return _this4.props.readOnly;
   };
 
   this.setReadOnly = function (readOnly) {
-    if (readOnly !== _this3.state.readOnly) _this3.setState({ readOnly: readOnly });
+    if (readOnly !== _this4.state.readOnly) _this4.setState({ readOnly: readOnly });
   };
 
   this.getEditorState = function () {
-    return _this3.props.editorState;
+    return _this4.props.editorState;
   };
@@ -239,8 +247,8 @@
     return {
-      getPlugins: _this3.getPlugins,
-      getProps: _this3.getProps,
-      setEditorState: _this3.onChange,
-      getEditorState: _this3.getEditorState,
-      getReadOnly: _this3.getReadOnly,
-      setReadOnly: _this3.setReadOnly
+      getPlugins: _this4.getPlugins,
+      getProps: _this4.getProps,
+      setEditorState: _this4.onChange,
+      getEditorState: _this4.getEditorState,
+      getReadOnly: _this4.getReadOnly,
+      setReadOnly: _this4.setReadOnly
     };
@@ -256,3 +264,3 @@ };
       var newArgs = [].slice.apply(args);
-      newArgs.push(_this3.getPluginMethods());
+      newArgs.push(_this4.getPluginMethods());
       var _iteratorNormalCompletion3 = true;
@@ -297,3 +305,3 @@ var _didIteratorError3 = false;
 
-      newArgs.push(_this3.getPluginMethods());
+      newArgs.push(_this4.getPluginMethods());
 
@@ -414,3 +422,3 @@ if (methodName === 'blockRendererFn') {
     var fnHookKeys = [];
-    var plugins = [_this3.props].concat(_toConsumableArray(_this3.resolvePlugins()));
+    var plugins = [_this4.props].concat(_toConsumableArray(_this4.resolvePlugins()));
 
@@ -439,7 +447,7 @@ plugins.forEach(function (plugin) {
     eventHookKeys.forEach(function (attrName) {
-      pluginHooks[attrName] = _this3.createEventHooks(attrName, plugins);
+      pluginHooks[attrName] = _this4.createEventHooks(attrName, plugins);
     });
 
     fnHookKeys.forEach(function (attrName) {
-      pluginHooks[attrName] = _this3.createFnHooks(attrName, plugins);
+      pluginHooks[attrName] = _this4.createFnHooks(attrName, plugins);
     });
@@ -451,4 +459,4 @@
   this.resolvePlugins = function () {
-    var plugins = _this3.props.plugins.slice(0);
-    if (_this3.props.defaultKeyBindings) {
+    var plugins = _this4.props.plugins.slice(0);
+    if (_this4.props.defaultKeyBindings) {
       plugins.push(defaultKeyBindingPlugin);
@@ -461,3 +469,3 @@ }
   this.resolveDecorators = function () {
-    var _props = _this3.props;
+    var _props = _this4.props;
     var decorators = _props.decorators;
@@ -474,7 +482,7 @@ var plugins = _props.plugins;
   this.resolveCustomStyleMap = function () {
-    return _this3.props.plugins.filter(function (plug) {
+    return _this4.props.plugins.filter(function (plug) {
       return plug.customStyleMap !== undefined;
     }).map(function (plug) {
       return plug.customStyleMap;
-    }).concat([_this3.props.customStyleMap]).reduce(function (styles, style) {
+    }).concat([_this4.props.customStyleMap]).reduce(function (styles, style) {
       return _extends({}, styles, style);
@@ -484,5 +492,20 @@ }, {});
 
+  this.resolveblockRenderMap = function () {
+    var blockRenderMap = _this4.props.plugins.filter(function (plug) {
+      return plug.blockRenderMap !== undefined;
+    }).reduce(function (maps, plug) {
+      return maps.merge(plug.blockRenderMap);
+    }, (0, _immutable.Map)({}));
+    if (_this4.props.defaultBlockRenderMap) {
+      blockRenderMap = _draftJs.DefaultDraftBlockRenderMap.merge(blockRenderMap);
+    }
+    if (_this4.props.blockRenderMap) {
+      blockRenderMap = blockRenderMap.merge(_this4.props.blockRenderMap);
+    }
+    return blockRenderMap;
+  };
+
   this.resolveAccessibilityProps = function () {
     var accessibilityProps = {};
-    var plugins = [_this3.props].concat(_toConsumableArray(_this3.resolvePlugins()));
+    var plugins = [_this4.props].concat(_toConsumableArray(_this4.resolvePlugins()));
     var _iteratorNormalCompletion7 = true;
@@ -489,0 +512,0 @@ var _didIteratorError7 = false;

lib/index.js

@@ -19,2 +19,5 @@ 'use strict';
 exports.default = _Editor2.default;
+
+// eslint-disable-next-line import/no-named-as-default
+
 var createEditorStateWithText = exports.createEditorStateWithText = _createEditorStateWithText2.default;

package.json

 {
   "name": "draft-js-plugins-editor",
-  "version": "2.0.0-beta.2",
+  "version": "2.0.0-beta.4",
   "description": "Editor for DraftJS Plugins",
@@ -34,7 +34,7 @@ "author": {
     "union-class-names": "^1.0.0",
-    "draft-js": ">=0.7.0",
+    "draft-js": ">=0.8.1",
     "immutable": ">=3.8.1",
-    "react": ">=15.1.0",
-    "react-dom": ">=15.1.0"
+    "react": ">=15.2.1",
+    "react-dom": ">=15.2.1"
   }
 }

No alert changes

Improved metrics

Total package byte prevSize

52953

8.39%

Lines of code

1142

9.91%

Dependency changes

• Updated

  draft-js@>=0.8.1

• Updated

  react@>=15.2.1

• Updated

  react-dom@>=15.2.1