draft-js-plugins-editor
Advanced tools
Comparing version
@@ -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 @@ |
@@ -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 @@ |
@@ -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 @@ } |
{ | ||
"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" | ||
} | ||
} |
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
Deprecated
MaintenanceThe maintainer of the package marked it as deprecated. This could indicate that a single version should not be used, or that the package is no longer maintained and any new vulnerabilities will not be fixed.
Found 1 instance in 1 package
0
-100%48855
-1.66%1039
-2.99%2
100%+ Added
+ Added
+ Added
+ Added