You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP →
Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

draft-js-plugins-editor

Package Overview
Dependencies
Maintainers
1
Versions
36
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

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

Comparing version

1.1.0
to
2.0.0-beta.2

8

CHANGELOG.md

@@ -8,2 +8,10 @@ # Change Log

### Added
- `onChange` & and all handlers now also receive: `getPlugins`, `getProps`, `getReadOnly`, `setReadOnly`.
### Removed
- `decorators` don't decorate plugins anymore.
## 1.1.0 - 2016-05-30

@@ -10,0 +18,0 @@

98

lib/Editor/__test__/index.js

@@ -77,3 +77,3 @@ 'use strict';

describe('renders the Editor', function () {
var onChange = _sinon2.default.spy();
var changeSpy = _sinon2.default.spy();
var editorState = void 0;

@@ -88,3 +88,3 @@

editorState: editorState,
onChange: onChange,
onChange: changeSpy,
plugins: []

@@ -98,3 +98,3 @@ }));

editorState: editorState,
onChange: onChange
onChange: changeSpy
}));

@@ -112,3 +112,3 @@ (0, _chai.expect)(result).to.have.ref('editor');

editorState: editorState,
onChange: onChange,
onChange: changeSpy,
plugins: plugins

@@ -122,3 +122,3 @@ }));

editorState: editorState,
onChange: onChange
onChange: changeSpy
}));

@@ -132,3 +132,3 @@ var pluginEditor = result.instance();

editorState: editorState,
onChange: onChange,
onChange: changeSpy,
defaultKeyBindings: false

@@ -142,3 +142,3 @@ }));

describe('with plugins', function () {
var onChange = void 0;
var changeSpy = void 0;
var editorState = void 0;

@@ -148,3 +148,3 @@

editorState = _draftJs.EditorState.createEmpty();
onChange = _sinon2.default.spy();
changeSpy = _sinon2.default.spy();
});

@@ -162,3 +162,3 @@

editorState: editorState,
onChange: onChange,
onChange: changeSpy,
plugins: plugins

@@ -192,3 +192,3 @@ }));

editorState: editorState,
onChange: onChange,
onChange: changeSpy,
plugins: plugins

@@ -202,3 +202,7 @@ }));

getEditorState: pluginEditor.getEditorState,
setEditorState: pluginEditor.onChange
setEditorState: pluginEditor.onChange,
getPlugins: pluginEditor.getPlugins,
getProps: pluginEditor.getProps,
getReadOnly: pluginEditor.getReadOnly,
setReadOnly: pluginEditor.setReadOnly
};

@@ -225,3 +229,3 @@ draftEditor.props.handleKeyCommand('command');

editorState: editorState,
onChange: onChange,
onChange: changeSpy,
plugins: plugins

@@ -252,3 +256,3 @@ }));

editorState: editorState,
onChange: onChange,
onChange: changeSpy,
plugins: plugins

@@ -280,3 +284,3 @@ }));

editorState: editorState,
onChange: onChange,
onChange: changeSpy,
plugins: plugins

@@ -304,3 +308,3 @@ }));

editorState: editorState,
onChange: onChange,
onChange: changeSpy,
plugins: plugins

@@ -314,3 +318,7 @@ }));

getEditorState: pluginEditor.getEditorState,
setEditorState: pluginEditor.onChange
setEditorState: pluginEditor.onChange,
getPlugins: pluginEditor.getPlugins,
getProps: pluginEditor.getProps,
getReadOnly: pluginEditor.getReadOnly,
setReadOnly: pluginEditor.setReadOnly
};

@@ -341,3 +349,3 @@ draftEditor.props.blockRendererFn('command');

editorState: editorState,
onChange: onChange,
onChange: changeSpy,
plugins: plugins

@@ -381,3 +389,3 @@ }));

customStyleMap: customStyleMap,
onChange: onChange,
onChange: changeSpy,
plugins: plugins

@@ -407,7 +415,7 @@ }));

beforeEach(function () {
var onChange = _sinon2.default.spy();
var changeSpy = _sinon2.default.spy();
var editorState = _draftJs.EditorState.createEmpty();
var result = (0, _enzyme.mount)(_react2.default.createElement(_index2.default, {
editorState: editorState,
onChange: onChange,
onChange: changeSpy,
plugins: []

@@ -433,3 +441,3 @@ }));

describe('custom prop comes before plugin hook', function () {
var onChange = _sinon2.default.spy();
var changeSpy = _sinon2.default.spy();
var editorState = void 0;

@@ -449,3 +457,3 @@ var customHook = void 0;

editorState: editorState,
onChange: onChange,
onChange: changeSpy,
plugins: [plugin],

@@ -466,3 +474,3 @@ onUpArrow: customHook

editorState: editorState,
onChange: onChange,
onChange: changeSpy,
plugins: [plugin],

@@ -476,46 +484,2 @@ blockRendererFn: customHook

});
it('renders block component using blockRenderFn prop and decorators', function () {
var decorator = function decorator(Comp) {
return function (props) {
return _react2.default.createElement(
'div',
{ className: 'decorator' },
_react2.default.createElement(Comp, props)
);
};
};
var component = function component() {
return null;
};
var plugin = {
blockRendererFn: function blockRendererFn() {
return {
decorators: [decorator],
props: { pluginProp: true }
};
}
};
customHook = function customHook() {
return {
component: component,
props: { editorProp: true }
};
};
var wrapper = (0, _enzyme.mount)(_react2.default.createElement(_index2.default, {
editorState: editorState,
onChange: onChange,
plugins: [plugin],
blockRendererFn: customHook
}));
var decorators = wrapper.findWhere(function (n) {
return n.hasClass('decorator');
});
(0, _chai.expect)(decorators.length).to.equal(1);
(0, _chai.expect)(wrapper.find(component).length).to.equal(1);
});
});

