draftail - npm Package Compare versions

Comparing version 0.2.0 to 0.3.0

CHANGELOG.md

@@ -7,10 +7,28 @@ Changelog
 
-## [[v0.2.0]](https://github.com/springload/draftail/releases/tag/v0.2.0) - 2016-09-14
+## [[v0.3.0]](https://github.com/springload/draftail/releases/tag/v0.3.0) - 2016-11-28
 
+> This release contains __breaking changes__.
+
+### Added
+
+- Keyboard shortcuts documentation
+
 ### Changed
 
+- Expose onSave hook instead of auto field saving (https://github.com/springload/draftail/issues/23)
+
+### Fixed
+
+- https://github.com/springload/draftail/issues/2
+- https://github.com/springload/draftail/issues/3
+- https://github.com/springload/draftail/issues/28
+
+## [[v0.2.0]](https://github.com/springload/draftail/releases/tag/v0.2.0) - 2016-11-14
+
+### Changed
+
 - Reworking most of the editor codebase to make it more maintainable.
 - Configurable block types and inline styles.
 
-## [[v0.1.0]](https://github.com/springload/draftail/releases/tag/v0.1.0) - 2016-09-11
+## [[v0.1.0]](https://github.com/springload/draftail/releases/tag/v0.1.0) - 2016-11-11
 
@@ -17,0 +35,0 @@ First usable release!

dist/api/conversion.js

@@ -10,9 +10,8 @@ 'use strict';
 exports.default = {
-    // Serialised RawDraftContentState => EditorState.
-    createEditorState: function createEditorState(serialisedState, decorators) {
-        var rawState = JSON.parse(serialisedState);
+    // RawDraftContentState + decorators => EditorState.
+    createEditorState: function createEditorState(rawContentState, decorators) {
         var editorState = void 0;
 
-        if (rawState && Object.keys(rawState).length !== 0) {
-            var contentState = (0, _draftJs.convertFromRaw)(rawState);
+        if (rawContentState && Object.keys(rawContentState).length !== 0) {
+            var contentState = (0, _draftJs.convertFromRaw)(rawContentState);
             editorState = _draftJs.EditorState.createWithContent(contentState, decorators);
@@ -27,13 +26,13 @@ } else {
 
-    // EditorState => Serialised RawDraftContentState.
+    // EditorState => RawDraftContentState.
     serialiseEditorState: function serialiseEditorState(editorState) {
         var contentState = editorState.getCurrentContent();
-        var rawContent = (0, _draftJs.convertToRaw)(contentState);
+        var rawContentState = (0, _draftJs.convertToRaw)(contentState);
 
-        var isEmpty = rawContent.blocks.every(function (block) {
+        var isEmpty = rawContentState.blocks.every(function (block) {
             return block.text.trim().length === 0 && block.entityRanges.length === 0 && block.inlineStyleRanges.length === 0;
         });
 
-        return JSON.stringify(isEmpty ? {} : rawContent);
+        return isEmpty ? {} : rawContentState;
     }
 };

dist/api/conversion.test.js

@@ -14,4 +14,4 @@ 'use strict';
 var stubs = {
-    emptyContent: JSON.stringify({}),
-    realContent: JSON.stringify({
+    emptyContent: {},
+    realContent: {
         entityMap: {},
@@ -35,3 +35,3 @@ blocks: [{
         }]
-    })
+    }
 };
@@ -38,0 +38,0 @@

dist/components/Button.js

@@ -13,2 +13,8 @@ 'use strict';
 
+var onMouseDown = function onMouseDown(onClick, e) {
+    e.preventDefault();
+
+    onClick();
+};
+
 var Button = function Button(_ref) {
@@ -20,7 +26,6 @@ var icon = _ref.icon,
     return _react2.default.createElement(
-        'a',
+        'button',
         {
-            href: '#',
             className: 'RichEditor-styleButton' + (active ? ' RichEditor-activeButton' : '') + (icon ? ' icon icon-' + icon : ''),
-            onClick: onClick
+            onMouseDown: onMouseDown.bind(null, onClick)
         },
@@ -38,2 +43,7 @@ label
 
+Button.defaultProps = {
+    icon: '',
+    active: false
+};
+
 exports.default = Button;

dist/components/DraftailEditor.js

@@ -71,2 +71,13 @@ 'use strict';
 
+var defaultOptions = {
+    modelPickerOptions: [],
+    imageFormats: [],
+    mediaControls: [],
+    dialogControls: [],
+    sources: [],
+    decorators: [],
+    BLOCK_TYPES: [],
+    INLINE_STYLES: []
+};
+
 /**
@@ -84,7 +95,9 @@ * The top-level component for the Draft.js editor.
 
-        var options = props.options;
+        var rawContentState = props.rawContentState,
+            options = props.options;
 
+        var decorators = new _draftJs.CompositeDecorator(options.decorators);
 
         _this.state = {
-            editorState: _conversion2.default.createEditorState(props.value, new _draftJs.CompositeDecorator(options.decorators))
+            editorState: _conversion2.default.createEditorState(rawContentState, decorators)
         };
@@ -99,3 +112,3 @@
                 }
-                updateTimeout = global.setTimeout(_this.saveRawState, _config.STATE_SAVE_INTERVAL);
+                updateTimeout = global.setTimeout(_this.saveState, _config.STATE_SAVE_INTERVAL);
             });
@@ -118,3 +131,3 @@ };
         _this.onRequestDialog = _this.onRequestDialog.bind(_this);
-        _this.saveRawState = _this.saveRawState.bind(_this);
+        _this.saveState = _this.saveState.bind(_this);
         _this.setSelectionToCurrentEntity = _this.setSelectionToCurrentEntity.bind(_this);
@@ -165,8 +178,9 @@ _this.updateState = _this.updateState.bind(_this);
     }, {
-        key: 'saveRawState',
-        value: function saveRawState() {
+        key: 'saveState',
+        value: function saveState() {
+            var onSave = this.props.onSave;
             var editorState = this.state.editorState;
 
 
-            this.inputRef.value = _conversion2.default.serialiseEditorState(editorState);
+            onSave(_conversion2.default.serialiseEditorState(editorState));
         }
@@ -228,4 +242,2 @@
             this.onChange(state);
-            // not sure we need this.
-            // setTimeout(() => this.editorRef.focus(), 0);
             return true;
@@ -241,14 +253,13 @@ }
             var isAtEnd = newState.isSelectionAtEndOfContent();
+            var ret = void 0;
 
             if (isAtStart && event.shiftKey) {
-                return;
+                ret = undefined;
+            } else if (isAtEnd) {
+                ret = undefined;
+            } else if (newState) {
+                ret = this.updateState(newState);
             }
 
-            if (isAtEnd) {
-                return;
-            }
-
-            if (newState) {
-                return this.updateState(newState);
-            }
+            return ret;
         }
@@ -261,17 +272,16 @@ }, {
             var newState = _draftJs.RichUtils.handleKeyCommand(editorState, command);
+            var ret = false;
 
             if (newState) {
-                return this.updateState(newState);
+                ret = this.updateState(newState);
             }
 
-            return false;
+            return ret;
         }
     }, {
         key: 'toggleBlockType',
-        value: function toggleBlockType(blockType, e) {
+        value: function toggleBlockType(blockType) {
             var editorState = this.state.editorState;
 
 
-            e.preventDefault();
-
             this.onChange(_draftJs.RichUtils.toggleBlockType(editorState, blockType));
@@ -281,8 +291,6 @@ }
         key: 'toggleInlineStyle',
-        value: function toggleInlineStyle(inlineStyle, e) {
+        value: function toggleInlineStyle(inlineStyle) {
             var editorState = this.state.editorState;
 
 
-            e.preventDefault();
-
             this.onChange(_draftJs.RichUtils.toggleInlineStyle(editorState, inlineStyle));
@@ -606,3 +614,2 @@ }
 
-            var name = this.props.name;
             var _state4 = this.state,
@@ -616,7 +623,7 @@ editorState = _state4.editorState,
                 {
-                    ref: function ref(_ref3) {
-                        _this5.wrapperRef = _ref3;
+                    ref: function ref(_ref2) {
+                        _this5.wrapperRef = _ref2;
                     },
                     className: 'json-text',
-                    onBlur: this.saveRawState,
+                    onBlur: this.saveState,
                     onClick: this.handleFocus,
@@ -641,10 +648,3 @@ onMouseUp: this.onMouseUp,
                 this.renderTooltip(),
-                this.renderDialog(),
-                _react2.default.createElement('input', {
-                    ref: function ref(_ref2) {
-                        _this5.inputRef = _ref2;
-                    },
-                    type: 'hidden',
-                    name: name
-                })
+                this.renderDialog()
             );
@@ -658,4 +658,4 @@ }
 DraftailEditor.propTypes = {
-    name: _react2.default.PropTypes.string.isRequired,
-    value: _react2.default.PropTypes.string.isRequired,
+    rawContentState: _react2.default.PropTypes.object,
+    onSave: _react2.default.PropTypes.func,
     options: _react2.default.PropTypes.shape({
@@ -674,6 +674,40 @@ modelPickerOptions: _react2.default.PropTypes.arrayOf(_react2.default.PropTypes.shape({
             value: _react2.default.PropTypes.string.isRequired
+        })).isRequired,
+        mediaControls: _react2.default.PropTypes.arrayOf(_react2.default.PropTypes.shape({
+            entity: _react2.default.PropTypes.string.isRequired,
+            label: _react2.default.PropTypes.string.isRequired,
+            icon: _react2.default.PropTypes.string.isRequired
+        })).isRequired,
+        dialogControls: _react2.default.PropTypes.arrayOf(_react2.default.PropTypes.shape({
+            entity: _react2.default.PropTypes.string.isRequired,
+            label: _react2.default.PropTypes.string.isRequired,
+            icon: _react2.default.PropTypes.string.isRequired
+        })).isRequired,
+        sources: _react2.default.PropTypes.arrayOf(_react2.default.PropTypes.shape({
+            entity: _react2.default.PropTypes.string.isRequired,
+            control: _react2.default.PropTypes.func.isRequired
+        })).isRequired,
+        decorators: _react2.default.PropTypes.arrayOf(_react2.default.PropTypes.shape({
+            strategy: _react2.default.PropTypes.func.isRequired,
+            component: _react2.default.PropTypes.func.isRequired
+        })).isRequired,
+        BLOCK_TYPES: _react2.default.PropTypes.arrayOf(_react2.default.PropTypes.shape({
+            style: _react2.default.PropTypes.string.isRequired,
+            label: _react2.default.PropTypes.string.isRequired,
+            icon: _react2.default.PropTypes.string
+        })).isRequired,
+        INLINE_STYLES: _react2.default.PropTypes.arrayOf(_react2.default.PropTypes.shape({
+            style: _react2.default.PropTypes.string.isRequired,
+            label: _react2.default.PropTypes.string.isRequired,
+            icon: _react2.default.PropTypes.string.isRequired
         })).isRequired
-    }).isRequired
+    })
 };
 
+DraftailEditor.defaultProps = {
+    rawContentState: {},
+    onSave: function onSave() {},
+    options: defaultOptions
+};
+
 exports.default = DraftailEditor;

dist/utils/DraftUtils.js

@@ -31,2 +31,3 @@ 'use strict';
 
+
     /**
@@ -44,2 +45,3 @@ * Returns the type of the block the current selection starts in.
 
+
     /**
@@ -51,4 +53,4 @@ * Creates a selection for the entirety of an entity that can be partially selected.
         var contentState = editorState.getCurrentContent();
-        var entityKey = undefined.getSelectionEntity(editorState);
-        var entityRange = undefined.getEntityRange(editorState, entityKey);
+        var entityKey = this.getSelectionEntity(editorState);
+        var entityRange = this.getEntityRange(editorState, entityKey);
         var anchorKey = selectionState.getAnchorKey();
@@ -67,3 +69,2 @@ var block = contentState.getBlockForKey(anchorKey);
     },
-
     hasCurrentInlineStyle: function hasCurrentInlineStyle(editorState, style) {
@@ -75,2 +76,3 @@ var currentStyle = editorState.getCurrentInlineStyle();
 
+
     // TODO Document.
@@ -115,2 +117,3 @@ insertBlock: function insertBlock(editorState, entityKey, character, blockType) {
 
+
     // TODO Document.
@@ -117,0 +120,0 @@ createEntity: function createEntity(editorState, entityType, entityData, entityText) {

package.json

 {
   "name": "draftail",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "A batteries-excluded rich text editor based on Draft.js",
@@ -28,4 +28,3 @@ "author": "Springload",
   "homepage": "https://github.com/springload/draftail#readme",
-  "dependencies": {
-  },
+  "dependencies": {},
   "devDependencies": {
@@ -38,2 +37,3 @@ "babel-core": "^6.18.2",
     "draftjs-utils": "^0.3.2",
+    "enzyme": "^2.6.0",
     "eslint": "^3.9.1",
@@ -49,4 +49,5 @@ "eslint-config-airbnb": "^13.0.0",
     "progress-bar-webpack-plugin": "^1.9.0",
-    "react": "^15.3.2",
-    "react-dom": "^15.3.2",
+    "react": "^15.4.1",
+    "react-addons-test-utils": "^15.4.1",
+    "react-dom": "^15.4.1",
     "webpack": "^1.13.3",
@@ -53,0 +54,0 @@ "webpack-dev-middleware": "^1.8.4",

README.md

@@ -18,2 +18,3 @@ [draftail](https://springload.github.io/draftail/) [![npm](https://img.shields.io/npm/v/draftail.svg?style=flat-square)](https://www.npmjs.com/package/draftail) [![Build Status](https://travis-ci.org/springload/draftail.svg?branch=master)](https://travis-ci.org/springload/draftail) [![Dependency Status](https://david-dm.org/springload/draftail.svg?style=flat-square)](https://david-dm.org/springload/draftail) [![devDependency Status](https://david-dm.org/springload/draftail/dev-status.svg?style=flat-square)](https://david-dm.org/springload/draftail#info=devDependencies)
 - Specific styles from Wagtail, including its icon font.
+- ES6 polyfill (like for Draft.js)
 
@@ -20,0 +21,0 @@ ## Development

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

78213

increased by3.31%

Lines of code

1643

increased by5.32%

Number of lines in readme file

60

increased by1.69%

Worsened metrics

Dev dependency count

23

increased by9.52%

No dependency changes