@@ -522,0 +486,0 @@

153

lib/Editor/index.js

@@ -7,4 +7,2 @@ 'use strict';

var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj; };
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

@@ -76,6 +74,3 @@

if (typeof plugin.initialize !== 'function') continue;
plugin.initialize({
getEditorState: _this.getEditorState,
setEditorState: _this.onChange
});
plugin.initialize(_this.getPluginMethods());
}

@@ -132,2 +127,3 @@

_this.state = {}; // TODO for Nik: ask ben why this is relevent
return _this;

@@ -140,4 +136,4 @@ }

var compositeDecorator = (0, _createCompositeDecorator2.default)(this.resolveDecorators(), this.getEditorState, this.onChange);
var _editorState = _draftJs.EditorState.set(this.props.editorState, { decorator: compositeDecorator });
this.onChange((0, _moveSelectionToEnd2.default)(_editorState));
var editorState = _draftJs.EditorState.set(this.props.editorState, { decorator: compositeDecorator });
this.onChange((0, _moveSelectionToEnd2.default)(editorState));
}

@@ -162,2 +158,5 @@ }, {

// TODO further down in render we use readOnly={this.props.readOnly || this.state.readOnly}. Ask Ben why readOnly is here just from the props? Why would plugins use this instead of just taking it from getProps?
}, {

@@ -170,2 +169,3 @@ key: 'render',

return _react2.default.createElement(_draftJs.Editor, _extends({}, this.props, accessibilityProps, pluginHooks, {
readOnly: this.props.readOnly || this.state.readOnly,
customStyleMap: customStyleMap,

@@ -204,3 +204,3 @@ onChange: this.onChange,

if (plugin.onChange) {
newEditorState = plugin.onChange(newEditorState);
newEditorState = plugin.onChange(newEditorState, _this3.getPluginMethods());
}

@@ -210,6 +210,22 @@ });

if (_this3.props.onChange) {
_this3.props.onChange(newEditorState);
_this3.props.onChange(newEditorState, _this3.getPluginMethods());
}
};
this.getPlugins = function () {
return _this3.props.plugins.slice(0);
};
this.getProps = function () {
return _extends({}, _this3.props);
};
this.getReadOnly = function () {
return _this3.props.readOnly;
};
this.setReadOnly = function (readOnly) {
if (readOnly !== _this3.state.readOnly) _this3.setState({ readOnly: readOnly });
};
this.getEditorState = function () {

@@ -219,2 +235,13 @@ return _this3.props.editorState;

this.getPluginMethods = function () {
return {
getPlugins: _this3.getPlugins,
getProps: _this3.getProps,
setEditorState: _this3.onChange,
getEditorState: _this3.getEditorState,
getReadOnly: _this3.getReadOnly,
setReadOnly: _this3.setReadOnly
};
};
this.createEventHooks = function (methodName, plugins) {

@@ -227,6 +254,3 @@ return function () {

var newArgs = [].slice.apply(args);
newArgs.push({
getEditorState: _this3.getEditorState,
setEditorState: _this3.onChange
});
newArgs.push(_this3.getPluginMethods());
var _iteratorNormalCompletion3 = true;

@@ -271,68 +295,47 @@ var _didIteratorError3 = false;

newArgs.push({
getEditorState: _this3.getEditorState,
setEditorState: _this3.onChange
});
newArgs.push(_this3.getPluginMethods());
if (methodName === 'blockRendererFn') {
var _ret2 = function () {
var block = { props: {} };
var decorators = [];
var _iteratorNormalCompletion4 = true;
var _didIteratorError4 = false;
var _iteratorError4 = undefined;
var block = { props: {} };
var _iteratorNormalCompletion4 = true;
var _didIteratorError4 = false;
var _iteratorError4 = undefined;
try {
for (var _iterator4 = plugins[Symbol.iterator](), _step4; !(_iteratorNormalCompletion4 = (_step4 = _iterator4.next()).done); _iteratorNormalCompletion4 = true) {
var plugin = _step4.value;
try {
for (var _iterator4 = plugins[Symbol.iterator](), _step4; !(_iteratorNormalCompletion4 = (_step4 = _iterator4.next()).done); _iteratorNormalCompletion4 = true) {
var plugin = _step4.value;
if (typeof plugin[methodName] !== 'function') continue;
var result = plugin[methodName].apply(plugin, _toConsumableArray(newArgs));
if (result !== undefined && result !== null) {
var pluginDecorators = result.decorators;
var pluginProps = result.props;
if (typeof plugin[methodName] !== 'function') continue;
var result = plugin[methodName].apply(plugin, _toConsumableArray(newArgs));
if (result !== undefined && result !== null) {
var pluginProps = result.props;
var pluginRest = _objectWithoutProperties(result, ['decorators', 'props']); // eslint-disable-line no-use-before-define
var pluginRest = _objectWithoutProperties(result, ['props']); // eslint-disable-line no-use-before-define
var _block = block;
var props = _block.props;
var _block = block;
var props = _block.props;
var rest = _objectWithoutProperties(_block, ['props']); // eslint-disable-line no-use-before-define
var rest = _objectWithoutProperties(_block, ['props']); // eslint-disable-line no-use-before-define
if (pluginDecorators) decorators = [].concat(_toConsumableArray(decorators), _toConsumableArray(pluginDecorators));
block = _extends({}, rest, pluginRest, { props: _extends({}, props, pluginProps) });
}
block = _extends({}, rest, pluginRest, { props: _extends({}, props, pluginProps) });
}
} catch (err) {
_didIteratorError4 = true;
_iteratorError4 = err;
}
} catch (err) {
_didIteratorError4 = true;
_iteratorError4 = err;
} finally {
try {
if (!_iteratorNormalCompletion4 && _iterator4.return) {
_iterator4.return();
}
} finally {
try {
if (!_iteratorNormalCompletion4 && _iterator4.return) {
_iterator4.return();
}
} finally {
if (_didIteratorError4) {
throw _iteratorError4;
}
if (_didIteratorError4) {
throw _iteratorError4;
}
}
}
if (block.component) {
decorators.forEach(function (decorator) {
block.component = decorator(block.component);
});
return {
v: block
};
}
return {
v: false
};
}();
if ((typeof _ret2 === 'undefined' ? 'undefined' : _typeof(_ret2)) === "object") return _ret2.v;
return block.component ? block : false;
} else if (methodName === 'blockStyleFn') {

@@ -346,8 +349,8 @@ var styles = void 0;

for (var _iterator5 = plugins[Symbol.iterator](), _step5; !(_iteratorNormalCompletion5 = (_step5 = _iterator5.next()).done); _iteratorNormalCompletion5 = true) {
var plugin = _step5.value;
var _plugin = _step5.value;
if (typeof plugin[methodName] !== 'function') continue;
var result = plugin[methodName].apply(plugin, _toConsumableArray(newArgs));
if (result !== undefined) {
styles = (styles ? styles + ' ' : '') + result;
if (typeof _plugin[methodName] !== 'function') continue;
var _result = _plugin[methodName].apply(_plugin, _toConsumableArray(newArgs));
if (_result !== undefined) {
styles = (styles ? styles + ' ' : '') + _result;
}

@@ -379,8 +382,8 @@ }

for (var _iterator6 = plugins[Symbol.iterator](), _step6; !(_iteratorNormalCompletion6 = (_step6 = _iterator6.next()).done); _iteratorNormalCompletion6 = true) {
var _plugin = _step6.value;
var _plugin2 = _step6.value;
if (typeof _plugin[methodName] !== 'function') continue;
var _result = _plugin[methodName].apply(_plugin, _toConsumableArray(newArgs));
if (_result !== undefined) {
return _result;
if (typeof _plugin2[methodName] !== 'function') continue;
var _result2 = _plugin2[methodName].apply(_plugin2, _toConsumableArray(newArgs));
if (_result2 !== undefined) {
return _result2;
}

@@ -387,0 +390,0 @@ }

14

package.json
{
"name": "draft-js-plugins-editor",
"version": "1.1.0",
"version": "2.0.0-beta.2",
"description": "Editor for DraftJS Plugins",

@@ -25,8 +25,2 @@ "author": {

],
"peerDependencies": {
"draft-js": ">=0.5.0",
"immutable": ">=3.7.6",
"react": ">=0.14.0 || 15.0.0-rc",
"react-dom": ">=0.14.0 || 15.0.0-rc"
},
"scripts": {

@@ -40,4 +34,8 @@ "build": "BABEL_ENV=production ../node_modules/.bin/babel --out-dir='lib' --ignore='__tests__/*' src",

"find-with-regex": "^1.0.2",
"union-class-names": "^1.0.0"
"union-class-names": "^1.0.0",
"draft-js": ">=0.7.0",
"immutable": ">=3.8.1",
"react": ">=15.1.0",
"react-dom": ">=15.1.0"
}
}